«
»
Contact Form 7WordPress

Как отправить данные в скрытый vol – King Composer + Contact Form 7

И так буду придельно краток хотя не факт что получится. В общем стоит следующая задача, на лендинге (который создан при помощи King Composer) имеется 13 блоков с услугами. Каждый блок имеет кнопку «ЗАКАЗАТЬ» и тригер класс попап окна плагина Popups. При появлении окна необходимо передать в скрытый vol тайтл блока из которого было вызван данный попап (ибо создавать 13 форм и 13 попап окон, буду предельно честен просто в лом). Делаем мы это для того что бы в будущем использовать содержимое vol’a при отправке заполненных данных, тем самым избежав создания кучи попапов и форм.

А именно, мы вставим данные в тему и в тело письма, при отправке заполненных данных администратору сайта.

Не много закрутил, но пусть так и будет. Теперь по порядку о плагинах (качаем):

King Composer

Contact Form 7

Popups

Contact Form 7 Modules

Внешний вид блоков:

Верстка одного блока:

<div class="kc_wrapper kc-col-inner-container"> <div class="kc-elm kc-css-9848008 kc_text_block"> <p>Полное бухгалтерское и налоговое сопровождение бизнеса</p> </div> <div class="kc-elm kc-css-3880926 kc_shortcode kc_single_image"> <img alt="" class="hoverZoomLink" data-lazy-loaded="true" src="https://mediadoma.com/wp-content/uploads/2017/09/StockSnap_L3VZ0CGUA1-min-300x200.jpg" style="display: inline;"><noscript>&lt;img src="https://mediadoma.com/wp-content/uploads/2017/09/StockSnap_L3VZ0CGUA1-min-300x200.jpg" class="" alt="" /&gt;</noscript> </div> <div class="kc-elm kc-css-9524973" style="height: 20px; clear: both; width:100%;"></div> <div class="kc-elm kc-css-9316073 kc-pro-button kc-button-3 spu-open-66 spu-clickable" style="cursor: pointer;"> <a href="#"><span class="creative_title">ЗАКАЗАТЬ</span></a> </div> <div class="kc-elm kc-css-3408017" style="height: 20px; clear: both; width:100%;"></div> </div>

Содержимое формы Contact Form 7:

<label> Ваше имя (обязательно) [text your-name] </label> <label> Ваш e-mail [email your-email] </label> <label> Телефон (обязательно) [tel tel-450] </label> <span style="text-align:center;align-items: center;justify-content: center;display: block;">[submit id:BUTTOPOPUPS "Отправить"][hidden hidden-120 id:HIDDENINPUT]</span>

Содержимое E-mail ответа формы Contact Form 7:

<h2>У Вас новый клиент!!!</h2> <p><b>Клиенты выбрал следующую услугу:</b></p> [hidden-120] <p><b>Имя клиента:</b></p> [your-name] <p><b>E-mail:</b></p> <a href="mailto:[your-email]">[your-email]</a> <p><b>Телефонный номер:</b></p> <a href="tel:[tel-450]">[tel-450]</a> -- Это сообщение отправлено с сайта АРИФМЕТИКА ПРИБЫЛИ (http://test3.mediadoma.com)

JQuery код:

/*Сценарий для захвата тайтла и передачи его в vol hide инпута*/ jQuery(document).ready(function($){ /*Дожидаемся полной загрузки страницы*/ $(window).load(function() { /*Объявляем глобальную переменную в которой будем хранить тайтл нашего блока кпри клике по "ЗАКАЗАТЬ"*/ var TITLE_PARENT_GLOBAL =''; /*Вешаем обработчик клика на кнопку "ЗАКАЗАТЬ", и добавляем функцию*/ $('.kc-elm.kc-pro-button.kc-button-3.spu-open-66.spu-clickable').click (function (e) { /*Функция которая присваивает тайтл нашего блока переменной TITLE_PARENT_GLOBAL - она ищет первый родительский предок с классами ".kc-elm.kc_column_inner" далее в них ищет ребенка с классом ".kc_text_block" и захватывает его текстовое содержимое */ var TITLE_PARENT = $(this).parents(".kc-elm.kc_column_inner").find('.kc_text_block').html(); /*Удаляем из полученного текстового содержимого, все HTML теги*/ TITLE_PARENT = TITLE_PARENT.replace(/<.*?>/g, ""); /*Переписываем содержание глобальной переменной, захваченным текстом из функции выше*/ TITLE_PARENT_GLOBAL = TITLE_PARENT; }); /*Вешаем обработчик на кнопку формы попап окна Popups*/ $('input#BUTTOPOPUPS').click (function (e) { /*Присваиваем пустому (скрытому) val значение полученное в переменной "TITLE_PARENT_GLOBAL" */ $('input#HIDDENINPUT').val(TITLE_PARENT_GLOBAL); }); }); });

Источник записи: https://mediadoma.com

Связанные записи
WordPressПлагины

Как принимать пожертвования? 4 лучших плагина для пожертвований на сайте WordPress.

WordPressПлагиныПолезные сайты

Бесплатные и платные решения для клонирования (дублирования) WordPress сайта

WordPressПлагины

Как получить больше подписчиков электронной почты на вашем сайте WordPress

PopUpsWordPressПлагины

Popups - Бесплатный плагин для всплывающих сообщений в WordPress. Для увеличения числа ваших подписчиков в социальных сетях