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

Автор: Алексей Савельев | Опубликовано: 05.02.2026

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

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

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

Отправлять данные без перезагрузки страницы.
Показывать сообщения об ошибках или успехе мгновенно.
Делать форму более интерактивной и удобной.

Это улучшает пользовательский опыт и снижает количество отказов при заполнении формы.

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

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

Создать HTML-форму в шаблоне или через шорткод.
Добавить JavaScript для перехвата отправки и отправки данных через AJAX.
Обработать запрос на стороне сервера в PHP, валидировать данные и отправить ответ.
Показать пользователю результат (успех или ошибки) без перезагрузки страницы.

Далее рассмотрим эти шаги подробно с примерами кода.

Создание шорткода с HTML формой

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

function wpbox_render_contact_form() {
    ob_start();
    ?>
    <form id="wpbox-contact-form" method="post">
        <label for="wpbox-name">Ваше имя:</label>
        <input type="text" id="wpbox-name" name="name" required />

        <label for="wpbox-email">Email:</label>
        <input type="email" id="wpbox-email" name="email" required />

        <label for="wpbox-message">Сообщение:</label>
        <textarea id="wpbox-message" name="message" required></textarea>

        <button type="submit">Отправить</button>
        <div id="wpbox-form-response"></div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpbox_contact_form', 'wpbox_render_contact_form');

Этот шорткод можно вставить в любую страницу или запись, и он выведет форму.

Добавление JavaScript для AJAX отправки

Теперь добавим скрипт, который перехватит отправку формы и отправит данные на сервер без перезагрузки. Для этого зарегистрируем и подключим JS в functions.php:

function wpbox_enqueue_scripts() {
    wp_enqueue_script('wpbox-contact-form', get_template_directory_uri() . '/js/wpbox-contact-form.js', array('jquery'), null, true);
    wp_localize_script('wpbox-contact-form', 'wpbox_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpbox_enqueue_scripts');

Создайте файл js/wpbox-contact-form.js в папке темы со следующим содержанием:

jQuery(document).ready(function($) {
    $('#wpbox-contact-form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var data = {
            action: 'wpbox_submit_contact_form',
            name: form.find('input[name="name"]').val(),
            email: form.find('input[name="email"]').val(),
            message: form.find('textarea[name="message"]').val()
        };
        $.post(wpbox_ajax_object.ajax_url, data, function(response) {
            $('#wpbox-form-response').html(response.data);
            if(response.success) {
                form[0].reset();
            }
        });
    });
});

Обработка AJAX запроса на сервере

Теперь добавим PHP функцию, которая будет обрабатывать отправленные данные, валидировать их и возвращать ответ в формате JSON.

function wpbox_handle_contact_form() {
    // Проверка данных и базовая валидация
    $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 = 'Новое сообщение с формы обратной связи';
    $body = "Имя: $name\nEmail: $email\nСообщение: $message";
    $headers = array('Content-Type: text/plain; charset=UTF-8', 'From: ' . $name . ' <' . $email . '>');

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

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

Дополнительные советы по улучшению динамических форм

Валидация и безопасность

Для защиты формы от спама и неправильных данных обязательно добавляйте nonce и проверяйте их в обработчике. Также можно подключить Google reCAPTCHA или использовать плагин Clearfy Pro с функцией защиты форм.

Использование плагинов для динамических форм

Если хотите более мощное решение, можно использовать плагины с поддержкой AJAX, например, My Popup с возможностью создания форм во всплывающих окнах или WPRemark для сбора отзывов.

Отправка данных в CRM или на email

Вместо простой отправки email можно интегрировать форму с CRM через API, либо сохранять данные в пользовательских таблицах базы данных. Это позволит вести аналитику и эффективнее работать с клиентами.

Пример расширения: добавление nonce для безопасности

Добавим nonce в форму и проверим его на сервере, чтобы защититься от CSRF атак.

function wpbox_render_contact_form() {
    $nonce = wp_create_nonce('wpbox_contact_form_nonce');
    ob_start();
    ?>
    <form id="wpbox-contact-form" method="post">
        <input type="hidden" name="wpbox_nonce" value="<?php echo $nonce; ?>" />
        <label for="wpbox-name">Ваше имя:</label>
        <input type="text" id="wpbox-name" name="name" required />
        <label for="wpbox-email">Email:</label>
        <input type="email" id="wpbox-email" name="email" required />
        <label for="wpbox-message">Сообщение:</label>
        <textarea id="wpbox-message" name="message" required></textarea>
        <button type="submit">Отправить</button>
        <div id="wpbox-form-response"></div>
    </form>
    <?php
    return ob_get_clean();
}

function wpbox_handle_contact_form() {
    if(!isset($_POST['wpbox_nonce']) || !wp_verify_nonce($_POST['wpbox_nonce'], 'wpbox_contact_form_nonce')) {
        wp_send_json_error('Ошибка безопасности. Попробуйте обновить страницу.');
    }
    // Далее валидация и обработка как выше
}

И в JS добавьте отправку поля nonce:

var data = {
    action: 'wpbox_submit_contact_form',
    wpbox_nonce: form.find('input[name="wpbox_nonce"]').val(),
    name: form.find('input[name="name"]').val(),
    email: form.find('input[name="email"]').val(),
    message: form.find('textarea[name="message"]').val()
};

Выводы и рекомендации

Создание динамических форм обратной связи в WordPress — доступная и полезная задача, которая значительно улучшает взаимодействие с пользователями. Используя AJAX, PHP и базовую валидацию, вы можете сделать форму удобной и безопасной. Для расширения функционала и ускорения разработки рекомендую обратить внимание на плагины из каталога WPSHOP, которые помогут автоматизировать создание форм и добавят полезные опции.