/ Адаптивность / Интеграция форм AmoCRM

Интеграция форм AmoCRM

HIT

Чтобы заявки с сайта попадали в AmoCRM можно либо через Api их передавать из своих форм, либо создавать формы в AmoCRM и вставлять их на сайт.

Первый способ более основательный и технологичный, но сходу сделать это у меня не вышло. Принцип описан здесь, но у меня на стадии проверки пользователя происходила ошибка.

Второй способ я несколько доработал, мне не понравилось в каком виде формы выводятся на сайте, с кучей лишних скриптов и стилей. Опишу процесс внедрения формы AmoCRM.

Создание формы AmoCRM

Формы в AmoCRM создаются в Сделки > Настроить воронку > Добавить источник > Конструктор форм. Я предпочел создавать не кучу форм для каждой формы на сайте, а создать одну общую, поэтому включаем в форме все возможные поля которые встречаются во всех формах сайта. Копируем получившиеся скрипты и вставляем на сайт. Смотрим получившийся iFrame с формой и копируем из него саму форму.

Форма будет иметь весьма перегруженный вид, очистим ее убрав все лишнее div, label, span, input:hidden (!кроме полей с name form_id и hash). Также можно почистить лишние классы у полей. Из всего кода у нас должна остаться чистая форма:

<form action="https://forms.amocrm.ru/queue/add" method="POST">
    
<input type="text" name="fields[name_2]" placeholder="Форма">      
                        
<input type="text" name="fields[name_1]" placeholder="Имя">      

<input type="tel" name="fields[99990_1][224460]" placeholder="Телефон">      
                            
<input type="email" name="fields[99992_1][224472]" placeholder="Email">      

<textarea name="fields[176465_2]" placeholder="Вопрос"></textarea>      

<input type="text" name="fields[note_2]" placeholder="Вид помещения">      

<input type="text" name="fields[175227_2]" placeholder="Площадь помещений">

<input type="text" name="fields[99996_1][224478]" placeholder="Вид дома">      

<input type="hidden" name="form_id" id="form_id" value="080808">
<input type="hidden" name="hash" value="23365f7dd2d48fb5dd23118098a4860d">
          
<button type="submit" id="button_submit">Отправить</button>

В последствии и она нам нужна не будет, нужны будут только идентификаторы полей.

Создаем свою форму на сайте

<form action="/wp-content/themes/meinland/call.php" method="post">

    <input type="text" name="fields[name_1]" required="required" placeholder="Ваше имя">
    <input type="text" class="phone" required="required" name="fields[99990_1][224460]" placeholder="Ваш телефон">

    <input type="hidden" name="form_id" id="form_id" value="080808">
    <input type="hidden" name="hash" value="23365f7dd2d48fb5dd23118098a4860d">  

    <input type="submit" class="btn" value="Заказать звонок">
</form>

Вставляем поля с формы AmoCRM в свою форму, при этом можно менять типы полей (например tel на text).

Для отправки формы есть 2 варианта:

  1. Отправляем сразу на обработчик AmoCRM action=»https://forms.amocrm.ru/queue/add». Только в этом случае желательно сделать отправку без перезагрузки страницы.
  2. Отправляем на собственный обработчик. Например action=»/wp-content/themes/meinland/call.php». Это нужно в том случае, если помимо самой AmoCRM нужно разослать форму на электронную почту.
Только в action вместо указания прямого файла (/wp-content/themes/meinland/call.php) лучше использовать шаблон страницы. т.к. данный путь будет указан в url после перехода.

Рассмотрим второй вариант. Во втором варианте мы можем исключить из формы скрытые поля form_id и hash и прописать их напрямую в параметры (см. ниже). Создаем обработчик который будет содержать: отправку формы на эл. почту, отправку формы в AmoCRM, страницу благодарности.

Отправка формы в AmoCRM

<?php 
$name = isset($_POST['fields']['name_1']) ? $_POST['fields']['name_1'] : "";
$phone = isset($_POST['fields']['99990_1']['224460']) ? $_POST['fields']['99990_1']['224460'] : "";


if (isset($_POST['name']) && isset($_POST['phone'])) {

	$paramsArray = array(
		'fields' => array (
			'name_1' => $name, 
			'99990_1' => array ('224460' => $phone)
		),
		'form_id' => '080808', 
		'hash' => '23365f7dd2d48fb5dd23118098a4860d'	
	); 
	// преобразуем массив в URL-кодированную строку
	$vars = http_build_query($paramsArray);
	// создаем параметры контекста
	$options = array(
		'http' => array(  
			'method'  => 'POST',  // метод передачи данных
			'header'  => 'Content-type: application/x-www-form-urlencoded',  // заголовок 
			'content' => $vars  // переменные
		)  
	);  
	$context  = stream_context_create($options);  // создаём контекст потока
	$result = file_get_contents('https://forms.amocrm.ru/queue/add', false, $context); //отправляем запрос
	var_dump($result);

} ?>	

if (isset($_POST[‘name’]) && isset($_POST[‘phone’])) — проверка, чтобы при прямом заходе на данный URL не создавались заявки в AmoCRM.

Чтобы создать правильную структуру (вложенность полей) в массиве $paramsArray нужно при отправке формы посмотреть структуру поступающих данных:

