Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< PHP навигация || Как сделать шаблон для wordpress >>>

Форма обратной связи для wordpress

03.06.2012
Форма обратной связи для wordpress

Здравствуйте, уважаемые читатели блога LifeExample, сегодня я бы хотел продемонстрировать вам процесс создания формы обратной связи для wordpress блога. В интернете не мало подобного материала, который рассказывает, о том, как создать форму обратной связи для wordpress. Тем не менее, я хочу поделиться с вами своим решением.

Основное отличие от имеющихся решений, в том, что наша форма обратной связи будет реализована без плагинов!

Все мы понимаем, что плагины для wordpress в разы ускоряют процесс создания того или иного функционала, но вместе с этим и являются весомым балластом для ресурса в целом.

Когда я начинал вести блог, я не сильно заморачивался относительно использования плагинов, и их нагрузки на движок wordpressa, и на сервер. Теперь я стараюсь избегать использование плагинов, особенно сторонних.

Возьмем, к примеру, очень популярный плагин Contact Form 7 для формы обратной связи на wordpress . Его размер в распакованном виде составляет более 1 мб. Представьте себе, сколько строк кода содержится этом плагине, для его функционирования.

Конечно, если вы всего лишь пользователь, а не программист, вам вполне подойдет этот плагин, поскольку все, что нужно вы сможете настроить прямо из панели администрирования wordpressa. Но если вы хоть чуточку разбираетесь в PHP , то реализовать функционал предоставляемый данным плагином, можно значительно легче, во всех отношениях.

Делаем форму обратной связи для wordpress, без плагина

Алгоритм действий будет таковым:

  1. Создадим обособленный класс для проверки формы обратной связи.
  2. Разберемся с понятием "Шаблон страницы" в wordpress.
  3. Добавим новую страницу "Контакты".
  4. Настроим её, для работы с PHP.
  5. Сделаем рабочий шаблон страницы.

Все будет проще, чем вам кажется!

Class feedback или форма обратной связи (Шаг 1)

Последнее время при разработке любого даже мелкого функционала, меня тянет на использование ООП (Объектно-ориентированное программирование). В одной из предыдущих статей я создавал класс для постраничной навигации, а теперь предлогаю создать класс для обратной связи.

Прелесть классов в том , вы сможете использовать их не только в движке wordpress, а везде где захотите.

Итак, код класса будет выглядеть таким образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class Feedback
{    
        public $fio;
        public $email;
        public $message;
        public $error;
        // проверка на корректность ввода данных
        function isValidData($array_data){
            //корректность емайл
            if(!preg_match("/^[A-Za-z0-9._-]+@[A-Za-z0-9_-]+.([A-Za-z0-9_-][A-Za-z0-9_]+)$/", $array_data['email'])){
              $error="E-mail не существует!";  
            }
            // заполненность адреса
            elseif(!trim($array_data['message'])){
              $error="Введите текст сообщения!";  
            }
            //если нет ошибок, то заносим информацию в поля класса
            $this->error=$error;
            if($error)return $error;
            else{
                $this->fio=trim($array_data['fio']);
                $this->email=trim($array_data['email']);
                $this->message=trim($array_data['message']);
               
                if($this->sendMail())  
                                return true;
                                    else return false; 
            }      
           
            return false;  
        }
       
        //отправка сообщения  
        function sendMail(){   

         $to_admin = "mark-avdeev@mail.ru";
         $subject = 'Сообщение с LifeExample.ru';
         $message = $this->message;

         $headers  = 'MIME-Version: 1.0' . "\r\n";
         $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
         $headers .= 'From: '.$this->email."\r\n";

         if (mail($to_admin, $subject, $message, $headers))
                return true;
         return false; 
        }
   
}

Класс Feedback состоит из двух методов :

  • function isValidData($array_data) — проверяет правильность ввода данных.
  • function sendMail() — отправляет полученные данные на указанный e-mail.

Основной задачей класса является проверка корректности ввода e-mail адреса, это делается с помощью регулярного выражения, а также не допустить отправку пустого сообщения.

Кроме этого вы запросто можете дополнить данную форму автоматической защитой от спама, для этого вам стоит прочитать статью "Капча на PHP".

После завершения проверки, если все данные удовлетворяют условиям, вызывается метод отправки письма sendMail().

Заметьте, что в этой функции можно отправить две копии письма администратору блога, и отправителю, с информацией о том, что он удачно воспользовался формой обратной связи для wordpress.

