Laravel 
React 
Vue 
Next.js 
Nuxt.js 
Opencart 
Worpress 
PHP 
Очень часто на сайтах и блогах требуется установить форму обратной связи. Для осуществления данной задачи предлагаю готовое решение.
Скрипт работает стабильно и быстро. После заполнения всех форм и отправки сообщения, пользователь остается на той же странице, что удобно с точки зрения юзабилити.
Чтобы установить данную форму связи на сайт необходимо создать два файла: один с 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.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>Дуже хороший скрипт для надсилання даних. Основна перевага – простота у використанні та можливість кастомізації. Наприклад, можна додати скільки завгодно додаткових полів, завантаження файлу, слайдери та календар.
Залишити відповідь