Форма обратной связи с валидацией (PHP+Ajax+jQuery)

Подобных статей в интернете великое множество и наверное я вряд ли привнесу что-то новое в эту тему, но по-сколько делать аналогичные формы мне приходится буквально каждую неделю, я подумал, почему бы не сделать удобный каркас, который можно быстро прикрутить к любому проекту.

HTML-каркас формы на Bootstrap

Простая болванка формы обратной связи. Для удобства включил в код все наиболее популярные типы полей (текстовые поля, checkbox, radio, select, textarea).

<form id="feedback" action="">
  <div class="form-group">
    <label>Имяч</label>
    <input type="text" class="form-control" name="name" placeholder="Введите имя">
  </div>
  
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" name="email" placeholder="Введите Email">
  </div>
  
  <div class="form-group">
    <label>Телефон</label>
    <input type="tel" class="form-control" name="phone" placeholder="Введите телефон">
  </div>

  <div class="form-group">
    <label>Выберете тему обращения</label>
    <select name="sub" class="form-control">
      <option value="Техническая поддержка">Техническая поддержка</option>
      <option value="Реклама">Реклама</option>
      <option value="Просто так">Просто так</option>
    </select>
  </div>
  
  <div class="form-group">
    <label>Сообщение</label>
    <textarea class="form-control" rows="3" name="message"></textarea>
  </div>
  
  <div class="form-group">
    <label>Прикрепить файл</label>
    <input type="file" class="form-control-file">
    <small id="fileHelp" class="form-text text-muted">Приложите необходимые документы для отправки (не более 5МБ)</small>
  </div>
  
  <fieldset class="form-group">
  <label>Как Вам ответить?</label>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="callback" value="E-mail" checked>
        Email
      </label>
    </div>

    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" name="callback" value="Телефон" checked>
        Позвонить
      </label>
    </div>
  </fieldset>
  
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" name="agree" class="form-check-input">
     Я понимаю, что мои данные будут обработаны и сохранены
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Отправка и валидация формы с помощью jQuery

Для начала, давайте подключим jQuery и jQuery Validate для того, что бы код, который напишем ниже исправно работал.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>

Теперь, можно приступить к проверке корректности введенных данных и отправки их в PHP-обработчик для дальнейшей обработки и отправки на почту.

$( document ).ready(function() {
	$('button[type="submit"]').click(function(){
	
	/*Валидация полей формы*/
	$('#feedback').validate({
	//Правила валидации
	rules: {
        name: {
            required: true,
        },
		    email: {
            required: true,
			email: true
        },
		 phone: {
            required: true,
        },

    },
	//Сообщения об ошибках
    messages: {
		name: {
            required: "Обязательно укажите имя",
        },
		email: {
            required: "Обязательно укажите Email",
        },
		phone: {
			required: "Укажите номер телефона",
		},
    },
	
	/*Отправка формы в случае успеха валидации*/
    submitHandler: function(){
         sendAjaxForm('feedback', 'ajax-form.php'); //Вызываем функцию отправки формы
		 return false; 
    }
	});
});

	function sendAjaxForm(feedback, url) {
					$.ajax({
						url:     url, //url страницы (ajax-form.php)
						type:     "POST", //метод отправки
						dataType: "html", //формат данных
						data: $("#"+feedback).serialize(),  // Сеарилизуем объекты формы
						success: function(response) { //Данные отправлены успешно
							
							//Ваш код если успешно отправлено
							alert('Успешно отправлено!');
						},
						error: function(response) { // Данные не отправлены
							
							//Ваш код если ошибка
							alert('Ошибка отправления');
						}
					});

}
});

Теперь, когда данные приходят в наш обработчик, принимаем их, раскладываем для удобства и отправляем на почту.

Обработчик PHP

<?php
//Для начала проверим есть ли данные в полях name и email, что бы не слать совсем пустые формы :)
//Если всё в порядке, то работаем дальше
if (isset($_POST["name"]) && isset($_POST["email"]) ) { 

//Принимаем данные POST-запроса и записываем значения в переменные

$name = $_POST['name'];
$phone = $_POST['phone']; 
$email = $_POST['email'];
$sub = $_POST['sub'];

//Теперь давайте настроим куда отправляем и откуда

$my_email = '[email protected]'; // Куда отправляем
$sender_email = '<[email protected]>'; // От кого отправляем
$title = "Заголовок сообщения"; 

//Сообщение, которое приходит на почту со всеми нужными нам данными:

$mes = "
 Имя: $name\n
 Телефон: $phone\n
 E-mail: $email\n
 Тема обращения: $sub\n
";

//Всё, теперь можно отправлять письмо на почту

$send = mail ($my_email,$title,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$sender_email");

}

?>

Если кто-то не понял про этот PHP обработчик, то это файл ajax-form.php, который по задумке лежит в одной директории с формой.