Скрипт отправки форм на Email и в Telegram

В интернете довольно часто задают вопрос, как научить лендинг слать данные с форм обратной связи на email. Ответов на этот вопрос тоже немало. А чем я хуже? Давайте расскажу вам как я обрабатываю формы на всех лендингах с freelandings.ru…

Плюсы описываемого скрипта:

Очень простое подключение двумя способами (с перезагрузкой страницы после отправки или без) к любому лендингу
Удобное именование полей форм по-русски (Имя, Телефон и т.п.)
Этим же скриптом можно добавлять апселлы к заказам. Возможно построить цепочку апселлов любой длины
Отправка данных (вместе с прикрепленными файлами) на Email и в Telegram
Письма с заказами и апселлами к этим заказам группируются в одну цепочку для удобства
Для отправки форм обычным способом (через form action) - встроенная адаптивная “страница благодарности” и страницы с ошибками отправки
Для отправки без перезагрузки (с помощью ajax) - встроенные попапы с индикатором прогресса и с сообщениями о результате
Легковесность, независимость от внешних javascript библиотек - положительно влияет на скорость загрузки страницы

Теория

Для того, чтобы мы с вами разговаривали на одном языке, покажу как в коде страницы может выглядеть HTML форма:

<form method="POST" action="mail.php">
  <input name="Имя" placeholder="Имя">
  <input type="tel" name="Телефон" placeholder="Телефон" required>
  <input type="submit" value="Отправить">
</form>

Существует 2 основных метода передачи данных из заполненной формы на сервер: GET и POST. GET лучше не использовать, так как он имеет ограничение по длине отправляемого запроса. Указанием method="POST" мы включаем отправку методом POST.

