Как Создать Форму Обратной Связи с Помощью Contact Form 7
WordPress Электронная почта
access_time30 ноября, 2018
hourglass_empty3мин. чтения
Введение
Форма обратной связи крайне полезна для вашего сайта — она позволяет держать ваш адрес электронной почты подальше от чужих глаз (уменьшая количество спама) и помогает пользователям легко связаться с вами напрямую через сайт.
Если вы создали страницу Свяжитесь с нами на сайте WordPress, то добавить форму обратной связи, настроить её и начать получать сообщения не составит особого труда.
Самым легким способом для создания формы обратной связи является использование плагина WordPress — существует много различных плагинов, и вы можете выбрать любой. Однако в этом руководстве мы будем использовать Contact Form 7.
С более чем 3 миллионами установок, Contact Form 7 является самой широко используемой формой обратной связи для WordPress. Её интуитивно понятный интерфейс и быстрая установка помогут вам создать форму обратной связи в считанные минуты.
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- Доступ к панели управления WordPress
Шаг 1 – Установка Contact Form 7
- Войдите в вашу панель управления WordPress и нажмите на Плагины → Добавить новый в левом меню панели.
- Найдите Contact Form 7 в поиске и нажмите Установить.
- После установки, нажмите Активировать для активации плагина.
Шаг 2 – Как создать форму обратной связи
После активации плагина в левом меню панели появится новый раздел Contact Form 7.
- Нажмите Contact Form 7 → Добавить новую для создания вашей первой формы.
- Впишите название вашей формы обратной связи, например
- Некоторые надписи и текстовые области уже были расположены, чтобы помочь вам разобраться в процессе. Вы можете удалить их или добавить новые надписи и текстовые области , выбрав их из списка сверху.
Если вы не уверены какие из элементов формы вам нужны, то просто оставьте их как есть, вы сможете вернуться и отредактировать их позже.
В зависимости от выбранных элементов ваш код должен выглядеть примерно так:
<label> Ваше имя (обязательно) [text* your-name] </label> <label> Ваш e-mail (обязательно) [email* your-email] </label> <label> Тема [text your-subject] </label> <label> Сообщение [textarea your-message] </label> [submit "Отправить"]
- Вы можете добавлять и удалять элементы в зависимости от ваших нужд. Для удобства используйте специальные инструменты над областью с самой формой.
- Значок * в коде означает, что данное поле обязательно для заполнения.
Шаг 3 – Настройка формата сообщений
Когда посетитель отправит сообщение через форму обратной связи, то вы получите сообщение содержащее его имя, контактные данные и само его содержание.
Вы можете настроить это сообщение в разделе Письмо – некоторые из тегов, которые вы можете использовать в письме перечислены над самим письмом. Попробуйте изменить шаблон письма добавив в него некоторые теги — вы можете вернуться в любой момент и изменить его снова.
ВАЖНО! Убедитесь, что вы вписали правильный адрес электронной почты в поле
Шаг 4 – Настройка уведомлений
Во вкладке Уведомления вы можете настроить сообщения, которые увидит ваш посетитель при успешной отправке письма или какой-либо ошибке (некорректный адрес электронной почты или не заполнение одного из обязательных полей и т.д.).
Шаг 5 – Сохранение и публикация формы
Когда вы закончите настройку, вы сможете сохранить изменения нажав на кнопку Сохранить в верхней правой части панели.
После сохранения, вверху страницы появится шорткод. Он будет выделен синим цветом и должен выглядеть примерно так:
[contact-form-7 title="WordPress Contact Form"]
Чтобы опубликовать вашу форму обратной связи, следуйте данным инструкциям:
- Выделите шорткод и скопируйте его
- Вставьте шорткод на страницу, запись или виджет, где вы хотите, чтобы форма отображалась
- Результат должен быть примерно таким
Шаг 6 – Проверка формы обратной связи для WordPress
Очень важно проверить работу формы обратной связи и позаботиться о её корректном внешнем виде. Также убедитесь в стабильности доставки сообщений через форму.
Чтобы сделать это, просто посетите страницу вашего сайта с формой и отправьте сообщение с помощью неё — вы всегда можете вернуться обратно к редактору формы и сделать необходимые изменения.
Не забудьте нажимать кнопку Сохранить каждый раз, когда делаете изменения в форме. Копировать и менять шорткод вновь вам не придётся.
Заключение
Это руководство помогло вам узнать, как создать форму обратной связи с помощью плагина для WordPress — Contact Form 7. Теперь вы можете получать сообщения от своих пользователей напрямую через сайт.
Хотите узнать еще больше? Вы можете поэкспериментировать с тегами и шаблонами и изменить практически всё. Вы также можете попробовать настроить Flamingo – плагин для хранения сообщений, чтобы хранить все полученные сообщения в базе данных (это довольно полезно, если у вас есть проблемы с почтовым сервером).
Как создать форму обратной связи в WordPress (используя плагин Contact Form7)
Этот видео туториал наглядно демонстрирует, как добавить форму обратной связи в ваш сайт на WordPress используя плагин Contact Form 7.
Как создать форму обратной связи в WordPress (используя плагин Contact Form7)
Установка плагина Contact Form 7:
Откройте панель управления WordPress:
Перейдите в меню Плагины (Plugins) и нажмите на Добавить новый (Add New):
Можно воспользоваться поиском и загрузить плагин из интернета, для этого введите Contact Form 7 в поле поиска, вы увидите детальную информацию о плагине и сможете его установить:
Создание формы обратной связи:
В результате успешной установки плагина вы увидите новую вкладку Контакты (Contact) в левой колонке панели управления сайта.
Нажмите на ней:
Посредством данного плагина можно редактировать уже имеющуюся на сайте форму обратной связи или же создать новую, просто нажав на
Используйте выпадающий список Создать тег (generate Tag) для того, чтобы включить в форму коды для каждого из полей, как, например, текстовое поле (Text field), текстовая область (text area), флажки (checkboxes), и т. д., а затем скопируйте полученный код в поле слева.
Для каждого сгенерированного кода есть возможность ‘добавить этот код в блок Mail. (And, put this code into the Mail fields below.)‘. Скопируйте полученные коды и добавьте в блок Mail, чтобы задать вид сообщения, которое будет отправлено через эту форму (определить структуру сообщения, отправленного посетителем вашего сайта):
Нажмите Сохранить (Save) и скопируйте код только что созданной формы обратной связи, чтобы вставить его на одну из страниц вашего сайта:
Добавление формы обратной связи в текстовый виджет (Text Widget):
Перейдите в меню Дизайн (Appearance) > Виджеты (Widgets):
Переместите виджет Текст (Text) в область Sidebar (или любую другую область виджетов):
Вставьте код в текстовый виджет и нажмите Сохранить (Save):
Откройте страницу Блога (Blog), форма обратной связи появится в правой колонке:
Создание страницы с формой обратной связи и добавление этой страницы в меню :
Для создания новой страницы откройте меню Страницы (Pages) и нажмите Добавить новую (Add New):
Вставьте код формы обратной связи в поле содержимого (Content) этой страницы и нажмите Опубликовать (Publish):
Перейдите в меню Дизайн (Appearance) > Меню (Menus):
Выберите Header Menu:
Перетяните кнопку для новой страницы в меню и нажмите кнопку Сохранить меню (Save Menu):
Обновите сайт, чтобы увидеть новую кнопку меню, нажмите на ней — откроется новая страница с формой обратной связи:
Вы также можете воспользоваться детальной видео версией туториала:
Как создать форму обратной связи в WordPress (используя плагин Contact Form7)
Форма обратной связи WordPress и плагины для ее добавления на сайт
Как ваши клиенты чувствуют себя, делая покупки на вашем сайте? Если взаимодействовать со своими покупателями и клиентами, то можно ускорить продвижение любого интернет-магазина или сайта, а значит получить больше подписчиков и клиентов.
Прежде чем создавать форму, необходимо подумать о полях, которые она будет иметь. Однако помните, чем меньше полей имеет форма обратной связи для сайта, тем выше будет конверсия вашей формы. Выберите несколько наиболее важных на ваш взгляд полей, и используйте их.
Плагины для создание формы обратной связи
Первое, что вам нужно сделать, это установить и активировать подходящий плагин WordPress, а далее создать форму. Рассмотрим наиболее актуальные плагины, которые помогут настроить функциональную контактную форму на сайте Вордресс.
Это, вероятно, самый простой на сегодняшний день в использовании плагин для контактной формы.
Например, одна из основных проблем большинства плагинов для контактной формы WordPress заключается в том, что необходимо создавать сами формы, до того, как поместить их на страницы.
С одной стороны, таким образом, вам доступна более чем одна форма обратной связи для сайта, но это не всегда необходимо.
Используйте этот плагин для контактной формы, если вы хотите что-то простое — что даст вам форму обратной связи, как только вы активируете плагин.
WPForms — это чрезвычайно функциональный плагин. Все настраивается с помощью редактора drag-and-drop, поэтому обратная связь на сайте создается довольно быстро, и вы получаете доступ к предварительно построенным шаблонам форм, что максимально упрощает весь процесс.
Если вам нужно многофункциональное решение, которое легко использовать и которое предоставляет дополнительные функции, (интеграция платежей, интеграция с электронной почтой и т.д.), то WPForms именно то, что вы ищите.
Ninja Forms является одним из наиболее функциональных плагинов, и он может дать вам гораздо больше, чем просто функциональная форма заявки на сайте. Вы можете использовать его для создания форм подписки, опросов или чего-либо еще, что может быть сделано через веб-форму.
Вам нужна форма обратной связи для сайта с расширенным функционалом, тогда остановите свой выбор на данном плагине, так как контактная форма — это всего лишь один ее аспект.
Создание контактных форм с Jetpack работает несколько иначе, чем с другими плагинами из этого списка. Вместо того чтоб делать форму, а затем настраивать ее для разных страниц, форма заявки на сайте, которую обеспечивает данный плагин, настраивается прямо на экране редактирования сообщений/страниц.
Если вам нужна простая функциональность контактной формы, но вы также хотите иметь возможность использовать несколько форм для отдельных сообщений или страниц блога – установите плагин Jetpack.
Fast Secure Contact Form — удивительно простой в использовании плагин, особенно учитывая все варианты настройки, которые он предлагает. Вы сможете создавать новые формы и изменять существующие (в процессе установки автоматически создаются две формы).
Для каждой из форм вы сможете использовать основные настройки: настроить поля, стили CSS, установить функции безопасности (например, CAPTCHA) и многое другое.
Вы хотели бы иметь большее влияние на то, как работает ваша форма заявки на сайте? Существует огромное количество параметров, которые вы можете настроить с помощью этого плагина и сделать так, чтоб ваша обратная связь на сайте, идеально подходила для ваших потребностей.
Contact Form 7 предоставит вам доступ к дополнительному разделу панели инструментов WordPress, называемому Contact. Там вы сможете создавать новые формы и корректировать существующие.
Вы получаете интерфейс, основанный на HTML-тегах. Поэтому при настройке вашей формы, вы должны быть осторожны, чтоб не испортить структуру.
При этом, поскольку вы работаете со структурой HTML, вы также можете включать настраиваемые элементы между полями формы (дополнительный текст или изображения), что в некоторых случаях может оказаться весьма полезным.
Вам нужна форма заявки на сайте, которая обеспечит массу дополнительных настроек? Панель редактирования на основе HTML в Contact Form 7 предоставит вам это в полном объеме!
***
Обратная связь на сайте позволяет пользователям чувствовать себя значащими. Они понимают, что в случае возникновения каких-либо вопросов по товарам или услугам, они смогут обратиться за консультацией и быть услышанными. В результате вы предоставляете им максимально качественный пользовательский опыт, что помогает перевести их в статус постоянных покупателей. Все это дает возможность повысить конверсию сайта, а значит, и увеличить прибыль!
Форма обратной связи на WordPress
Для создания формы обратной связи существует множество плагинов (настройка плагина Contact Form 7). Мы же рассмотрим самый простой в настройке — плагин Contact Form.
Contact Form позволяет создавать и настраивать форму обратной связи, но при этом он достаточно легкий и не грузит сайт. В данном уроке рассмотрим, как использовать плагин Contact Form для создания формы обратной связи.
Будем создавать форму вот такого вида:
Установка плагина
- В Панели управления в разделе «Плагины» выбираем пункт «Добавить новый».
- Вбиваем в поисковую форму «Contact Form» и нажимаем кнопку «Поиск плагинов».
- В списке находим нужный нам плагин и жмем ссылку «Установить».
Нам нужен плагин Contact Form, а не Contact Form 7, это два различных плагина. - После установки активируем плагин.
Создание формы (настройка плагина)
После установки и активации плагина в меню появится раздел «BWS Plugins».
- Выбираем его, а в нем подраздел «Контактная Форма».
- Откроется страница с настройками плагина, их не очень много, тем не менее, рассмотрим только самые необходимые.
- В первую очередь, указываем электронный адрес, на который будут приходить письма. И сразу ставим галочку напротив пункта «Дополнительные настройки».
- «Использовать этот email:» — здесь указываем адрес электронной почты, на который будут приходить оставленные посетителями сообщения.
- «Отобразить блок Прикрепить файл» – отмечаем пункт, если в форме обратной связи необходима возможность к сообщению прикреплять файлы.
- «Изменить текст для поля ОТ в письме» — здесь можно указать определенный текст, который будет отображаться в поле «От» письма вместе с e-mail адресом. Удобно сюда вставить название сайта.
Например, для сайта site.ru мы вводим – «Сообщения с site.ru».
Это позволит нам сразу определять, откуда пришло письмо. - «Выберите email для поля ‘FROM’ письма» — выбираем из двух вариантов.
В первом случае в поле адрес будет отображаться e-mail человека, который отправил сообщение с сайта. Во втором – указанный нами e-mail. - «Отобразить поле для телефона» — добавления к имеющимся полям дополнительного поля, в котором указывается телефон.
- «Обязательные поля» — отмечаем, какие поля являются обязательным для заполнения (если посетитель их не заполнит, форма откажет ему в отправке сообщения).
- «Отображение дополнительной информации в письме» — стоит отметить данный пункт, если есть необходимость просматривать дополнительную информацию об отправке сообщений через обратную связь (когда они были отправлены, с какого ip-адреса и т.д.).
- «Языковые настройки для названия полей в форме» — выбор языка, на котором будет форма обратной связи.
- «Изменить названия полей контактной формы и сообщений об ошибках» — отметив данный пункт, можно изменить надписи полей по своему усмотрению.
- «Действие после отправки письма» — вы можете выбрать один из двух вариантов.
В первом случае посетитель увидит указанный вами текст и останется на странице обратной связи, а во втором – будет перенаправлен на указанную страницу. - Сохраняем настройки, нажав внизу страницы кнопку «Сохранить изменения».
Вставка созданной формы
Остались вопросы? Задайте их в комментариях! 🙂
Если вы хотите поблагодарить меня за материал — можете сделать это здесь 🙂
Как создать форму обратной связи в WordPress
Очередной пост по просьбе моих читателей, в нём мы пошагово разберём, как на своём сайте создать отличную форму обратной связи без использования плагинов. Всего будет два шага.
Шаг 1. Страница с формой
Создаём в папке с темой новый файл — это будет шаблон страницы с формой. Файл можно назвать как угодно, нам важно лишь его содержимое.
<?php /* * Template name: Форма обратной связи */ get_header(); // эта строчка кода у вас может отличаться /* * Тут мы будем обрабатывать ошибки и выводить соответствующие сообщения */ if( isset( $_GET['msg'] ) ) { // в случае успеха if( $_GET['msg'] == 'success' ) echo '<span>Сообщение успешно отправлено</span>'; // в случае ошибки if( $_GET['msg'] == 'error' ) echo '<span><strong>Ошибка:<strong> Проверьте правильность введённых вами данных.</span>'; // вы сами можете добавить различные другие сообщения об ошибках } /* * Антиспам-трюк * у нас есть два фейковых поля, при заполнении которых прерывается выполнение скрипта * сделаем так, чтобы они были скрыты для пользователей при помощи CSS */ echo '<style>textarea[name="comment"],textarea[name="message"]{display:none}</style>'; ?> <form action="<?php echo site_url() ?>/send.php" method="POST"> <input type="text" name="name" required="true" placeholder="Имя *" /> <input type="text" name="email" required="true" placeholder="Email *" /> <textarea name="comment"></textarea> <textarea name="message"></textarea> <textarea name="soobschenie" required="true" placeholder="Сообщение *"></textarea> <button>Отправить</button> </form> <?php get_footer(); // эта строчка кода у вас может отличаться
Шаг 2.

