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 защитой от спама.
Комментарии