В action="mail.php" мы сообщаем на какой URL слать данные. URL может быть как абсолютным (http://example.com/mail.php), так и относительным, как в нашем случае (файл mail.php находится в текущем каталоге).

name="Имя" и name="Телефон" - названия полей формы. Именно эти названия будут фигурировать в уведомлениях, например:
Имя: Вася
Телефон: +7 (123) 456-78-90

placeholder="Имя" и placeholder="Телефон" - подписи полей. Этот текст будет указан внутри поля в качестве подсказки.

type="tel" у поля Телефон делает так, что при нажатии на это поле на смартфонах откроется цифровая клавиатура.

required делает поле с телефоном обязательным к заполнению. То есть, заявка не отправится, пока не будет указан телефон.

type="submit" value="Отправить" превращает поле в кнопку отправки формы. Вместо <input> может использоваться тег <button>.

Если нужна возможность прикрепления файлов, в код необходимо внести некоторые изменения. Во-первых, к тегу <form> нужно дописать атрибут enctype="multipart/form-data", во-вторых, добавить поле для файлов.

Для загрузки одного файла:

<input type="file" name="Файл">

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

<input type="file" name="Файлы[]" multiple>

В итоге форма с файлами выглядит так:

<form method="POST" action="mail.php" enctype="multipart/form-data">
  <input name="Имя" placeholder="Имя">
  <input type="tel" name="Телефон" placeholder="Телефон" required>
  <input type="file" name="Файлы[]" multiple>
  <input type="submit" value="Отправить">
</form>

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

Более подробное описание HTML форм, полей и всех их атрибутов можно найти на htmlbook.ru

Практика

Для подключения скрипта обработки нужно прописать адрес (URL) этого скрипта в атрибуте action. Всё. Остальное скрипт сделает сам. Примет данные и файлы, разберет их и отправит на указанный email или в Telegram чат.

Скачайте скрипт, откройте в любимом редакторе и в блоке Настройки вместо mail@example.com укажите свой Email для заявок.

<?php
const NOTIFICATIONS_EMAIL = "stas@biscripter.ru";

Если хотите получать уведомления в Telegram, нужно создать бота. Для этого:

Найдите контакт @BotFather и начните с ним диалог
Создайте нового бота командой /newbot
Придумайте ему имя. Я своего назвал Заявкер
Придумайте username. Обязательно с bot на конце. Например zayavker_bot

@BotFather любезно создал для нас бота и предоставил его token (466450872:AAFmf6a-ihEP6t4Qc1jkOVnBZeY0osFEEfo). Скопируйте этот токен и вставьте в настройки скрипта.

<?php
const TELEGRAM_TOKEN = "466450872:AAFmf6a-ihEP6t4Qc1jkOVnBZeY0osFEEfo";

Следующим шагом нужно создать группу для менеджеров, и добавить туда нашего бота. Соответственно, все участники группы будут получать уведомления о новых заказах.

Чат создан, бот приглашен, осталось получить id этого чата. Отправьте в группу любое сообщение, начинающееся слешем (например /hi) затем откройте в браузере следующий URL: https://api.telegram.org/botYOUR_TOKEN/getUpdates. Вместо YOUR_TOKEN подставьте токен бота, полученный ранее. В моем случае, полный адрес будет таким: https://api.telegram.org/bot466450872:AAFmf6a-ihEP6t4Qc1jkOVnBZeY0osFEEfo/getUpdates.

На открывшейся странице найдите id чата:

Скопируйте найденное значение и вставьте в настройки скрипта.

<?php
const TELEGRAM_CHAT_ID = "-307415180";

В итоге секция настроек должна выглядеть так:

<?php
const NOTIFICATIONS_EMAIL = "stas@biscripter.ru";
const TELEGRAM_TOKEN = "466450872:AAFmf6a-ihEP6t4Qc1jkOVnBZeY0osFEEfo";
const TELEGRAM_CHAT_ID = "-307415180";

Готово. Теперь достаточно положить файл mail.php на хостинг в каталог с лендингом и указать его в качестве action в каждой форме.

> Читайте также: Увеличение конверсии лендинга

Для демонстрации давайте рассмотрим следующие сценарии использования:

Отправка формы → страница благодарности по-умолчанию
Отправка формы → страница с апселлами → страница благодарности после апселла
Отправка формы → страница с апселлами 1 → страница с апселлами 2 → и т.д.
Отправка формы → страница с апселлами с добавлением товаров без перезагрузки страницы
Отправка формы без перезагрузки страницы

Поехали…

Отправка формы → страница благодарности по-умолчанию

Просто открываем лендинг (страницу index.html) в текстовом редакторе, ищем форму и в action указываем наш mail.php:

<form action="mail.php" method="POST" enctype="multipart/form-data">
  <input name="Имя" placeholder="Имя">
  <input type="tel" name="Телефон" placeholder="Телефон" required>
  <input type="file" multiple name="Файлы[]">
  <input type="submit" value="Отправить">
</form>

Как видно на гифке, заявка отправилась, текст заявки и файлы пришли на почту и в Telegram. В браузере открылась встроенная в скрипт страница благодарности:

Отправка формы → страница с апселлами → страница благодарности после апселла

Для того, чтобы после отправки формы редиректить посетителя на другую страницу (в нашем случае, на страницу с апселлами), нужно добавить в форму скрытое поле (type="hidden") с именем redirect и адресом страницы:

<form action="mail.php" method="POST" enctype="multipart/form-data">
  <input name="Имя" placeholder="Имя">
  <input type="tel" name="Телефон" placeholder="Телефон" required>
  <input type="file" multiple name="Файлы[]">
  <input type="hidden" name="redirect" value="upsell.html">
  <input type="submit" value="Отправить">
</form>

Теперь, отправив форму, покупатель попадет на страницу upsell.html. На ней можно предложить добавить к заказу какой-нибудь товар смежной тематики со скидкой. Форма на этой странице может выглядеть вот так:

<form action="mail.php" method="POST">
  <input type="hidden" name="Товар" value="Батарейки пальчиковые - 6 шт.">
  <input type="hidden" name="leadId">
  <input type="submit" value="Добавить к заказу">
</form>

Всего 2 поля (и те скрыты) и кнопка. В поле Товар указано название добавляемого товара (в моем случае, это батарейки). Для того, чтобы mail.php распознал в принимаемой форме апселл, в поле leadId нужно записать ID заказа. Этот ID формируется автоматически при отправке формы и подставляется к адресу редиректа (пример: http://example.com/upsell.html?leadId=123456). Нам остается только взять leadId из адреса и добавить к форме. Есть 2 способа сделать это:

Переименовать upsell.html в upsell.php и изменить форму следующим образом:

<form action="mail.php" method="POST">
  <input type="hidden" name="Товар" value="Батарейки пальчиковые - 6 шт.">
  <input type="hidden" name="leadId" value="<?php echo $_GET['leadId'] ?>">
  <input type="submit" value="Добавить к заказу">
</form>

Ничего не переименовывать, а просто добавить на страницу (перед закрывающим тегом </body>) небольшой кусок javascript кода:

<script>
(function(){
  var leadId = 0;
  try {
    leadId = window.location.search.split("leadId=")[1].split("&")[0];
  } catch(e) {
  }
  var input = document.querySelector("input[name='leadId']");
  if (input) input.value = leadId;
})();
</script>

Отправка формы → страница с апселлами 1 → страница с апселлами 2 → и т.д.

Добавив к форме апселла редирект, можно настроить сколь угодно длинную цепочку апселлов. Например, в основной форме указать редирект на страницу upsell1.html:

<form action="mail.php" method="POST">
  <input type="hidden" name="Товар" value="Батарейки пальчиковые - 6 шт.">
  <input type="hidden" name="leadId">
  <input type="submit" value="Добавить к заказу">
  <input type="hidden" name="redirect" value="upsell1.html">
</form>

На upsell1.html указать редирект на upsell2.html:

<form action="mail.php" method="POST">
  <input type="hidden" name="Товар" value="Нож-кредитка">
  <input type="hidden" name="leadId">
  <input type="submit" value="Добавить к заказу">
  <input type="hidden" name="redirect" value="upsell2.html">
</form>

С upsell2.html - на upsell3.html и так далее, пока не надоест. То есть, посетитель, оставив заявку, попадет на страницу с предложением добавить к заказу батарейки. Нажав на кнопку Добавить к заказу, он попадет на страницу с предложением ножа-кредитки со скидкой и т.п. Я встречал подобное на лендингах Дунаева. Могу только догадываться о его среднем чеке =)

Отправка формы → страница с апселлами с добавлением товаров без перезагрузки страницы

Для того, чтобы добавлять товары к заказу без перезагрузки страницы (удобно, если на странице апселлов предлагается несколько товаров), скачайте и подключите к ней файл forms.js непосредственно перед закрывающим тегом </body>:

    <script src="forms.js"></script>
</body>

Отправка формы без перезагрузки страницы

Подключив этот же файл к основной странице лендинга (index.html), форма также будет отправляться без перезагрузки страницы

Имейте в виду, что подключение forms.js не отменяет настроенный ранее редирект, поэтому, если он вам не нужен, не забудьте удалить:

<input type="hidden" name="redirect" value="upsell.html">

Обработка ошибок

Если по какой-то причине заявка не отправилась ни на Email, ни в Telegram, посетителю будет показано сообщение об ошибке с просьбой повторить попытку позднее. Обязательно проверяйте работу всех форм перед запуском трафика на сайт

В PHP существует ряд ограничений (настраиваемых) на отправку форм. Одно из них - максимальный размер отправляемых методом POST данных (текст + все вложенные файлы). В настройках PHP это ограничение регулируется переменной post_max_size. При превышении этого размера, форма не отправится, а посетитель увидит ошибку:

Следующее ограничение - максимальный размер файла (каждого), загружаемого через форму. Регулируется настройкой upload_max_filesize. Сообщение об ошибке выглядит так:

Аналитика

Если после отправки формы вы редиректите покупателя на другую страницу, цель вешается на посещение этой страницы, тут всё просто и вы, скорее всего уже делали это много раз.

При отправке формы с помощью ajax (без перезагрузки) настроить цели тоже не особо сложно. Во-первых, их нужно предварительно создать:

В Метрике: создайте новую цель с типом условия Javascript-событие. Идентификатор цели: submit. Назовите её как хотите, например Заявка и сохраните.
В GA: установка цели - Собственная, название Заявка, тип - Событие, категория - Взаимодействие с сайтом, действие - Заявка.

В скрипте forms.js уже есть строки:

if (xhr.status === 200) {
  if (typeof dataLayer !== 'undefined') {
    dataLayer.push({
      'event': 'submit'
    });
  }
}

Они вызываются сразу после успешной отправки формы и, если вы используете Google Tag Manager, передают в dataLayer событие с именем submit. В интерфейсе GTM создайте триггер на это событие, а к триггеру - теги на срабатывание целей в Google Analytics, Яндекс.Метрике и т.д.

GTM. Тег для отправки цели в Google Analytics

GTM. Тег для отправки цели в Яндекс.Метрику

Если GTM вы не используете и вам нужна только Метрика, можно добавить вызов цели прямо в forms.js:

if (xhr.status === 200) {
  if (typeof dataLayer !== 'undefined') {
    dataLayer.push({
      'event': 'submit'
    });
  }
  if (typeof yaCounterXXXXXXXX !== 'undefined') {
    yaCounterXXXXXXXX.reachGoal('submit');
  }
}

Вместо XXXXXXXX подставьте номер своего счетчика.

Остался еще один вариант: вы не используете редирект и не отправляете форму без перезагрузки, а оставили всё как есть и пользователю показывается встроенная страница благодарности. Как в таком случае настроить аналитику?

Никак. Серьезно, не нужно это делать и даже думать об этом. Встроенную страницу я сделал исключительно для подстраховки - чтобы посетителю не показывалась просто пустая белая страница если вы хотели, но забыли сделать редирект.

Я рекомендую рассматривать юзеров, заполнивших форму, как бесплатный трафик, который можно и нужно монетизировать. Вариант с апселлами мы уже рассмотрели, если он вам не подходит (например вы льете трафик на партнерки), можно отправлять покупателей на другой лендинг или на витрину партнерских товаров. Я как-то использовал партнерку кэшбэк-сервиса LetyShops. Просто показывал вот такую страницу:

В кнопке - партнерская ссылка на лендинг сервиса. Всё просто. Люди переходили и регистрировались. Я даже выводил деньги пару раз. Давно это было, но сейчас зашел в кабинет Admitad и увидел вот это:

Какие-то копейки капают до сих пор =)

