contact-form-7-extension

Как отправить данные в скрытый 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);
		});
	});
});

 

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