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

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

Рассмотрим второй вариант. Во втором варианте мы можем исключить из формы скрытые поля 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'    
 );

[site-socialshare]