Часто разработчики используют на своих сайтах формы обратной связи. В данном гайде я покажу как сделать отправку ответа на форму который придёт Вам на указанную в скрипте почту.
В гайде всё будет разложено по спойлерам.
Забыл сказать, скрипт сам находит все строки которые надо заполнить. Хоть их будет 100 миллиардов штук, скрипт сам найдёт и добавит вам в таблицу. Так-же мне письмо пришло в спам, куда придёт Вам я не знаю. Конец!
Ссылка на весь проект тут - Клик
В гайде всё будет разложено по спойлерам.
Создаём файл index.html и пишем такой код
project_name - Название Вашего сайта
admin_email - Почта, куда будут приходить ответы
form_subject - Тема всех писем. Советую писать "Новая заявка"
Скрытые поля с типом hidden так-же нужны. В них хранится информация куда надо отправлять ответ.
Не забываем подключить библиотеку jQuery. Она нам надо будет позже.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forma</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin: 10px 0px 10px 0px;
}
.forma {
display: flex;
justify-content: center;
}
</style>
<body>
<div class="forma">
<form>
<input type="hidden" name="project_name" value="Test Site">
<input type="hidden" name="admin_email" value="nelit2389@gmail.com">
<input type="hidden" name="form_subject" value="Новая заявка">
<input type="text" name="Name" placeholder="Enter your name"><br>
<input type="number" name="Phone" placeholder="Enter your mobile phone"><br>
<button>Send Form</button>
</form>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>project_name - Название Вашего сайта
admin_email - Почта, куда будут приходить ответы
form_subject - Тема всех писем. Советую писать "Новая заявка"
Скрытые поля с типом hidden так-же нужны. В них хранится информация куда надо отправлять ответ.
Не забываем подключить библиотеку jQuery. Она нам надо будет позже.
Создаём файл main.js и пишем такой код
JavaScript:
$(document).ready(function() { // Создаём функцию
$("form").submit(function() { // Если нажата кнопка Send Form в нашей форме
var th = $(this)
$.ajax({
type: "POST",
url: "mail.php", // Путь к нашему php файлу
data: th.serialize()
}).done(function() { // Удачное выполнение скрипта (Если отправка прошла успешно)
alert("Thank you!") // Отправим надпись Thank you когда всё получится
setTimeout(function() { // Установим отложенный запуск функции, через 1 секунду форма будет очищена
th.trigger("reset") // Очистка формы
}, 1000)
});
return false;
})
})Создаём файл mail.php и пишем такой код
PHP:
<?php
$method = $_SERVER['REQUEST_METHOD'];
//Script Foreach
$c = true;
if ( $method === 'POST' ) {
$project_name = trim($_POST["project_name"]);
$admin_email = trim($_POST["admin_email"]);
$form_subject = trim($_POST["form_subject"]);
foreach ( $_POST as $key => $value ) {
if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
$message .= "
" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
} else if ( $method === 'GET' ) {
$project_name = trim($_GET["project_name"]);
$admin_email = trim($_GET["admin_email"]);
$form_subject = trim($_GET["form_subject"]);
foreach ( $_GET as $key => $value ) {
if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
$message .= "
" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
}
$message = "<table style='width: 100%;'>$message</table>";
function adopt($text) {
return '=?UTF-8?B?'.Base64_encode($text).'?=';
}
$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;
mail($admin_email, adopt($form_subject), $message, $headers );Вот мы и добрались до тестов. Я использую хостинг Ukraine.
Через FTP клиент подключаемся к FTP сайта
Перекидываем все файлы нашего проекта на хостинг
Заходим в браузер и вводим нашу ссылку
Заполняем форму и отправляем
Получаем ответ о том, что письмо отправлено и идём проверять почту
Откроем письмо более подробно и видим таблицу.
Вот так всё просто.
Через FTP клиент подключаемся к FTP сайта
Перекидываем все файлы нашего проекта на хостинг
Заходим в браузер и вводим нашу ссылку
Заполняем форму и отправляем
Получаем ответ о том, что письмо отправлено и идём проверять почту
Откроем письмо более подробно и видим таблицу.
Вот так всё просто.
Забыл сказать, скрипт сам находит все строки которые надо заполнить. Хоть их будет 100 миллиардов штук, скрипт сам найдёт и добавит вам в таблицу. Так-же мне письмо пришло в спам, куда придёт Вам я не знаю. Конец!
Ссылка на весь проект тут - Клик
