Письмо редактору contact form id d 1186. Плагины формы обратной связи для WordPress

События DOM

Отслеживая события DOM, вы можете сделать что-либо в нужный момент при работе с формой. К примеру, после успешной отправки формы сказать "Спасибо" в всплывающем окне или перенаправить пользователя на другую страницу.

Список событий формы

Wpcf7invalid Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , потому что были поля с недопустимым вводом. wpcf7spam Срабатывает, когда форма успешно была отправлена на сервер, но почта не была отправлена , поскольку обнаружена возможная активность спама. wpcf7mailsent Срабатывает, когда форма успешно была отправлена на сервер и почта отправлена адресату. wpcf7mailfailed Срабатывает, когда форма успешно была отправлена на сервер, но отправить почту не удалось . Это может быть в следствии того, что на хостинге не работает почтовый сервер. wpcf7submit Срабатывает, когда форма успешно была отправлена на сервер, независимо от других инцидентов. Нажали кнопку "Отправить" - сработало этой действие. wpcf7beforesubmit Срабатывает раньше события wpcf7submit , что позволяет провести любые манипуляции с formData - данными формы, которые будут отправлены на сервер. Событие добавлено в CF7 v4.9.

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

Примеры для события wpcf7submit

Код ниже - простой пример регистрации обработчика события. В этом примере функция прослушивает событие wpcf7submit у контейнера с классом wpcf7 и просто выдает предупреждение при его возникновении, то есть при клике по кнопке "Отправить" сразу вызывает сообщение "Опачки, меня пытаются отправить... в Магадан!". Заметьте, что элемент с классом wpcf7 - это DIV с формой внутри, всё это плагин генерирует самостоятельно. Если у вас на странице несколько форм, код отработает только для первой найденной формы . Конечно, вы замените ненужный alert() на более полезное действие, к примеру, красивой анимацией отправки формы.

// Ищем блок с формой, имеющий класс wpcf7 (его имеют все div с формой) var wpcf7Elm = document.querySelector(".wpcf7"); // Мониторим событие wpcf7submit у выбранного блока wpcf7Elm.addEventListener("wpcf7submit", function(event) { alert("Опачки, меня пытаются отправить... в Магадан!"); // Либо что-то более полезное }, false);

Если вам захочется мониторить какую-то определенную форму (ниже по статье будут альтернативные решения, более рациональные), то укажите ID контейнера:

// Ищем уникальный блок с формой по его ID var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Тут мониторинг события wpcf7submit , как в предыдущем примере.

Примеры выше рассчитаны на работу с одной формой. Если на странице несколько форм и надо мониторить событие wpcf7submit (или другие) у всех, то вешаем событие не на отдельный блок, а на весь document:

Document.addEventListener("wpcf7submit", function(event) { alert("Кто-то отправил форму! Какую именно? Пока не знаю."); }, false);

Как отследить введенные данные в поля

Пользовательские данные передаются обработчику события как свойство detail.inputs объекта события. Структура данных detail.inputs представляет собой массив объектов, и каждый объект имеет свойства имени и значения. Допустим у формы 4 поля. Используем код:

Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; console.log(inputs); }, false);

При нажатии кнопки "Отправить" в консоле браузера отобразится структура данных:

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

Перебрать каждое поле и отреагировать на определенное можно так:

