Contact form 7 — лучший плагин для форм

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

Для пользователя заполнение формы обычно не составляет труда — заполняешь два-три поля, нажимаешь на кнопку «Отправить» и продолжаешь сёрфить в интернете.

А вот для владельца сайта внедрение формы может вызвать затруднения — если ты не разработчик и не можешь просто сесть и разработать.

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

Основные его преимущества — это простота и большие возможности. С виду малый и неказистый, без модных drag-and-drop элементов, плагин позволяет сделать такое, от чего другие будут молча курить в сторонке.

По нашей старой традиции сначала опишем его базовый функционал.

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

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

Устанавливаем плагин с официального репозитория.

Обязательная программа

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

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

• Ваше имя
• Ваш e-mail
• Тема
• Сообщение

Для простой стандартной формы обратной связи количество полей вполне достаточное.

Contact Form использует такой синтаксис для добавления полей: [тип_поля название_поля]. Например, для поля имени заполняющего код будет таким:

[text your-name]

Мы можем сделать это поле обязательным, поставив звездочку сразу после типа. Пример такой — мы хотим сделать поле для email обязательным:

[email* your-email]

Также мы можем указать для поля классы и id. Обращаю внимание, что при добавлении нескольких классов мы должны каждый указать отдельно:

[text your-name id:your-name class:name__text class:field]

Мы также можем указать значение по-умолчанию (это атрибут value) и замещающий текст-подсказку (атрибут placeholder), указав значение в кавычках:

Устанавливаем значение по умолчанию:
[text your-country "Россия"]

Устанавливаем значение для placeholder'а:
[text your-country placeholder "Россия"]

Есть ещё один интересный параметр, но про него чуть ниже.

Contact Form позволяет создать несколько типов полей:

• Текст — обычное текстовое поле;
• E-mail — соответствует input type=»email»;
• url — соответствует input type=»url», позволяет вставлять только ссылки;
• Телефон — соответствует input type=»tel» для указания телефона;
• Номер — поле, поддерживающее ввод цифр, имеет два дополнительных значения min и max.
• Дата — поле для выбора календарной даты, соответствует input type=»date», имеет дополнительные параметры min и max, устанавливающие допустимый диапазон дат;
• Текстовая область — большая область для текста, она же textarea;
• В раскрывающемся меню — соответствует select, значения указываются в двойных кавычках, отдельно друг от друга;
• Чекбокс / радиокнопка — соответствуют input type=»radio» и input type=»checkbox», значения указываются также, как у select, кроме того, позволяет выбрать значение по умолчанию с помощью атрибута default с указанием порядкового номера значения;
• Опрос — позволяет задать пользователю вопрос с указанием правильного ответа, этакая замена капче;
• Файл — позволяет пользователю отправить вам файл, прикрепив его к письму, позволяет ограничить размер файла и типы прикладываемых документов;
• Принятие — наливает 100 грамм принятие условий для отправки формы, полезное и нужное поле, которое по закону должно присутствовать на формах;
• Отправить — кнопка, которая запускает обработку формы и отправляет её по указанному адресу.

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

Теперь переходим к редактированию письма, которое отправит форма.

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

Кому и количество писем

В поле «Кому» можно указать несколько адресов и на все эти адреса будет выслано письмо по шаблону. Хотя рекомендую, конечно же, указывать только один e-mail.

Теперь про количество — всего Contact Form позволяет выслать 2 шаблона писем с одной формы. Это очень полезно, когда получателями должны быть два разных лица, например, администратор сайта и тот, кто заполнил форму:

• для администратора приходит письмо-уведомление о заполненной форме со всеми данными;
• для пользователя приходит подтверждение о получении письма.

Очевидно, что письма по содержанию и внешнему виду будут отличаться. И Contact Form позволяет сделать это.

Тонкости с отправителями и e-mail

Ещё один очень важный момент — это отправитель письма, т.е. адрес, с которого было письмо отправлено (оно же «от кого»). По умолчанию плагин устанавливает адрес вида wordpress@yoursite.ru и всегда настойчиво желает, чтобы адрес отправителя содержал email, принадлежащий домену сайта.

