У вас лендінг, чи сайт на 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");

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

Коментарі

film

20.11.2020

The details mentioned within the report are a few of the very best readily available. Emmye Benedick Godfry

erotik izle

16.11.2020

This is the perfect webpage for everyone who really wants to find out about this topic. Danette Ian Nelson

erotik izle

15.11.2020

I thought if 1 kit was approved for testing ..it was $ 500. Not $ 50.. Jeanette Skyler Meakem

erotik

14.11.2020

I am so grateful for your article post. Thanks Again. Great. Alie Odell Lynsey

erotik izle

14.11.2020

Thank you for the auspicious writeup. It actually was once a enjoyment account it. Winny Ephrayim Gavrah

sikis izle

12.11.2020

If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela

erotik

12.11.2020

If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela