Обработчик события отправленного сообщения в Contact Form 7

Contact Form 7 цели метрика

Сегодня, у одного моего знакомого стал вопрос ребром "как отслеживать цель для Яндекс.Метрики при отправке формы с Contact Form 7" или "как добавить событие для кнопки Submit". Варианты с onClick, конечно не работали, для contact form 7 и цели метрики. Решение проблемы мы конечно нашли, дальше попробую вам всё подробно расписать.

Для Contact Form 7 версии 4.2 и выше существует новые настройки. Предлагаю просмотреть новые contact form 7 дополнительные настройки .

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

Событие отправки сообщения с Contact Form 7 у WordPress выглядит вот так "on_sent_ok:" (кавычки не нужны). Это javascript событие, полный вызов функции выглядит вот так:

on_sent_ok: "alert('Форма отправила данные');"

или вот так

on_sent_ok: "function(){alert('информация с Contact Form 7 отправленная');}"

Как вы поняли в тело функции можно впихнуть что угодно, даже Ajax вызов PHP скрипта. Если вам нужна обратная связь WordPress можно почитать этот пост. Для того чтоб довать текст подсказку для текстовых полей стоит прочитать Contact Form 7 placeholder.

 

Contact Form 7 метрика - цели

Конкретно для вызова цели из яндекс метрики мы вставили вот такой код на кнопку Submit:

on_sent_ok: "yaCounter2009xxxx.reachGoal('ZtVps');"

Если код Яндекс целей метрики когда либо изменится, вам придется заменить все что находится внутри "". Также, если вам нужно отслеживать несколько целей Яндекс метрики то вы сможете записать эти цели подряд или же акуратненько создать функцию, в которую записать цель, а вызов функции добавить в кавычки.

Второй вопрос, куда нужно вставлять этот код, для прояснения ситуации вставляю скриншот, думаю с него будет понятно:

как добавить событие для кнопки Submit Contact Form 7

Как вы поняли, код для обработчика события отправленного сообщения в Contact Form 7 нужно вставлять на странице плагина в поле "Дополнительные настройки". По сути, благодаря дополнительным настройкам, мы можем писать какой угодно яваскрипт код в обработку Contact Form 7 for WordPress

И так, обработчик событий у вас есть, место для вставки обработчика тоже, осталось написать Javascript действие, которое должно выполнятся после того как сообщение отправлено с плагина WordPress Contact Form 7.

Обратите внимание, вместо того чтоб использовать плагин для контактных форм Contact Form 7 можно создать форму обратная связь wordpress без плагина и без лишнего кода.

Комментарии к записи «Обработчик события отправленного сообщения в Contact Form 7»:
  1. Daff:

    Статья супер!Все понятно, получилось с первого раза
    Спасибо автору!

Сделать заказ
Онлайн помощь по WordPress