Каждый наверное во время разработки сайт сталкивается с желанием установить форму обратной связи на свой сайт, чтобы пользователи с легкостью могли к вам обращаться если у них появились какие-либо вопросы.В этом статье я расскажу как вам сделать ajax форму обратной связи.
Посмотреть демо | Скачать скрипт архивом
HTML
<form action method="post" id="feedback"> <div class="form-group"> <label>Имя <small>*</small></label> <input type="text" required name="name" required value="" class="form-control"> </div> <div class="form-group"> <label>Почта <small>*</small></label> <input type="email" required name="email" value="" class="form-control"> </div> <div class="form-group"> <label>Тема <small>*</small></label> <input type="text" required name="subject" value="" class="form-control"> </div> <div class="form-group"> <label>Сообщение</label> <textarea name="text" required class="form-control" rows="6"></textarea> </div> <div class="form-group"> <input type="submit" name="submit" value="Отправить" class="btn btn-success" /> </div> </form>
На этой стадии мы просто создали HTML форму c id feedback, который мы теперь будем использовать для распознования формы в jQuery скрипте ниже.
jQuery
$(document).ready(function() { $("#feedback").submit(function(){ var form = $(this); var error = false; form.find('input, textarea').each( function(){ if ($(this).val() == '') { alert('Зaпoлнитe пoлe "'+$(this).attr('placeholder')+'"!'); error = true; } }); if (!error) { var data = form.serialize(); $.ajax({ type: 'POST', url: 'mail.php', dataType: 'json', data: data, beforeSend: function(data) { form.find('input[type="submit"]').attr('disabled', 'disabled'); }, success: function(data){ if (data['error']) { alert(data['error']); } else { alert('Письмo было отправлено, проверьте почту.'); } }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }, complete: function(data) { form.find('input[type="submit"]').prop('disabled', false); } }); } return false; // вырубaeм стaндaртную oтпрaвку фoрмы }); });
Скрипт выше сначала проверяет поля на наличие информации и если любое из них пустое показывает окошко и просит пользователя ввести нужные данные. Если ошибок нет, то идет отправка AJAX запроса к файлу mail.php (подробнее об этом файле ниже), который выполняет отправку письма на почту.
PHP
<?php if ($_POST) { $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $subject = htmlspecialchars($_POST["subject"]); $message = htmlspecialchars($_POST["text"]); $json = array(); if (!$name or !$email or !$subject or !$message) { $json['error'] = 'Вы зaпoлнили нe всe пoля.'; echo json_encode($json); die(); } if(!preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]{2,6}$|i", $email)) { $json['error'] = 'Нe вeрный фoрмaт почты.'; echo json_encode($json); die(); } // Кодировка для отправленных писем function mime_header_encode($str, $data_charset, $send_charset) { if($data_charset != $send_charset) $str=iconv($data_charset,$send_charset.'//IGNORE',$str); return ('=?'.$send_charset.'?B?'.base64_encode($str).'?='); } // Класс для отправки писем на почту class TEmail { public $from_email; public $from_name; public $to_email; public $to_name; public $subject; public $data_charset='UTF-8'; public $send_charset='windows-1251'; public $body=''; public $type='text/plain'; function send(){ $dc=$this->data_charset; $sc=$this->send_charset; $enc_to=mime_header_encode($this->to_name,$dc,$sc).' <'.$this->to_email.'>'; $enc_subject=mime_header_encode($this->subject,$dc,$sc); $enc_from=mime_header_encode($this->from_name,$dc,$sc).' <'.$this->from_email.'>'; $enc_body=$dc==$sc?$this->body:iconv($dc,$sc.'//IGNORE',$this->body); $headers=''; $headers.="Mime-Version: 1.0\r\n"; $headers.="Content-type: ".$this->type."; charset=".$sc."\r\n"; $headers.="From: ".$enc_from."\r\n"; return mail($enc_to,$enc_subject,$enc_body,$headers); } } $emailgo = new TEmail; $emailgo->from_email = 'bologer.ru'; // Почта отправителя $emailgo->from_name = 'Проверка формы'; // Имя отправителя $emailgo->to_email = $email; // Куда будет отправлено письмо $emailgo->to_name = $name; // Имя получателя $emailgo->subject = $subject; // Тема $emailgo->body = $message; // Сообщение $emailgo->send(); $json['error'] = 0; echo json_encode($json); } else { echo 'У вас нет прав для входа на эту страницу!'; } ?>
PHP код выше проверяет данные полученые через ajax запрос от jQuery, после чего формирует данные и отправляет их на почту. В случае ошибки, данный скрипт отправляет данные обратно к jQuery скрипту и он уже обрабаывает их и показывает пользователю. После успешной отправки письма пользователь получает сообщение об успешной отправке.
Версия PHP выше, не самая безопасная, если вам нужно использовать что-то более стабильное в плане безопасности, то можете восспользоваться вот этой php библиотекой. Так же в ней больше возможностей. Или переписать скрипт самому (если у вас имеются знания в PHP программировании).
На этом все. Если у вас возникли вопросы или сомнения, пожалуйста напишите мне комментарий. Я буду рад вам ответить.