Шаблон страниц в wordpress (Шаг 2)

Система управления сайтом wordpress, устроена таким образом, что все созданные страницы и посты, сохраняются в базе данных сайта в виде записей. Как вы понимаете такой подход, лишает возможности внедрять php код внутрь страницы.

Как же поступить если нам все-таки небходимо выполнить php скрипт в теле страницы? Для того, чтобы решить этот вопрос, на помощь придет созданая разработчиками wordpress, возможность использования шаблонов для страниц.

Шаблон для отдельной страницы сайта, представляет собой php файл, который будет обрабатываться движком в момент обращения к заведенной странице сайта, ссылающейся на этот шаблон.

Давайте создадим в папке с темой для вашего сайта, файл contacts.php.

Файл шаблона для отдельной страницы должен содержать в себе информацию для движка, по которой он поймет, что этот файл действительно может быть использован как шаблон страницы.

Информация эта заключается в виде комментария:

1
2
3
4
5
<?php
 /*
 Template Name: contacts
 */

?>

Только после этих строчек мы сможем выбрать шаблон для созданной страницы.

Добавляем страницу для формы обратной связи. (Шаг 3)

Создадим страницу "Контакты", на которой в будущем будет красоваться форма обратной связи.

Поле для ввода информации, оставляем пустым, и выбираем доступный теперь шаблон contacts.php

Шаблон формы обратной связи для wordpress

Жмем кнопку "опубликовать/обновить" и теперь можно покинуть панель администрирования, потому что далее мы будем работать только с файлом contacts.php.

Делаем рабочий шаблон страницы. (Шаг 4)

После выше описанных действий, страница сайта "Контакты", будет формироваться из файла contacts.php. Вы можете поэксперементировать, и попробовать добавить строку на подобии:

1
echo “Эта страница сформирована с помощью PHP”;

Не правда ли очень удобно получить возможность, самостоятельно генерировать страницу.

Приступим к последнему шагу, и допишем, в файл то, ради чего все делалось. Форма обратной связи для wordpress уже скоро будет готова, скопируйте нижеприведенный код в contacts.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<?php
 /*
 Template Name: contacts
 */

 
 class Feedback // наследует все методы класса для работы с бд
{    
        public $fio;
        public $email;
        public $message;
        public $error;
        // проверка на корректность ввода данных
        function isValidData($array_data){
            //корректность емайл
            if(!preg_match("/^[A-Za-z0-9._-]+@[A-Za-z0-9_-]+.([A-Za-z0-9_-][A-Za-z0-9_]+)$/", $array_data['email'])){
              $error="E-mail не существует!";  
            }
            // заполненность адреса
            elseif(!trim($array_data['message'])){
              $error="Введите текст сообщения!";  
            }
            //если нет ощибок, то заносим информацию в поля класса
            $this->error=$error;
            if($error)return $error;
            else{
                $this->fio=trim($array_data['fio']);
                $this->email=trim($array_data['email']);
                $this->message=trim($array_data['message']);
               
                if($this->sendMail())  
                                return true;
                                    else return false; 
            }      
           
            return false;  
        }
       
        //добавление заявки    
        function sendMail(){   

         $to_admin = "mark-avdeev@mail.ru";
         $subject = 'Сообщение с LifeExample.ru';
         $message = $this->message;

         $headers  = 'MIME-Version: 1.0' . "\r\n";
         $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
         $headers .= 'From: '.$this->email."\r\n";

         if (mail($to_admin, $subject, $message, $headers))
                return true;
       
         return false; 
        }
   
}

$Feedback = new Feedback();
$dislpay_form=true;
if(!empty($_POST)&& $Feedback->isValidData($_POST)===true) $dislpay_form=false;

?>
<!--1 Часть из page.php --> 
<?php get_header(); ?>
<div id="wrap">
    <div id="content" style="min-height:650px;">
