Главная страница » Як створити форму зворотного зв’язку з відправкою на пошту

Як створити форму зворотного зв’язку з відправкою на пошту

Веб-сайти часто мають форми зв’язку, які дозволяють відвідувачам зв’язатися з власниками сайту. Одним із способів обробки цих форм є відправка введених даних на електронну пошту. У цій статті ми розглянемо процес створення робочої форми зворотного зв’язку з відправкою на email.

Умовою форми буде перевірка введених полів та надсилання листа без перезавантаження сторінки. Іншими словами, це контактна форма, яка дозволяє заповнити та відправити її, не переходячи на іншу сторінку.

HTML код і обробник форми на PHP

Для прикладу ми будемо використовувати два файли index.html та process-form.php

Створення HTML-форми

Перший крок у створенні форми зв’язку – це створення HTML-структури форми. Вам потрібно використати тег <form> для обгортання всіх полів форми і вказати атрибут action, який вказує на URL або обробник, який прийматиме дані форми.

Наступний код вставляємо в index.html

<form id="feedback-form" action="process-form.php" method="post">
  <div>
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name">
    <span id="name-error" class="error"></span>
  </div>
  <div>
    <label for="tel">Телефон:</label>
    <input type="tel" id="tel" name="tel">
    <span id="tel-error" class="error"></span>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span id="email-error" class="error"></span>
  </div>
  <div>
    <label for="message">Повідомлення:</label>
    <textarea id="message" name="message"></textarea>
    <span id="message-error" class="error"></span>
  </div>
  <div>
    <input type="submit" value="Відправити">
  </div>
</form>

<div id="success-message" style="display: none;">
  <p>Дякуємо за ваше повідомлення!</p>
</div>

Обробка введених даних та відправка форми

Для обробки форми будемо використовувати jquery, передачу даних в обробник через ajax.

Наступний код вставляємо після коду форми

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

<script>
  $(document).ready(function() {

    $('#feedback-form').submit(function(event) {

      event.preventDefault(); // Зупиняємо звичайну відправку форми

      // Очищаємо попередні помилки
      $('.error').text('');

      // Отримуємо дані з форми
      var formData = {
        'name': $('#name').val(),
        'tel': $('#tel').val(),
        'email': $('#email').val(),
        'message': $('#message').val()
      };

      // Відправляємо дані на сервер за допомогою Ajax
      $.ajax({
        type: 'POST',
        url: $('#feedback-form').attr('action'),
        data: formData,
        dataType: 'json',
        encode: true
      })
      .done(function(data) {
        if (data.success) {
          // Показуємо повідомлення про успішну відправку
          $('#feedback-form').hide();
          $('#success-message').show();
        } else {
          // Відображаємо помилки під відповідними полями
          if (data.errors.name) {
            $('#name-error').text(data.errors.name);
          }
          if (data.errors.tel) {
            $('#tel-error').text(data.errors.tel);
          }
          if (data.errors.email) {
            $('#email-error').text(data.errors.email);
          }
          if (data.errors.message) {
            $('#message-error').text(data.errors.message);
          }
        }
      });
    });
  });
</script>

Отримання, перевірка та обробка даних на сервері

При надсиланні повідомлення електронної пошти можуть виникати помилки. Обробимо ці помилки та виведемо у формі попередження.

Після надсилання електронного листа, ми повідомляємо користувача про успішне відправлення.

Наступний код у файлі process-form.php зчитує дані, введені у форму

<?php
// Отримуємо дані з форми
$name = htmlspecialchars($_POST['name']);
$tel = htmlspecialchars($_POST['tel']);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars($_POST['message']);

// Перевіряємо поля на валідність
$errors = array();

if (empty($name)) {
  $errors['name'] = 'Введіть ваше ім'я';
}

if (empty($tel)) {
  $errors['tel'] = 'Введіть номер телефону';
}


if (empty($email)) {
  $errors['email'] = 'Введіть ваш email';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $errors['email'] = 'Введіть коректний email';
}

if (empty($message)) {
  $errors['message'] = 'Введіть ваше повідомлення';
}

// Перевіряємо, чи є помилки
if (empty($errors)) {
  // Всі поля валідні, відправляємо повідомлення

  $to = 'recipient@example.com'; // Вкажіть email одержувача
  $subject = 'Нове повідомлення з форми зворотного зв'язку';
  $messageBody = "Ім'я: $namenТелефон: $telnEmail: $emailnПовідомлення: $message";
  $headers = "From: your-email@example.com"; // Вкажіть ваш email

  if (mail($to, $subject, $messageBody, $headers)) {
    // Відправлення успішне
    $response = array('success' => true);
    echo json_encode($response);
  } else {
    // Відправлення не вдалося
    $response = array('success' => false, 'errors' => 'Помилка при відправленні листа');
    echo json_encode($response);
  }
} else {
  // Є помилки, відправляємо їх на клієнтську сторону
  $response = array('success' => false, 'errors' => $errors);
  echo json_encode($response);
}
?>

Просте оформлення полів форми

Форма зворотного зв’язку готова, єдине, якщо у вас немає стилів для форм, то вона виглядає досить непривабливо.

Це можна виправити, я можу запропонувати використати наступне оформлення.

