WordPress форма обратной связи: создаем быстро и качественно

Опубликовано: 01.09.2018

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

Это очень хороший инструмент для блоггера, добавляет к функционалу вордпресса не только комментировать, но и давать обратную связь посредством электронной почты. Моя форма обратной связи находится здесь . Как ее сделать опишу тремя способами:

Как добавить всплывающие окна на WordPress? ТОП 3 плагина

Кодом, для продвинутых. Плагином. С помощью сервиса. Всплывающая обратная связь

WordPress форма обратной связи с помощью кода без плагина

Разрабатываться wordpress форма обратной связи будет в шаблоне страниц. За вывод отвечает файл page.php в папке темы.

Как вносить изменения в установленную тему Wordpress

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

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

<?php get_header(); ?> <div class="content"> <h2 class="page-title">Страница: <?php the_title(); ?></h2> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="post-main"> <h1><?php the_title(); ?> <span>(<?php the_time('j.m.y'); ?>)</span></h1> <div class="post"> <?php the_content(); ?> </div> </div> <?php comments_template(); ?> <?php endwhile; ?>  <?php else: ?>  <?php endif; ?> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>

В самый верх данного кода помещаем вот такой набор команд.

<?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Введите ваше имя.'; $hasError = true; } else { $name = trim($_POST['contactName']); } if(trim($_POST['email']) === '') { $emailError = 'Введите e-mail адрес.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $emailError = 'Вы ввели неправильный адрес.'; $hasError = true; } else { $email = trim($_POST['email']); } if(trim($_POST['comments']) === '') { $commentError = 'Введите сообщение.'; $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } if(!isset($hasError)) { $emailTo = get_option('tz_email'); if (!isset($emailTo) || ($emailTo == '') ){ $emailTo = get_option('admin_email'); } $subject = 'Сообщение с Блога от пользователя '.$name; $body = "Имя: $name \n\nE-mail: $email \n\nСообщение: $comments"; $headers = 'От: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Ответить: ' . $email; $headers = "Content-type: text/plain; charset=\"utf-8\""; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>

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

<?php the_content(); ?>

Взамен вставляем эти команды.

<?php if(isset($emailSent) && $emailSent == true) { ?> <div class="thanks"> Спасибо, ваше сообщение отправлено. </div> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> Извините, произошла ошибка. <?php } ?> <form action="<?php the_permalink(); ?>" id="contactForm" method="post"> <ul class="contactform"> <li> <label for="contactName">Имя:</label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredimya requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </li> <li> <label for="email">E-mail:</label><input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredemail requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </li> <li> <h2>Ваше сообщение</h2> <label for="commentsText"></label> <textarea name="comments" id="commentsText" rows="10" cols="90" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </li> <li> <input type="submit" class="otpravit" value="отправить мне"/> </li> </ul> <input type="hidden" name="submitted" id="submitted" value="true" /> </form> <?php } ?>

Теперь сохраняем файл под названием feedback.php и закидываем в папку с активной темой.

Далее идем в вордпресс и создаем новую страницу с параметром шаблона «форма обратной связи». В поле ввода текста ничего не пишем. Пишем лишь сам заголовок и сохраняем.

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

Красивая форма обратной связи для сайта плагином

Плагин называется Contact Form 7. Из всех ныне существующих, я считаю что он самый лучший. Для начала надо установить его, можете через админку вордпресса (он есть в официальном репозитории), либо скачав отсюда официальная страничка . Думаю с установкой и активацией проблем не будет. Так он будет выглядеть при поиске из административной панели.

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

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

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

Дальше жмем кнопку «сохранить изменения».

После чего плагин выдаст шорт код.

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

Далее сохраняем и смотрим.

И вот результат, мне нравится, еще больше радует, что плагин на русском языке и бесплатно распространяемый. Изменить внешний не составляет труда, если вы конечно хоть маленько знаете CSS.

Покопайтесь в contact form 7, там есть много интересных вещей, например, функция с прикреплением файла.

С помощью сервиса

Обыскал много сервисов, почти все платные, остальные сами по себе мне не понравились. А этот зацепил простотой и легкостью, к тому же русский. Называется он formm.ru , заходите на него, и сразу видим окно настройки формы.

Настройка всех элементов, от добавления новых полей, до изменения цветов обводки, очень продуманная система и интуитивно понятная. Разбирать не буду, все просто. Предварительный просмотр в натуральную величину. Теперь нажимаем «получить код» копируем его и вставляем на страницу, вставляем так же через режим «текст» (см. предыдущий пункт про плагин) Перед тем как использовать форму, ее надо зарегистрировать, нажимаем на ссылку, и заполняем все поля.

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

Плагин всплывающей обратной связи Easy FancyBox

Не хотел обозревать, но люди ищут эту информацию, для этого надо поставить плагин Easy FancyBox, вот его страница , его так же можно установить через админпанель в вордпрессе, через поиск.

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

<a href="#contact_form_pop" class="fancybox">Написать письмо</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> здесь шорткод формы из contact form 7 </div> </div>

В том месте где написано «шорт код» вставляем код, который копировали в Contact Form 7. Должно получить так.

То есть мы сделали ссылкой всплывающую обратную связь, если прикрепить к этому CSS то можно сделать при нажатии на кнопку или картинку, но это уже уроки верстки. У меня все сработало. В итоге получиться, ссылка, при нажатии на которую появится всплывающее окно.

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