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

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

Каталог WordPress насчитывает десятки плагинов контактных форм. Но наиболее популярным среди них (более миллиона установок) является Contact Form 7, на примере которого мы и будем рассматривать создание контактной формы на сайте.

Создание формы

Если Вы используете темы Yelly или Root, то Вам нет необходимости устанавливать какие-либо плагины, — все уже реализовано! Для этого достаточно вставить на страницу контактной формы шорткод [contactform].

После установки и активации плагина в админ-панели появляется целый раздел:

Меню CF7 в админ-панели

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

Создание новой контактной формы в CF7

Итак, введя название, например, «Связаться с нами» и нажав кнопку Сохранить, Вы таким образом создадите готовую к показу контактную форму. Чтобы ее увидеть, нужно перейти Contact Form 7 > Контактные формы.

Список форм в CF7

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

[contact-form-7 id="1858" title="Связаться с нами"]

Вывод формы на сайте

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

Создание страницы для контактной формы

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

Открытая форма на сайте

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров