Ajax форма обратной связи
Для создание обратной формы на Ajax, вам потребуется создать три файла.
- index.html - Главная страница, в ней разметка формы в HTML
- script.js - В этом файле формируем Ajax для формы
- form.php - Здесь мы будем обрабатывать форму через php
1. Создадим первый файл index.html и в нём мы создадим форму:
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="utf-8"> <title>Название страницы</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div> <form id="myform" method="POST"> <input type="text"> <input type="hidden" name="question" value="1"> <textarea type="text" name="message" placeholder="Ваш вопрос"></textarea> <input type="button" class="btn-form" value="Задать вопрос" > </form> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
2. Теперь файл script.js, где мы будем формировать Ajax-запрос (не забудьте подключить библиотеку jquery).
jQuery(function($){
jQuery('#myform').click(function(){
form = $(this).parent('form');
$.ajax({
url: 'form.php',
type: 'GET',
dataType: 'json',
data: ({
'mes': $(this).parent('form').find('textarea').val(),
'question': $(this).parent('form').find('input[name=question]').val(),
'span': $(this).parent('form').find('input[name=span]').val()
}),
success: function(response){
if (response){ // если есть ответ, то выполняем след. действия
form.append('Спасибо за ваше сообщение');
} else {
form.append('Ошибка!');
}
}
});
});
});
1. Создали форму и ajax-скрипт для неё, теперь её нужно обработать, создаём файл form.php и в нём пишем:
<?php
$addresses = array(
'mail1@gmail.com',
'mail2@gmail.com',
);
if (isset($_REQUEST['mes']) && !empty($_REQUEST['mes'])){
if (empty($_REQUEST['span'])){
$question = $_REQUEST['question'];
$message = $_REQUEST['mes'];
$send = "На сайте site.ru задали вопрос №".$question.": ".$message;
$to= implode(', ', $addresses);
$from = "no-replay@ru-bezh.ru";
$subject = "Вопрос от сайта";
$headers = "From: $from\r\nReplay-To: $from\r\nContent-type: text/plain; charset=utf-8\r\n";
mail($to, $subject, $send, $headers);
}
}
?>
Форма готова, конструкция самая простая, можно разместить на любом сайте, форма также защищена от спама, методом добавки скрытых полей. Вы можете взять эту конструкцию за основу.
Читайте о создании простой обратной форме на php и обратной связи на modx c защитой от спама.
E-mail:
Telegram:
Комментарии