Contact form 7 WordPress – самый популярный плагин для реализации контактной формы. Модуль позволяет организовать обратную связь с посетителями сайта. Для работы с плагином не нужно знать html, поскольку форма добавляется посредством копирования шорт-кода на любую страницу сайта. Модуль позволяет добавлять в форму неограниченное количество полей, присутствует интеграция со сторонними и стандартными плагинами. Форму можно кастомизировать, делая правки в CSS-код шаблона.

Создаем форму обратной связи

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

После установки плагина в боковом меню появится раздел «Contact Form 7». На странице «контактные формы» присутствует список всех сохраненных настроек. Если навести на форму курсор, появятся ссылки «изменить» и «дублировать». Чтобы удалить запись, поставьте напротив нее галочку, выберите соответствующее действие и нажмите кнопку «применить». Чтобы создать форму, перейдите по ссылке «добавить новую».

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

  • Имя;
  • Электронная почта;
  • Тема;
  • Сообщение;
  • Кнопка «отправить».

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

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

  • Тип поля – если хотите сделать поле обязательным, поставьте галочку;
  • Имя – оставьте как есть;
  • Значение по умолчанию – заполняет текстовые поля готовым текстом;
  • Атрибут id – нужно задать произвольную цифру, если в форме присутствует более одного поля одного типа;
  • Атрибут class – укажите название CSS-класса, который отвечает за кастомизацию текстового поля. Если оставить пустым, будет использовано стандартное значение;
  • Параметры – значения для радио кнопки;
  • Вопросы и ответы – значения для поля «опросы».

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

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

На странице «письмо» вы настраиваете шаблон, тему и получателя писем, которые будут отправлены с формы обратной связи. Форму можно оставить как есть, поскольку все поля заполнены стандартно.

Как добавить форму на страницу

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

Кроме контактной формы, можно добавить любой текст или изображение – как в обычную статью. Чтобы посмотреть, как будет выглядеть ваша форма, нажмите «просмотреть изменения» или кликните по постоянной ссылке, если вы уже сделали публикацию. Ссылку на страницу с контактной формой можно опубликовать в шапке, подвале или сайдбаре сайта через визуальный редактор.

Как добавить контактную форму в виджеты

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

Перейдите в раздел «внешний вид > виджеты». В левой части страницы вы увидите список с доступными виджетами. В самом низу найдите виджет «текст» с описанием «произвольный текст». Нажмите на него и выберите локацию, где вы хотите разместить форму. В зависимости от вашего шаблона, это может быть sidebar (боковая колонка), footer (подвал), header (шапка) и т. д. Выберите нужное место и нажмите «добавить виджет».

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

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

Подключаем дополнительные модули

Из-за популярности Contact form 7 разработчики некоторых сторонних плагинов встраивают в свои продукты возможность интеграции с контактной формой. Один из таких модулей присутствует в чистой сборке WordPress – спам-фильтр Akismet.

Contact form 7 для WordPress - как сделать форму обратной связи на сайте

Чтобы подключить Akismet к контактной форме, необходимо прописать параметр «akismet:author» в строку следующих полей: your_email, your-name и your-url. Или же просто замените стандартные поля следующими строками:

[email* your-email akismet:author_email]

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