Contact Form 7

Как добавить контактную форму на сайт в WordPress?

от автора

в

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

Решение: Для быстрой реализации этой задачи мы задействуем один из самых популярных плагинов-конструкторов контактных форм для WordPress.

Плагин Contact Form 7

Официальная страница плагина

Как устанавливать плагины?

Плагин Contact Form 7

После установки и активации плагина, вам будет доступен его раздел в главном меню панели управления и ссылка Настроек в разделе ваших плагинов

Настройки плагина

Проследовав в раздел настроек плагина вы обнаружите уже предустановленную контактную форму.

Контактная форма по умолчанию

Эту контактную форму мы можем уже смело задействовать на страницах нашего сайта. Создадим страницу «Контакты» и в редакторе блоков Гуттенберг найдём нужный блок, например по поисковому слову «контакт» или «contact».

После чего добавить найденный блок Contact Form 7 на вашу страницу. Так как у нас всего одна контактная форма, которая была нам доступна по умолчанию, то выберем её:

Классический редактор

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

копируем шорткод

А после вставить его в область контента

добавляем шорткод на страницу

После обновления/публикации страницы, на публичной части сайта этой страницы появится наша контактная форма:

готовая контактная форма.

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

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

Переходим к настройкам формы

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

  1. Заголовок Контактной формы — его можно менять произвольно, этот заголовок для вас, чтобы вы ориентировались и различали формы между собой.
  2. Шорткод — это специальный механизм в WordPress, который позволяет в произвольных местах сайта вызывать ту или иную функцию. Принцип простой. Вы копируете этот уникальный шорткод и вставляете в то место контента, где хотите видеть вашу форму.

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

добавление формы в виджетах

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

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

В результате получим:

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

Настройка получателей

Переходим на вкладку Письмо

Давайте познакомимся с разделами этого экрана:

  1. Почтовые теги (которые генерируются во вкладке Шаблон письма). Важно! Старайтесь сравнивать ваши теги с тегами которые участвуют в шаблоне для получателей. Частой ошибкой бывает отсутствие нужного тега (как правило из-за невнимательности) в шаблоне письма для получателей.

Я специально удалил тег Темы письма и в списке тегов мой тег стал подсвечиваться акцентирующим черным цветом

ошибка. отсутствует почтовый тег

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

  1. Кому — в этом разделе мы можем указать получателя письма. В данном примере указан специальный шорткод, который будет использовать E-mail администратора, который указан при создании сайта. Вобщем, этот E-mail находится в разделе Настройки > Общие вашего сайта, в поле Административный E-mail
Емэйл администратора сайта

Если требуется указать несколько получателей, то перечисляем их адреса через запятую, например так:

[_site_admin_email], kolya@gmail.com, tolya@gmail.com

Или так:

masha@gmail.com, sasha@gmail.com
  1. От кого — тут вы указываете адрес отправителя. Важно, чтобы он соответствовал домену вашего сайта. То есть, если адрес вашего сайта mysite.com, то в этом поле нужно указать, например, info@mysite.com
  2. Тема письма. Тут я думаю всё понятно. Схема по умолчанию [_site_title] «[your-subject]» выдаст примерно следующее: если ваш сайт называется «Мой магазин», а в теме письма пользователь указал тему «Пожелание», то получим: Мой магазин «Пожелание»
  3. Дополнительные заголовки — лучше их не трогать.
  4. Тело письма — это как раз та информация которую получат получатели. Как правило, в этом теле письма содержится информация полей, которые заполняет пользователь, соответственно все участвующие почтовые теги должны тут присутствовать, в противном случае информация не будет передана в полном объёме.

И в нижней части экрана рассмотрим ещё ряд возможностей:

  1. Отметив этот чекбокс мы исключим вывод строк, если данные не были у тега заполнены пользователем. Это оправдано тогда, когда формы выступают в роли опросного листа и содержат в себе большое количество полей для заполнения
  2. Если чекбокс отмечен, то мы можем использовать в теле письма HTML-теги. Это позволит придать ему читабельный внешний вид выделив заголовки и прочие элементы в письме
  3. Сюда нужно поместить тег (в том случае если он был создан для прикрепления файла*) Если не выполнить это условие, то прикреплённый пользователем файл не будет получен.
  4. Возможность сформировать второе письмо, отличительное содержанием от первого. Это оправдано когда требуется разделить при отправке заполненную пользователем информацию, например, часть для менеджера, а часть в службу доставки и т.п. Или обычно задействуют эту функцию при отправке автоматических ответов.

Полезно для ознакомления

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

Ну и последняя вкладка позволяет внести дополнительные настройки, например, JavaScript код, который будет отрабатывать при успешной отправке формы. Зачастую сюда добавляют отправку данных в системы аналитики: Яндекс Метрика или GA.

Как добавить контактную форму через функцию PHP?

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

Для отображения формы достаточно просто в функцию передать её шорткод:

echo do_shortcode( '[contact-form-7 id="09bcf5b" title="Форма 1"]' );

Буду признателен за Share 🙏


Комментарии

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

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