Как настроить форму обратной связи на почту без обновления страницы?

В этой статье мы поговорим о том, как настраивается форма обратной связи на почту без обновления страницы

В первую очередь давайте возьмём какой-нибудь пример кода HTML-формы, чтобы детально разобрать как всё работает. Если делаете для своего сайта, всё аналогично, только работаем с вашей формой.

1. Подготовка формы

Для примера в этом уроке я возьму следующую HTML-форму, к которой будем подключать обработчик для отправки писем. Если делаете под свой сайт, находим в коде подобную форму и продолжаем дальше.

	<form action="" method="post">
		<input type="text" name="name" placeholder="Введите Ваше имя">
		<input type="text" name="tel" placeholder="Введите Ваш номер">
		<input type="email" name="email" placeholder="Введите Вашу почту">
		<button type="submit" value="Отправить заявку">
	</form>

Первое на что сразу обращаю внимание – это атрибут action у тега <form>. В данном примере он пустой, у вас там может быть какое-то значение (или не быть этого атрибута вовсе). Если мы хотим сделать так, чтобы форма отправлялась без перезагрузки страницы – удаляем содержимое атрибута action, либо удаляем этот атрибут полностью и идём дальше.

В предоставленной форме есть 3 тега <input> и тег <button>. Теги <input>, как вы наверное уже догадались выводят на сайте “поля” для заполнения. Тег <button> – это кнопка для отправки.

Перед тем, как мы пойдём дальше, давайте разберём каждый из этих тегов. Это важно, т.к. в них должны содержаться уникальные значения в атрибуте name. Вернёмся к нашему примеру и возьмём какое-нибудь поле:

<input type="text" name="name" placeholder="Введите Ваше имя">

type=”text” означает, что это текстовое поле. В него можно вводить любые символы. Также вместо text вы можете указать password (звездочки вместо введенных символов), email (поле для ввода почты), tel (для ввода номера телефона)

name=”name” – это уникальное название поля. Вместо значения name вы можете написать любое другое значение (например name=”lyboe_znachenie”). Это уникальное значение не должно повторяться с другими полями, чуть позже мы укажем его в PHP-скрипте.

placeholder=”Введите Ваше имя” – это подсказка, которая находится внутри поля. В значении можно указать любой текст или слово. Также атрибут можно удалить, и тогда поле будет без внутренней подсказки.

Из всего этого, самое главное указать уникальное значение у каждого поля в атрибуте name=””. Это значение мы будем заносить в PHP-обработчик, чтобы скрипт понимал откуда брать данные.

Теперь давайте перейдём к следующему этапу и подготовим PHP-скрипт для отправки писем на почту.

2. PHP-скрипт формы обратной связи на почту

В корневой папке с сайтом создайте файл под названием sendform.php (либо распакуйте из архива к данной статье и загрузите к себе в корневую папку с сайтом).

Следующим шагом нам необходимо открыть sendform.php и добавить в него следующий скрипт:

<?php 
$name = trim($_POST['name']); 
$phone = trim($_POST['tel']); 
$email = trim($_POST['email']); 
$fromMail = 'info@verstach.ru'; 
$fromName = 'Поступила заявка с сайта'; //Заголовок письма
$emailTo = 'my-pochta@yandex.ru'; 
$subject = 'Форма обратной связи site.com'; 
$subject = '=?utf-8?b?'. base64_encode($subject) .'?='; 
$headers = "Content-type: text/plain; charset=\"utf-8\"\r\n"; 
$headers .= "From: ". $fromName ." <". $fromMail ."> \r\n"; 

// Содержимое письма 
$body = "Получено письмо с сайта \n Имя: $name\nТелефон: $phone\Почта: $email"; 

// сообщение будет отправлено в случае, если поле с номером телефона не пустое 
if (strlen($phone) > 0) { 
$mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail ); 
return;
} 

?>

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

$name = trim($_POST['name']); 
$phone = trim($_POST['tel']); 
$email = trim($_POST['email']); 

Тут мы передаём уникальные значения из наших атрибутов name=”” у формы, которую мы делали в предыдущем этапе. Как вы видите, в этом примере уже есть все 3 значения которые мы указывали, это name, tel, email. Если вам нужно оставить только 1 или 2 поля, просто удаляем лишние строчки. Если хотите добавить новое поле в этот обработчик (или изменить существующее), то дополнительно покажу пример как это сделать.

