Письмо редактору contact form id d 1197. Советы, хаки, секреты. Уведомления при отправке формы

Flector 5

Это плагин создания контактных форм. Он чрезвычайно популярен (по скачиваниям уступает только плагинам и ) среди пользователей, так как удачно сочетает простоту использования и мощнейшие возможности по настройке и конструированию контактных форм. Я попытаюсь максимально подробно рассмотреть все возможности плагина.

1 Распаковываем архив.

2 Копируем папку contact-form-7 в /wp-content/plugins/ .

3 Заходим в админку блога на вкладку "Плагины " и активируем плагин.

При своей активации плагин создает отдельное меню в админке блога под названием "", также при этом создается дефолтная контактная форма, которую вы можете увидеть в "Contact Form 7\Формы ":

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

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

Для вывода этой простейшей формы вам понадобится всего пара минут. И именно из-за такой легкости добавления контактной формы многие пользователи и любят этот плагин.

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

Откроется вот такая начальная страница добавления формы:

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

Заголовок не имеет никакого значения, он нужен только для того, чтобы вы сами не запутались в своих собственных формах. Установили название своей формы, нажали на кнопку "Сохранить ", получили в итоге "код вставки":

Теперь можно вставить предложенный код в любую свою запись или страницу (в режиме "Текст", конечно), чтобы вывести в ней контактную форму. Однако она ничем не будет отличаться от формы по умолчанию, поэтому продолжим работать с конструктором форм. В правой части страницы конструктора расположена кнопка "Сгенерировать тэг ", клик на нее выдаст:

Выберем, к примеру, номер телефона. Откроется такое окно:

Собственно, тут можно вообще ничего не менять. Размеры, классы и прочее это второстепенные опции и в большинстве случаев вам им редактировать не надо. Однако, опция "" может быть полезна в качестве подсказки посетителям, как именно надо заполнять это поле.

Например, задаем такие значения:

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

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

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

Создавать код формы надо вручную, то есть расставляйте заголовки, теги абзацев и переносов строк сами, должно получиться что-то типа:

Сохраняем код формы и получаем в итоге вот такую контактную форму:

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

1 Текстовое поле.

Обычное текстовое поле, можно использовать для имени, темы и т.д.

2 E-mail.

Используется только для ввода e-mail адреса.

3 URL.

4 Номер телефона.

Используется только для ввода номера телефона (цифры и дефизы).

5 Число (spinbox).

Используется только для ввода числа (можно использовать для указания возраста, количества заказываемых единиц товара и т.д.).

6 Число (slider).

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

7 Дата.

Используется только для ввода даты.

8 Текстовое поле.

В русском переводе данный тэг тоже получил название "Текстовое поле", но в терминологии HTML это textarea, что, по сути, обозначает лишь увеличенное текстовое поле. Используется для ввода текста сообщения.

9 Выпадающее меню.

Используется для выбора пункта (или нескольких пунктов) из выпадающего меню. Можно использовать для чего угодно – от вопроса о цвете заказываемого товара до выбора пола человека.

10 Checkboxes.

Используется для выбора одного или нескольких пунктов из предложенных вариантов.

11 Radio buttons.

Используется для выбора только одного пункта из предложенных вариантов.

12 Acceptance.

Используется для согласия с условиями.

13 Вопрос.

Используется для ответа на указанные вопросы (вопрос выбирается случайно из указанных вариантов). В основном, данный тэг используется в качестве защиты от спама. И если на числовой вопрос спам-боты легко могут ответить, то на вопросы типа "на какой планете мы живем?" они ответить не в состоянии.

14 CAPTCHA.

Используется для вывода полноценной капчи. Для использования данного тэга необходима установка плагина Really Simple CAPTCHA . Капча вполне читаемая, а поэтому легко пробивается продвинутыми спам-ботами вроде Хрумера.

15 Отправка файла.

Используется для отправки файла. Можно указать максимальный размер и форматы допустимых файлов.

16 Кнопка отправки.

Используется для отправки данных контактной формы. Это обязательный тэг.

С тэгами, используемыми непосредственно в контактной форме, разобрались. Теперь рассмотрим, как эти самые тэги из контактной формы получить на свой email. Чуть ниже кода контактной формы в конструкторе находится шаблон отсылаемого вам письма и именно в нем вы должны сделать необходимые изменения. Это важно, так как неправильное заполнение этого шаблона не позволит вам узнать, что именно написал посетитель в вашей форме. В качестве примера возьму тэг номера телефона. Скажем, в вашей контактной форме он вставлен через такой код:

