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

Дата: / Автор поста:

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

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

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

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

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

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

Находится в папке с вашей активной темой, надо открыть его в любом редакторе, буду показывать наглядно здесь. Для начала покажу содержимое своего 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; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
</div>

</div>
<?php get_footer(); ?>

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

<!--?php /* Template Name: Форма обратной связи */ ?-->
<?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 и закидываем в папку с активной темой.

feedback в файловом менеджере

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

атрибуты страницы

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

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

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

contact form7

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

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

  1. Куда заходить для добавления новой формы.
  2. Тут набор возможных команд для создания, есть поля для ввода номера телефона, для выбора ответов из списка. Надо поставить на то место, где будет идти новый элемент курсор и нажать на нужный элемент. Предположим номер телефона, и нажать добавить, тогда код автоматом добавиться в форму.настройка полей contact form 7
  3.  Конфигурация, которая будет запомнена плагином. Из прошлого пункта мы добавили номер телефона, но его надо обратить в тег label и написать что это за пункт, ниже скриншот.lable применение
  4. Дальше жмем кнопку «сохранить изменения».

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

шорткод contact form 7

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

вставить шорткод в запись

Далее сохраняем и смотрим. форма обратной связи плагином

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

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

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

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

сервис обратной связи использование

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

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

Плагин всплывающей обратной связи 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. Должно получить так.

как пользоваться плагином fancy box

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

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

Комментарии к этой супер статье.

  • remontokna.com.ua

    Здравствуйте. Если я создаю сайт на локальном сервере Денвер, письмо на e-mail c формы обратной связи придет?

    • Лифанов Валентин

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

  • Светлана

    Добрый день. Эта статья написана уже очень давно, но я надеюсь, что вы еще отвечаете на вопросы.

    Я сделала фоорму в всплывающем окне как у вас тут описано, но мне еще нужно чтобы она выводилась под кнопками.

    То есть в шаблоне уже прописаны кнопки и их расположение, нужно в их настройку добавить ссылку на эту форму так чтобы она всплывала при нажатии. Подскажите пожалуйста способ.

    • Лифанов Валентин

      Светлана, здравствуйте. Там такая функция в плагине есть. Можем пообщаться на эту тему в контакте.

      • Саня

        Валентин, здравствуйте. Я к вам с такой проблемой :

        добавил значить плагин «Contact Form7» и активировал, но

        в не появляется на понеле поле с «Contact Form7».

        Тему верстал сам. Может в файле function.php надо что то прописать...??

        • Лифанов Валентин

          Приветствую. Возможно надо обновить движок вордпресса?

          • Саня

            Версия WP 4.7.4

            я уже не знаю, что делать.

            Сам новичок именно в использовании WP.

            Впервые работаю с ним.

            Может какие еще есть варианты ?

            Очень надо доделать диплом...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.