Создание формы обратной связи с использованием PHPMailer и AJAX

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

Вы можете вместо этих полей поставить свои, какие вам нужны для вашей задачи. В данном примере я не использовал стили оформления, пусть каждый подстраивает дизайн под свои нужды.

Шаг 1: Настройка HTML формы

Сначала создадим HTML форму с необходимыми полями:

<form id="feedbackForm" enctype="multipart/form-data">
  <label for="phoneModel">Модель телефона:</label>
  <input type="text" id="phoneModel" name="phoneModel" required>

  <label for="imageUpload">Загрузить изображение:</label>
  <input type="file" id="imageUpload" name="imageUpload" accept="image/*" required>

  <label for="caseMaterial">Материал чехла:</label>
  <select id="caseMaterial" name="caseMaterial">
    <option value="help">Помогите с выбором материала</option>
    <option value="silicone">Силикон</option>
    <option value="2dPlastic">2D Пластик</option>
    <option value="3dPlastic">3D Пластик</option>
  </select>

  <label for="customerName">Имя, Фамилия заказчика:</label>
  <input type="text" id="customerName" name="customerName" required>

  <label for="customerPhone">Номер телефона заказчика:</label>
  <input type="tel" id="customerPhone" name="customerPhone" required>

  <label for="deliveryMethod">Выбор доставки:</label>
  <select id="deliveryMethod" name="deliveryMethod">
    <option value="novaPoshta">Новая Почта</option>
    <option value="ukrPoshta">Укрпочта</option>
  </select>

  <label for="deliveryAddress">Адрес доставки:</label>
  <textarea id="deliveryAddress" name="deliveryAddress" required></textarea>

  <label for="orderComment">Комментарий к заказу:</label>
  <textarea id="orderComment" name="orderComment"></textarea>

  <button type="button" onclick="submitForm()">Оформить заказ</button>
</form>

Шаг 2: Написание JavaScript для проверки полей и отправки данных на сервер

Добавим JavaScript для проверки полей формы и отправки данных на сервер без перезагрузки страницы:

<script>
function submitForm() {
  // Получение данных из формы
  var formData = new FormData(document.getElementById("feedbackForm"));

  // Отправка данных на сервер (используя AJAX)
  $.ajax({
    type: "POST",
    url: "processForm.php",
    data: formData,
    contentType: false,
    processData: false,
    success: function(response) {
      alert(response); // Вывод сообщения об успешной отправке (можно заменить на свой вариант обработки)
    },
    error: function(error) {
      alert("Ошибка при отправке формы"); // Обработка ошибки (можно заменить на свой вариант обработки)
    }
  });
}
</script>

Шаг 3: Настройка серверной стороны с использованием PHP и PHPMailer

Создадим файл processForm.php для обработки данных формы и отправки почты с использованием PHPMailer:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// Подключение библиотеки PHPMailer
require 'vendor/autoload.php';

// Получение данных из формы
$phoneModel = $_POST['phoneModel'];
$caseMaterial = $_POST['caseMaterial'];
$customerName = $_POST['customerName'];
$customerPhone = $_POST['customerPhone'];
$deliveryMethod = $_POST['deliveryMethod'];
$deliveryAddress = $_POST['deliveryAddress'];
$orderComment = $_POST['orderComment'];

// Проверка на заполнение обязательных полей
if (empty($phoneModel) ||
    empty($_FILES['imageUpload']) ||
    empty($caseMaterial) ||
    empty($customerName) ||
    empty($customerPhone) ||
    empty($deliveryMethod) ||
    empty($deliveryAddress)) {
    echo "Пожалуйста, заполните все обязательные поля.";
    exit;
}

// Создание объекта PHPMailer
$mail = new PHPMailer(true);

try {
    // Настройки сервера отправки почты
    $mail->isSMTP();
    $mail->Host       = 'mail.online.online'; // Замените на адрес вашего SMTP-сервера
    $mail->SMTPAuth   = true;
    $mail->Username   = '[email protected]'; // Замените на вашу почту
    $mail->Password   = 'online';  // Замените на ваш пароль
    $mail->SMTPSecure = 'tls';
    $mail->Port       = 587;

    // Настройки письма
    $mail->setFrom('[email protected]', 'Отправителя имя'); // Замените на почту отправителя
    $mail->addAddress('[email protected]', 'Получателя имя');  // Замените на почту получателя
    $mail->Subject = 'Заголовок письма админу';  // Замените на свой заголовок вхлдящей почты
    $mail->Body    = "Модель телефона: $phoneModel\nМатериал чехла: $caseMaterial\nИмя, Фамилия заказчика: $customerName\nНомер телефона заказчика: $customerPhone\nВыбор доставки: $deliveryMethod\nАдрес доставки: $deliveryAddress\nКомментарий к заказу: $orderComment";
    $mail->AltBody = 'Текст письма в формате plain text';

    // Добавление вложения (изображения)
    $imagePath = "uploads/" . basename($_FILES['imageUpload']['name']);
    move_uploaded_file($_FILES['imageUpload']['tmp_name'], $imagePath);
    $mail->addAttachment($imagePath, 'Изображение');

    // Отправка письма
    $mail->send();

    // Удаление временного изображения
    unlink($imagePath);

    // Вернуть сообщение об успешной отправке
    echo "Форма успешно отправлена!";
} catch (Exception $e) {
    echo "Ошибка при отправке формы: {$mail->ErrorInfo}";
}
?>

Заключение

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

Не забудьте настроить параметры SMTP-сервера в файле processForm.php и добавить необходимые стили и скрипты для вашего веб-сайта.