Значит, в шаблоне отсылаемого письма надо вставить такой код:

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

Тексты, которые выдает контактная форма можно также поправить в конструкторе форм в разделе "Сообщения":

Часто задаваемые вопросы по плагину :

1 Ошибка вида " ", как исправить?

Это значит, что либо указанная форма удалена, либо неправильно указан заголовок формы (title в коде вызова критичен для вызова формы).

2 В письме я вижу тэги вроде вместо текста, как исправить?

Это значит, что посетитель не заполнил данное поле. В таком случае, тэг не заменяется, а выводится, как есть.

3 Есть ли ограничения при выборе имени для тэга?

Есть. Если цикле WordPress используется имя "name", то вы не можете его использовать в качестве имени для тэга. Лучшим способом избежать проблем будет добавление префиксов для имен, вроде слова "your". С именем тэга проблем точно не будет.

4 Можно ли сообщить посетителю по email, что его форма была получена?

Можно. Используйте в конструкторе форм опцию "Адресат 2":

Данную опцию вполне можно использовать в качестве автоответчика.

5 Можно ли отправить заполненную форму по нескольким адресам?

Можно. Используйте в опции "Адресат" поле "":

Где [email protected] ваш дополнительный email, на который будет отослана копия заполненной посетителем формы (команда "cc" отправляет скрытую копию).

6 Можно ли вывести форму не в записи или странице?

Да. Вставьте код вызова формы в текстовой виджет.

7 Можно ли вывести форму напрямую кодом в файлах шаблона?

Да. Используйте код вида:

"" ) ; ?>

8 Форма не отсылается, выдается ошибка в красной рамке, как исправить?

Обратиться к вашему хостеру, возможно в PHP запрещен вызов функции mail().

9 При отправке формы выдается ошибка в оранжевой рамке, как исправить?

Оранжевая рамка сигнализирует о спаме. Ложное срабатывание защиты от спама могут вызвать плагины кэширования. Настройте в вашем плагине кэширования периодическую очистку файлов кэша (24 часов достаточно).

10 Поле для ввода email выглядит иначе, чем другие поля в форме, как исправить?

Плагин использует HTML5 код для ввода email-адреса ( вместо ), а подобный код зачастую не оформлен в старых шаблонах. Вам необходимо внести изменения в styles.css вашего шаблона, добавив туда необходимый код для селектора input .

11 Как в email вставить прикрепленный пользователем файл?

Использовать для этого специальное поле "Прикрепленные файлы:"

Действительно заслуживает вашего внимания. В отличие от многих других популярных плагинов он не заставляет вас покупать какую-нибудь Pro версию - все его возможности доступны сразу. Популярность плагина (свыше 19 миллионов скачиваний) вполне заслужена – при всей своей функциональности он чрезвычайно прост в настройке и доступен даже для начинающих пользователей движка WordPress .

Но все же помните – это плагин создания контактных форм, а не плагин создания просто форм. При всех своих возможностях он не позволит вам создать продвинутую форму на основе каких-либо условий. Его основное назначение именно создание контактных форм и не больше. Для создания динамических форм, форм создания записей и тому подобных вещей используйте плагины вроде Ninja Forms , они для этого более подходят.

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


Автор плагина: Takayuki Miyoshi
Рассматриваемая версия: 3.9.1 от 31.07.2014
Текущая версия: 5.1.4 от 04.08.2019
Совместимость с версией WordPress: 4.9 и выше
Активных установок плагина: 5 000 000+
Скачать плагин версии 5.1.4 (всего скачено 121 112 956 раз)

Понравился пост? Подпишись на обновления по или

Форма обратной связи крайне полезна для вашего сайта – она позволяет держать ваш адрес электронной почты подальше от чужих глаз (уменьшая количество спама) и помогает пользователям легко связаться с вами напрямую через сайт.

Если вы создали страницу Свяжитесь с нами на сайте WordPress, то добавить форму обратной связи, настроить её и начать получать сообщения не составит особого труда.

Самым легким способом для создания формы обратной связи является использование – существует много различных плагинов, и вы можете выбрать любой. Однако в этом руководстве мы будем использовать Contact Form 7.

