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

Почему нужна динамическая форма обратной связи в WordPress

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

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

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

Выбор плагинов для создания и защиты форм обратной связи

Популярные плагины для создания форм

Если вы предпочитаете готовые решения, обратите внимание на следующие плагины:

• Contact Form 7 — простой и гибкий, поддерживает расширения и кастомизацию.
• WPForms Lite — интуитивный интерфейс и множество шаблонов.
• Ninja Forms — модульный подход, удобен для разработчиков.

Однако для более точного контроля и обучения полезно создавать формы самостоятельно.

Плагины для защиты от спама

Спам — частая проблема для форм. Для борьбы с ним используйте:

• Akismet — анализирует отправленные данные и фильтрует спам.
• Really Simple CAPTCHA — добавляет капчу, совместим с Contact Form 7.
• Google reCAPTCHA — защищает форму с помощью современного сервиса Google.

Мы рассмотрим пример реализации простейшей капчи без плагинов.

Создание динамической формы обратной связи: структура и логика

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

HTML-форма с динамической подгрузкой

Форма будет создана через шорткод, который можно добавить в любую страницу или запись:

function wpcore_contact_form_shortcode() {
    ob_start();
    ?>
    <form id="wpcore-contact-form" method="post">
        <p><label>Имя:<br><input type="text" name="wpcore_name" required></label></p>
        <p><label>Email:<br><input type="email" name="wpcore_email" required></label></p>
        <p><label>Тема:<br><input type="text" name="wpcore_subject" required></label></p>
        <p><label>Сообщение:<br><textarea name="wpcore_message" rows="5" required></textarea></label></p>
        <p><label>Введите сумму 3 + 4 = ?<br><input type="text" name="wpcore_captcha" required></label></p>
        <p><input type="submit" name="wpcore_submit" value="Отправить"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcore_contact_form', 'wpcore_contact_form_shortcode');

Этот шорткод [wpcore_contact_form] вставляется в страницу, и форма отображается там.

Обработка и валидация данных на сервере

Для обработки формы используем хук init. В функции проверим nonce, обязательные поля, email, капчу и отправим письмо.

function wpcore_handle_form_submission() {
    if (!isset($_POST['wpcore_submit'])) {
        return;
    }

    if (!wp_verify_nonce($_POST['_wpnonce'] ?? '', 'wpcore_contact_form_nonce')) {
        wp_die('Ошибка безопасности. Попробуйте снова.');
    }

    $name = sanitize_text_field($_POST['wpcore_name']);
    $email = sanitize_email($_POST['wpcore_email']);
    $subject = sanitize_text_field($_POST['wpcore_subject']);
    $message = sanitize_textarea_field($_POST['wpcore_message']);
    $captcha = sanitize_text_field($_POST['wpcore_captcha']);

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

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

    if ($captcha != '7') { // 3 + 4 = 7
        wp_die('Неверный ответ на вопрос капчи.');
    }

    $to = get_option('admin_email');
    $headers = ['Content-Type: text/html; charset=UTF-8', "From: $name <$email>"];

    $mail_sent = wp_mail($to, $subject, nl2br($message), $headers);

    if ($mail_sent) {
        echo '<p>Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.</p>';
    } else {
        wp_die('Ошибка отправки письма. Попробуйте позже.');
    }

    exit;
}
add_action('init', 'wpcore_handle_form_submission');

Не забудьте добавить nonce в форму для безопасности:

<?php wp_nonce_field('wpcore_contact_form_nonce'); ?>

Улучшение UX: валидация на стороне клиента и AJAX

JavaScript-валидация

Чтобы не отправлять пустые или некорректные данные на сервер, добавим проверку на JavaScript:

document.getElementById('wpcore-contact-form').addEventListener('submit', function(e) {
    const email = this.wpcore_email.value.trim();
    const captcha = this.wpcore_captcha.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(email)) {
        alert('Введите корректный email');
        e.preventDefault();
        return;
    }

    if (captcha !== '7') {
        alert('Неверный ответ на вопрос капчи');
        e.preventDefault();
        return;
    }
});

Отправка формы через AJAX

Для более плавного взаимодействия реализуем отправку формы без перезагрузки страницы с помощью AJAX и wp_ajax:

function wpcore_enqueue_scripts() {
    wp_enqueue_script('wpcore-contact-form', get_template_directory_uri() . '/js/wpcore-contact-form.js', ['jquery'], null, true);
    wp_localize_script('wpcore-contact-form', 'wpcore_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpcore_ajax_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wpcore_enqueue_scripts');

function wpcore_ajax_form_handler() {
    check_ajax_referer('wpcore_ajax_nonce', 'security');

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

    if (empty($name) || empty($email) || empty($subject) || empty($message)) {
        wp_send_json_error('Заполните все поля');
    }

    if (!is_email($email)) {
        wp_send_json_error('Некорректный email');
    }

    if ($captcha != '7') {
        wp_send_json_error('Ошибка капчи');
    }

    $to = get_option('admin_email');
    $headers = ['Content-Type: text/html; charset=UTF-8', "From: $name <$email>"];

    $mail_sent = wp_mail($to, $subject, nl2br($message), $headers);

    if ($mail_sent) {
        wp_send_json_success('Сообщение отправлено успешно');
    } else {
        wp_send_json_error('Ошибка при отправке письма');
    }
}
add_action('wp_ajax_wpcore_send_form', 'wpcore_ajax_form_handler');
add_action('wp_ajax_nopriv_wpcore_send_form', 'wpcore_ajax_form_handler');

Файл wpcore-contact-form.js содержит:

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

        var data = {
            action: 'wpcore_send_form',
            security: wpcore_ajax_obj.nonce,
            name: $(this).find('input[name=wpcore_name]').val(),
            email: $(this).find('input[name=wpcore_email]').val(),
            subject: $(this).find('input[name=wpcore_subject]').val(),
            message: $(this).find('textarea[name=wpcore_message]').val(),
            captcha: $(this).find('input[name=wpcore_captcha]').val()
        };

        $.post(wpcore_ajax_obj.ajax_url, data, function(response) {
            if(response.success) {
                alert(response.data);
                $('#wpcore-contact-form')[0].reset();
            } else {
                alert('Ошибка: ' + response.data);
            }
        });
    });
});

Итог и рекомендации по безопасности

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

• Используйте wp_nonce_field и проверяйте nonce при обработке формы.
• Обрабатывайте и фильтруйте все входящие данные с помощью функций sanitize_text_field, sanitize_email и др.
• Добавляйте защиту от спама — простая капча, скрытые поля honeypot или интеграция с Akismet.
• Используйте AJAX для улучшения UX, но не забудьте о проверках на сервере.
• Проверяйте корректность email через is_email() и отправляйте письма через wp_mail().

Такой подход позволит вам создать надежную и удобную форму обратной связи на WordPress без необходимости установки тяжелых плагинов.