В принципе, можно оставить и так, даже если у вас нет почты для домена — письма всё равно дойдут. Можно указать и какой-то другой email, но лично я не советую так делать.

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

Хитрость с Reply-To

Заголовок «Reply-To», который указывает адрес e-mail, на которое будет написан ответ на письмо. Его можно не указывать.

Но, если вдруг однажды вы его стёрли за ненадобностью, стандарное поле для e-mail изменили, а в конце-концов решили вернуть, то обратите внимание, что переменная-поле, которое отвечает за запрос e-mail у пользователя, должна быть только типа e-mail и быть обязательной. В противном случае Contact Form покажет вам ошибку.

Тело письма

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

Но стоит нам включить параметр «Использовать HTML-формат письма», как наше письмо меняется на 180% градусов. Если вы умеете верстать html-письма, то с помощью Contact Form всю эту свёрстанную красоту можно отправить по указанному адресу.

Вопрос вёрстки html-писем — это большая тема для отдельного разговора. Могу посоветовать использовать онлайн-конструктор Stripo, с помощью которого можно сверстать макет, в нужные места расставить шорткоды переменных, а потом импортировать письмо как html-код.

Далее — только ваша фантазия.

Чуть не забыл — есть ещё параметр «Исключить вывод строк с пустыми тегами сообщения». Если вдруг пользователь не заполнил какие-то данные, и мы не хотим, чтобы в отправленном письме были белые пятна, то просто отключаем вывод строки с пустым полем.

Индивидуальная программа

Для тех, кому простых функций показалось мало, есть ещё ряд малозаметных конструкций. Честно сказать, не то что малозаметных, вообще не отмеченных на основной панели, с которой контактируешь.

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

Существует такой атрибут default, который поможет автоматически установить значение для поля, используя:

• GET и POST запросы;
• произвольное поле;
• данные пользователя.

GET/POST запросы

При использовании GET/POST запросов мы используем такую конструкцию:

[text* utm-tag default:get]

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

mysite.ru/?utm-tag=content

Значение из произвольного поля

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

[text* utm-tag default:post_meta "utm tag"]

Кроме того, можно указать несколько таких атрибутов, тогда порядок расстановки будет определять приоритет. В нашем случае сначала идёт значение из GET, а если его не передали, то значение из произвольного поля:

[text* utm-tag default:get default:post_meta "utm tag"]

Данные пользователя

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

Пример — автоматически заполняем e-mail пользователя:

[email* your-email default:user_email]

Полный список данных, что мы можем подставить в форму:

• default:user_login — логин;
• default:user_email — email;
• default:user_url — сайт пользователя;
• default:user_first_name — имя;
• default:user_last_name — фамилия;
• default:user_nickname — никнейм;
• default:user_display_name — имя, как оно отображается на сайте;
• default:user_description — описание или биография.

Список достаточно исчерпывающий. И даже если так получилось, что у пользователя появилась новая мета-запись, например phone (телефон тобишь), то её тоже можно запросить по стандартной формуле:

default:user_phone

Тег Уведомления

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

[response]

Этот небольшой тег не имеет параметров. Да, стандартный текст можно поменять на вкладке «Уведомления при отправке формы».

Загрузка файлов

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

Теперь к самому тегу. Как ранее было указано, он позволяет прикрепить к письму файлы, чем соответствует input type=»file». Мы можем указать как разрешенные для загрузки файлы, так и размер:

[file your-file filetypes:pdf|doc|docs limit:1048576]

Атрибут filetypes отвечает за допустимые файлы. По умолчанию, пользователям разрешено загружать следующие типы файлов: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.

Атрибут limit отвечает за предельный размер файла. По умолчанию размер указывается в байтах и равен одному мегабайту — 1048576. Мы можем указать значение также и килобайтах или мегабайтах:

В килобайтах
[file your-file filetypes:pdf|doc|docs limit:1024кb]