<style>
#feedback-form > div{
  margin-bottom:10px;
}
#feedback-form label{
  display:block;
  color:#333;
}
#feedback-form textarea,
#feedback-form input{
  height:30px;
  border-radius:5px;
  border:1px solid #777;
  padding:0 15px;
  width:260px;
  outline:none;
}
#feedback-form textarea{
  height:100px;
  padding:5px 15px;
}
#feedback-form [type=submit]{
  display:inline-block;
  width:auto;
  padding:0 30px;
  background:#367B64;
  color:#fff;
  transition:0.3s;
  cursor:pointer;
}
#feedback-form [type=submit]:hover{
  background:#265747;
}
</style>

Ці стилі можна додати в той самий файл index.html. Після цього форма буде виглядати так:

Вивід форми у спливаючому вікні

Якщо форма використовується на всіх сторінках сайту, а не лише на сторінках контактів, має сенс виводити її у спливаючому вікні після натискання на кнопку.

Змінимо попередні стилі, додамо кнопку до index.html та напишемо JS-код для взаємодії кнопки та вікна.

Щоб не розміщувати код частинами, я надам далі весь код index.html одразу з html, css та javascript

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<main>
<a href="#" class="get-feedback">Зворотній зв'язок</a>
</main>

<div class="feedback-shadow"></div>
<div class="feedback-win">
  <div class="feedback-close">&times;</div>
  <form id="feedback-form" action="process-form.php" method="post">
    <div>
      <label for="name">Ім'я:</label>
      <input type="text" id="name" name="name">
      <span id="name-error" class="error"></span>
    </div>
    <div>
      <label for="tel">Телефон:</label>
      <input type="tel" id="tel" name="tel">
      <span id="tel-error" class="error"></span>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <span id="email-error" class="error"></span>
    </div>
    <div>
      <label for="message">Повідомлення:</label>
      <textarea id="message" name="message"></textarea>
      <span id="message-error" class="error"></span>
    </div>
    <div>
      <input type="submit" value="Відправити">
    </div>
  </form>
  
  <div id="success-message" style="display: none;">
    <p>Дякуємо за ваше повідомлення!</p>
  </div>

</div>
<style>
.feedback-shadow{
  display:none;
  width:100%;
  height:100%;
  top:0;
  left:0;
  position:fixed;
  background:rgba(0,0,0,.5);
  z-index: -1;
}
.feedback-shadow.show{
  display:block;
  z-index: 9;
}
.feedback-win{
  position: fixed;
  background:#fff url(bg-form.webp) no-repeat -10px bottom;
  top:150%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:40px 40px 40px 100px;
  visibility:hidden;
  height:0;
  transition:0.3s;
  overflow:hidden;
  z-index: -1;
  border-radius:5px;
}
.feedback-win.show{
  visibility: visible;
  height:auto;
  top:50%;
  z-index:10;
}

.feedback-close{
  position: absolute;
  font-size:30px;
  top:15px;
  right:15px;
  cursor:pointer;
  color:#777;
  font-weight: bolder;
}
.feedback-close:hover{
  color:#000;
}
.get-feedback{
  height:30px;
  line-height:30px;
  display:inline-block;
  margin:15px;
  padding:0 30px;
  border-radius:5px;
  background:#367B64;
  transition:0.3s;
  color:#fff;
  text-decoration:none;
}
#feedback-form{
  padding:15px;
  background:rgba(255,255,255,.5);
  border-radius:5px;
}
#feedback-form > div{
  margin-bottom:10px;
  position: relative;
}
#feedback-form label{
  display:block;
  color:#333;
  margin-bottom:2px;
}
#feedback-form textarea,
#feedback-form input{
  height:30px;
  border-radius:5px;
  box-shadow: 0 0 5px #ccc;
  padding:0 15px;
  width:360px;
  outline:none;
  border:0;
}
#feedback-form textarea{
  height:100px;
  padding:5px 15px;
  resize:none;
}
#feedback-form [type=submit]{
  display:inline-block;
  width:auto;
  padding:0 30px;
  background:#367B64;
  color:#fff;
  transition:0.3s;
  cursor:pointer;
}
#feedback-form .error{
  position: absolute;
  right:0;
  top:0;
  font-size:10px;
  color:red;
}
.get-feedback:hover,
#feedback-form [type=submit]:hover{
  background:#265747;
}
</style>
 
<script>
  $(document).ready(function() {

    $('.get-feedback').click(function(e){
      e.preventDefault();
      $('.feedback-shadow, .feedback-win').addClass('show');
    });
    $('.feedback-shadow, .feedback-close').click(function(){
      $('.feedback-shadow, .feedback-win').removeClass('show');
    });
    
    $('#feedback-form').submit(function(event) {
      event.preventDefault(); 
 
      $('.error').text('');
 
      var formData = {
        'name': $('#name').val(),
        'tel': $('#tel').val(),
        'email': $('#email').val(),
        'message': $('#message').val()
      };
 
      $.ajax({
        type: 'POST',
        url: $('#feedback-form').attr('action'),
        data: formData,
        dataType: 'json',
        encode: true
      })
      .done(function(data) {
        if (data.success) {
          $('#feedback-form').hide();
          $('#success-message').show();
        } else {
          if (data.errors.name) {
            $('#name-error').text(data.errors.name);
          }
          if (data.errors.tel) {
            $('#tel-error').text(data.errors.tel);
          }
          if (data.errors.email) {
            $('#email-error').text(data.errors.email);
          }
          if (data.errors.message) {
            $('#message-error').text(data.errors.message);
          }
        }
      });
    });
  });
</script>

</body>
</html>

Для форми зворотного зв’язку використовуємо той же обробник із файлу process-form.php

Щоб подивитись приклад спливаючого вікна натискаємо кнопку:

Зворотній зв’язок