<!--1 Часть из page.php --> 
           
            <div class="post_header">
                <h1 style="margin-left:6px;">Контакты</h1>
            </div>
       
            <div class="post_body">
                <div class="post_content" style="margin-top:-6px;">

                    <p>
                    Вы можете связаться со мной по  электронному адресу: <a href="mailto:mark-avdeev@mail.ru?subject=Message from lifeexample.ru">mark-avdeev@mail.ru</a>
                    Или отправить свое обращение заполнив поля формы.
                    </p>

                    <div class="head_feedback">Написать сообщение</div>

                    <?if($Feedback->error){ echo "<div style='color:red;'>".$Feedback->error."</div>";}?><br/>
                    <?
                    if($dislpay_form):?>
                    <form action="" method="post">
                    <table class="table_order_form">
                        <tr><td>Имя </td><td><input type="text" name="fio" value="<?=$_POST['fio']?>"/></td></tr>
                        <tr><td>E-mail<span style="color: red;">* </span></td><td><input type="text" name="email" value="<?=$_POST['email']?>"/></td></tr>
                        <tr><td valign="top">Сообщение: </td><td><textarea name="message" style="width:300px; height:100px; margin-left:2px;"><?=$_POST['message']?></textarea></td></tr>
                    </table>
                    <br/>
                    <input type="submit" name="send" value="Отправить сообщение">
                    </form>
                    <?else:?>
                    <p><span style="color: green">Ваше сообщение отправлено!<span></p>
                    <?endif;?>
            </div>
            </div>


<!--2 Часть из page.php -->         
</div>
    <?php get_sidebar(); ?>
    <div style="clear:both;"></div>
</div>
<?php get_footer(); ?>
<!--2 Часть из page.php -->

Внимательно посмотрите на код, и найдите комментарии:

1
2
<!--1 Часть из page.php -->
<!--2 Часть из page.php -->

Данными комментариями выделены части кода принадлежащие моей теме сайта. Для того, чтобы вы могли использовать этот файл у себя. Вам нужно открыть page.php находящийся в вашем шаблоне сайта, и самостоятельно определить какие части нужно вставить на обозначенные места, в вашем случае.

Не пугайтесь, это очень просто сделать, найдите в page.php блок кода, отвечающий за вывод контента. Чаще всего он выглядет таким образом:

1
2
3
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php endif; ?>

Нашли? Так вот, этот кусок кода и будет разделять 1 Часть из page.php и 2 Часть из page.php.

Если у вас что-то, не получилось, обращайтесь за помощью. Я с удовольствием вам помогу.

Заключение

Форма обратной связи для wordpress, оказалась не такой уж сложной в реализации, достаточно было только написать необходимый функционал для проверки и отсылки данных. По сути мы реализовали классический механизм работы формы обратной связи, только пришлось немного потрудиться для того, чтобы он заработал на движке wordpress, без плагина.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Артур

    Почему то не работает форма.. Вроде бы все получилось, вставил код в шаблон, всё нормально отображается, а сообщения не отправляются.
    Вот мои предположения почему не получилось:
    — не указан адрес скрипта для action для формы
    — либо я что то напутал..

    • Пробуйте выявить ошибку.
      alert(1);

      Можно комментировать части скрипта, по половине.
      Когда найдете причину, будет проще разобраться. 😉

    • Артур

      Да спасибо)) Но причина была в mail.ru.. почему то они занесли хостинг (или какой

  • Павел

    Из всей информации, что я видел, ваша пришлась мне по душе и в принципе заработала.
    Спасибо за пост!

  • Артур

    Да, спасибо)) Но причина была в mail.ru Они почему то занесли хостинг (или почтовый сервер, который отправлял письма с моего хостинга, не знаю как называется..)в спам лист. На другую почту все сообщения приходят нормально, например на ****@yandex.ru…

  • Игорь

    у меня почему то на яндекс тоже не приходят письма

    • Сергей

      Ахах.. Прошу прощения, мыло то на свое я не заменил. Только заметил..

  • Сергей

    На яшку письма не приходят

  • Денис

    Добрый день, а вы не подскажите как создать такую форму обратной связи, чтобы посетители могли редактировать запись задавать стиль, форматировать текст, а также вставлять изображения и документы.

  • Ольга

    Форма вроде бы работает: корректность e-mail проверяет, но сообщения с формы не приходят (пробовала несколько e-mail).
    Каким образом происходит отправка сообщения? Ведь в коде нет явного обращения к методу sendMail() экземпляра класса $Feedback и обработчик action=»» тоже не указан.

    Просто для понимания: как выполняется само действие отправки?

    • Cамо действие отправки выполняется стандартной php функцией mail();

  • Ольга

    🙂 но ведь вызов mail() идет в sendMail(), а она нигде не вызывается…

  • Folko85

    Подскажите, как сделать то же самое в форме плагина. Почему-то подробного описания в сети не могу найти. можно было бы даже написать отдельную статью на эту тему.

  • Радик

    Ку ку

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика