Привет! Недавно при разработке очередного сайта я столкнулся с достаточно интересной задачей, решением которой хотел бы поделиться и с вами!
Мы занимались разработкой сайта по септикам, где товары выводились с помощью Повторителя (Repeater) плагина Advanced Custom Field.
В карточке каждого товара была кнопка “Заказать”, которая при клике вызывает модальное окно с формой обратной связи, реализованной с помощью CF7.
Клиент хотел, чтобы на почту ему падала не просто заявка с данными клиента, но информацией, какой септик он выбрал.
Как передать значение кнопки в форму обратной связи CF7 с помощью скрытого поля? Расскажем прямо сейчас!
Шаг 1 — Создание скрытого поля в CF7
Приступаем к редактированию нашей формы в CF7. Нас интересует 2 раздела — Шаблон формы и Письмо.
В шаблоне формы мы создали следующее скрытое поле:
[hidden septic-name class:hide-name id:septic-name]
Во втором разделе мы вывели его в самом письме.
Шаг 2 — Создание атрибута data-name для кнопки вызова формы
Теперь переходим в код и вешаем на синюю кнопку “Заказать” атрибут data-name. Так как товары мы выводим с помощью повторителя (о чем писалось выше), то и значение этого атрибута должно совпадать с названием товара.
Полный код кнопки выглядит так:
<a href="#" class="fix-price blue" data-toggle="modal" data-target="#buy-one-click" data-name-septic="<?php the_sub_field('sekcziya_-_katalog_-_nazvanie_tovara'); ?>">Заказать</a>
Если вы все сделали правильно, то при просмотре кода вашей кнопки в инспекторе можно заметить, что появился атрибут data-name с соответствующим значением.
Шаг 3 — Написание простого jQuery-обработчика
Ниже мы поделимся кодом обработчика. А пока на словах расскажем, как он работает. Событие происходит при клике на кнопку “Заказать”. Мы создаем переменную nameSeptic, которой присваиваем значение атрибута data-name-septic, и записываем значение этой переменной в скрытое поле.
Полный код обработчика выглядит следующим образом:
jQuery(document).ready(function() {
jQuery('.fix-price.blue').click(function(){
nameSeptic = jQuery(this).attr('data-name-septic');
jQuery('.hide-name').val(nameSeptic);
console.log(nameSeptic);
});
});
Понравился материал? Хотите больше статей о разработке сайтов? Тогда обязательно поддержите нас своим комментарием. Для нас это очень важно! 🙂
Для наглядности также делимся видео, где автор решает подобную задачу. Наверняка вам будет полезно!
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.