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

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

Rate this post

В этой статье рассказано, как отправить произвольное значение через 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. Для этого открываем плагин и создаем форму обратной связи. Соответственно, в поле указываем нужный класс.

Добавляем ID динамическим полям

Поле для подмены значения

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

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

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

Добавляем Dynamic Hiden в Contact Form 7

 

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован.