Привет, друзья. Сегодня поговорим о том, как узнать с какой именно формы пришла заявка на сайте.
Давайте представим типичную ситуацию, когда на странице есть несколько кнопок, вызывающих одно и тоже модальное окно с общей формой обратной связи. При этом одна кнопка с призывом оставить заявку на обратный звонок, вторая - на консультацию специалиста, третья еще какая-нибудь и так далее. В таком случае вообще не реально понять, что заинтересовало потенциального клиента и какой блок на сайте привел к конверсии.
Ладно, реально посмотреть, например, в Метрике в Вебвизоре, но проделывать это при каждой конверсии очень неудобно.
Совсем недавно получил комментарий на блоге с просьбой решить подобную задачу, и я пообещал на днях сделать статью на эту тему.
Давайте же займемся этим. Я предлагаю такой вариант решения проблемы:
- Создать у формы скрытое поле, которое и будет отвечать за тему письма.
- Создать у кнопок data-атрибут с темой письма. Например: «data-subject=”Заявка на обратный звонок”» или «data-subject=”Заявка на консультацию”» и так далее.
- При клике на кнопку при помощи javascript получить значение этого data-атрибута и поместить в наше скрытое поле.
- В обработчике формы в переменную, отвечающую за заголовок письма, передать значение скрытого поля.
Как по мне – довольно просто. Давайте реализуем все это.
Внимание! Я предполагаю, что у вас уже реализован механизм вызова модального окна с рабочей формой. Я не буду реализовывать отправку в этой статье, говорим только о подходе, который позволит понять, какая кнопка привела к заявке. Подробная инструкция по созданию формы обратной связи - тут. По созданию и вызову модального окна – тут.
В своей форме обратной связи создайте такое поле:
<input type="hidden" name="subject" class="subject" />
Значение атрибута name и class могут быть любыми, главное, потом, правильно принять атрибут name в обработчике и добавить его в тему письма.
Класс у инпута нужен лишь для того, чтобы привязаться к полю при помощи JS для передачи data-атрибута. Можно привязаться к полю по дата атрибуту и не создавать сам класс.
Предположим, что где-то на сайте есть 2 такие кнопки:
<button class="open-modal__button" data-subject="Заявка на обратный звонок">
Заказать звонок
</button>
<button class="open-modal__button" data-subject="Заявка на консультацию">
Заказать консультацию
</button>
Одна кнопка, как подсказывает нам data-атрибут, находится в секции сайта, отвечающей за обратный звонок, а вторая за заявку на консультацию.
Теперь давайте напишем JS-код.
document.addEventListener("DOMContentLoaded", () => {
let dataSubject = document.querySelectorAll(".open-modal__button");
let inputSubject = document.querySelector(".subject");
for (var i = 0; i < dataSubject.length; i++) {
dataSubject[i].addEventListener("click", function () {
inputSubject.value = this.dataset.subject;
// console.log(inputSubject.value);
});
}
});
Здесь мы проходимся по всем кнопкам с классом ".open-modal__button" и при клике на них записываем дата-атрибут в ранее созданное скрытое поле с классом ".subject".
Если используете функцию mail() для отправки писем, данные из полученного поля нужно присвоить переменной $subject. В случае, если пользуетесь библиотекой PHPmailer, что я и рекомендую делать, то за тему письма отвечает свойство Subject объекта mail, то есть $mail->Subject.
А также:
- Не забывайте провести хотя бы минимальную валидацию и предусмотреть значение по умолчанию на всякий случай.
- Понятное дело, что если у вас открытые формы без модального окна или просто, несколько разных, можно сразу заполнить скрытое поле нужной информацией.
- Если нет возможности задать data-атрибут, то можно брать текст самой кнопки или id.
Если возникнут вопросы - пишите в комментариях. Попробуем разобраться.