15.03.2018 90 0

Як зробити форму зворотного зв’язку без перезавантаження сторінки?

, , , ,

У вас лендінг, чи сайт на WordPress, чи на ModX, чи ще щось — це неважливо, якщо ваш хостинг підтримує функцію mail(), то цей туторіал вам підійде. Ми зверстаємо форму, стилізуємо її, напишимо невеличкий скрипт на jQuery та PHP, після чого ваші клієнти зможуть відправляти вам свої імена та телефони! І це без перезавантаження сторінки.

Спочатку зробимо структуру. Майте на увазі, що вона може бути абсолютно різною у мене та у вас, я просто показую приклад.

<div class="form-block">
  <h4>Свяжитесь с нами</h4>
  <form class="form">
    <p><input type="text" name="name" placeholder="Ваше имя" required></p>
    <p><input type="email" name="email" placeholder="Ваш e-mail" required></p>
    <p><input type="tel" name="phone" placeholder="Ваш телефон" required></p>
    <p><textarea name="text" placeholder="Сообщение" required></textarea></p>
    <button>Отправить</button>
  </form>
</div>

Тут нічого складного: загальний батьківський блок, форма (не забудьте дати їй клас, далі знадобиться), у якій чотири поля для тексту із атрибутом required — для обов’язкового заповнення. Тепер стилізуємо її: 

/* Стилі для загального блоку */
.form-block {
  max-width: 400px;
  padding: 30px 45px;
  border-radius: 10px; 
  box-shadow: 0 0 25px rgba(0,0,0,.1)
}
/* Стилі для заголовку форми */
.form-block h4 {
  margin: 0 0 25px;
  text-align: center;
  font-size: 28px;
  line-height: 28px;
}
/* Стилі для полів форми */
.form-block form p {
  margin: 0 0 15px;
}
.form-block form input, .form-block form textarea {
  width: 100%;
  border: 1px solid #ddd;
  padding: 15px;
  outline: none; 
  transition: .3s; 
}
.form-block form textarea {
  resize: none; 
  height: 100px;
}
/* Стилі для полів при фокусі */
.form-block form input:focus, .form-block form textarea:focus {
  border-color: #aaa;
}
/* Стилі для кнопки форми */
.form-block form button {
  background: #353535;
  border: 0; 
  outline: none; 
  color: #fff; 
  padding: 15px 35px;
  cursor: pointer;
  transition: .3s; 
}
.form-block form button:hover {
  background: #222;
}

Після цього напишемо трохи JS коду, не забудьте підключити бібліотеку jQuery: 

$(document).ready(function() {
  /* Обираємо форми по класу */
  $(".form").submit(function() {
    $.ajax({
      type: "POST",
      /* Файл для опрацювання інформації з полів */
      url: "mail.php",
      /* Зчитуємо інформацію з полів цієї форми за допомогою serialize() */
      data: $(this).serialize()
    }).done(function() {
      /* Після успішного виконання чистимо поля форми */
      $(this).find("input").val("");
      /* Видаємо вспливаюче вікно про успішну відправку */
      alert("Дякуємо! Зовсім скоро ми вийдемо на зв'язок!");
      $(".form").trigger("reset");
    });
    return false;
  });
});

Чому ми використовуємо клас, а не ідентифікатор? Тому що, до прикладу, на лендінгу форм може бути декілька, а ідентифікатор повторюватися не може, тоді як з класом проблем не буде. Наступний крок — трохи PHP. Створіть файл mail.php, до якого ми звертаємося у JS, і там напишіть наступне: 

<?php
  $recepient = "youremail@mail.com"; /* Тут ваша пошта, куди приходитиме інформація */
  $sitename = "Назва вашого сайту"; /* Тут просто назва вашого сайту з тегу <title> */
  
  /* Тут зчитуємо дані по атрибуту name в input та textarea */
  $name = trim($_POST["name"]);
  $email = trim($_POST["email"]);
  $phone = trim($_POST["phone"]);
  $text = trim($_POST["text"]);
  
  /* А тут формуємо лист, можна використовувати HTML */
  $message = "
    <h1>Нова заявка!</h1>
    <p><b>Ім'я:</b> $name</p>
    <p><b>Пошта:</b> $email</p>
    <p><b>Телефон:</b> $phone</p>
    <p><b>Текст:</b> $text</p>
  ";

  $pagetitle = "Нове повідомлення з сайту \"$sitename\"";
  mail($recepient, $pagetitle, $message, "Content-type: text/html; charset=\"utf-8\"\n From: $recepient");

Ось і все! Код в усіх блоках можна редагувати, головне розуміти, що ви змінюєте. Залишайте ваші питання у коментарях, якщо щось не зрозуміло, спробую допомогти.

Коментарі