Как отправить данные в скрытый vol

Содержание

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

Обновление от января 2021 года

И так буду придельно краток хотя не факт что получится. В общем стоит следующая задача, на лендинге (который создан при помощи 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);
        });
    });
});

Обновление от января 2021 года

С тех пор как я написал эту статья прошло много времени. Вот более обновленный и пожалуй правильный вариант реализации:

/**
 * Вставляем значения в скрытые поля формы
 */
/* Сценарий для захвата тайтла и передачи его в vol hide инпута для Contact Form 7 */
jQuery(document).ready(function($){

    /*Дожидаемся полной загрузки страницы*/
    console.log('RUN ➕');
            // 👉🏼📌🔴🔴🔴🔴🔴 Здесь указываем только селектор кнопки - input#BUTTOPOPUPS
            $('body').on('touchstart click','input#BUTTOPOPUPS', function(e){
                console.log('RUN CLICK ➕');
                var TITLE = $('#dz-licar-wrapper h1.elementor-heading-title').text();
                var DESC = $('#dz-licar-wrapper p.elementor-icon-box-description').text();

                console.log(TITLE);
                console.log(DESC);

                /*Присваиваем пустому (скрытому) val полученное значение */
                $('input#HIDDENINPUT_TITLE').val(TITLE);
                console.log('➕',$('input#HIDDENINPUT_TITLE').val());

                $('input#HIDDENINPUT_DESC').val(DESC);
                console.log('➕',$('input#HIDDENINPUT_DESC').val());
            })
});

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