Document.addEventListener("wpcf7submit", function(event) { var inputs = event.detail.inputs; // Ищем поле с именем your-name и злоупотребляем alert"ом при нахождении поля for (var i = 0; i < inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

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

Detail.contactFormId ID контактной формы. Данный ID можно увидеть в админке в адресной строке при редактировании формы или в самом шоткоде формы. detail.pluginVersion Версия плагина Contact Form 7. detail.contactFormLocale Языковой код формы. К примеру, ru_RU . detail.unitTag Юнит-тег контактной формы. У каждой формы свой, к примеру wpcf7-f92-p95-o1 . detail.containerPostId ID поста, в контенте которого размещена форма.

Просмотреть все данные можно так:

Document.addEventListener("wpcf7submit", function(event) { console.log(event.detail); }, false);

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

Например, если вы хотите что-то сделать только с определенной формой контакта (ID = 123), используйте свойство detail.contactFormId, как показано ниже:

Document.addEventListener("wpcf7submit", function(event) { if ("123" == event.detail.contactFormId) { alert("Контактная форма с ID = 123."); // Делаем ещё что-нибудь } }, false);

Как бороться со спамом в плагине Contact Form 7? Предусмотрено несколько механизмов, но лишь пара являются популярными: reCAPTCHA и Akismet.

Как установить и настроить Akismet? При установке WordPress плагин Akismet устанавливается автоматически, остаётся его лишь активировать. Если по каким-то причинам его нет, то эти ссылки Вам помогут:

После активации плагина появится сообщение с предложением активировать вашу учётную запись:

При нажатии по кнопке вас перекинет на страницу настроек плагина:

Чтобы Akismet заработал, надо в настройках плагина указать API-ключ. Если его нет, то нажимайте кнопку "Получить API-ключ" и следуйте инструкциям:

• Регистрация на офф. сайте плагина с использованием аккаунта wordpress.com
• Выбор тарифного плана (есть бесплатный)
• Добавление сайта в админ-панель сервиса по нажатию кнопки "Activate this site"

Это простой и быстрый процесс. После активации сайта произойдёт редирект обратно в админку вашего сайта с уже готовыми настройками, их нужно сохранить:

Чтобы Akismet начал проверять поле, нужно при его генерации указать по какому правилу делать проверку, например:

Akismet:author Добавьте такой параметр в поле для ввода имени пользователя.
Пример: akismet:author_email Добавьте такой параметр в поле для ввода email пользователя.
Пример: akismet:author_url Добавьте такой параметр в поле для ввода ссылки от пользователя.
Пример:

Рекомендуется использовать параметр akismet:значение ко всем полям, которые предусматривают такую проверку. По собранным данным Akismet примет решение, спам это или нет, поэтому их полнота играет важное значение.

В Contact Form 7 есть несколько видов оформления извещений:

Зеленая рамка у извещения Сообщение отправлено успешно Жёлтая рамка у извещения Некоторые поля заполнены с ошибкой, валидацию поле не прошло Оранжевая рамка у извещения Сообщение отмечено как спам Красная рамка у извещения Отправка сообщения провалена

Теперь можно протестировать работу формы с Akismet защитой, вписав вместо имени пользователя "viagra-test-123". Сообщение с такими данными будет помечено как спам и отослано на почту не будет.

Изначально, вкладка с формами Contact Form 7 доступна всем пользователям с ролью участника (contributor) и выше. Редактировать формы могут только редакторы и администраторы. Как изменить права доступа к формам?

Параметры доступа изменяются с помощью констант, которые прописываются в корне движка в файле wp-config.php , например:

Define("WPCF7_ADMIN_READ_CAPABILITY", "manage_options"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "manage_options");

Право manage_options по умолчанию имеют администраторы и супер администраторы сайта. Поэтому данный пример даст доступ к списку форм и возможность их редактировать только пользователям с этими ролями. Другие роли не увидят вкладку плагина.

WPCF7_ADMIN_READ_CAPABILITY Минимальная роль или возможность для доступа к админке, то есть отображения меню и списка форм.
По умолчанию: edit_posts WPCF7_ADMIN_READ_WRITE_CAPABILITY Минимальная роль или возможность для редактирования форм. Этот параметр должен быть строже или такой же, как WPCF7_ADMIN_READ_CAPABILITY. Объясняется это тем, что нельзя редактировать формы, не имея доступа к админ-панели.
По умолчанию: publish_pages

Чтобы лучше понимать, как это работает, взгляните на код (CF7 v4.9.1, файл capabilities.php) с использованием этих констант:

Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); function wpcf7_map_meta_cap($caps, $cap, $user_id, $args) { $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_edit_contact_forms" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_read_contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_manage_integration" => "manage_options", "wpcf7_submit" => "read",); $meta_caps = apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_keys($meta_caps)); if (isset($meta_caps[$cap])) { $caps = $meta_caps[$cap]; } return $caps; }

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

По умолчанию Array ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => read) После изменения, к примеру, с помощью констант Array ( => manage_options => manage_options => manage_options => manage_options => manage_options => read)

Благодаря фильтру wpcf7_map_meta_cap , мы может изменить данный массив. Этот способ избавляет нас от редактирования файла wp-config.php , но придется писать код, к примеру, в файле functions.php:

Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); function change_wpcf7_map_meta_cap($meta_caps) { // Новые значение возможностей $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_read_contact_forms" => "manage_options", "wpcf7_delete_contact_form" => "manage_options",); return array_replace($meta_caps, $replace_caps); }

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

Так выглядят чекбоксы по умолчанию:

Но если передать в тег чекбокса параметр label_first , отображение лейбла относительно флажка измениться на обратное:

Чтобы выстроить чекбоксы в столбик, добавьте строку стилей в CSS файл темы:

Span.wpcf7-list-item { display: block; }

Чтобы выстроить чекбоксы как таблицу, добавьте строку стилей в CSS файл темы (дополнительно использовался параметр label_first):

Span.wpcf7-list-item { display: table-row; } span.wpcf7-list-item * { display: table-cell; }

По умолчанию Contact Form 7 загружает JavaScript и CSS на всех страницах сайта, независимо где используется форма. Технически плагин не может работать иначе, но ему можно «подсказать».

Существует константа WPCF7_LOAD_JS со значением по умолчанию true , которая определена в коде плагина и отвечает за загрузку JavaScript на всех страницах сайта. Её можно переопределить, вставив в файл wp-config.php код:

Define("WPCF7_LOAD_JS", false);

Этот код отменит загрузку скриптов плагина.

И такая же константа есть для стилей WPCF7_LOAD_CSS , которая работает по тому же принципу - отменяет загрузку стилей плагина:

Define("WPCF7_LOAD_CSS", false);

С версии плагина 3.9 и выше, можно отменить загрузку JavaScript и CSS через хуки в functions.php:

Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

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

Например, у нас есть страница "Контакты" с формой. За вывод страницы отвечает файл contact.php . Тогда, воспользуемся кодом:

If (function_exists("wpcf7_enqueue_scripts")) { wpcf7_enqueue_scripts(); } if (function_exists("wpcf7_enqueue_styles")) { wpcf7_enqueue_styles(); }

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

Есть более гибкий метод, позволяющий указать, на каких страницах подключать скрипты. Данный код нужно вставить в functions.php:

Сначала отменяем подключение JS и CSS, а затем подключаем обратно только тогда, когда срабатывает шорткод формы. Тем самым файлы подключатся только на тех страницах, где есть шорткод формы.

Function wpcf7_remove_assets() { add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); } add_action("wpcf7_init", "wpcf7_remove_assets"); function wpcf7_add_assets($atts) { wpcf7_enqueue_styles(); return $atts; } add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

Код можно оформить как плагин или вставить в functions.php темы.

Есть простой способ отслеживать события формы через Google Analytics.

Во-первых, убедитесь в наличии кода от Google Analytic, выглядит он примерно так:

(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o);a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,"script","//www.google-analytics.com/analytics.js","ga"); ga("create", "UA-XXXXX-Y", "auto"); ga("send", "pageview");

Если код Аналитики есть или после его установки, в систему можно отправлять данные, за которыми затем можно следить в админке Google Analytics. Подробнее об этом читайте в официальной документации об отслеживании событий .
К примеру, нужно отследить отправку форму, для этого нужно выполнить такой код:

Ga("send", "event", "Contact Form", "submit");

Последним шагом является вставка этого фрагмента в код JavaScript в заголовок HTML ( ) каждой страницы. Вы можете для этого отредактировать шаблон header.php вашей темы, или вы можете использовать на хуке wp_head functions.php.

document.addEventListener("wpcf7mailsent", function(event) { ga("send", "event", "Contact Form", "submit"); }, false);

А так можно отслеживать успешную отправку каждой отдельной формы:

Document.addEventListener("wpcf7mailsent", function(event) { if ("123" == event.detail.contactFormId) { ga("send", "event", "Contact Form 123", "submit"); } if ("253" == event.detail.contactFormId) { ga("send", "event", "Contact Form 253", "submit"); } }, false);

Теперь, при успешной отправке формы вы будите видеть это событие в админке Google Analytics (Поведение -> События -> Обзор). Возможно, данные появятся там не сразу после совершения события, а после 24-48 часов.

