Очень часто на сайтах и блогах требуется установить форму обратной связи. Для осуществления данной задачи предлагаю готовое решение.
Скрипт работает стабильно и быстро. После заполнения всех форм и отправки сообщения, пользователь остается на той же странице, что удобно с точки зрения юзабилити.
Чтобы установить данную форму связи на сайт необходимо создать два файла: один с php расширением и другой с javascript. В нашем случаи они будут называться mail.php и script.js.
Файл mail.php
В данном файле размещается код обработки формы. То есть мы передаем данные через html поля формы нашему файлу обработчику, который в свою очередь отправляет информацию с помощью команды mail()
на почту.
$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 );
Второй файл mail.php, в котором находится обработчик формы, должен находиться в той же папке, что и файл index.php.
Файл script.js
jQuery(document).ready(function() {
jQuery("#form-1").submit(function() {
var th = jQuery(this);
jQuery.ajax({
type: "POST",
url: "/mail.php",//путь к расположению файла на сервере
data: th.serialize()
}).done(function() {
jQuery(th).find('.success').addClass('active').css('display', 'flex').hide().fadeIn();
setTimeout(function() {
jQuery(th).find('.success').removeClass('active').fadeOut();
th.trigger("reset");
}, 3000);
});
return false;
});
});
Структура html формы и настройки
Как не удивительно, но основные настройки в представленном скрипте мы делаем именно в html разметке (обычно в других формах приходится возиться с php кодом).
<form id="form-1">//Для каждой формы пишем свой id который попадает в скрипт jQuery
<div class="success"><span>Спасибо за заявку!</span></div>
<input name="project_name" value="Вопрос со страницы услуги" type="hidden">
<input name="admin_email" value="office@seok.com.ua" type="hidden">//Вставляем свой адрес электронной почты
<input name="form_subject" value="Вопрос со страницы услуги" type="hidden">
<div class="form-group">
<input class="form-control" name="Имя" placeholder="Ваше имя..." required="" type="text"> </div>
<div class="form-group">
<input class="form-control" name="Телефон" placeholder="Ваш телефон..." required="" type="text">
</div>
<button class="cd-btn button">Отправить</button>
</form>
Очень хороший скрипт для отправки данных. Основное преимущество – простота в использовании и возможность кастомизации. Например, можно добавить сколько угодно дополнительных полей, загрузку файла, слайдеры и календарь.
Leave a Reply