И так буду придельно краток хотя не факт что получится. В общем стоит следующая задача, на лендинге (который создан при помощи King Composer) имеется 13 блоков с услугами. Каждый блок имеет кнопку «ЗАКАЗАТЬ» и тригер класс попап окна плагина Popups. При появлении окна необходимо передать в скрытый vol тайтл блока из которого было вызван данный попап (ибо создавать 13 форм и 13 попап окон, буду предельно честен просто в лом). Делаем мы это для того что бы в будущем использовать содержимое vol’a при отправке заполненных данных, тем самым избежав создания кучи попапов и форм.
А именно, мы вставим данные в тему и в тело письма, при отправке заполненных данных администратору сайта.
Не много закрутил, но пусть так и будет. Теперь по порядку о плагинах (качаем):
Внешний вид блоков:
Верстка одного блока:
Содержимое формы Contact Form 7:
Содержимое E-mail ответа формы Contact Form 7:
JQuery код:
Обновление от января 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