Модуль обратный звонок на лендинг

Делаем отдельно все части лендинга.

Форма обратной связи или обратный звонок являются интерактивной частью лендинга. Есть несколько способов сделать такой модуль. Рассмотрим наиболее простой.

Модуль "обратный звонок" на JS с Ajax

Для корректной работы модуля необходимо 3 файла

• index.html
• common.js
• mail.php

Распишим каждый из них отдельно.

HTML файл

 
<title>Отправка форм AJAX</title>
<form id="form">
 <input type="text" name="name" placeholder="Ваше имя" required="" />
<input type="text" name="phone" placeholder="Ваш телефон" required="" />
 
 <button>Отправить</button>
 </form>
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
 

 JS файл

$(document).ready(function() {
 $("#form").submit(function() {
 $.ajax({
 type: "POST",
 url: "mail.php",
 data: $(this).serialize()
 }).done(function() {
 $(this).find("input").val("");
 alert("Спасибо за заявку! Скоро мы с вами свяжемся.");
 $("#form").trigger("reset");
 });
 return false;
 });
});

PHP файл

$recepient = "емайл";
$sitename = "Название сайта";
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$message = "Имя: $name \nТелефон: $phone ;
$pagetitle = "Новая заявка с сайта \"$sitename\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

Если у вас будет вот такое сочетание файлов, то должно все работать корректно.

Если форма не работает, значит сравнивайте по строкам кода в этих файлах, обращайте внимание, чтобы ничего не повторялось и ничего не было пропущено