Представим, что у вас небольшая веб-студия с персоналом: сеошник, продажник и техподдержка. Как с помощью одной формы отправить информацию кому-то из них лично? На помощь придёт поле select (выпадающий список)! Задача решается в два этапа.

1 этап - добавление тега в шаблон формы:

2 этап этап - вставка в поле "Кому" тег , который при отправке письма будет брать из нашего выпадающего списка выбранную пользователем почту и подставлять в поле.

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

[email protected] [email protected] [email protected]

Как видно, адреса электронной почты "хранятся" в открытом виде. Этим могут воспользоваться вездесущие спамеры. Но не после маленькой хитрости... Модернизируем наш тег так:

Здесь мы передавали параметр через так называемую трубу (прямой слеш) по правилу имя|значение. В итоге получили следующую html структуру на выходе:

Сеошник Продажник ТехПоддержка

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

Усложним задачу еще...

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

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

Итак, первая копия приходит сеошнику и тот понимает о чем речь в сообщении. А вот менеджер не понимает, какому специалисту было адресовано письмо, ведь он может не до конца разбираться в теме или не помнить все почтовые адреса специалистов. Возникает потребность в шаблоне письма использовать не только значение поля (в нашем случае адреса электронной почты), но и заголовок пункта (название специалиста)? Для этого плагин предоставляет нам тег [_raw_{field name}] , где {field name} - название нашего поля. Подытожим употребление тегов:

Значение поля, которое в шаблоне письма преобразуется в значение выбранного пункта (адрес электронной почты в нашем примере, то есть [email protected]) [_raw_your-recipient] имя поля, которое в шаблоне письма преобразуется в имя (заголовок) выбранного пункта (название специалиста в нашем примере, то есть Сеошник)

Если данный функционал не нужен, то его можно отключить, вписав следующий код в файл wp-config.php:

Define("WPCF7_USE_PIPE", false);

Contact Form 7 во вкладке с настройкой шаблона письма имеет поле для отправки дополнительных заголовков (Additional Headers) по правилу название-заголовка: значение. Каждый заголовок должен идти с новой строки.

Рассмотрим самые популярные - Reply-To , Cc и Bcc , об остальных читайте на Википедии .

Reply-To Имя и адрес, куда следует адресовать ответы на это письмо. К примеру, вы в форме попросили пользователя указать его email. Используйте его, чтобы почтовый клиент сразу знал, на какой email надо отправить ответ. Cc (от англ. carbon copy) содержит имена и адреса вторичных получателей письма, к которым направляется копия. Bcc (от англ. blind carbon copy) содержит имена и адреса получателей письма, чьи адреса не следует показывать другим получателям.

Contact Form 7 автоматически использует перевод того языка, который вы используете в админке. Меняется язык в Настройки -> Общие -> Язык сайта (выпадающий список). Но так изменится язык для всего сайта. А что делать, когда у вас авторы говорят на разных языках?

Для этого разработчики предлагают использовать плагин Bogo , который для каждого пользователя даёт возможность переключать язык админки. После активации в тулбоксе рядом с вашим ником появится переключение языков.

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

Данные теги будут работать только в контенте поста. Если форма в модальном окне, в сайдбаре, футере или хедере, встроена в шаблон темы, то есть вне контента поста - они не сработают.

[_post_id] Будет заменен на ID поста, в контенте которого отображена форма. [_post_name] Будет заменен на имя (slug) поста, с которого была отправлена форма. [_post_title] Будет заменен на название (заголовок) поста, с которого была отправлена форма. [_post_url] Будет заменен на ссылку (url) поста, с которого была отправлена форма. [_post_author] Будет заменен на имя автора поста, с которого была отправлена форма. [_post_author_email] Будет заменен на email автора поста, с которого была отправлена форма.

[_site_title] Будет заменен названием сайта (указывается в Общих настройках). [_site_description] Будет заменен описанием сайта (указывается в Общих настройках). [_site_url] Будет заменен адресом сайта (указывается в Общих настройках). [_site_admin_email] Будет заменен на адрес e-mail сайта (указывается в Общих настройках).

Эти теги предоставляют информацию о текущем зарегистрированном пользователе .

Теги [_user_*] работают только тогда, когда Отправитель имеет учетную запись и авторизовался. Если форму отправит неавторизованный пользователь, то эти теги вернут пустой результат и смысла от них не будет. Рекомендуется включить режим " ", чтобы форма отображалась только для зарегистрированных пользователей.

Если нужно использовать эти теги, и при этом не нужно использовать опцию "только для подписчиков" (subscribers_only: true), вам нужно включить nonce опцию. Если всего этого не сделать, данные авторизованных юзеров будут сброшены через WP REST API и указанный тег будет пропущен (заменен на пустую строку).

[_user_login] Будет заменен на логин пользователя. [_user_email] Будет заменен на email пользователя. [_user_url] Будет заменен на URL сайта пользователя. [_user_first_name] Будет заменен на имя пользователя. [_user_last_name] Будет заменен на фамилию пользователя. [_user_nickname] Будет заменен на ник пользователя. [_user_display_name] Будет заменен на отображаемое имя пользователя.

Указывает плагину, проверять nonce (защитный код) или нет. С версии плагина 4.9 эта константа стала иметь значение false , то есть "не проверять". Вернуть проверку можно установив значение константы в true или с помощью хука

Add_filter("wpcf7_verify_nonce", "__return_true");

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

document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);

Смотрите пункт "События DOM", чтобы разобраться, как это работает.

Если вы страдаете от наплыва спама или нежелательных сообщений, а CAPTCHA или Akismet не справляются, то выручить может встроенный в движок функционал "Черный список".

Черный список находится в админке по пути Настройки -> Обсуждение.

Если сообщение, отправляемое через Contact Form 7, содержит какие-либо из этих слов в своём тексте, имени автора, URL, адресе e-mail или IP - оно будет помечено, как спам, и отправлено не будет. Каждое слово или IP с новой строки. Используется поиск по подстроке, то есть по слову «купи» будет найдено «купить».

Как узнать IP-адрес, с которого приходит спам через форму Contact Form 7? Самый простой способ заключается в использовании специального тега [_remote_ip] . Данный тег вставляется в шаблон письма и будет заменен на IP-адрес отправителя при отправке письма.

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

Какой CSS редактировать чтобы изменить внешний вид формы?

