Отправляем произвольное значение через Contact Form 7

В этой статье рассказано, как отправить произвольное значение через Contact Form 7. Возможно, этот метод поможет отправлять вам названия товаров или какие-либо свои данные посредством плагина Contact Form 7.

Несмотря на то, что использовать сей метод довольно трудоемко, все же это наиболее простой выход во многих ситуациях. Инструменты будут следующие:

1. Contact Form 7 — Dynamic Text Extension. Плагин для использования динамических полей.
2. jQuery.
3. Ну и конечно же WordPress с CF7.

Пора приступать к решению задачи!

Исходная задача

Итак, пришло время разобраться, о чем вообще пойдет речь. Есть у нас рандомный объект, значение которого нужно отправить. Смотрите скриншот.

Итак, задача такова. При нажатии кнопки заказать должна всплывать форма обратной связи. После ее заполнения данные должны быть отправлены на почту, в том числе и название активной вкладки. Но как отправить то, что к Contact Form 7 не относится? Правильно, получить значение вкладки и отправить в какое-либо поле формы обратной связи. И чтобы не маячило, лучше сделать его скрытым.

Решение

В таком случае поступаем так:

1. Устанавливаем Contact Form 7 — Dynamic Text Extension. Конечно, можно справиться и без него, но данный плагин дает возможность делать скрытые поля с динамическим значением.
2. Создаем дочернюю тему! В ней папки assets\js. Там создаем файл script.js. Почему в дочерней теме? Если внести в рабочей, то при обновлении может слететь весь пользовательский код. Впрочем, решать вам.
3. Начинаем упорно кодить!

В первую очередь нам нужно вычислить текстовое значение нужного поля. Пусть будет полный рандом!

Есть у нас активная вкладка, путь стилей к ней выглядит так .vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text

Особенно обратите внимание на .vc_active, данное поле будет ключевым при подмене значения в поле CF_7. Остальные вкладки имеют значение .vc_hiden, что позволяет отсечь ненужные значения.

Итак, для выполнения данной задачи подошел следующий код, который нужно внести в недавно созданный script.js:

jQuery(document).ready(function($) { //Добавляем только если такой строки нет.
$('.popup-button').on('click', function() { //класс кнопки «Заказать»
      var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();
    $("#products_name").val(value);
  });
}); //добавляем, только если добавили первую строку.

Теперь объясню, по какому принципу все это работает. Вначале мы создаем функцию, которая будет активироваться при нажатии на кнопку или виджет с нужным классом. В данном случае .popup-button. При клике на данную кнопку запустится выполнение нижеследующего кода.

var value = $('.vc_tta-color-grey .vc_tta-style-classic .vc_tta-tab .vc_active > span.vc_tta-title-text').text();

С помощью данной строки получаем текстовое значение тайтла активной вкладки. Теперь это значение можно отправить в Contact Form 7. Для этого открываем плагин и создаем форму обратной связи. Соответственно, в поле указываем нужный класс.

Как вы, наверное, уже заметили, для наглядности я вывел значение в видимое поле. Но навряд ли вам требуется подобный подход, ведь лучше сделать скрытое поле, title видеть будет только вы, но в форме мозолить глаза не будет.

Для этого понадобится расширение Dynamic Text Extension. Оно позволяет создавать скрытые динамические поля.

Вставляйте указанное поле, добавляйте ему нужный ID и все, готово.

Осталось допилить последнюю строку:

$("#products_name").val(value);

Данная строка отправляет полученное значение в поле с id products_name, можно использовать не идентификатор, а класс. на ваше усмотрение.

Как отправлять данные через письмо, надеюсь, знаете. Собственно, по такому принципу можно отправлять любое рандомное значение в нужное поле, что способно иногда заметно упростить жизнь. Главное, чтобы нужные классы превалировали над аналогичными.