Contact Form 7: простые и быстрые формы для WordPress

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

Благодаря Contact Form 7 вы можете быстро создавать формы практически под любые задачи (обратная связь, заказ товара/услуги и т. д.)

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

Подключение формы на страницу

После установки Contact Form 7 на ваш сайт в левом меню панели управления появится соответствующая ссылка:

Кликаем и переходим в настройки плагина.

Первое, что мы видим, — крайне минималистичный интерфейс с несколькими кнопками (в том числе и «Добавить новую», которая нам пригодится в дальнейшем для создания формы).

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

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

Для начала создадим тестовую страницу, к примеру «Моя первая форма», и вставим на ней скопированный ранее шорткод.

Сохраняем и открываем страницу для просмотра.

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

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

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

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

Страница создания формы выглядит следующим образом:

Главное меню включает в себя 4 раздела:

• «Шаблон формы»: раздел непосредственно для создания и настройки формы);

• «Письмо»: раздел для редактирования шаблона письма (контактные данные, заголовки и т. д.);

• «Уведомления при отправке формы»: здесь можно прописать кастомные тексты для различных уведомлений;

• «Дополнительные настройки»: поле, в котором можно прописать дополнительные настройки (полный список вот здесь).

Вернемся к разделу «Шаблон формы» и продолжим работать над созданием формы.

Для начала обратим внимание на прямоугольные кнопки с названиями: «Текст», «Email», «URL» и так далее. Все это элементы формы, которые мы можем добавлять по необходимости в виде шорткодов.

При нажатии на кнопку открывается окно с настройками элемента. Для примера добавим элемент формы «Телефон»:

Здесь мы видим следующие настройки:

1. Тип поля — означает его функциональное предназначение. В данном случае это поле для ввода номера телефона. Нажимая на чекбокс рядом с «This is a required field», мы подтверждаем, что поле обязательно для ввода (без него форма не может быть отправлена и выдаст соответствующую ошибку).
2. Field name — название поля внутри кода. Ниже находится чекбокс «This field expects the submitter telephone number». Нажав на него, мы подтверждаем, что это поле предназначено исключительно для номера телефона.
3. Атрибут «class» — поле для привязки HTML-класса к элементу. При помощи этого в дальнейшем вы сможете задавать элементу собственные CSS-стили.
4. Length — минимальная и максимальная длина текста.
5. Значение по умолчанию — начальное содержимое поля. В данном случае можно прописать код страны. Рекомендуется поставить галочку возле «Use this text as the placeholder» — текст в поле будет отображаться до тех пор, пока пользователь не начнет вводить данные.

В конце жмем «Вставить тег» и смотрим, что получилось:

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

Теперь выясним логическое предназначение каждого из элементов формы Contact Form 7:

• Текст — для ввода текстовых контактных данных (имя отправителя, название компании и т. д.).

• Email — для ввода адреса электронной почты.

• URL — ссылка на веб-сайт или другой ресурс отправителя.

• Телефон — номер телефона отправителя.

• Номер — подразумевает количество чего-либо, например товара.

• Дата — для указания даты в формате (ДД.ММ.ГГГГ).

• Текстовая область — для написания произвольного текста, например письма или комментария.

• В раскрывающемся меню — выпадающий список.

• Чекбоксы — для создания элементов с чекбоксами.

• Радиокнопка — для создания элементов с радиокнопками.

• Принятие — для создания чекбокса с подтверждением действия (например, принятия политики конфиденциальности).

• Опрос — капча в виде ответа на любой кастомный вопрос.

• Файл — аттач для загрузки файлов на отправку.

• Отправить — кнопка подтверждения/отправки формы.

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

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

Добавим все элементы по очереди и посмотрим, как будет выглядеть код формы.

Стоит отметить, что здесь можно использовать любые HTML-теги. Например, тег <label> предназначен для описания <input>, то есть элемента формы.

Теперь форма имеет следующий вид:

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

Получилось как-то так:

Здесь все зависит от вашей фантазии и знаний CSS.

Что ж, теперь вы умеете создавать формы при помощи плагина Contact Form 7.

Итог

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

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

• Contact Form 7 Database Addon для управления сообщениями и данными;

• Conditional Fields for Contact Form 7 для создания условной логики;

• ReCaptcha v2 for Contact Form 7 и Contact Form 7 Captcha для защиты от спама;

• Ultimate Addons for Contact Form 7 — 21 бесплатный и 17 платных модулей (начиная от панели управления стилями, заканчивая AI-генератором форм).

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