Все стили, которые отвечают за внешний фид форм, хранятся в файле плагина contact-form-7/includes/css/styles.css . Изменять этот файл - плохая идея, так как при обновлении плагина файл заменится и вы потеряете все изменения. Тоже самое относится и к публичным темам, которые также обновляются, как и плагины.

Поэтому чтобы изменить стили, нужно выбрать файл стилей, который не будет обновляться. Это может быть файл стилей дочерней темой . Или можно воспользоваться настройками темы, которые позволяют вставлять CSS код в специальное поле.

Если у вас своя тема, то можно изменить (перебить) стили Contact Form 7 в стилях темы.

Стили полей в Contact Form 7

Плагин поддерживает множество типов полей, но самый распространенный тип поля - текстовый. Чтобы задать такому полю стиль, нужно обратиться к нему по типу:

Wpcf7 input{ background-color: #fff; color: #000; width: 50%; }

В форме мы часто используем не одно поле, потому давайте пропишем свойства сразу нескольким:

Wpcf7 input, .wpcf7 input, .wpcf7 textarea{ background-color: #fff; color: #000; width: 50%; }

Вышеперечисленные стили будут применены ко всем полям и формам плагина Contact Form 7 на это указывает селектор.wpcf7 . Подробнее о селекторах .

Стиль для определенного поля

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

Теперь в CSS, благодаря идентификатору, мы можем обратиться только к этому полю:

#very-special-field{ color: #f00; border: 1px solid #f00; }

Стиль формы

Про стили полей поговорили, а как добавить оформление самой форме? Воспользуемся уже известным нам классом wpcf7 , который добавляется ко всем формам плагина:

Wpcf7{ background-color: #f7f7f7; border: 2px solid #0f0; }

При отправке формы, если обязательное поле не заполнено или не прошло првоерку, Contact Form 7 отобразит сообщение об ошибке. Эти сообщения можно настроить.

Изменение текста

Текст той или иной ошибки, уведомления можно изменить. Например, при отправке формы с незаполненным обязательным полем появляется сообщение "Поле обязательно." Чтобы изменить текст этого сообщения, откройте редактирование формы, вкладку "Уведомления при отправке формы ". Если нужно изменить текст ошибки для каждого поля в отдельности, то стоит обратить внимание на плагин Contact form 7 Custom validation .

Статическое или плавающее сообщение?

Как говорят, лучше один раз увидеть, чем сто раз услышать, потому смотрите:

Статический стиль сообщений

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

Плавающий стиль сообщений

Сообщения об ошибках отображаются ниже поля в стиле подсказки. Подсказка исчезает при наведении на неё или при фокусе в поле, к которому эта подсказка относится.

Плавающий стиль для нужного поля

Чтобы задать плавающий стиль определенному полю, нужно обернуть его в блок с классом use-floating-validation-tip:

Плавающий стиль для всех полей

Чтобы не оборачивать каждое поле в блок с классом use-floating-validation-tip , можно "попросить" плагин сделать это за нас, указав в шорткоде формы атрибут html_class со значением use-floating-validation-tip:

Если используется не Ajax отправка (с перезагрузкой страницы), то независимо от настроек, будет использоваться статический стиль отображения ошибок.

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

Например:

Управлять такой "колбасой" сложно и вероятность допустить ошибку высока.

Для решения такой нелепицы есть плагин Listo , который предоставляет следующие списки:

• Страны - data:countries , data:countries.olympic
• Структурные подразделения США - data:us_subdivisions.states , data:us_subdivisions.districts
• Валюты - data:currencies
• Временные зоны

Contact Form 7 умеет работать с Listo (или наоборот этого никто не знает), который в свою очередь работает с полями: выпадающий список, чекбоксы и радио-кнопки. Благодаря такой связке не придётся болезненно редактировать длинные списки, а можно будет использовать короткие предопределенные параметры.

Как управлять параметрами длинного списка

К примеру, мы решили вывести список стран, для этого понадобится тег выпадающего списка :

Список пока пустой, мы не передали никаких параметров. Добавим их:

Всего один параметр и мы стали веганами - никакой "колбасы" с перечислением стран - за нас это сделал Listo.

Каждой форме можно указать доп. параметры во вкладке "Дополнительные настройки". Рассмотрим все такие настройки:

Режим "Только для подписчиков"

Subscribers_only: true

Данный режим (доступен с CF7 v7 4.9) позволяет отобразить форму только для зарегистрированных пользователей. Незарегистрированные пользователи увидят сообщение "Эта форма доступна только для зарегистрированных пользователей." и, соответственно, не смогут заполнить и отправить форму. Отличный способ избавиться от спама, если вам нужно принимать письма только от авторизованных пользователей.

Демо режим

Demo_mode: on

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

Пропустить письмо

Skip_mail: on

Параметр skip_mail работает почти так же, как demo_mode , но skip_mail пропускает только отправку сообщений. В отличие от demo_mode, skip_mail не влияет на другие действия, такие как сохранение сообщений с помощью Flamingo.

Принудительная проверка полей

Acceptance_as_validation: on

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

Запрет сохранения сообщений

Do_not_store: true

Этот параметр сообщает модулям хранения сообщений, таким как Flamingo , чтобы те не сохраняли сообщения через эту форму контакта.

Выполнение JavaScript кода

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

У нас есть настроенная и рабочая форма. И нужно, чтобы когда пользователь нажимает на кнопку "Отправить" и нам уходит письмо, форма пропадала, а на её месте появлялся текст "Отправлено!".

Делается это просто: для этого в дополнительных настройках плагина добавьте такую строку:

Document.addEventListener("wpcf7mailsent", function(event) { jQuery("#contactform").hide(); }, false);

где contactform - это ID формы которую нужно скрыть. Вместо #contactform можно указать другой селектор HTML элемента (формы), который нужно скрыть.

Как в теге select объединить похожие option в отдельные группы? Данный функционал может обеспечить html тег optgroup, но по умолчанию плагин Contact Form 7 это не умеет. Рассмотрим способы решения этой нестандартной для плагина задачи.

Данный способ подсмотрен на codepen.io и немного переработан. Суть способа в том, что JavaScript "считывает структуру тега select и преобразовывает в нужный формат. В примере будет рассмотрено поле для выбора движка:

Шаблон формы:

Имя поля выбрано engines , потому в шаблоне письма используем тег , чтобы на почту пришло выбранное пользователем значение.

Добавляем JavaScript

JQuery(document).ready(function($){ var selectEngines = $("select"); var foundin = $("option:contains("optgroup-")", selectEngines); $.each(foundin, function(value){ var updated = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll(""); }); $("option:contains("optgroup-"), option:contains("endoptgroup")", selectEngines).remove(); });

Данный код реализован на jQuery. Вставлять его следует в js файл темы или создать новый js и подключить . Так как имя тега было engines , то в этом коде указываем именно его, то есть select .

Оригинальный html код поля select

optgroup-Бесплатные движки Wordpress Joomla! Drupal Grav endoptgroup optgroup-Платные движки 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup

Обработанный html код поля select

Wordpress Joomla! Drupal Grav 1С-Битрикс DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop

Если у пользователя отключен JavaScript , то поле будет отображать все option. То есть даже те option, что должны были быть преобразованы в тег optgroup, станут видны как обычные option.

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

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

1. Создаем форму обратной связи с такими полями, какие нам нужны. Для верстки формы используем обычный HTML+CSS, спецтеги заключаются в квадратные скобки. Все это делается во вкладке "Шаблон формы" на странице настройки плагина Contact Form 7.

Форма заказа при этом выглядит таким образом (при заданном стиле класса order):

Теперь нам нужно обеспечить передачу TITLE и URL страницы в письме. См п.2.

2. Переходим в раздел "Письмо" и формируем шаблон письма. Чтобы передать служебную информацию, можно использовать следующие служебные теги:

• [_remote_ip] IP-адрес отправителя.
• [_user_agent] User Agent отправителя.
• [_url] URL-адрес контактной формы.
• [_date] Дата отправления.
• [_time] Время отправления.
• [_post_id] ID поста (записи) контактной формы.
• [_post_name] Имя поста (в схеме протокола HTTP).
• [_post_title] Заголовок записи с контактной формой.
• [_post_url] Ссылка на страницу отправки.
• [_post_author] Имя автора публикации.
• [_post_author_email] Адрес почты автора публикации.

Если вставить в шаблон письма теги [_post_tltle] и [_post_url], в нем будут указаны название страницы и ее адрес. Если название страницы совпадает с названием товара, то проблема передачи наименования товара адмнистратору сайта будет решена!

Вот пример шаблона письма, в котором передается название и URL страницы, с которой оформлялся заказ:

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

Понимаю, что это, конечно, не так изящно, как в "крутом" интернет-магазине, но у вас есть возможность связаться с клиентом и обсудить подробности заявки. Моему клиенту, собственно, именно это и требовалось.

Маленькая хитрость

Чтобы вставить код формы в произвольное место шаблона, в PHP-код можно добавить следующую строку:

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

• Все поля (теги) формы
• Как сделать обязательным одно из полей: почта или телефон
• Conditional Fields for Contact Form 7 аддон
• Contact form 7 Custom validation аддон

В предыдущей статье мы ознакомились с плагином Contact Form 7 и его настройками. А здесь, будут подробно рассмотрены все поддерживаемые типы полей (теги шаблона формы) и параметры каждого из них, а также стили (css классы) элементов формы. Это неофициальная документация ко всем тегам шаблона формы Contact Form 7.

Тип поля определяет вид элемента HTML формы: текстовый, «радио», «селект». Тип поля указывается в названии тега шаблона формы.

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

Также каждый тег (поле) имеет свои опции (атрибуты тега). Опции тега указываются после названия и имени поля. Для примера, добавим атрибут class для предыдущего поля text:

Синтаксис тега шаблона (поля) формы:

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

Атрибуты, которые можно применить только к конкретному тегу формы, будут указаны отдельно для каждого тега.

* Знак * сразу после типа поля делает поле обязательным для заполнения.
Пример: id(строка) Название идентификатора. css атрибут id, используется для оформления поля.
Пример: id:foo class(строка) Название класса. css атрибут class, используется для оформления поля.
Пример: class:bar
Можно указать несколько классов: minlength и maxlength(число)

Это HTML5 атрибуты, которые ограничивают ввод символов в поле, как по нижнему порогу (минимальному), так и по верхнему (максимальному). Пользователь не сможет ввести в поле меньше знаков (minlength) или больше знаков (maxlength), чем определено этими значениями.

Для minlength , если введённый текст будет меньше этого значения, то пользователь получит предупреждение "Поле слишком короткое". И наоборот для maxlength .

Примеры:
minlength:10 -
maxlength:90 -
оба сразу -

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

Данные параметры поддерживают следующие типы полей: text , textarea , email , url , tel , quiz .

Существует старая запись этих параметров:

Параметр maxlength в явном виде приоритетнее, поэтому если дописать maxlength:150 , то 140 будет переписано на 150.

Size(число) Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Может быть переопределено в CSS стилях с помощью атрибута width.
Пример: size:50 -
По умолчанию: 40 default(строка/число)

Значение поля по умолчанию.

Пример: default:значение.

Если пользователь, заполняющий форму, авторизован, то по умолчанию можно подставлять значение взятое из данных его профиля. Например, если указать атрибут default:user_email - , то в поле автоматически подставиться значение - «email текущего пользователя», который просматривает форму...

Остальные специальные поля атрибута default:

default:post_meta - получит значение метаполя ключ которого будет равен имени поля. Например: выведет поле формы в значении которого будет выставлено значение метаполя записи mymeta_key

default:get - выставит значение GET параметра c ключом равным имени поля: - http://example.com/?mykey=значение

default:post - выставит значение POST параметра c ключом равным имени поля: - в POST передаем данные mykey=значение.

default:shortcode_attr - выставит значение атрибута шорткода с ключом равным имени поля. Например тег шаблона формы такой: , тогда в шоркоде самой формы при вызове в контенте записи указываем атрибут mykey: . Подробнее читайте ниже.

Еще, нужно добавить название атрибута шорткода WordPress в белый список (потому что wordpress вырезает все неизвестные атрибуты шорткода...). Делается это через фильтр:

Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); function my_shortcode_atts_wpcf7($out, $pairs, $atts){ if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; }

Для checkbox, radio и select:

• default:номер - default:2 - выберет второй элемент списка...
• default:номер_номер - default:2_3 - выберет второй и третий элемент списка (для мульти-селектов и чекбоксов)...

Подробнее про default и его варианты, читайте в конце статьи.

Placeholder или watermark(строка)

Текст который будет показан в атрибуте placeholder.

Эту опцию нужно использовать в конце всех опций тега шаблона: , а не

Можно использовать watermark вместо placeholder - это синоним (алиас) атрибута.

Akismet(строка)

Спам защита. Требует установленного и активированного плагина Akismet .

• akismet:author -
• akismet:author_email -
• akismet:author_url -

Как это работает? При отправки данных, значения указанных полей будут обработаны на сервере akismet и если они не пройдут проверку, то письмо не будет отправлено, а пользователь увидит ошибку:

Сообщение исчезнет при фокусе на любом из полей.

Ниже описаны все теги плагина, которые можно использовать в шаблоне формы. Такие теги превратятся в input , textarea и select элементы HTML.

К текстовым полям относятся типы: text , email , url , tel , textarea , а также тег count тесно связан именно с текстовыми полями.

К числовым полям относятся два типа: number и range . Это HTML5 поля, потому старые браузеры их не поддерживают, взамен отображая текстовое поле (text).

Поле для текста в одну строку.

Поддерживаемые опции (атрибуты):

• class
• minlength и maxlength
• size
• placeholder
• default - можно использовать: user_login, user_first_name, user_last_name, user_nickname, user_display_name
• akismet:author

Поле предназначено для ввода email.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder
• akismet:author_email
• default:user_email или default:любая@почта.ру

Поле для ввода интернет адреса (URL).

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder
• akismet:author_url
• default:user_url или default:значение

Поле для ввода номера телефона.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• size
• placeholder

Поле для ввода многострочного текста.

Поддерживаются атрибуты:

• class
• minlength и maxlength
• placeholder
• (cols)x(rows) - где cols - ширина поля в символах, а rows - высота поля в строках текста. Имеет 3 формата: (cols)x(rows) , (cols)x и x(rows) .

Для textarea значение поля можно указать двумя способами:

Если в textarea будут html теги, то после отправки формы вы, возможно, получите 500 ошибку сервера!

Тег count позволяет установить счетчик, когда нужно показать пользователю, сколько введено символов или сколько символов осталось до максимального значения (если параметр maxlength).

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

Тег счётчика можно использовать в любом месте шаблона формы.

Например, у нас есть текстовое поле для сообщения:

Тогда делаем так:

Поле ограничено - минимум 10 и максимум 140 символами. В данном случае счётчик будет показывать сколько всего введено символов.

Иногда удобнее показать сколько символов осталось ввести, ведь пользователь не знает об ограничении по максимуму. Для этого в теге нужно указать опцию down - .

Поле для ввода числа. При фокусе в поле значения можно изменять вращением колесика мыши.

Поддерживает атрибуты:

• class
• placeholder
• min
• max

Ползунок для выбора чисел в указанном диапазоне.

Поддерживает атрибуты:

• class
• placeholder - отображаются только в браузерах, не поддерживающих данный тип поля и отображающих взамен текстовое поле.
• min - Устанавливает нижнее значение для ввода числа: min:20
• max - Устанавливает верхнее значение для ввода числа: min:100
• step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел: min:5

• Радиокнопки - это переключатели, позволяющие выбрать только один вариант из нескольких.
• Чекбоксы - это флажки, позволяющие выбрать сразу несколько вариантов.

Поддерживаемые атрибуты:

• default - Значение поля по умолчанию, к примеру default:2 означает, что при отображении поля второй вариант ответа будет уже выбран. Для чекбоксов можно указать несколько значений подобным образом default:1_2_3

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

  use_label_element - Оборачивает чекбокс или радио-кнопки в label, что позволяет делать выбор элемента кликнув по его названию.

  exclusive - Указав этот параметр, у чекбокса можно будет выбрать только 1 элемент. Данный функционал работает на основе JavaScript. Радио-кнопки не поддерживают опцию в силу своей специфики.

  free_text - Позволяет добавить к последнему элементу текстовое поле. Оно становится доступным к заполнению при выборе последнего элемента и пользователь может дополнить свой ответ.

• data - Получает значение из листа со странами мира, к примеру data:countries .

China India San Marino

Позволяет выбрать варианты ответа из выпадающего списка. Может использоваться в двух вариантах:

Атрибуты:

• class
• default - default:2 или default:2_3_4
• multiple - Позволит выбрать несколько вариантов ответа
• include_blank - Добавит первым вариантом ответа строку "- - -"
• first_as_label
• data
• items - варианты ответов

Пункт 1 Пункт 2 Пункт 3

Поле для выбора календарной даты. Это HTML5 тип, не поддерживается старыми браузерами.

Атрибуты:

• class
• placeholder
• min - Нижнее значение возможной даты, например min:2016-01-01 . Поддерживается относительный формат даты, например today+10days , today-2weeks и так далее.
• max - Верхнее значение возможной даты, например min:2017-01-01 . Поддерживается относительный формат даты, как и у min .
• step - Шаг изменения даты в днях, например step:3 . Если нижнее значение 2016-01-01 и шаг 3, то при следующем шаге отобразиться дата 2016-01-04 и так далее.

При вставке тега в шаблон письма, на почту придет дата в формате YYYY-MM-DD (2016-12-25) - это не наглядно. Поэтому можно указать более наглядный шаблон, для этого используйте конструкцию [_format_{field name} "{date format}"]

[_format_your-date "D, d M y"]

Contact Form 7, начиная с версии 4.3, в связке с сервисом reCAPTCHA позволяет бороться со спамом. Чтобы пользоваться reCAPTCHA нужно иметь аккаунт в Google, где можно получить ключи для использования API сервиса.

Чтобы получить эти ключи, нужно:

Атрибуты:

• class
• theme - Цветовая схема виджета. Может быть dark или light (по умолчанию).
• size - Размер виджета. Может быть compact (компактный) или normal (по умолчанию).

Теперь в шаблоне формы используйте тег .

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

Атрибуты:

• class
• size - Размер поля и его длина. Одно из значений может быть опущено.

На какой планете Вы живёте?

Из примера видно, что вопрос и ответ разделяется знаком | . Вопрос и ответ можно писать абсолютно любой, например математический:

Можно указать несколько пар вопрос-ответ, вопрос будет выбран случайно каждый раз при показе формы:

Для этого поля можно указать параметры minlength и maxlength:

При создание тега quiz с несколькими вопросами при помощи генератора пишите каждую пару вопрос-ответ с новой строки.

Скрытое поле - не видно пользователю. Может хранить в себе ценную информацию. Информация может быть добавлена с помощью Javascript или создана с помощью опции default .

Атрибуты:

• class
• default - Сюда можно передать параметр, который будет преобразован по определенному правилу. Подробнее читайте в описании атрибута (опции в начале статьи).

Кнопка отправки данных формы (сабмита). При нажатии на эту кнопку происходит отправка всех данных формы на сервер.

Атрибуты:

• class

Можно указать текст кнопки:

Пример использования всех поддерживаемых параметров:

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

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

В этом случае мы потеряем тег , потому что он добавляется через JS, после элемента с классом wpcf7-submit - обычно такой класс имеет стандартная кнопка сабмита.

Чтобы обойти это ограничение, можно просто добавить этот класс к нашему HTML коду кнопки:

Все. Теперь тег будет добавляться и работать как надо.

Или можно добавить тег прямо в шаблон формы.

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

Атрибуты:

• class
• invert - Параметр, делающий чекбокс сразу с флажком, но чтобы отправить форму пользователю надо его убрать.
• default - Делает по умолчанию чекбокс сразу с флажком, если указать on , пример default:on , по умолчанию же default:off .
• optional - поле становится не обязательным.

Разрешаю использовать моё имя в комментариях.

Разрешаю использовать моё имя в комментариях.

Поле является чекбоксом, который обрабатывается с помощью такого JavaScript:

This.find(".wpcf7-acceptance").click(function() { $(this).closest("form").wpcf7ToggleSubmit(); });

Изначально у кнопки отправки формы присутствует атрибут disabled="disabled" . Т.е. если чекбокс не активный, то кнопка отправки формы тоже неактивна, а значит и отправить её нельзя. При установки флажка в чекбоксе, скрипт убирает этот атрибут и кнопка становится активной.

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

Acceptance_as_validation: on

Так, если пользователь не поставит флажок, получит уведомление:

С помощью этого поля можно разрешить пользователям прикреплять к письму свои файлы.

Добавление такого функционала состоит из двух этапов:

Атрибуты:

• filetypes - Тип файла, который разрешен для загрузки, например pdf, jpg и другие (полный список ниже), указываемые через разделитель | (прямая черта), если требуется указать несколько типов.

• limit - Ограничение загружаемого файла по размеру, например: limit:1048576 , limit:1024kb , limit:1mb . Вы можете использовать kb (килобайты) или mb (мегабайты).

Допустимые типы файлов: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv .

Макс размер файла по умолчанию: 1 MB (1048576 байт).

На 1 этапе было создано поле, у которого есть имя - your-file . Теперь используем тег с этим именем в шаблоне письма, но не в привычном поле "Тело письма", а в поле "Прикреплённые файлы".

В поле "Прикреплённые файлы" вставляете только тег с именем поля из шаблона формы.

• - правильно
• - неправильно

Если несколько полей для загрузки файлов, то в поле "Прикреплённые файлы" перечисляете их друг за другом без каких-либо разделителей: .

Contact Form 7, начиная с версии 3.5, поддерживает передачу локальных файлов в письмо. Для этого наряду со вставкой тегов в поле прикрепления файлов нужно передать путь к вашему файлу:

/home/you/dir/dir/dir/fantasticpicture.jpg uploads/2013/08/08/boringguide.pdf

Если указан не абсолютный путь, то будет рассматриваться относительный от папки wp-content .

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

Если проверка прошла успешно, то плагин:

По умолчанию папка с временными файлами находится тут: wp-content/uploads/wpcf7_uploads . Может отличаться, если изменен путь к папке uploads .

Папка wpcf7_uploads создается автоматически. Но бывают случае, когда это невозможно - родительская папка uploads не имеет прав на запись. Тогда вам нужно:

Также, можно вообще изменить путь к временной папке плагина. Для этого откройте файл wp-config.php в корне сайта и добавьте константу WPCF7_UPLOADS_TMP_DIR , в которой укажите полный путь до папки с временными файлами:

Define("WPCF7_UPLOADS_TMP_DIR", "/your/file/path");

Указывая индивидуальный путь к папке с временными файлами, убедитесь, что она существует и имеет права на запись (755). В противном случае загрузка файлов не будет работать, а значит они не будут прикреплены к письму.

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

Чтобы изменить это положение вставьте тег в то место шаблона формы, где должны быть уведомления:

Ваше имя (обязательно) Ваше сообщение

Если не ввести имя, то форма отправлена не будет и нас известят об ошибке:

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

Помните, что этому правилу подчиняются все уведомления, поддерживаемые плагином (успешная отправка, спам и т.д.).

Почти всем полям можно через атрибут default передать значение по умолчанию. Но что делать, когда надо передать динамические параметры? К примеру, с помощью GET запроса через URL.

Динамическое получение параметров работает на основе следующих опций тега:

Default:get HTTP GET переменные. Ключ параметра должен совпадать с именем поля формы. default:post HTTP POST переменные. Ключ параметра должен совпадать с именем поля формы. default:post_meta Значение произвольного поля записи в которой находится форма. Имя произвольного поля должно совпадать с именем тега. default:user_(поле пользователя) Речь идет о: default:user_email или default:user_nickname . Полный список таких значений приведен в след. пункте.

Пример тега текстового поля на основе GET запроса:

Пусть у нас есть страница contact , обратимся к ней с передачей GET параметра:

Http://example.com/contact/?your-name=Дмитрий

В результате значение нашего поля будет автоматом "Дмитрий".

Ещё пример: передача UTM меток в форму

Также, можно передать несколько мест, откуда хотелось бы получить значение:

Мы указали два источника значения по умолчанию (порядок определяет приоритет): сначала плагин пробует взять значение из адресной строки, если его нет, то из произвольного поля записи. Если значение есть в адресной строке, то значение произвольного поля игнорируется.

Когда вы создаете форму для авторизованных пользователей, то нет смысла заставлять их вписывать значения, которые уже есть в их данных, например имя или email. В Contact Form 7 предусмотрен этот момент и можно получить данные из профиля пользователя.

Для этого нужно использовать специальные значения атрибута default для авторизованного пользователя. Рассмотрим все возможные варианты:

• default:user_login - Логин пользователя
• default:user_email - Электронная почта
• default:user_url - Адрес сайта
• default:user_first_name - Имя
• default:user_last_name - Фамилия
• default:user_nickname - Ник
• default:user_display_name - Отображаемое на сайте имя
• default:user_description - Описание (биография).
• default:user_* - где вместо * можно указать любое значение из данных пользователя (см. get_userdata()). Если оригинальные данные пользователя (ключ) начинаются не с user_ , то их нужно начать с user_ . Допустим, у юзера есть метаполе vk и нам нужно указать тут значение этого метаполя. Тогда пишем так: default:user_vk

Ваше имя: Ваш E-mail:

Один из зарегистрированных пользователей на сайте решил воспользоваться формой. Логично сразу подставить его имя в поле «Имя», ведь оно известно. Используем атрибут default:

Теперь, когда авторизованный пользователь зайдет на страницу с формой - его отображаемое имя (display_name) будет поставлено в поле your-name автоматом. А если на эту же страницу зайдет неавторизованный пользователь, то он увидит плейсхолдер "Введите ваше имя".

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

В этом случае, нужно использовать опцию тега default:shortcode_attr , которая «говорит» плагину получить в качестве дефолтного значение одноименное (с именем поля) значение атрибута шотркода.

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

Однако это еще не все! Как мы знаем для любого шорткода в WordPress ему указывается белый список атрибутов, которые в нём можно использовать. В этом случае, про наш новый атрибут шорткода contact-form-7 WP ничего не знает, поэтому его нужно добавить в белый список. Делается это через хук плагина:

Add_filter("shortcode_atts_wpcf7", "custom_shortcode_atts_wpcf7", 10, 3); function custom_shortcode_atts_wpcf7($out, $pairs, $atts) { if(isset($atts["myemail"])) $out["myemail"] = $atts["myemail"]; return $out; }

Данный код вставляется в functions.php.

Теперь при заходе на страницу с формой в поле email будет подставлено значение [email protected] .

Добавляет на сайт страницу с политикой конфиденциальности. Также, добавляет под Контакт Форм 7 согласие на обработку персональных данных. Плагин предназначен только для русскоязычных сайтов. При входе пользователям показывает оповещение о использовании сайтом cookies. Подходит для 152ФЗ.
По вопросам работы плагина пишите на это почту: [email protected]. Через онлайн консультант на нашем сайте консультации не даем.

«Политика конфиденциальности для сайта. Согласие под формами Contact-Form 7» - проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

1.28 Проверка совместимости с WP 5.0. Добавлена скрытие заголовка из текста политики
1.27 Проверка наличия кук для плашки, которая выплывает снизу при входе на сайт переведено на js
1.26 Добавлен rel=nofollow ссылкам плагина
1.25 Добавлен текст соглашения под стандартной формой комментирования
1.24 Исправлена ошибка в Java scriptе
1.22 Исправлены мелкие баги в админке и вывод текста имени кнопки под contact form 7 на странице
1.21 Класс container, которым обрамлен текст политики, заменен на container-ppcf7
1.2 Добавлен класс к тегу

p> под формами
1.1 Добавлена опция показать/скрыть ссылку на политику конфиденциальности в подвале
1.01 Убран лишний тег p в сообщении cookie
1.0 Первая версия в репозитории

Если форма расположена просто на странице, тогда там все понятно – там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress .

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

Выводим алерт ‘Спасибо за Вашу заявку!’ – примитивно и некрасиво.

On_sent_ok: "alert("Спасибо за Вашу заявку!");"

Делаем редирект на страницу благодарности

On_sent_ok: "location="http://site.tu/thankyou/";"

Просто закрываем поп-ап – не самый лучший вариант, пользователь может не понять, все ли прошло успешно

On_sent_ok: $.fancybox.close();

Выводим поп-ап окно “Спасибо за заказ”, при этом само окно находится в блоке с id="popup_msg" , внешний вид и стили нужно будет оформлять под свой дизайн, чтобы все было красиво + сделать кнопку ‘Закрыть’ окно благодарности.

Этот код добавляем в блок Дополнительные настройки вашей формы CF7:

On_sent_ok: "$.fancybox ({ href: "#popup_msg" });"

Само окно имеет такой вид:

Спасибо! Закрыть окно

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

И для кнопки “Закрыть окно” добавляем такой код в файл скриптов:

$(".popup-close-btn").on("click", function() { $.fancybox.close(); });

Открываем pdf сразу на этой же странице

On_sent_ok: "location = "http://site.ua/wp-content/uploads/2016/08/catalog.pdf";"

Открываем pdf на новой странице

On_sent_ok: "window.open("http://site.ua/wp-content/uploads/2016/08/catalog.pdf", "_blank");"

Метод, использующий on_sent_ok hook, больше не рекомендуется. Эта функция будет отменена к концу 2017 года.

Теперь для редиректа на другую страницу после успешной отправки формы нужно использовать событие wpcf7mailsent

document.addEventListener("wpcf7mailsent", function(event) { location = "http://example.com/"; }, false);

Например, такой вариант для открытия модального окна с id="sentMessage" :

Document.addEventListener("wpcf7mailsent", function(event) { $("#sentMessage").modal(); }, false);

Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

Document.addEventListener("wpcf7mailsent", function(event) { var id = event.detail.contactFormId; if (id == 4 || id == 44 || id == 45) { $.magnificPopup.open({ items: { src: "#popup_msg" }, type: "inline" }, 0); } }, false);

id – это номер формы
$.magnificPopup.open – в данном примере используется Magnific Popup

У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

Данный скрипт выведет на экран окно id="popup_msg" после успешной отправки одной из форм (id == 17754 или id == 17758 или id == 17757):

Document.addEventListener("wpcf7mailsent", function(event) { var id = event.detail.contactFormId; if (id == 17754 || id == 17758 || id == 17757) { $.fancybox({href: "#popup_msg"}); } }, false);

Простой разбор кода

id == 17754 || id == 17758 || id == 17757 – окно будет показываться только для этих форм (или-или).

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

Спасибо! Наш менеджер свяжется с вами в ближайшее время. Закрыть окно

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

JQuery(document).ready(function($) { // code ... });