Предположим, у нас нет поля E-mail, но вместо него есть поле “Адрес”. Выглядело это поле примерно бы так:

<input type="text" name="address" placeholder="Адрес">

В этом примере мы видим значение “address” у поля, которое мы можем указать в PHP-обработчике. Для этого давайте поменяем старое значение на новое.

Было

$email = trim($_POST['email']); 

Стало

$myinput = trim($_POST['address']); 

$myinput – это название переменной, вместо myinput можете указать любое название на латинице без пробелов и знаков. Чуть позже название этой переменной потребуется продублировать в теле письма.

address – значение атрибута name у нашего нового поля.

Чуть ниже в этом же скрипте находим

$fromMail = 'info@verstach.ru'; 

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

И так, идём дальше. Следующей строчкой видим этот код:

$fromName = 'Поступила заявка с сайта'; //Заголовок письма

Тут мы указываем тему нашего письма. Старайтесь указывать что-то нормальное, чтобы не попадать в спам-фильтр почтовых сервисов.

Следующей строчкой видим такой код:

$emailTo = 'my-pochta@yandex.ru'; 

Тут мы указываем почту, куда будут приходить заявки с сайта.

Теперь находим чуть ниже следующий код:

// Содержимое письма 
$body = "Получено письмо с сайта \n Имя: $name\nТелефон: $phone\Почта: $email"; 

Это содержимое нашего письма. Если в предыдущем этапе вы добавляли новые поля в PHP-обработчик, либо удалили какое-то из полей, необходимо также внести изменения и в это тело письма. Код “\n” означает перенос строки, а такое значение как например “Имя: $name” будет выводить данные из переменной, которую мы указали в самом начале этого скрипта. После почты, перед ковычками, можете добавить например “\n Адрес: $address” и в содержимом письме будут данные из этой переменной.

И последнее, что нас интересует в этом PHP-скрипте, это следующий код:

// сообщение будет отправлено в случае, если поле с номером телефона не пустое 
if (strlen($phone) > 0) { 
$mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail ); 
return;
} 

Здесь в строчке if (strlen($phone) > 0) { происходит проверка на заполненность поля $phone. Если поле не заполнено – форма не отправится. Если вы, например, удалили поле с телефоном, вместо переменной $phone можете указать любую другую (например $name).

На этом подготовка нашего скрипта закончена.

3. Подключение JS-скрипта для передачи данных формы без перезагрузки страницы

Тут уже всё немного проще.

Первое, что нам нужно сделать, это достать из архива следующие файлы:

sweetalert.min.js – скрипт для всплывающего уведомления о статусе отправки

sweetalert.min.css – оформление всплывающего уведомления статуса отправки

form.js – скрипт для передачи данных в PHP-обработчик без перезагрузки страницы.

Загружаем эти файлы в корневую папку с сайтом (там где у нас лежит sendform.php) и открываем index.html. Предварительно нам необходимо подключить эти ресурсы к нашему сайту, но перед тем как мы это сделаем, должен отметить, что предоставленные JS-скрипты работают на jQuery. Перед тем, как подключать новые ресурсы, нам необходимо проверить, есть ли у нас jQuery или нет. Если нет, то его потребуется подключить.

Чтобы узнать, есть jQuery или нет, в index.html ищем по слову “jquery” (заходим в редактор, зажимаем CTRL+F, вводим jquery). Если jQuery не обнаружен, подключаем его следующим образом. В index.html, в самом низу перед тегом </body> вставляем следующий скрипт:

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

Таким образом мы подключим jQuery к нашему сайту и переходим к следующему этапу. Теперь давайте подключим остальные ресурсы. Под скриптом с jQuery вставляем аналогичный код:

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="/../sweetalert.min.js"></script>
<script src="/../form.js"></script>

Обращаю ваше внимание, что порядок скриптов должен быть именно таким. Сначала подключаем jQuery, затем sweetalert, затем form.

Теперь поднимаемся чуть выше, и перед закрывающим тегом </head> добавляем следующий код:

<link rel="stylesheet" type="text/css" href="/../sweetalert.min.css">

Таким образом мы всё подключили и если всё сделали правильно – теперь наша форма работает.

Если у тебя возникли какие-либо вопросы, либо что-то не получается – пиши в комментариях. Стараюсь отвечать за несколько минут.