- Регист
- 21 Май 2018
- Сообщения
- 668
- Реакции
- 681

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

Итак, лендинг у нас есть, далее открываем любым редактором кода файл index.html, я тут всю работу буду показывать на примере редактора notepad++ вы же можете использовать тот что вам удобнее. Итак, после того как код индексной страницы открыт в редакторе я запускаю поиск по документу и в поисковую строку ввожу такое сочетание <form чтобы найти первую форму на этом лендинге:

что важно для отправки данных с любой формы на емайл, в параметрах открывающего тега form обязательно должны присутствовать два поля это method=»post» данный параметр показывает каким методом будут отправлены данные с этой формы, как правило везде практически он указан правильно нам нужно как раз чтобы данные отправлялись методом post если вдруг такой он не указан в форме или там указан метод GET то меняем его на POST, другой важный параметр это action=»» между кавычек указывается обработчик этой формы в примере у нас стоит ссылка на трекер партнерки откуда скачан лендинг и нам эту ссылку нужно заменить на свой обработчик:

сам обработчик мы напишем чуть позднее, а пока давайте разберемся с остальными полями формы. И здесь нам нужно найти такие теги как <input> на нашем лендинге у нас два таких поля как Имя и Телефон, которые необходимо заполнить клиенту и эти данные как раз и отправляются через инпут, вот так

и в самих инпутах есть ключевой параметр name по которому мы и будем принимать данные из этих полей в нашем обработчике, как видите в нашем случае для поля Имя name=»name» а для поля Телефон name=»phone» так вот, по идентификатору указанному в кавычках мы и будем принимать данные из каждого конкретного поля формы. В нашей форме так же есть ряд скрытых полей, узнать их легко по type=»hidden», т.е. «скрытое»:

они у нас тут сделаны для передачи доп информации в партнерку, но такие поля можно использовать и самостоятельно, например прописать название формы, если хотите идентифицировать с какой именно формы пришел заказ, кроме того в таких полях можно передавать utm-метки, IP адрес клиента, откуда о пришел и т.п. Ну что же, про основные параметры формы в html я вам рассказал, теперь давайте перейдем непосредственно к обработчику формы.
Давайте создадим в папке с нашим лендингом файл send.php и в поле action укажем именно его, когда форм на странице много удобнее пакетно заменять все эти данные, в нотепаде я делаю это через функцию заменить выделяя старый обработчик и нажимая CTRL + H (актуально для видны) таким образом:

все, теперь все формы будут отправлять данные уже в наш файлик, осталось только прописать в него код, который будет эти данные принимать и отправлять на нужный нам email адрес :))
Итак, открываем наш файл send.php (можете назвать файл как хотите) в редакторе и добавляем туда следующий код:
PHP:
<?php
$recepient = "[email protected]";
$domain = $_SERVER['SERVER_NAME'];
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$product = 'Здесь название продукта который продаете';
$message = "Сайт: $domain \nПродукт: $product \nИмя: $name \nТелефон: $phone \n";
$mailto = "postmaster@$domain"; // от кого $headers = "From: ЗАКАЗ <".$mailto.">\r\n";
$headers = $headers."Return-path: ЗАКАЗ <".$mailto.">\r\n";
$headers = $headers."Content-type: text/plain; charset=\"utf-8\"\r";
$pagetitle = "ЗАКАЗ с $domain"; mail($recepient, $pagetitle, $message, $headers);
Header("Refresh: 8; URL=".$_SERVER['HTTP_REFERER']);
?>
это стандартный код обработки данных отправляемых формой, ниже я поясню основные моменты по нему
здесь в кавычки нужно прописать тот емайл, на который хотите принимать заказы:
PHP:
$recepient = "[email protected]";
здесь автоматически определяется тот домен на котором весит лендинг:
PHP:
$domain = $_SERVER['SERVER_NAME'];
вот эти две строки отвечают как раз за прием данных из полей имя и телефон в форме обратной связи на нашем лендинге и тут как раз мы и указываем в квадратных скобках те идентификаторы которые стоят у на в форме в теге <input>, как вы помните это name=»name» для поля Имя и name=»phone» для поля Телефон, в обработчике мы создаем под них свои переменные $name $phone и обрабатываем post запрос идентифицируя эти данные по данным из поля name:

Кроме того, я выше писал про скрытые поля, если вы хотите принимать и их, то по аналогии с двумя полями выше создаете для них уникальные переменные и и принимаете данные из форм по уникальному name для каждого такого поля.
В следующей переменной $product в кавычках можно указать название того продукта, который вы продаете.
Далее в переменной $message формируется тело нашего письма где для удобства написано что это за поле и переменная данные из которой туда и попадут.
Далее идет блок для идентификации откуда пришло письмо и заголовки, необходимые для корректной отправки:
PHP:
$mailto = "postmaster@$domain"; // от кого
$headers = "From: ЗАКАЗ <".$mailto.">\r\n";
$headers = $headers."Return-path: ЗАКАЗ <".$mailto.">\r\n";
$headers = $headers."Content-type: text/plain; charset=\"utf-8\"\r";
В $mailto указан почтовый ящик с которого придет письмо, сейчас он сделан так что домен с которого идет отправка туда подставится автоматически, если хотите то вместо postmaster@$domain просто можете прописать туда какой-то конкретный ящик.
Важно! Если в настройках хостинга у вас не указан конкретный емайл под нужный домен, то скорее всего все такие письма будут отправляться с технического ящика вашего хостинга и тогда тот же яндекс будет определять ваше письмо как отправленной из не проверенного источника, в таком случае просто удалите в обработчике вот эти три поля и все:

Ну и собственно вот тут происходит сама отправка письма и редирект с этой страницы на главную страницу нашего лендинга:

Ну а на емайл придет вот такое письмо с данными из формы:

На форуме есть пост с простой красивой ajax формой обратной связи на css и html с php обработчиком заявок.
п.с. Можете скачать данную форму и использовать обработчик как пример, его легко подключить с минимальным редактированием к любой форме используя данную инструкцию выше и опираясь на логику мышления!