С более чем 3 миллионами установок, Contact Form 7 является самой широко используемой формой обратной связи для WordPress. Её интуитивно понятный интерфейс и быстрая установка помогут вам создать форму обратной связи в считанные минуты.

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Доступ к панели управления WordPress

Шаг 1 – Установка Contact Form 7

  1. Войдите в вашу панель управления WordPress и нажмите на Плагины → Добавить новый в левом меню панели.
  2. Найдите Contact Form 7 в поиске и нажмите Установить .
  3. После установки, нажмите Активировать для активации плагина.

Шаг 2 – Как создать форму обратной связи

После активации плагина в левом меню панели появится новый раздел Contact Form 7 .

  1. Нажмите Contact Form 7 → Добавить новую для создания вашей первой формы.
  2. Впишите название вашей формы обратной связи, например WordPress Contact Form .
  3. Некоторые надписи и текстовые области уже были расположены, чтобы помочь вам разобраться в процессе. Вы можете удалить их или добавить новые надписи и текстовые области, выбрав их из списка сверху.

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

В зависимости от выбранных элементов ваш код должен выглядеть примерно так:

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

Шаг 3 – Настройка формата сообщений

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

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

ВАЖНО! Убедитесь, что вы вписали правильный адрес электронной почты в поле Кому – это тот адрес, на который будут доставляться все сообщения.

Шаг 4 – Настройка уведомлений

Во вкладке Уведомления вы можете настроить сообщения, которые увидит ваш посетитель при успешной отправке письма или какой-либо ошибке (некорректный адрес электронной почты или не заполнение одного из обязательных полей и т.д.).

Шаг 5 – Сохранение и публикация формы

Когда вы закончите настройку, вы сможете сохранить изменения нажав на кнопку Сохранить в верхней правой части панели.
После сохранения, вверху страницы появится шорткод. Он будет выделен синим цветом и должен выглядеть примерно так:

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

  1. Результат должен быть примерно таким

Шаг 6 – Проверка формы обратной связи для WordPress

Очень важно проверить работу формы обратной связи и позаботиться о её корректном внешнем виде. Также убедитесь в стабильности доставки сообщений через форму.

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

Заключение

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

Хотите узнать еще больше? Вы можете поэкспериментировать с тегами и шаблонами и изменить практически всё. Вы также можете попробовать настроить Flamingo – плагин для хранения сообщений, чтобы хранить все полученные сообщения в базе данных (это довольно полезно, если у вас есть проблемы с почтовым сервером).

Если честно, давно уже не работал с Wordpress, но недавно объявился старый клиент и попросил добавить на его сайт на Wordpress простенькую форму заказа товара. Товары были представлены на отдельных статических страницах, ни о каком интернет-магазине речи не шло. Суть такая - в конце каждой страницы нужно создать форму, в которой покупатель может оформить заказ, указав количество товара.

Гугл подсказал, что теоретически справиться с задачей сможет плагин Contact Form 7 , представляющий собой конструктор форм обратной связи с отправкой писем на указанный адрес, но вот беда - среди элементов страницы формы не предусмотрено тегов для отправки заголовка страницы или хотя бы ее URL. Но выход нашелся...

1. Создаем форму обратной связи с такими полями, какие нам нужны. Для верстки формы используем обычный HTML+CSS, спецтеги заключаются в квадратные скобки. Все это делается во вкладке "Шаблон формы" на странице настройки плагина Contact Form 7.

Форма заказа при этом выглядит таким образом (при заданном стиле класса order):

Теперь нам нужно обеспечить передачу TITLE и URL страницы в письме. См п.2.

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

  • [_remote_ip] IP-адрес отправителя.
  • [_user_agent] User Agent отправителя.
  • [_url] URL-адрес контактной формы.
  • [_date] Дата отправления.
  • [_time] Время отправления.
  • [_post_id] ID поста (записи) контактной формы.
  • [_post_name] Имя поста (в схеме протокола HTTP).
  • [_post_title] Заголовок записи с контактной формой.
  • [_post_url] Ссылка на страницу отправки.
  • [_post_author] Имя автора публикации.
  • [_post_author_email] Адрес почты автора публикации.

Если вставить в шаблон письма теги [_post_tltle] и [_post_url], в нем будут указаны название страницы и ее адрес. Если название страницы совпадает с названием товара, то проблема передачи наименования товара адмнистратору сайта будет решена!

