Как передать значение в скрытое поле Contact Form 7?

Как передать значение в скрытое поле Contact Form 7?

Как передать значение в скрытое поле Contact Form 7?

Привет! Недавно при разработке очередного сайта я столкнулся с достаточно интересной задачей, решением которой хотел бы поделиться и с вами!

Мы занимались разработкой сайта по септикам, где товары выводились с помощью Повторителя (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);
	});
});

Понравился материал? Хотите больше статей о разработке сайтов? Тогда обязательно поддержите нас своим комментарием. Для нас это очень важно! 🙂

Для наглядности также делимся видео, где автор решает подобную задачу. Наверняка вам будет полезно!

Поддержать нашу команду:
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Привет! Интересно читать нас? Уделите пару минут своего времени, узнайте больше о нашей команде!

Получить подарок!