Отправка формы на почту на html | Форма отправки html

---

Задача: Создать на html странице форму ввода пользователем данных. Например, имени и номера телефона/ электронного адреса. После нажатия пользователем кнопки «отправить», введённые данные отправляются на определенный электронный адрес.

Это стандартная задача для страниц сбора данных пользователей. Частный случай — лендинг пейдж (одностраничники, продающие один товар). На лендинге описание товара с изображениями и форма с отправкой пользовательских контактных данных. Например, имя и телефон.

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

Кстати. Часто предприниматели настройку лендингов заказывают. И этот несложный навык обходится примерно в 500 рублей.

Реализация: Для выполнения задачи потребуется два компонента:

1. Html страница с формой
2. PHP скрипт, который будет принимать введение данные и отправлять их на почту

 

HTML форма

<form action="mail_script.php" method="post">

<p>Ваше имя: <input type="text" name="name" /></p>

<p>Номер телефона: <input type="tel" name="telephone" /></p>

<p><input type="submit" /></p>

</form>

Это простейший html код формы отправки. Если мы работаем с готовым лендинг педж, то просто находим такой (или примерно такой) код и при необходимости редактируем. Основные моменты:

action="mail_script.php"

Здесь прописываем в атрибут action адрес нашего скрипта. Обрати внимание — в данном случае адрес указывается относительным. То есть от корня сайта.

method="post"

Атрибут method содержит указание способа передачи данных. Как правило, используется метод GET или POST. В нашем случае используется метод POST (пользовательские данные отправляются внутри HTTP запроса).

Ваше имя: <input type="text" name="name"

Номер телефона: <input type="tel" name="telephone"

В данном куске кода заполняется элемент input. Указывается тип ожидаемых данных. А также переменные, куда введённые данные заполняются. В нашем случае используются тип данных text (текст) и tel (для номеров телефонов). Также пользовательские данные записываются в переменные: name и telephone. Переменные будут отправлены в PHP скрипт для дальнейшей обработки.

<input type="submit"

Кнопка для отправки введенных данных пользователя. Кстати, тип submit для решения нашей задачи подходит. Однако это решение не самое «элегантное». Поэтому чаще применяется button, который позволяет реализовывать кнопку отправки с большим числом параметров. А значит, создавать более красивые конструкции.

 

PHP скрипт

<?php
$name = $_POST['name'];
$tel = $_POST['telephone'];

$name = htmlspecialchars($name);
$tel = htmlspecialchars($tel);

$name = urlencode($name);
$tel = urlencode($tel);

$name = trim($name);
$tel = trim($tel);

if (mail("to_mail@mail.ru",
     "Pest Reject",
     "Имя: ".$name."\n".
     "Телефон ".$tel,
     "From: script@mail.ru \r\n")
){
     header("Location: /thank_you.html");
}

else {
     echo ("Error");
}

?>

Разбор скрипта:

$name = $_POST['name'];
$tel = $_POST['telephone'];

Описанная выше форма html передала в скрипт две переменных: name и telephone (имена переменных идентичны в обоих скриптах). В php параметры этих переменных запишем в локальные переменные $name и $tel.

$name = htmlspecialchars($name);
$tel = htmlspecialchars($tel);

$name = urlencode($name);
$tel = urlencode($tel);

$name = trim($name);
$tel = trim($tel);

 

Так как мы имеем дело со «свободными» формами, где пользователи могут печатать что угодно, проводим форматирование: htmlspecialchars(), urlencode() и trim(). Скрипт будет работать и без этого. Но в таком случае возможны «нюансы» с безопасностью.

 

mail("to_mail@mail.ru",
     "Тема",
     "Имя: ".$name."\n".
     "Телефон ".$tel,
     "From: script@mail.ru \r\n")

С помощью функции mail() формируем наше письмо, заполняем поля. Электронный адрес, куда необходимо отослать письмо. Далее тема сообщения. Далее вводятся пользовательские данные. В конце указывается электронный адрес, от имени которого будем получать это сообщение.

 

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

Если мы говорим о лендинг пейджах (продающих страницах), пользователя перенаправляют на «страницы благодарности». Где пользователя (покупателя) поздравляют с покупкой/ заказом, сообщают полезную информацию: что делать дальше, контактные данные:

• Как создать "страницу благодарности"

 

Перенаправление будем реализовывать с помощью управляющей логической конструкции if/ else. Если отправка прошла успешно, производим перенаправление:

header("Location: /thank_you.html");

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

Далее кидаем нашу html страницу и php код на хостинг и тестируем.

---

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

---