Форма зворотного зв’язку без плагіна в WordPress

Форма зворотного зв’язку є важливим елементом будь-якого сайту, який дозволяє відвідувачам легко зв’язатися з вами. Хоча плагіни можуть полегшити процес створення форми, іноді вони не потрібні, особливо якщо ви бажаєте мати повний контроль над дизайном та функціоналом. У цій статті ми розглянемо, як створити форма зворотного зв’язку без плагіна в WordPress, використовуючи лише HTML, CSS, PHP, і трохи JavaScript.

Основи HTML для форми зворотного зв’язку

Почнемо зі створення простої HTML форми. Основні теги, які вам знадобляться, це <form>, <input>, <textarea>, і <button>. Ось базовий приклад коду:

<form action="process_form.php" method="POST">
    <label for="name">Ваше ім'я:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Ваш email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Повідомлення:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Відправити</button>
</form>

Цей код потрібно додати на сторінку:

Обробка даних форми за допомогою PHP

Після того, як користувач заповнює форму і натискає кнопку відправки, дані передаються на сервер для обробки. Це можна зробити за допомогою PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $message = htmlspecialchars($_POST['message']);
    
    $to = "your-email@example.com";
    $subject = "Новий контакт з форми";
    $body = "Ім'я: $name\nEmail: $email\nПовідомлення:\n$message";
    
    if (mail($to, $subject, $body)) {
        echo "Повідомлення успішно відправлено!";
    } else {
        echo "На жаль, виникла помилка при відправці.";
    }
}
?>

Для цього створіть в кореневому каталозі WordPress файл process_form.php з кодом зазначеним вище. В самому коді змініть «your-email@example.com» на свою поштову скриньку.

Відправка форми на email

Для відправки форми на електронну пошту використовується функція mail(). Важливо правильно налаштувати поштовий сервер, щоб уникнути проблем із доставкою повідомлень.

Додавання стилів до форми

Щоб форма виглядала привабливо, використовуйте CSS. Ви можете додати стилі для всіх елементів форми та забезпечити адаптивність для мобільних пристроїв.

form {
    max-width: 600px;
    margin: auto;
    padding: 1em;
    background: #f9f9f9;
    border-radius: 5px;
}

input, textarea {
    width: 100%;
    padding: 0.5em;
    margin-top: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 0.7em;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

Захист форми від спаму

Щоб захистити форму від спаму, ви можете додати CAPTCHA або використовувати прості методи, такі як honeypot (додаткове приховане поле, яке не повинно бути заповнене) або time-based CAPTCHA (перевірка часу заповнення форми).

Додавання JavaScript для поліпшення користувацького досвіду

JavaScript дозволяє зробити користування формою більш зручним. Наприклад, можна додати валідацію на стороні клієнта або використовувати AJAX для відправки форми без перезавантаження сторінки.

document.querySelector('form').addEventListener('submit', function(event) {
    // Перевірка даних форми перед відправкою
    let name = document.getElementById('name').value;
    if (name === '') {
        alert('Будь ласка, введіть ваше ім\'я');
        event.preventDefault();
    }
    // Інші перевірки...
});

Створена форма зворотного зв’язку без плагіна в WordPress дає вам більше контролю над її функціоналом і виглядом. Використовуючи базові знання HTML, CSS, PHP і JavaScript, ви можете легко реалізувати форму, яка буде відповідати всім вашим потребам і вимогам.