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

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

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

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

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

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

Contact form 7 – Вордпресс плагин обратной связи

Contact form 7 – WordPress плагин формы обратной связи, имеющий самые высокие рейтинги среди своих аналогов. Имеет хорошую поддержку и регулярное обновление.

Именно этот популярный плагин сейчас и рассмотрим.

Скачать Contact form 7 можно с официального сайта. Так же можно найти этот плагин в админке Вордпресс и установить оттуда.

После установки плагина, в консоли WP появится соответствующий раздел.

Форма

По умолчанию уже создана 1 контактная форма.

контактная форма

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

Форма обратной связи будет иметь оформление в соответствии с оформление темы (шаблона) вашего WordPress сайта.

А теперь разберем настройку полей формы:

Необходимо добавить новую форму, либо отредактировать уже существующую.

Рассмотрим добавление новой контактной формы:

плагин Contact form 7

Жмем добавить новую, язык плагин определит автоматически. Вас перекинет на страницу редактирования формы. Тем, кто не знаком с HTML, возможно, данная страница покажется несколько устрашающей. Но не стоит паниковать, все достаточно просто.

Есть стандартный шаблон формы:

шаблон формы

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

генерация формы тэгов 5

Давайте полностью сотрем все, что есть в шаблоне формы. Создадим все заново.

Первым делом, создадим чистый бланк:

Пишем все текстовые строки, которые будет нужны:

Пусть будет так:

<p>Ваше имя</p>

<p>Ваша профессия</p>

<p>Тема</p>

<p>Сообщение</p>

<p>[submit "Отправить"]</p>

Перед тем как добавлять поля для заполнения, давайте рассмотрим все тэги, чтобы можно было использовать возможности плагина Contact form 7 на полную катушку:

Текстовое поле – подходит для любого текста. Мы будем использовать его как имя автора и его же, как строку ввода профессии.

Поэтому заполняем его так:

Текстовое поле шаблона формы

Ставим по необходимости, обязательным будет поле или нет. Если это имя автора, то как правило – обязательно.

Имя задается латинскими буквами, цифрами, дефисами. Можно не менять.

id – это уникальный идентификатор. Если полю нужно будет задать индивидуальные стили в файле style.css, укажите его.

Class – та же функция, что и у id.

Size – размер поля ввода в пикселях.

Maxlength – максимальное количество вводимых символов в строку ввода.

Akismet – если у вас установлен данный антиспам плагин, то можно активировать галочку.

Для поля «Профессия» проделываем идентичную операцию:

контакты

E-mail – имеет все те же самые настройки. Трудностей быть не должно. Генерируем и вставляем:

contacts

Поле «тема» создается по той же технологии, что и имя отправителя, профессия, с использованием текстового поля.

URL– адрес сайта.

код шаблона формы

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

Номер телефона – поле для телефонного номера.

Число (spinbox) – числовое значение. Max и min – указываем диапазон. Step – шаг, если указать 5, то числа будут кратные 5: 5, 10, 15… Данная форма отлично подойдет для указания возраста и пр.

числа формы

Число (slider) – горизонтальный ползунок. К сожалению, юзабилити можно поставить под сомнение. Так как сами числа не указываются.

Дата – красивая форма, в которой можно указать дату.

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

Текстовое поле – это поле для самого текста сообщения. Cols – столбцы, rows – строки, maxlength – ограничение по символам.

Выпадающее меню – для указания пунктов меню, в поле «Выбор» необходимо вписать пункты. Каждый с новой строки. Множественный выбор позволит выбирать несколько элементов из списка.

выпадющее меню

Checkboxes – можно создать стандартный чекбокс.

опрос в контактной форме

А вот конфигурации:

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

Radio buttons – радио кнопка.

Чекбокс

Acceptance– еще один чекбокс.

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

Captcha – для установки защитной каптчи необходимо дополнительно установить плагин Really Simple CAPTCHA.

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

прикрепить файл к форме

Кнопка отправки – завершающий элемент любой формы обратной связи. После ее нажатия письмо будет отправлено на вашу почту.

С оформлением плагина формы обратной связи WordPress, которая отображается на сайте разобрались.

Теперь необходимо настроить шаблон письма, которое будет приходить на почту.

имена шаблона формы

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

настройка адресата

В поле адресата указываем свой почтовый адрес.

В поле отправителя, в квадратных скобках нужно указать имя. Там же указан e-mail.

В поле «тема», указываем соответствующее имя.

Далее создаем примерно такой шаблон:

изменение шаблона письма

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

WordPress плагин формы обратной связи – Contact form 7 поддерживает возможность использовать двух адресатов.

второй адресат

Завершающий этап – отредактировать сообщения, при том или ином действии.

Комментарии к “Плагин форма обратной связи для WordPress сайта

  1. Спасибо, давно думал сделать обратную связь, спасибо за инструкцию!

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

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