Вот пример шаблона письма, в котором передается название и URL страницы, с которой оформлялся заказ:

Пользователь оформляет заказ, указывая количество товара и свои контактные данные. После того, как нажата кнопка "Оформить заказ", к вам на почту приходит подобное сообщение:

Понимаю, что это, конечно, не так изящно, как в "крутом" интернет-магазине, но у вас есть возможность связаться с клиентом и обсудить подробности заявки. Моему клиенту, собственно, именно это и требовалось.

Маленькая хитрость

Чтобы вставить код формы в произвольное место шаблона, в PHP-код можно добавить следующую строку:

"); ?>

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

Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.

Создание и показ контактных форм

Создание форм в админке

После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.

Форма на картинке создана при активации плагина автоматически.

Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.

Лицевая часть сайта

А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):

На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).

Настройка формы (создание сложных форм)

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

В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.

Под заголовком - шорткод. Его используем в записях, для вывода формы.

И ниже - четыре вкладки:

  1. Шаблон формы
  2. Письмо
  3. Дополнительные настройки

Рассмотрим каждую вкладку отдельно.

Шаблон формы

В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.

Вёрстка формы

Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:

А при отображении в записи она превратится в такой HTML:

Синтаксис шорткодов

Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".

Тег в последствии будет преобразован в текстовое поле с html кодом:

Шорткоды можно удобно создавать через конструктор шорткодов.

Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:

  1. удалить и создать с помощью конструктора новый.
  2. изучить синтаксис и исправить шорткод поля вручную.

С конструктором вы и сами разберетесь.

А тут мы разберем синтаксис шорткода.


Для примера рассмотрим тег текстового поля с дополнительными опциями:

Text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.

Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.

Типы полей

  • Текстовые поля: text , email , tel , url , textarea
  • Числовые поля: number , range
  • Поля с датой: date
  • Чекбоксы, радио, списки: checkbox , radio , select
  • Поле с загрузкой файла: file
  • CAPTCHA: captchac и captchar
  • Опросы: quiz
  • Поле "Принять": acceptance
  • Кнопка "Отправить": submit
  • Произвольный тип поля

Шаблон письма

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

Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: . Теперь в шаблоне письма можно использовать тег . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).

Заголовки письма:

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

    От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например [email protected]).

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

    Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.

  • Дополнительные заголовки - По умолчанию тут прописано Reply-To: . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: [email protected] .
Тело письма

Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).

Разберем дефолтное письмо:

От: <> Тема: Сообщение: -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:

От: Дмитрий Тема: Вопрос про Contact Form 7 Сообщение: Привет! У меня возник вопрос по плагину Contact Form 7. Как его настроить? -- Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

Не обязательные поля в теле письма

Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города , но юзер не заполнил поле , а значит в письме мы получим Человек с города... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.

Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.

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

Уведомления при отправке формы

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

Теги шаблона письма не работают в этих полях.

Дополнительные настройки

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

Об использовании данного функционала я расскажу в отдельной статье.

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

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

Одним из наиболее широко используемых плагинов для создания форм обратной связи является Contact form 7. Он быстро набрал популярность благодаря своей простоте в настраивание содержимым формы. Плюс поддерживает фильтрацию спама и позволяет установить CAPTCHA с помощью дополнительного плагина Really Simple CAPTCHA. Также плагин поддерживает технологию Ajax, что в обработке выполнения запроса веб-страница не перезагружается.

После установки и активации Contact form 7 в панели управления появиться новая вкладка для управления форм. Чтобы найти с ним общий язык долго возиться не придётся, плагин мультиязычный и русский имеется в том числе. Контактная форма стилизуется в зависимости от установленной вами темы, но со знаниями CSS возможно отредактировать на свой вкус.

Пример формы.

2. Form Maker

Form Maker является современным и продвинутым инструментом для быстрого создания форм связи. Он предлагает множество типов полей, установка капчи, шаблоны готовых форм, открытый код для правки стилей и результат можно сразу увидеть в предварительном просмотре. При обретении коммерческой версии будет доступна интеграция с Google Maps, а также поле загрузки файлов. Плагин поддерживает большое количество языков.

Пример формы.

3. Fast Secure Contact Form

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

Пример формы.

4. Visual Form Builder

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

Окно настроек.

Пример формы.

5. Slick contact forms

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

Пример формы.

Публикации по теме