Тандем автор — читатель. Создаем форму обратной связи и анкету

Казалось бы, зачем сайту на WordPress формы? Например, форма заказов или форма обратной связи — ведь для связи с посетителями можно просто разместить контактную информацию — телефон, email, аську и скайп на страничке и этим ограничиться. Но это только на первый взгляд. В реальности же размещение форм дает огромное количество плюсов.

  • + №1. Это удобно для посетителя. Представьте себя на его месте — Вас что-то заинтересовало и Вы бы хотели прямо сейчас связаться с админом, возможно выяснить какой-то вопрос по приобретению товара, если вы что-то продаете.
  •  +№2. Формы помогут Вам быстрее продать свой товар или услугу, поскольку чем быстрее Вы заинтересуете потенциального клиента, тем быстрее он у вас купит. Пока же он будет искать свой телефон или открывать почту в браузере, то еще может изменить свое решение. Или вовсе забыть — вспомните, сколько раз вы откладывали связь с автором на потом и просто об этом забывали… Или он зашел не со своего компьютера и не помнит пароль от почты — вариантов много. Кроме того, при помощи конструктора форм WordPress можно создать анкету, опрос, форму заказа и так далее, то есть сделать базу для взаимосвязи между автором, то есть Вами, и потенциальными клиентами.
  •  +№3. И наконец, открыто написанные контакты попадают в спамерские базы и потом вы будете разгребать кучу спама или получать рекламные смски. Собственная же форма для WordPress, защищенная хорошей капчей, нейтрализует эти опасности

Форма обратной связи WordPress

Формы обратной связи для WordPress (равно как форма заказа WordPress и анкета) реализуется с помощью самого лучшего плагина форм Contact Form 7, который мы и разберем в видеоуроке. По многочисленным просьбам читателей, уже после создания первого видео, я решил сделать еще один урок и создать более сложную форму — анкету WordPress с интеграцией капчи Re Captcha. Конструкторов форм для WP существует множество, как платных, так и бесплатных. Но самым популярным, функциональным и в то же время достаточно простым для освоения и не напрягающим систему является именно WordPress плагин форм Contact Form 7. С его помощью мы можем сделать для wordpress анкету почти любой сложности.

Основные возможности Contact Form 7

1. Создавать строки и поля для ввода текста
2. Радио кнопки
3. Чек-боксы
4. Выпадающие списки
5. Разрешение или запрет выбора нескольких чекбоксов
6. Автоматическая проверка заполненности полей
7. Установка обязательности ввода каких-либо указанных параметров
8. Формирование внешнего вида письма, приходящего на email администратора
9. Создание кнопок
10. Настройка стилей отображения всех элементов формы
11. Интеграция с капчей (Really Simple Captcha или re-Captcha)
12. Отправка файлов
13. Мелкие дополнительные возможности





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


Более навороченная форма для WordPress с поддержкой мощной капчи — в еще одном уроке:



WordPress плагин форм

Видео 1го урока снято для диска с видеокурсом «Веб-сайт своими руками», поэтому там говорится об уже установленных плагинах контактов и капчи. Вам же для создания формы в WordPress необходимо самостоятельно установить эти плагины: конструктор форм Contact Form 7 и Really Simple Captcha

А для второго урока по созданию анкеты для WordPress установите вот эти плагины:
Contact Form 7 reCAPTCHA Extension
Re Captcha

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

Для тех, кто любит все делать своими «очумелыми ручками» предлагаю руководство по созданию формы WordPress без использования дополнительных плагинов. Для этого создаем дубликат страницы page.php и называем его forma.php. Будем делать все на основе присутствующей в любой сборке темы Twentyten. Итак, в этом файле из данной темы содержится код:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			<?php
			/* Run the loop to output the page.
			 * If you want to overload this in a child theme then include a file
			 * called loop-page.php and that will be used instead.
			 */
			get_template_part( 'loop', 'page' );
			?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

get_template_part( 'loop', 'page' );

. Поэтому немного подкорректируем шаблон и получим вот это:

<?php
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

ЗДЕСЬ БУДЕТ ФОРМА ОБРАТНОЙ СВЯЗИ

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Теперь сюда в самое начало надо добавить строку «Template Name: Форма обратной связи» — это название шаблона будущей страницы для формы. И новую функцию формы после нее с настройками email и сетки сообщения, приходящего на почту. Делаем.

