Удобная форма обратной связи без перезагрузки страницы

Удобная форма обратной связи без перезагрузки страницы

Очень часто клиенты просят сделать у них на сайте удобную форму обратной связи. Удобство заключается в том, что после отправки заявки страница сайта не перезагружается, а мгновенно выдает пользователю сообщение об успешной операции. Также если пользователь забудет заполнить необходимые поля, то получит сообщение об ошибке.

Для этой тривиальной задачи, я заранее нашел и модифицировал скрипт, который работает на AJAX технологии. Также я подготовил красивое оформление полей, используя фреймворк Bootstrap 3. Достаточно скопировать мои CSS-стили и форма примет готовый для использования вид.

1 — подключаем Jquery библиотеку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2 — устанавливаем HTML форму с использованием Bootstrap разметки:

<section id="message">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2><span>Форма</span> обратной связи</h2>
         <div id="contact-form">        
           <div class="controls">
             <div class="row">
               <div class="col-md-6">
                 <div class="form-group">
                   <label for="form_email">Ваш Email *</label>
                    <input id="form_email" type="email" class="form-control" placeholder="Введите адрес электронной почты*" required="" data-error="Требуется действующее электронное письмо.">
                   <div class="help-block with-errors"></div>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="form-group">
                   <label for="form_name">Ваше имя *</label>
                    <input id="form_name" type="text" class="form-control" required="" placeholder="Как к Вам обращаться?">
                   <div class="help-block with-errors"></div>
                 </div>
               </div>
             </div>
             <div class="row">
                 <div class="col-md-12 checkbox-data">
                     <label>
                         <input type="checkbox" checked="checked" id="person_data" required="">
                         <i class="fa fa-2x icon-checkbox"></i>
                         <span>Подтверждаю согласие на обработку <a href="#" target="_blank" rel="noopener">персональных данных</a></span>
                     </label>
                 </div>
             </div>
             <div class="row">
               <div class="col-md-12">
                 <div class="form-group">
                    <textarea id="form_message" name="text_comment" class="form-control" placeholder="Пожалуйста, оставьте сообщение" rows="4" required="" data-error="Пожалуйста, оставьте нам сообщение."></textarea>
                   <div class="help-block with-errors"></div>
                 </div>
                 <div class="messages"></div>
               </div>          
               <div class="col-md-12 text-center">
                  <input type="submit" name="btn_submit" id="button_contacts" value="Отправить сообщение">
               </div>
             </div>
           </div>
         </div>
        </div>
      </div>
    </div>
</section>

3 — размещаем JS скрипт

Этот скрипт размещается непосредственно под HTML формой и после объявления jQuery.

         $(document).ready(function(){
            $('#button_contacts').click(function(){
                var form_name   = $('#form_name').val();
                var form_email   = $('#form_email').val();
                var form_message = $('#form_message').val();
                $.ajax({
                    url: "post.php", 
                    type: "post", 
                    dataType: "json", 
                    data: { 
                        "form_name":   form_name,
                        "form_email":   form_email,
                        "form_message": form_message
                    },
                    success: function(data){
                        $('.messages').html(data.result); 
                    }
                });
            });
        });

4 — рассмотрим код обработчика, который нужно разместить в файл post.php

В обработчике достаточно поменять значение переменной $mail_to, вписав туда свою почту.

 $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
	if($_POST['form_email'] == "")   $errors[] = "Поле Ваш e-mail не заполнено";
    if($_POST['form_name'] == "")    $errors[] = "Поле Ваше имя не заполнено";
    if($_POST['form_message'] == "") $errors[] = "Поле Текст сообщения не заполнено";
 
    // если форма без ошибок
    if(empty($errors)){     
        // собираем данные из формы
        $message  = "Имя пользователя: " . $_POST['form_name'] . "
"; $message .= "E-mail пользователя: " . $_POST['form_email'] . "

"; $message .= "Текст письма: " . $_POST['form_message']; send_mail($message); // отправим письмо // выведем сообщение об успехе $msg_box = "Спасибо за обращение, сообщение успешно отправлено!
В течении 24 часов я Вам отвечу!

"; }else{ // если были ошибки, то выводим их $msg_box = ""; foreach($errors as $one_error){ $msg_box .= "$one_error
"; } } // делаем ответ на клиентскую часть в формате JSON echo json_encode(array( 'result' => $msg_box )); // функция отправки письма function send_mail($message){ // почта, на которую придет письмо $mail_to = "[email protected]"; // тема письма $subject = "Письмо с обратной связи"; // заголовок письма $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма $headers .= "From: Название сайта \r\n"; // от кого письмо // отправляем письмо mail($mail_to, $subject, $message, $headers); }

4 — копируем стили оформления

Для корректного отображения формы должен быть подключен Bootstrap 3.

#message
{
	padding-top:50px;
	padding-bottom:70px;
	background-color:#f8f8f8;
	border-top:1px solid #e5e5e5
}

#message h2
{
	margin-bottom:30px
}

#message h2 span
{
	border-bottom:5px solid #ed1d25
}

#message label
{
	color:#666;
	margin-bottom:10px;
	font-size:1.2em
}

#message #form_email,#message #form_message,#message #form_name
{
	box-sizing:border-box;
	border:1px solid #fff;
	box-shadow:none
}

#message #form_email,#message #form_name
{
	padding:25px;
	border:1px solid #ccc;
	font-size:1.1em
}

#message #form_message
{
	height:249px;
	padding:25px;
	border:1px solid #ccc;
	font-size:1.2em
}

#message #button_contacts
{
	background:#666;
	padding:15px 0;
	width:100%;
	border:2px solid #666;
	color:#fff;
	cursor:pointer;
	font-size:1.3em;
	text-transform:uppercase;
	transition:background .6s,color .6s
}

#message #button_contacts:hover
{
	background:0 0;
	color:#666
}

Вот и все! Наша форма готова. Скачивайте и оставляйте свои комментарии.