Плагин WordPress Contact Form 7

По-большей части — это или примитивы узкой направленности, результат которых можно получить парой-тройкой строчек кода в шаблоне или монстры вроде All in one SEO Pack, без которых можно прекрасно прожить, но с которыми как-то спокойнее. Я в скором времени опубликую свой must have плагинов, но сегодня мне бы хотелось остановиться лишь на одном из них. Плагин без которого на протяжении уже нескольких лет не обходится ни один из разрабатываемых мною сайтов.

Итак, встречаем! Плагин WordPress Contact Form 7 (WPCF7). Если вы о нем еще не слышали — вы многое пропустили. WPCF7 позволяет с легкостью генерировать и внедрять на сайт формы практически для любых повседневных нужд: от банальных форм обратной связи до сложных форм заказа. Плагин неоднократно был протестирован на проектах самой разной сложности и показал себя с самой лучшей стороны. Плагин ведет себя корректно как на простейших визитках, так и на тяжеленных премиумах. WPCF7 отличает от аналогов достаточно широкий функционал и простота использования. Вы можете генерировать неограниченное количество форм и вставлять их в любое место своего сайта с помощью шорткодов.

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

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

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

Использовать подписи к полям не обязательно. Если вы верстаете свой сайт в соответствии со спецификациями HTML5, вы можете не использовать подписи Label (как в дефолтном примере), а воспользоваться замечательной опцией Placeholder. Для этого укажите значение по-умолчание и поставьте галочку «Использовать как placeholder» и следуйте инструкциям ниже: скопируйте сгенерированные шорткоды в соответствующие окна шаблонов формы (слева) и письма (ниже). Шаблон формы после этой процедуры должен выглядеть примерно так:

[tеxt name placeholder "Ваше имя"]
[tеxt address placeholder "Адрес"]

А шаблон письма так:

Имя: [name]
Адрес: [address]

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

[tеxt* name placeholder "Ваше имя"]

или так:

[tеxt* address placeholder "Адрес"]

Идем дальше. Для номера телефона и адреса электронной почты предусмотрены специальные шорткоды: [tel] и [email]. Я рекомендую использовать именно их, т.к. автоматически вызывается валидация. Выглядеть это должно примерно так:

[email email placeholder "E-mail"]
[tel phone placeholder "Номер телефона"]

Город будет правильнее выбирать из выпадающего списка. Тем более, если вы работаете с определенным списком регионов. Для этого воспользуемся шорткодом [select]. Выглядит это примерно так:

[select city include_blank "Москва" "Санкт-Петербург" "Екатеринбург" "Новосибирск" "Нижний Новгород"]

Include_blank в данном случае делает первый первый пункт списка пустым, чтобы по-дефолту не установился первой по-списку город. Напомню, что звездочкой (*) можно пометить обязательность заполнения поля. Аналогичным образом можно сделать выбор цвета, двигателя и коробки:

[select color "Белый" "Черный" "Серебристый"]
[select engine "Бензин" "Дизель"]
[select transmission "МКПП" "АКПП"]

А вот для выбора кондиционера будет логичнее использовать просто галочку [checkbox]:

[checkbox cond "Кондиционер"]

Любая форма на сайте рано или поздно попадет под пристальное внимание спам-роботов. И вам нужно быть к этому готовым, чтобы не погрязнуть в спаме. WPCF7 хорош тем, что он поддерживает капчу, которую аналогично полям можно установить абсолютно в любую форму. Но для этого нужно прежде установить еще один плагин под названием «Really Simple Captcha». Для интеграции капчи в форму используйте шорткоды:

[captchac security] — выводит картинку с кодом проверки;
[captchar security] — выводит поле для ввода кода с картинки.

И в завершении, устанавливаем кнопку отправки формы. Делается это с помощью шорткода [Submit]:

[submit "Отправить"]

В конечном счете шаблон вашей формы должен приобрести примерно такой вид:

<h2>Контактная информация:</h2>
[tеxt name placeholder "Ваше имя"]
[email email placeholder "E-mail"]
[tel phone placeholder "Номер телефона"]
[select city include_blank "Москва" "Санкт-Петербург" "Екатеринбург" "Новосибирск" "Нижний Новгород"]
[text address placeholder "Адрес"]
<h2>Выбор опций:</h2>
[select color "Белый" "Черный" "Серебристый"]
[select engine "Бензин" "Дизель"]
[select transmission "МКПП" "АКПП"]
[checkbox cond "Кондиционер"]
<h2>Введите код с картинки:</h2>
[captchac security]
[captchar security]
[submit "Отправить"]

А шаблон письма такой:

Имя: [name]
Электронная почта: [email]
Номер телефона: [phone]
Город: [city]
Адрес: [adress]
Цвет: [color]
Двигатель: [engine]
Коробка передач: [transmission]
[cond]

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

Вместо [email protected] укажите свой адрес электронной почты.

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

Фото: Kenneth J Gill — Creative Commons / flickr.com