<?php echo '<pre>';
print_r(var_dump($_POST));
echo '</pre>'; ?>

При правильной структуре данных в массиве $paramsArray форма успешно поступает в Сделки (Необработанное) с теми полями которые заполнены. Если форм на сайте несколько то для удобства можно в одно из полей формы AmoCRM передавать название формы.

Отправка формы на почту

Для того чтобы письма не отправлялись по прямому заходу на url обработчика добавляем в форму поле с указанием сайта:

<input name="uri" type="hidden" value="http://site.ru/">

А в обработчике делаем проверку по нему:

$uri = isset($_POST['uri']) ? $_POST['uri'] : "";

$address = "mail@mail.ru"; // кому отправляем
$mes = "Форма: Получить сертификат!\n\nТелефон: $phone"; // текст сообщения, \n - перенос строки
$sub = 'Заказ сертификата'; // тема письма
$email = 'no-reply@site.ru'; // от кого

if (substr( $uri, 0, 4 ) === "http") {

	$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:".$email);

}

Проверка конечно странная, т.к. можно было не писать весь url сайта, но тут важен принцип.

Альтернативный код отправки писем (для обработчика):

if (!isset ($_POST['submit'])) {
    echo 'Нет данных для обработки. Попробуйте <a href="/">перейти на главную</a>';
    exit();
}
$area = $_POST["area"];
$area .= ' кв.м.';

$rooms_type = $_POST["rooms_type"];

$home_type = $_POST["home_type"];

$phone = $_POST["his_second"];

$to_name = 'Ремонт квартир'; //отправитель
$to= "mail@inbox.ru" . ", "; //обратите внимание на запятую
$to .= "mail@yandex.ru" . ", ";
$header = "From: \"$to_name\" <no-reply@".$_SERVER['HTTP_HOST'].">\n";
$header .= "Content-type: text/plain; charset=\"utf-8\"";
$subject = "Новая заявка"; //тема письма
$message = "Форма: калькулятор\n\nПлощадь: $area\nТелефон: $phone\nВид помещения: $rooms_type\nТип дома: $home_type"; //сообщение

mail ($to, $subject, $message, $header) or print "Не могу отправить письмо !!!";

Также проверку на отправку формы человеком можно проверять ReCaptcha.

Отслеживание пользователей AmoCRM и Google Analitics

Внедрим в формы идентификаторы посетителей. Идентификатор пользователя AmoCRM (visitor_uid) и идентификатор пользователя GA (cid). Для поддержки Google Analitics нужно при создании формы в AmoCRM в настройках поставить галку Использовать Google Analytics.

Добавим в форму на сайте 2 дополнительных поля

<input id="ga_cid" class="ga_cid" type="hidden" name="ga" id="ga_cid" value="">
<input id="visitor_uid" class="visitor_uid" type="hidden" name="visitor_uid" value="">

Их мы будем заполнять при отправке получая соответствующие идентификаторы с помощью скриптов:

// ID посетителя Google Analitics
$(document).ready(function() { 
	ga(function(tracker) { 
		var clientId = tracker.get('clientId');
		var clientIdfield = '{"ga":{"trackingId":"UA-144115302-1","clientId":"' + clientId + '"},"utm":{"source":"","medium":"","content":"","campaign":"","term":""},"data_source":"form"}';
		jQuery(".ga_cid").val(clientIdfield);
	});
});


// ID посетителя AmoCRM
window.AMOPIXEL_IDENTIFIER_PARAMS = window.AMOPIXEL_IDENTIFIER_PARAMS || { } ;
window.AMOPIXEL_IDENTIFIER_PARAMS.onload = function (pixel_identifier) {
    var visitor_uid = pixel_identifier.getVisitorUid ( ); // Получаем visitor_uid
    console.log ( 'visitor_uid' , visitor_uid); // Показать visitor_uid в консоли
    if (visitor_uid) {
		// Записываем его в скрытое поле формы 'visitor_uid'
		jQuery(".visitor_uid").val(visitor_uid);
   }
};

Для определения идентификатора GA на сайте должен быть установлен счетчик GA. Для определения идентификатора AmoCRM нужно подключить универсальный скрипт:

<script type="text/javascript" id="amo_pixel_identifier_js" async="async" src="https://piper.amocrm.ru/pixel/js/identifier/pixel_identifier.js"></script>

Далее получаем данные полей:

$ga = isset($_POST['ga']) ? $_POST['ga'] : "";
$visitor_uid = isset($_POST['visitor_uid']) ? $_POST['visitor_uid'] : "";

И передаем дополнительные аргументы в AmoCRM

$paramsArray = array(
     'fields' => array (
         'name_1' => $name,
         '99990_1' => array ('224460' => $phone),
         '244037_2' => $ga, 
         'visitor_uid' => $visitor_uid,
     ),
     'form_id' => '888888', 
     'hash' => '2bd2a706608f114c63221d1d49da4796'    
 );

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

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

4 комментария

  1. test

    как передать файл через собственный обработчик в амо

    1. Alexandr

      Я давно занимался этой темой. Так сходу сказать не могу.

  2. Кирилл

    UTF метки таким способом не передать, тоже минус

Интеграция форм AmoCRM
Обзор плагинов по созданию скидок
Рекомендации для васОбзор плагинов по созданию скидокOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.