Почему не приходит Email?

Самый распространенный вопрос. А вот самые распространенные причины:

Письма приходят, но попадают в спам

В 80% случаев проблема именно в этом. Проверьте папку Спам. Чтобы письма не попадали в спам, нужно правильно настроить почтовый сервер, но эта тема выходит за рамки статьи.

Выключена поддержка PHP

Проверьте, включен ли на вашем хостинге PHP.

Shared хостинг: погуглите как включить PHP в ИМЯ_ВАШЕГО_ХОСТИНГА или обратитесь в поддержку.

VPS/VDS: поищите как настраивается PHP в используемой на сервере операционной системе.

В PHP выключена поддержка отправки писем

Shared хостинг: некоторые хостинг-провайдеры блокируют отправку писем с помощью функции mail. Гуглите как включить PHP mail в ИМЯ_ВАШЕГО_ХОСТИНГА или напишите в поддержку.

VPS/VDS: здесь всё сложней, вам возможно потребуется сначала установить и настроить почтовый сервер. Гугл/фрилансер/ знакомый сисадмин в помощь. Или вы можете обратиться ко мне.

На хостинге стоит старая версия PHP

Shared hosting: убедитесь, что текущая версия PHP - не меньше, чем 5.6. У большинства хостинг-провайдеров в панели управления есть настройка, за это отвечающая.

VPS/VDS: установите свежую версию PHP.

Ваши вопросы

Если есть пожелания/вопросы по работе или функционалу скрипта - пишите в комментарии. Нашли ошибки в скрипте - туда же, поправлю.

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

Файлы

Все скрипты и примеры из статьи на github.

Подписывайтесь, чтобы не пропустить следующую статью.