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

Как создать контактную форму

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

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

Но контактная форма также экономит время. И предоставляет вам всю необходимую информацию:

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

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

WordPress предлагает возможность создать контактную форму с помощью плагина. Рекомендуется использовать контактную форму от WPForms.

Этот плагин очень прост в использовании. Он использует инструмент перетаскивания, поэтому даже новичок может очень быстро создать контактную форму. Базовая версия доступна бесплатно.

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

Устанавливаете плагин прямо из администрации сайта. Не забудьте активировать плагин после установки.

Установка плагина WPForms
Установка плагина WPForms

После активации плагина вы увидите новую запись WPForms в администрации сайта.

Создание контакных форм с использованием WPForms

Чтобы создать новую контактную форму, перейдите в WPForms  > Добавить новый. Вы увидите следующую страницу, где нужно добавить контактную форму.

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

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

Простая форма (Simple Contact Form) — этот шаблон дает возможность использовать готовую форму. Однако вы сможете добавлять и удалять отдельные поля по мере необходимости.

Форма регистрации на новостную рассылку (Newsletter registration form) — в этом шаблоне создадите форму подписки на новостную рассылку на вашем сайте. Здесь можете добавлять и удалять отдельные поля в соответствии с вашими предпочтениями.

Шаблон формы регистрации постоянного контакта (Constant Contact Signup Form Template) — в этой контактной форме есть флажок «Да подпиши меня!», чтобы посетители могли легко присоединиться к вашему списку, когда они отправят вам сообщение.

Как создать простую контактную форму?

Теперь рассмотрим, как создать форму с помощью шаблона Simple Contact Form. Предварительно выберем данный шаблон и нажмем кнопку «Использовать шаблон»

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

Чтобы добавить новое поле, перейдите в меню в левой части экрана. Щелкните или перетащите поле вправо.

Установка шаблона контактной формы
Установка шаблона контактной формы

Чтобы сохранить контактную форму, нажмите «Сохранить». Вы можете найти кнопку в верхней части экрана.

Настройка свойств формы

Для этого перейдите в левом меню на вкладку «Настройки» –> «Общие».

В правой части экрана в области «Общие» вы найдете несколько параметров настройки:

Редактирование свойств контактной формы
Редактирование свойств контактной формы
  1. Название формы — здесь можете изменить имя контактной формы «Simple Contact Form».
  2. Описание формы — используется для описания формы.
  3. Текст кнопки Отправить — отредактируйте текст кнопки отправки. «Submit» меняем на «Отправить».
  4. Текст кнопки Отправить во время отправки — заполните текст, который будет отображаться после отправки формы. «Sending…» меняем на «Подождите…».
  5. Включить анти-спам защиту —рекомендуется оставить флажок в этой строке отмеченным. Эта функция предназначена для предотвращения отправки формы как спама.

В разделе дополнительно:

  1. CSS класс формы — введите имена классов CSS для обертки формы. Имена классов должны быть разделены пробелами.
  2. CSS класс кнопки Отправить — это поле используется для добавления вашего собственного класса для кнопки отправки.

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

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

Настройки уведомлений по электронной почте

Вы найдете дополнительные параметры настройки в разделе «Настройки» > «Уведомления».

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

Настройка отправки уведомлений

Уведомления — здесь можете включить или отключить отправку форм на ваш адрес электронной почты. Рекомендуется оставить эту функцию включенной. Отдельные заполненные формы нигде не сохраняются. Для информирования используется только электронное уведомление.

  1. Отправить на email адрес — введите адрес электронной почты, чтобы получать на него уведомления о записях для формы. Для отправки нескольких уведомлений каждый адрес электронной почты должен быть отделен запятой.
  2. Строка темы письма — вы также можете указать тему письма.
  3. От имени — имя отправителя электронного письма. Здесь найдете имя вашего сайта по умолчанию.
  4. С email адреса — адрес электронной почты отправителя.
  5. ReplyTo Email Address — адрес электронной почты для ответа.
  6. Email сообщение — содержание сообщения электронной почты. Если оставите настройку {all_fields}, электронное письмо будет содержать все поля формы.

Настройка подтверждения отправки формы

Подтверждение формы — это то, что посетитель видит после отправки формы. Можете поблагодарить за обращение или перенаправление пользователя на выбранную страницу сайта. Для этого перейдите в «Настройки» > «Подтверждения».

Настройка отправки подтверждения

Сначала выберите тип подтверждения. В поле можно выбрать один из трех вариантов:

  1. Сообщение — отображает введенный вами текст в окне ниже.
  2. Показать страницу — здесь можете установить редирект после отправки формы.
  3. Перенаправить на URL (редирект) — введите URL-адрес страницы, на которую должен быть перенаправлен пользователь после отправки формы.

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

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

Поля редактирование, просмотра и удаления контактной формы
Поля редактирование, просмотра и удаления контактной формы

Последняя функция — количество просмотров. Эта функция доступна только в версии Pro. Позволяет сохранять заполненные формы прямо в администрации сайта.

Добавление контактной формы на сайт WordPress

После настройки свойств контактной формы в WPForms вам необходимо встроить ее на страницу. Сначала откройте существующую страницу, которую хотите отредактировать, или создайте новую.

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

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

Создайте новый блок на странице, куда хотите встроить контактную форму. Не забудьте сохранить любые изменения на странице.

Добавление через шорткод на страницу WPForms
Добавление через шорткод на страницу WPForms
Готовая контактная форма
Готовая контактная форма

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

В WordPress контактную форму также можно добавить на боковую панель, в верхний или нижний колонтитул страницы. В администрировании перейдите в Внешний вид > Виджеты. Прокрутите список виджетов, чтобы найти WPForms.

Переход к виджетам
Переход к виджетам

Добавьте форму так же, как и другие доступные виджеты, перетащив их в нужное место.

Установка контактной формы в виджетах боковой панели
Установка контактной формы в виджетах боковой панели

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

Выбор контактной формы из списка
Выбор контактной формы из списка

Заключение

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

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