Как создать динамическую форму обратной связи в WordPress с валидацией и отправкой на почту

Автор: Сергей Титов | Опубликовано: 04.12.2025

Форма обратной связи — обязательный элемент любого сайта. В этой статье мы рассмотрим, как создать динамическую форму обратной связи в WordPress с валидацией полей, защитой от спама и отправкой сообщений на почту без использования сторонних плагинов. Такой подход помогает избежать лишних зависимостей и повысить производительность сайта.

Почему стоит создавать собственную форму обратной связи

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

Точно настроить внешний вид и поведение;
Добавить необходимую валидацию и защиту от спама;
Оптимизировать производительность;
Интегрировать форму с другими частями сайта по своему усмотрению.

Давайте разберёмся, как это реализовать на практике.

Создание шорткода для формы обратной связи в WordPress

Для начала создадим шорткод, который будет выводить HTML форму. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин.

function wpdirect_contact_form_shortcode() {
    ob_start();
    ?>
    <form id="wpdirect-contact-form" method="post">
        <p>
            <label for="wpdirect-name">Имя:</label><br>
            <input type="text" id="wpdirect-name" name="wpdirect_name" required>
        </p>
        <p>
            <label for="wpdirect-email">Email:</label><br>
            <input type="email" id="wpdirect-email" name="wpdirect_email" required>
        </p>
        <p>
            <label for="wpdirect-message">Сообщение:</label><br>
            <textarea id="wpdirect-message" name="wpdirect_message" required></textarea>
        </p>
        <p>
            <input type="submit" name="wpdirect_submit" value="Отправить">
        </p>
        <div id="wpdirect-form-response"></div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpdirect_contact_form', 'wpdirect_contact_form_shortcode');

Это базовая HTML форма с тремя полями: имя, email и сообщение, а также блоком для вывода ответа после отправки.

Обработка данных формы на сервере с защитой от CSRF и валидацией

Чтобы форма работала, нужно обработать отправленные данные. Для этого зарегистрируем AJAX-обработчик в WordPress. Добавим nonce для защиты от CSRF атак.

function wpdirect_enqueue_scripts() {
    wp_enqueue_script('wpdirect-contact-form', get_template_directory_uri() . '/js/wpdirect-contact-form.js', array('jquery'), null, true);
    wp_localize_script('wpdirect-contact-form', 'wpdirect_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpdirect_contact_form_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpdirect_enqueue_scripts');

function wpdirect_handle_contact_form() {
    check_ajax_referer('wpdirect_contact_form_nonce', 'nonce');

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    if (empty($name) || empty($email) || empty($message)) {
        wp_send_json_error('Пожалуйста, заполните все поля.');
    }

    if (!is_email($email)) {
        wp_send_json_error('Введите корректный email.');
    }

    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта ' . get_bloginfo('name');
    $body = "Имя: $name\nEmail: $email\nСообщение:\n$message";
    $headers = array('Content-Type: text/plain; charset=UTF-8', "Reply-To: $name <$email>");

    $sent = wp_mail($to, $subject, $body, $headers);

    if ($sent) {
        wp_send_json_success('Спасибо за сообщение! Мы свяжемся с вами в ближайшее время.');
    } else {
        wp_send_json_error('Ошибка при отправке сообщения. Попробуйте позже.');
    }
}
add_action('wp_ajax_wpdirect_contact_form', 'wpdirect_handle_contact_form');
add_action('wp_ajax_nopriv_wpdirect_contact_form', 'wpdirect_handle_contact_form');

Этот код получает данные из AJAX-запроса, очищает их, проверяет, что поля заполнены и email корректен, а затем отправляет письмо на email администратора сайта.

Добавляем JavaScript для динамической отправки формы через AJAX

Теперь создадим файл wpdirect-contact-form.js в папке js темы или плагина и добавим туда следующий код:

jQuery(document).ready(function($) {
    $('#wpdirect-contact-form').on('submit', function(e) {
        e.preventDefault();

        var data = {
            action: 'wpdirect_contact_form',
            nonce: wpdirect_ajax_obj.nonce,
            name: $('#wpdirect-name').val(),
            email: $('#wpdirect-email').val(),
            message: $('#wpdirect-message').val()
        };

        $('#wpdirect-form-response').html('Отправка...');

        $.post(wpdirect_ajax_obj.ajax_url, data, function(response) {
            if (response.success) {
                $('#wpdirect-form-response').html('<span style="color:green;">' + response.data + '</span>');
                $('#wpdirect-contact-form')[0].reset();
            } else {
                $('#wpdirect-form-response').html('<span style="color:red;">' + response.data + '</span>');
            }
        });
    });
});

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

Защита от спама: простые и эффективные методы

Чтобы форма не стала инструментом рассылки спама, добавим простую защиту:

1. Скрытое поле (honeypot)

Добавим в форму скрытое поле, которое не видно пользователям, но заполнит бот. Если поле заполнено, мы отклоняем запрос.

// В форме добавьте:
<input type="text" name="wpdirect_hp" id="wpdirect-hp" style="display:none;" autocomplete="off">

// В обработчике добавьте проверку:
if (!empty($_POST['wpdirect_hp'])) {
    wp_send_json_error('Спам-бот обнаружен.');
}

2. Ограничение по частоте отправки

Сохраняйте время последней отправки в сессии или в базе и не разрешайте отправлять форму чаще, чем раз в 30 секунд.

3. Использование reCAPTCHA

Если хочется более серьёзную защиту, можно подключить Google reCAPTCHA, но это уже выходит за рамки минимальной реализации.

Итог

Мы создали простую, но функциональную и защищённую форму обратной связи без плагинов, используя стандартные возможности WordPress и AJAX. Такой подход подходит для большинства проектов и легко расширяется под конкретные задачи.

Для подключения формы на странице используйте шорткод: [wpdirect_contact_form].