В этой статье в качестве файла-обработчика я создал новый файл send.php
прямо в директории установки WordPress, но вы можете поместить его и в тему без проблем.
<?php // проверка на спам - просто прерываем выполнение кода, при желании можно и сообщение спамерам вывести if( isset( $_POST['comment'] ) || isset( $_POST['message'] ) ) exit; // подключаем WP, можно конечно обойтись без этого, но зачем? require( dirname(__FILE__) . '/wp-load.php'); // следующий шаг - проверка на обязательные поля, у нас это емайл, имя и сообщение if( isset( $_POST['name'] ) && isset( $_POST['email'] ) && is_email( $_POST['email'] ) // is_email() - встроенная функция WP для проверки корректности емайлов && isset( $_POST['soobschenie'] ) ) { $headers = array( "Content-type: text/html; charset=utf-8", "From: " . $_POST['name'] . " <" . $_POST['email'] . ">" ); if( wp_mail( get_option('admin_email'), 'Сообщение с сайта', wpautop( $_POST['soobschenie'] ), $headers ) ) { header('Location:' .site_url('/contact?msg=success') ); exit; } } header('Location:' . site_url('/contact?msg=error') ); exit;
Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Как создать форму обратной связи в WordPress с помощью плагина WPForms
Когда вы создаете сайт (не важно какой, блог, интернет-магазин или онлайн-школу) на любом сайте обязательно должна быть страница Контакты с формой обратной связи. На этой странице вы можете указать данные для связи с вами: телефон, Email, Skype, WhatsApp или ссылки на профили в социальных сетях. Все это здорово, но вот иногда проще написать свой вопрос через форму обратной связи, прямо на странице Контакты, не переходя на другие сайты или сервисы.
Такую форму очень просто сделать с помощью плагина WPForms.
Раньше я советовала плагин Contact Form 7, но сейчас реально лучше проще и красивее формы у WPForms. Поэтому смело рекомендую всем пользователям сайтов на WordPress.
Шаг 1 – Как создать форму обратной связи в помощью плагина WPForms
Я создала небольшой мини-курс по настройке формы обратной связи с помощью плагина WPForms. На этой странице вы найдете все шаги необходимые для создания, настройки и корректной настройки формы.
В этом видео я покажу:
- Как установить и активировать плагин;
- Как создать простую контактную форму;
- Как настроить поля формы;
- Как установить форму на страницу Контакты.