Передача данных с форм Elementor на сайтах WordPress
Elementor — это плагин для WordPress, который реализует функционал визуального конструктора страниц.
Он позволяет создавать красивые и функциональные страницы сайта без специальных знаний и опыта, простым перетаскиванием готовых блоков. Плагин имеет систему готовых шаблонов, дополнений и интеграций, позволяет создавать свои шаблоны для WordPress.
Однако, когда возникает вопрос об отправке данных с формы обратной связи, созданной с помощью Elementor, могут возникнуть небольшие сложности ввиду того, что формы Elementor не имеют встроенного визуального интерфейса для отправки webhooks на внешние сервисы.
Вставка кода в functions.php
Для возможности отправки запросов с форм Elementor нам потребуется скрипт, который будет ловить событие, которое произошло в форме, собирать данные формы и куки, и отправлять в MoreKit.
Для начала в MoreKit необходимо создать процесс с типом «Другое».
После создания процесса в первоначальном блоке необходимо скопировать ссылку. На данную ссылку необходимо будет отправить данные, чтобы затем их обработать и отправить в нужную нам внешнюю систему
Далее в списке файлов сайта ищем functions.php — в него необходимо вставить код. Не забываем изменить в коде ссылку отправки на нашу ссылку, которую скопировали из процесса с типом «Другое»
Данный код добавит функцию send_custom_webhook в настройку формы Elementor.
Данная функция привязывается к хуку elementor_pro/forms/new_record, который вызывается при создании новой записи формы в Elementor Pro.
function send_custom_webhook( $record, $handler ) {
$form_name = $record->get_form_settings( 'form_name' );
$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}
$micookie = json_decode(stripslashes($_COOKIE['_mk_si']), true);
$pars = array('utm_source', 'utm_medium', 'utm_term', 'utm_content', 'utm_campaign',
'roistat_visit','_ga','_ym_uid');
foreach ($pars as $par) {
if (isset($micookie[$par])) {
$fields[$par] = $micookie[$par];
}
}
$fields['page_url'] = wp_get_referer();
$fields['form_name'] = $record->get_form_settings( 'form_name' );
wp_remote_post(
'https://ep.morekit.io/xxxxxxxxxxxxxxxxxxxxxxxxxxx',
[
'body' => $fields,
]
);
}
add_action( 'elementor_pro/forms/new_record', 'send_custom_webhook', 10, 2 );
Резюмируя: этот код обрабатывает данные формы, отправленные через Elementor, добавляет в них UTM метки из cookies, а затем отправляет эти данные на указанный URL с помощью POST-запроса.
Заполнение формы и отправка данных в MoreKit
После вставки кода, если все сделано верно, пробуем заполнить форму и осуществить отправку. Во вкладке «События» увидим входящие данные с формы.
Пример входящих данных с формы Elementor
Выстраивание логической схемы передачи данных с формы Elementor в amoCRM
После того, как получили событие, можно выстраивать логическую схему передачи в amoCRM. На скриншоте представлена стандартная схема передачи создания контакта и сделки с контролем дублей, поиском активных сделок из контакта и постановкой задачи на текущую активную сделку, если она ранее была в crm-системе.
Блок #5 регулярные выражения используется для очистки номера телефона от лишних символов (скобок, дефисов), оставляет только цифры. Данные блок необходим для более корректного поиска по телефону в amoCRM
Блок #2 Найти контакты Выполняем поиск контакта по очищенному номеру телефона в amoCRM
Блок #3 Найти контакты Выполняем поиск контакта по email, если не нашли контакт по номеру телефона
Блок #4 Создать контакт Если контакта нет в системе amoCRM, создаем новый контакт, заполняя Название, Email, Телефон
Блок #6 создать переменную записываем найденный или созданный контакт в переменную «Контакт», для удобства обращения к контакту далее в процессе
Блок #7 Найти сделки выполняем поиск активной сделки (игнорируя этапы поиска 142 и 143) в amoCRM из контакта
Блок #9 Создать задачу создаем задачу на активную сделку, если у контакта она была найдена. Срок задачи — до конца дня
Блок #8 Создать сделку если у контакта не было активной сделки, создаем новую сделку, прикрепляя найденный/созданный контакт
Проверка результата отработки логической схемы
Проверяем результат, можно либо заполнить форму Elementor заново и получить новые данные, либо повторить существующий лог в MoreKit
После повторения лога видим новый лог с отработанной схемой (нужно нажимать синюю кнопку «Обновить», для получения новых логов на странице событий), из лога можем кликнуть на ID сделки напротив блока сделки, чтобы сразу перейти в сделку amoCRM и посмотреть результат
После перехода в сделку видим результат
Прикрепленный контакт к сделке
Подводим итоги
В данной статье рассмотрели возможность передачи данных с форм Elementor, встроили скрипт-обработчик, который собирает и отправляет данные при заполнении формы в MoreKit, затем выстроили логическую схему передачи данных в amoCRM с контролем дублей и постановкой задачи