В мегабайтах
[file your-file filetypes:pdf|doc|docs limit:1mb]

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

Плагины для плагина

Contact form 7 имеет неплохую базу, но её можно расширить за счёт нескольких дополнений и сделать его поистине классным и мощным инструментов.

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

Advanced Contact form 7 DB

По умолчанию CF пересылает данные с заполненной формы на почту и все. Если что-то случилось с почтой или письмо вдруг потерялось / удалилось, то его уже не вернуть.

Данный плагин устраняет это проблему, добавляя специальную базу данных по заполненным формам. Она доступна через административную панель.

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

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

Базу данных можно экспортировать в форматы CSV, Excel (.xls) и PDF. Здесь хочу отметить, что сохранение в pdf имеет проблемы с отображением кириллицы, поэтому лучше использовать экспорт в xls. В csv тоже вариант сохранять, поскольку плагин может также импортировать в этом формате.

Плагин в официальном репозитории.

Conditional Fields for Contact Form 7

Этот плагин — просто спасение, когда нужно сделать поля в форме, которые появляются (или исчезают) в зависимости от того, как и какие поля заполнились.

Использование крайне простое — обернуть поля в специальный тег:

[group group-1]
    [group group-inside-1]
        <! Здесь отображаются поля >
    [/group]
[/group]

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

Теперь смотрим, как это будет выглядеть для посетителей сайта:

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

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

Плагин в официальном репозитории.

Contact Form 7 — Dynamic Text Extension

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

Добавляет два новых типа поля:

• [dynamictext $field_name] — обычное текстовое поле
• [dynamichidden $field_name] — скрытое текстовое поле, которое не будет видно для пользователя

Он может указывать ID, slug или url поста или страницы, с которой была отправлена форма. Может получить информацию о блоге, пользователе, заполнить значение из кастомного поля, узнать реферальную ссылку (адрес, с которого пришёл пользователь.

Получим название страницы:
[dynamichidden title "CF7_get_post_var key='title'"]

Получим slug страницы:
[dynamichidden slug "CF7_get_post_var key='slug'"]

Получим URL-адрес заполнения формы:
[dynamichidden url "CF7_URL"]

Получим значение кастомного поля:
[dynamictext dynamicname "CF7_get_custom_field key='custom_field'"]

Получим реферальную ссылку:
[dynamictext dynamicname “CF7_referrer”]

Кроме того, плагин позволяет получать значения из GET/POST переменных. Для использования в различных лендингах с UTM-метками — незаменимое (практически) дополнение. Допустим, мы имеем на руках посадочную страницу с таким адресом:

mysite.ru/?utm_source=partnersite&utm_medium=adbanner&utm_campaign=promo

Здесь есть три популярные UTM-метки:

• utm_source — передаёт адрес или название источника, откуда пришёл пользователь или лид (lead);
• utm_medium — канал трафика или элемент на источнике, повлиявший на пользователя, благодаря чему он оказался на нашем сайте (чаще всего это реклама, email-рассылка или баннер);
• utm_campaign — собственно, название рекламной компании.

Эти метки позволяют нам анализировать реакцию пользователя на размещённую рекламу и в дальнейшем оптимизировать затраты на проведение рекламной кампании.

Мой внутренний эффективный менеджер

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

Разберем пример с одной меткой — нам нужно добавить в форму информацию о utm_source:

[dynamichidden utmsource “CF7_GET key=’utm_source'”]

Собственно, вот и всё. Обращу ваше внимание, что в зависимости от типа запроса — GET или POST — часть в коде нужно указывать как CF7_GET или CF7_POST соответственно.

Плагин в официальном репозитории.

Вместо заключения

Contact Form 7 вместе с данными плагинами использую сам и советую использовать. За несколько лет использования нареканий практически не вызывал (кроме моих специфических хотелок).

На WordPress от версии 5 с Gutenberg’ом на борту работает отлично, при обновлении ничего не отвалилось.

Надеюсь, что мой небольшой обзор по плагинам был полезен для вас.

До встречи на Веб-островах.