<?php
/*
Template Name: Форма обратной связи
*/

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 = 'Сообщение с блога wp-voprosov.net от пользователя '.$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;
    }

}
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

ЗДЕСЬ БУДЕТ ФОРМА ОБРАТНОЙ СВЯЗИ

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

А теперь надо вставить на страницу вместо текста «ЗДЕСЬ БУДЕТ ФОРМА ОБРАТНОЙ СВЯЗИ» код самой формы WordPress. Для этого прописываем код:

 <?php if(isset($emailSent) && $emailSent == true) { ?>
   <div class="thanks">
      <p>Спасибо, ваше сообщение отправлено.</p>
   </div>
<?php } else { ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
   <p class="error">Извините, произошла ошибка.<p>
<?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="required 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="required requiredField email" />
      <?php if($emailError != '') { ?>
         <span class="error"><?=$emailError;?></span>
      <?php } ?>
    </li>
    <li>
      <label for="commentsText">Сообщение:</label>
      <textarea name="comments" id="commentsText" rows="20" cols="50"
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">Отправить сообщение</input>
    </li>
  </ul>
      <input type="hidden" name="submitted" id="submitted" value="true" />
 </form>
<?php } ?>

Отредактируйте тексты заголовков полей формы и сообщений об ошибках на свой вкус и форма готова. Теперь создаем статическую страницу и в меню «Шаблон» выбираем «Форма обратной связи».

wordpress формы

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

Второй вариант формы WordPress без плагина

Еще один вариант формы. Создаем отдельный файл mail.php и вставляем в него код:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['sub'])) {$sub = $_POST['sub'];}
if (isset($_POST['body'])) {$body = $_POST['body'];}

$address = "webliberty@yandex.ru";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{
echo "Сообщение отправлено, теперь Вы можете вернуться обратно
и продолжить чтение Блога Свободного Вебмастера";
}
else
{
echo "Сообщение не отправлено, проверьте
правильность заполнения полей и попробуйте снова";
}
?>

Теперь кладем этот файл в папку с темой оформления, а на странице, на которой вы хотите вывести форму обратной связи, просто прописываете код формы:

<form name="MyForm" action="/wp-content/themes/lime/mail.php" method="post">
<p><input class="input" name="name" type="text"
style="width:31%" value="Ваше имя" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input class="input" name="email" type="text"
style="width:31%" value="Эл. почта"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input class="input" name="sub" type="text"
style="width:31%" value="Тема" onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><textarea name="body" cols="1" rows="5"
style="width:98%" onfocus="if(this.value=='Текст сообщения'){this.value=''};"
onblur="if(this.value==''){this.value='Текст сообщения'}" >Текст сообщения</textarea></p>
<p><input value="Отправить сообщение автору блога" type="submit" /></p>
</form>

