CF7: данные, запросы, перехват

Возможности плагина Contact Form 7 (далее CF7) для построения контактных форм в WordPress многогранны. Но часто возникают специфические ситуации, требующие нестандартного подхода. Сегодня  мы опишем такие нестандартные ситуации и их решения, как: передача в формы CF7 данных со страницы, обработка GET и  POST запросов, а также перехват успешно отправленных данных  (очень востребованное событие).

Передаем в ContactForm 7 любые данные с страницы

Иногда требуется передать некоторые динамичные данные со страницы, на которой находится форма CF7. Простой пример: вы создали интернет магазин на WordPress со множеством товара, вместо кнопки КУПИТЬ у вас контактная форма на CF7, в которой покупатель оставляет свое имя, телефон, адрес для доставки товара, и, естественно, администратор хочет получить в письме - название и цену купленного товара.

Как передать в форму CF7 данные со страницы?

В настройках формы открываем скрытые поля:

[hidden hide-title id:title] //скрытое поле с id title
[hidden hide-price id:price] //скрытое поле с id price

в шаблоне сайта цепляем и вешаем в эти поля любые данные на JS.

<script>window.onload=function(){
document.getElementById("title").value = document.querySelector("head > title").innerText;//выцепили title страницы
document.getElementById("price").innerText = document.querySelector("div.summary.entry-summary > p > ins > span").innerText;
}
</script>

Как найти нужный селектор на странице, который передать в форму? В исходном коде нужной страницы (Ctrl + Shift + I (кроме Internet Explorer) или в "Контекстном меню" (правой кнопкой мыши на любом участке веб-страницы)(Ctrl-клик для Mac) выбрать пункт "Исследовать Элемент") на нужном элементе нажать еще раз "Контекстное меню" правой кнопкой мыши - Copy - Copy Selector (как на скрине)

Копирование селектора в исходном коде страницы HTML

Отправка GET и POST запросов в  Contact Form 7

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

Чтобы заставить форму CF7 обрабатывать GET и  POST запросы, достаточно в атрибутах полей указать специальный тег.

Обработки GET запроса

default:get - добавит возможность обработки GET запроса c ключом равным имени поля. Пример:

[text str default:get]

При обращении к странице http://example.com/?str=значение, значение будет передано в поле str.

Обработка POST запроса

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

[text str default:post]

В POST запросе можно передать данные str=значение.

Проверить работоспособность созданных полей в CF7 для обработки GET и  POST запросов можно специальным инструментом - послать GET и  POST запросы.

Перехватываем отправленные данные

Иногда нужно перехватить успешно отправленные данные, чтобы, например, быстро отправить SMS администратору, отправить извещение в телеграмм, сделать редирект на страницу "Спасибо", предложить "Подарок" и т.д. В functions.php добавляем:

function your_wpcf7_mail_sent_function($contact_form){
$title = $contact_form->title;
$posted_data = $contact_form->posted_data;
if ('V_single' == $title) { //название вашей формы из которой необходимо перехватить данные
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();

//Событие наступило! Делаем то, что нам нужно!
// Например, перехватываем введенные данные в полях Contact Form 7:
$f7Name = $posted_data['your-name'];
$f7Email = $posted_data['your-email'];
//теперь отправляем, например, на почту:
mail("v@seo-zona.ru", $f7Name, $f7Email);

}
}
add_action('wpcf7_mail_sent', 'your_wpcf7_mail_sent_function');

Вариант с обработчиком в отдельном файле

Другой вариант, если необходимо иметь обработчик в отдельно взятом файле. Для этого в functions.php добавляем:

function send_order_form(){
require_once $_SERVER['DOCUMENT_ROOT'].'/order-form.php';
}
add_action( 'wpcf7_mail_sent', 'send_order_form');

Теперь в корне сайта создаем файл order-form.php и в нем перехватываем успешно отправленные в CF7 данные:

<?php
if (6519 == $contact_form->id()) { //Здесь 6519 - id формы, из которой вы хотите перехватить данные, его можно найти в шорткоде самой формы.
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();

//Далее перехватываем введенные данные в полях Contact Form 7:

$f7Name = $posted_data['your-name']; //здесь your-name из настроек формы
$f7Email = $posted_data['your-email'];

//Далее, в переменной $f7Name - имя, в переменной $f7Email - адрес электронной почты.
//Далее делаете с ними все, что вам нужно!

}?>

Вариант перехвата отправленных данных на JS

В footer.php вашей темы можно добавить такой перехват события - успешно отправленных данных из CF7:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if(event.detail.contactFormId=="65"){ // 65 - id формы
//Здесь пишем необходимый функционал, который наступает после успешной отправки формы
alert("Спасибо, формы №65 отправлена успешно");
}
}, false );
</script>

На этом все! Вопросы, просьбы и пожелания оставляем в комментариях!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 голоса, рейтинг: 5,00 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте ранее:
Спутниковое ТВ: настройка
Несколько сотен ТВ-каналов в HD качестве со спутника? Легко!

Качественный ТВ-контент на спутнике Eutelsat 36.0°E. На нем идет вещание НТВ+ и Триколор. Это сотни русскоязычных тематических ТВ-каналов в HD...

Закрыть