Приветствую! С вами Денис Герасимов, сайт rek9.ru и мы поговорим про отправку заявок лендинга в Google Forms.
Зачем настраивать отправку заявок в Google Forms:
- Все заявки будут находится в одном месте, в одной удобной таблице, с которой очень легко работать.
- Можно дать доступ сотрудникам, которые будут обрабатывать эти заявки и контактные данные клиентов.
- По сути мы получаем CRM, при этом она бесплатная.
- Можно передавать данные по офлайн конверсиям в GA, для этого необходимо сформировать специальную ссылку, на которую уже будут передаваться данные
- Настройка таблицы. Эта таблица очень хорошо расширяется с помощью различных дополнений и скриптов.
Шаги по настройке отправке заявок в Гугл Формс
Итак, вы приняли решение, что вам необходимо передавать контактные данные в Google Forms. Что для этого нужно:
- Продумать поля, которые вы будете передавать с лендинга в Google Forms
- Создать форму в Google Forms с этими необходимыми полями
- Протестировать форму, корректно ли она работает
- Открыть ее исходный код и выписать action и name для каждого поля
- Изменить лендинг
- Внести изменения в скрипт отправки
- Проверить работоспособность формы
Настройки отправки заявок c лендинга в Google Forms
У меня есть готовый лендинг, который мы создавали с вами в предыдущей статье. Есть доступ к серверу — хостингу, и есть у меня заготовленный скрипт, с помощью которого передаются данные в Google Forms.
Откройте новую вкладку в браузере Google Chrome и перейдите в Google Disc. В меня слева нажмите кнопку СОЗДАТЬ, выберите пункт ЕЩЕ и GOOGLE ФОРМА.
Например, нам необходимо 4 поля. В поле ВОПРОС пишем название нашего первого поля ИМЯ, ТИП ВОПРОСА выбираем ТЕКСТ. Затем добавляем таким же образом поле E-MAIL, ТЕЛЕФОН, UTM. После чего нажмите на меню сверху ПРОСМОТРЕТЬ ОТВЕТЫ, дайте название форме, чтобы сохранить ее. При сохранении создаются новые таблицы. Нажмите кнопку СОЗДАТЬ.
После этого в меню сверху нажмите ОТКРЫТЬ ФОРМУ и увидим, как выглядит наша новая форма. Протестируем ее, заполним необходимые поля для отправки. Затем заходим в таблицу формы и видим, что наша заявка появилась в списке. Значит форма работает корректно.
Теперь необходимо снова открыть форму, открываем ее код сочетанием клавиш Ctrl+U. С помощью клавиш Ctrl+F найдем поля action и name. Найдите класс action и скопируйте url который в нем указан и вставьте в отдельный документ NotePad++. Далее находим name нашего поля ИМЯ, копируем его entry.214523 и вставляем в тот же новый документ. Таким образом скопируйте name каждого нашего поля в форме.
[syntax type=»html»]<!— Изменил данные в каждом поле —>
https://docs.google.com/forms/d/1JJeA5-EzGa92pFtf1bTX8ODe3gJjg-AFe0YGPzYzbxx/formResponse
Имя name entry.7468119xx
Email email entry.19119005xx
Телефон phone entry.8840053xx
UTM utm entry.319352xx
<input type=»hidden» name=»draftResponse» value=»[,,"88718867519885126xx"]»>
<input type=»hidden» name=»pageHistory» value=»0″>
<input type=»hidden» name=»fbzx» value=»88718867519885126xx»>[/syntax]
Потом нас интересует информация по скрытым полям, нас интересует 3 поля, они будут выглядеть следующим образом <input type=’hidden’. Копируем сразу все три поля и вставляем туда же в новый документ.
Теперь нам необходимо изменить наш лендинг. Для этого открываем его в NotePad++. Нам нужно прописать путь до обработчика форм. Это будет выглядеть следующим образом <form action=’send.php’ method=’post’ target=’_blank’>. Последний тег указывает на то, что форма будет открываться в новом окне, для того, чтобы мы видели, как она обрабатывается. Далее убираем скрытое поле hidden e-mail, которое было у нас с предыдущего примера, где мы настраивали отправку формы в CRM. И прописал name = email. В поле ВВЕДИТЕ ИМЯ name=name, ВВЕДИТЕ ТЕЛЕФОН name=phone.
[syntax type=»html»]<form role=»form» action=»send.php» method=»post» target=»_blank»>
<div class=»form-group»>
<label for=»exampleInputEmail1″>Введите email</label><input type=»email» name=»email» class=»form-control» id=»exampleInputEmail1″>
</div>
<div class=»form-group»>
<label for=»exampleInputТеxt1″>Введите имя</label><input type=»text» name=»name» class=»form-control» id=»exampleInputТеxt1″>
</div>
<div class=»form-group»>
<label for=»exampleInputTex2″>Введите телефон</label><input type=»text» name=»phone» class=»form-control» id=»exampleInputТеxt2″>
</div>
<input type=»hidden» name=»UTM» value=»crm»>
<button type=»submit» name=»submit» id=»ss-submit» class=»btn btn-danger btn-lg btn-block»>Получить доступ!</button>
</form>[/syntax]
Затем перейдем в код обработчика формы, наш скрипт. Вы можете скачать себе этот скрипт в начале статьи. Сюда мы вносим изменения, которые мы предварительно скопировали с кода лендинга.
Сначала берем адрес action, копируем его и вставляем в $url в код скрипта. Важно сохранить пунктуацию и вставляем между кавычек. В поле $link вставляем страницу переадресации, например, страницу «Спасибо за подписку».
В список $post_data необходимо прописать entry, которые мы скопировали, в каждое поле соответственно его названию. Точно таким же образом изменяем скрытые поля. Далее код не изменяем, потому что там происходит обработка форм с помощью curl. При этом чтобы у вас корректно передавалась форма CURL должен быть на вашем хостинге. Сохраните изменения и загрузите на сервер файл.
[syntax type=»php»]<?php
// работа с данным скриптом показана в видео на сайте https://rek9.ru/otpravka-zayavok-v-google-forms/
// формируем запись в таблицу google (изменить)
$url = «https://docs.google.com/forms/d/111111111111111111/formResponse»;
// сохраняем url, с которого была отправлена форма в переменную utm
$utm = $_SERVER[«HTTP_REFERER»];
// ссылка для переадресации (изменить)
$link = «https://rek9.ru/»;
// массив данных (изменить entry, draft и fbzx)
$post_data = array (
«entry.111111111» => $_POST[‘name’],
«entry.222222222» => $_POST[‘phone’],
«entry.333333333» => $_POST[’email’],
«entry.444444444» => $utm,
«draftResponse» => «[,,"55555555555555"]»,
«pageHistory» => «0»,
«fbzx» => «55555555555555»
);
// Далее не трогать
// с помощью CURL заносим данные в таблицу google
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// указываем, что у нас POST запрос
curl_setopt($ch, CURLOPT_POST, 1);
// добавляем переменные
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
//заполняем таблицу google
$output = curl_exec($ch);
curl_close($ch);
//перенаправляем браузер пользователя на скачивание оффера по нашей ссылке
header(‘Location: ‘.$link);
?>[/syntax]
Затем обновите страницу вашего лендинга. Протестируем работу нашей формы, заполните необходимые поля. Затем перейдем в нашу таблицу и видим, что в таблице появилась новая заявка. В графе UTM метки передается адрес, с которого произошло заполнение формы.
Давайте протестируем таблицу на UTM метки. Откройте www.tools.yaroshenko.by, нажмите ГЕНЕРАТОР UTM МЕТОК (или воспользуйтесь моим генератором utm меток). В поле АДРЕС ЦЕЛЕВОЙ СТРАНИЦЕ вставьте адрес вашего лендинга (скопируйте с адресной строки). ИСТОЧНИК ТРАФИКА выберите ВКОНТАКТЕ. НАЗВАНИЕ КАМПАНИИ пропишите, например, 12345, ИДЕНИТФИКАТОР ОБЪЯВЛЕНИЯ 2345, КЛЮЧЕВОЕ СЛОВО, например, РЕТАРГЕТИНГ. Затем нажмите кнопку СГЕНЕРИРОВАТЬ. Копируйте получившуюся ссылку и вставьте ее в адресную строку вашего лендинга. Затем обновите страницу и заполните форму. После чего переходим снова в нашу таблицу. Мы видим, что данные заявки попали в таблицу. При этом в ссылке с UTM метками мы видим, что ключевое слово зашифровано. Поэтому лучше в рекламном капании использовать латинские буквы. Если вы хотите увидеть ключевое слово, достаточно перейти по этой ссылке из таблицы.
Вы можете изменить форму таким образом, чтобы обработка происходила в том же окне. Для этого достаточно убрать из кода тег target=_blank.
Проверить работоспособность формы можете по адресу http://test.2ds.ru/crm/index2.html
Данные попадают в таблицу https://docs.google.com/spreadsheets/d/1DqO15cu-ZgItsDVsvA0qYSx8YuSaxZ3ZMhInp5Nxd8I/edit?usp=sharing
Вот таким образом настраивается отправка в Google Form.
↓ Презентация drive.google.com (pdf 271 КБ)
↓ Скрипт send.php drive.google.com (zip 940Б)