За варианты кода формы WordPress отдельное спасибо блогам apisklov.ru и webliberty.ru

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 44

  • Саша,добрый день.
    Пытаюсь улучшить свой сайт по Вашим видеоурокам.
    Столкнулась с трудностями при установке карты на свой сайт.Осталось вставить код php на страницу,но Вы говорите,что надо ранее было вставить плагин экзет php.Неожиданно прозвучало перед окончанием работы.Прошу Вас напишите,как правильно звучит этот плагин.И в записи написан код html.Поподробнее с этого места вставки кода php,который написан под картой?Правильно я поняла?
    Помогите довести до ума установку карты на моём сайте.Заранее благодарю.

    • Здравствуйте, Ирина!
      Спасибо за комментарий!
      В новой версии этого плагина уже не нужно, чтобы поддерживалась вставка php кода из редактора.
      Достаточно вставить код непосредственно в шаблон в файл single.php или page.php, например после функции вывода записи, и включать его прямо из редактора для конкретной страницы, на которой хотите разместить карту (т.е. при создании новости в окне плагина Google Maps поставить чекбокс на Show Google Maps).

      Когда было записано видео, такой функции не было и приходилось добавлять php код непосредственно в текст страницы из редактора, для чего должен был быть установлен плагин Exec-PHP.
      Этот способ и сейчас тоже работает.

  • Саша, здравствуй !
    Ответь, пожалуйста, можно ли на шаблоне WP Plaform
    найти и удалить скрытые ссылки автора шаблона без
    потери его работоспособности ?
    Главная страница распечатана, файлы стилей то же
    распечатаны.
    С уважением, Пыхтелкин.

    • Можно, только это нехорошо ) как долго объяснять, пишите через обратную связь

      • С его помощью можно только обнаружить закодированный текст. А вот убрать его будет посложнее

  • Александр, спасибо! А как сделать страничку для приема заказа ( для тех случаев, когда заказы оформляются только наложенным платежом)? Там в таблице должны быть еще адрес, , индекс, отдельные строчки Имя, Отчество, Фамилия и т.д. Я думаю, такое видео многих интересует. Спасибо вам заранее.

    • Конечно, можно настроить столько полей ввода, сколько Вам необходимо — по аналогии с тем, как я создавал поле для капчи. То есть в настройках плагина в поле, где html код формы, добавляете новый абзац, даете ему соответствующий заголовок, далее ниже создаете еще один абзац (<p>). Потом в выпадающем списке Сгенерировать тег выбираете Текстовое поле и копируете шорт-код в новый абзац 😉

      Глянул на Ваш блог одним глазом — поменяйте админский логин admin на другой для безопасности.
      Как это сделать — в видео

  • Александр, спасибо! Очень хотелось бы еще видеоурок по настройке заказов наложенным платежом. Там тоже таблица, только с подробными данными, индексом, адресом и т.д. Или это делается так же, только строчки нужные добавляются?

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

  • «Наверное, я действительно еще дополнительный урок на эту тему сделаю»

    Кстати, хорошо было бы! Меня эта тема тоже очень интересует.

  • Здравствуйте. Подскажите как сделать форму заказа, в которой при нажатии на кнопку «добавить товар» добавляется поле, выглядящее так же как предыдущее, со следующим номером. А при нажатии на крестик ненужная строка удалялась. Например, как здесь http://wp-voprosov.net/56203c/X0UQSApNHl0DXV8aVUENBgVVVUscUF8OHkYDWw==/. Надеюсь, объяснила понятно.

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

    • В функциональный код добавляете после if(isset($_POST['submitted'])) {:

      [code lang=»php»]
      if(trim($_POST[‘XXX’]) == ») {
      $nameError = ‘Заполните поле.’;
      $hasError = true;
      } else {
      $NNN = trim($_POST[‘XXX’]);
      }

      Вместо XXX и NNN задаем свои названия поля и переменной.
      Далее в тот код, который отвечает за передачу сообщения на почту добавляем значение нашей переменной:

      [code language=»php»]$subject = ‘Сообщение с блога wp-voprosov.net от пользователя ‘.$name;
      $body = "Имя: $name \n\n
      Ваше поле: $NNN \n\n
      E-mail: $email \n\n
      Сообщение: $comments";

      А в код самой формы для заполнения вставляем вот это:

      [code lang=»php»]<li>
      <label for="XXX">Ваше поле:</label>
      <input type="text" name="XXX" id="XXX"
      value="<?php if(isset($_POST[‘XXX’])) echo $_POST[‘XXX’];?>"
      class="required requiredField" />
      <?php if($nameError != ») { ?>
      <span class="error"><?=$nameError;?></span>
      <?php } ?>
      </li>

      rrr

      • Спасибо большое. Буду пробовать. А то нужно развернутую форму заказа, а я ну не программист совсем)))

          • Получилось! Спасибо огромное, Вы меня выручили. И можно один честно последний вопрос. Каким макаром вставлять радиобатонны?

  • Здравствуйте! Я установила на сайт CF7, но ни как не получается отправиться сайта письмо, пишет ошибку «Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.» Может быть я что то не так делаю?
    Буду очень благодарна за помощь, могу прислать скрины …

    • Может быть, дело в капче? Например, установили поле для ее ввода, но не прописали отображение изображения или не установили плагин. Или не заполняется одно из обязательных полей

  • здравствуйте, подскажите, пожалуйста, с помощью каких тегов форму можно спустить вниз? у меня это сделать не получается…

      • дело в том что я вставляла форму без плагина и она у меня оказалась под моим меню…а как спустить форму я не знаю))

        • Вкратце — вам надо форму поместить в блок

          , задать ему класс (

          ), и прописать этому классу стили в файле style.css по отступам, примерно так: .forma {margin-top: 10px; margin-bottom: 10px; margin-right: 0; margin-left: 0;}
          • аааа, надо будет попробовать спасибо))
            пока разбиралась сделала форму заказа с плагином)))и вроде все нормально))спасибо вам за ваш труд

  • Александр, при отправке сообщения с формы выдается «Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.» Как её исправить?

    • Форма некорректно обрабатывается. Вы при помощи плагина делаете?

  • Здравствуйте, Александр!

    У меня такая проблема.

    Когда человек заполняет форму и нажимает отправить, мне на почту приходит письмо, но вместо текста, приходит вот что
    «Сообщение:
    [your-message]»

    Не могли бы вы помочь мне это исправить?

    Заранее благодарен.

    • Видимо в правом окне «Шаблон формы» не прописан данный тег, либо неправильный ID самой контактной формы

      [contact-form-7 id="1" title="Блаблабла"]

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

    • Видимо, надо найти какой-то дополнительный плагин визуального редактора html, типа TinyMCE, который бы позволял использовать его в формах для посетителей. Я подобными не пользовался

  • Здравствуйте, Александр!
    Подскажите такой момент: а если вместо отправки письма необходимо сохранять данные формы в базу данных, что нужно изменить в коде. Или может быть посоветуете какой то другой плагин для этих целей?

    • Это надо какой-то плагин искать, типа службы техподдержки. Я на такой плагин не натыкался, возможно, что-то такого типа есть, но сам пользуюсь сторонним удобным сервисом support-desk.ru

  • Плагин контакт форм 7 сильно тормозит блог , я лично использую у себя контактную форму без плагина, которая очень удобная и красивая, её всем и своетую ставить.

  • Здравствуйте!
    Поставила плагин, настроила.
    Для полного счастья не хватает — и очень не хватает! — решения двух вопросов, ответы на которые нигде не могу найти… :'-(

    1) Как сделать так, чтобы чекбоксы/радиокнопки выводились каждая на своей строке, столбиком?? (Ставила теги br и br /, как перед строчками, так и после — результат один: блок формы (чекбоксы или радиокнопки) просто перестает выводиться на сайте!
    HELP!!

    2) Как сделать так, чтобы после нажатия на кнопку "Отправить" пользователь не оставался на той же странице, (где только внизууу, если прокрутиииить, можно увидеть крошечное сообщение об отправке…), а видел ТОЛЬКО уведомление об успешной отправке? Чтоб было сразу визуально ясно, что действие выполнено?
    HELP!!

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

    Более того — с каждым обновлением шлется новое письмо!!.
    Сайт скоро открывается.. В таком виде категорически нельзя выставлять форму заказа….

    • Здравствуйте!

      1. По первому вопросу сделать легко — опубликовать форму, открыть страницу с ней в виде html, посмотреть какие классы у нужных элементов. И потом в CSS дописать для этих элементов атрибут display: block;

      2. Здесь уже сложнее, так как это встроенная в плагин функция, но тоже наверное можно найти решение, посмотрите по форумам, может кто-то делал подобное

  • Добрый день. Установила плагин CF7.после того, как клиент нажал кнопку "отправить" внизу под самой формой выходит уведомление об отправке / или ошибке отправки. А сам клиент переадресовывается на начало (верх) формы. Проблема в том, что Клиент не видит это уведомление и не понимает отправилось его письмо или нет. Как сделать так, чтобы уведомление вылезало сверху страницы или поверх страницы (в идеале), а акже как изменить шрифт и цвет сообщения (где искать настройки стиля этого сообщения)?

    • Здравствуйте!
      Надо файлы плагина редактировать. Где точно не знаю, но чтобы попасть в редактор плагинов, надо зайти в админке в меню в разделе Плагины — редактор и на новой странице выбрать в выпадающем списке Contact Form. После этого в правом столбике будут все доступные файлы для редактирования. Там же и файл style.css для редактирования отображения формы

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