Создание динамических форм в WordPress без плагинов

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

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

Динамическая форма — это форма, которая может изменять своё количество полей в зависимости от действий пользователя. Например, можно добавлять несколько адресов, телефонов, или задавать параметры заказа. Такие формы удобны, когда количество вводимых данных заранее неизвестно, или требуется гибкая логика.

В WordPress часто используют Contact Form 7 или Gravity Forms, но они имеют ограничения или избыточны для простых задач. Создание формы вручную даёт полный контроль над процессом, улучшает производительность и безопасность.

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

Начнем с создания простой формы, где пользователь может добавлять дополнительные поля для ввода телефонов. Для этого используем JavaScript для управления динамическими полями и PHP для обработки данных.

HTML и JavaScript для динамических полей

Добавим форму в файл темы, например, в page-contact.php или через шорткод. Пример формы:

<form method="post" id="wpboot_dynamic_form">
    <label>Имя:</label>
    <input type="text" name="wpboot_name" required />

    <div id="phone_fields">
        <label>Телефон 1:</label>
        <input type="text" name="wpboot_phone[]" required />
    </div>
    <button type="button" id="add_phone">Добавить телефон</button>

    <input type="submit" name="wpboot_submit" value="Отправить" />
</form>

<script>
document.getElementById('add_phone').addEventListener('click', function() {
    var container = document.getElementById('phone_fields');
    var count = container.querySelectorAll('input[name="wpboot_phone[]"]').length + 1;

    var label = document.createElement('label');
    label.textContent = 'Телефон ' + count + ':';

    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'wpboot_phone[]';
    input.required = true;

    container.appendChild(label);
    container.appendChild(input);
});
</script>

Здесь кнопка «Добавить телефон» добавляет новое поле ввода телефона с увеличением номера. Обратите внимание, что поля телефонов имеют одинаковое имя с массивом wpboot_phone[], что позволяет передать несколько значений на сервер.

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

После отправки формы нужно проверить данные и сохранить или отправить их. В WordPress для обработки данных формы безопаснее использовать хуки или обработчики в functions.php.

Пример функции для обработки формы

function wpboot_handle_dynamic_form() {
    if (isset($_POST['wpboot_submit'])) {
        // Проверка nonce для безопасности (если добавите)

        $name = sanitize_text_field($_POST['wpboot_name']);
        $phones_raw = $_POST['wpboot_phone'] ?? [];

        $phones = [];
        foreach ($phones_raw as $phone) {
            $phone_sanitized = sanitize_text_field($phone);
            if (!empty($phone_sanitized)) {
                $phones[] = $phone_sanitized;
            }
        }

        if (empty($name)) {
            echo '<div class="error">Пожалуйста, введите имя.</div>';
            return;
        }

        if (empty($phones)) {
            echo '<div class="error">Введите хотя бы один телефон.</div>';
            return;
        }

        // Сохранение данных, отправка письма или другое действие
        // Например, отправим письмо администратору

        $to = get_option('admin_email');
        $subject = 'Новая заявка с сайта';
        $message = 'Имя: ' . $name . "\n" . 'Телефоны: ' . implode(", ", $phones);

        wp_mail($to, $subject, $message);

        echo '<div class="success">Спасибо, ваша заявка принята.</div>';
    }
}
add_action('wp', 'wpboot_handle_dynamic_form');

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

Расширение функционала: добавление валидации и AJAX

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

Клиентская валидация

Можно использовать HTML-атрибуты required и регулярные выражения в pattern для телефонов:

<input type="tel" name="wpboot_phone[]" required pattern="\+?[0-9\s\-]{7,15}" />

Это позволит браузеру проверять формат телефонов. Для сложных проверок используйте JavaScript.

AJAX отправка формы

Добавим отправку через AJAX. В functions.php зарегистрируем обработчик:

function wpboot_enqueue_scripts() {
    wp_enqueue_script('wpboot-form', get_template_directory_uri() . '/js/wpboot-form.js', ['jquery'], null, true);
    wp_localize_script('wpboot-form', 'wpboot_ajax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpboot_enqueue_scripts');

function wpboot_ajax_handle_form() {
    $name = sanitize_text_field($_POST['name'] ?? '');
    $phones_raw = $_POST['phones'] ?? [];
    $phones = [];
    foreach ($phones_raw as $phone) {
        $phone_sanitized = sanitize_text_field($phone);
        if (!empty($phone_sanitized)) {
            $phones[] = $phone_sanitized;
        }
    }

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

    $to = get_option('admin_email');
    $subject = 'Новая заявка с сайта';
    $message = 'Имя: ' . $name . "\n" . 'Телефоны: ' . implode(", ", $phones);

    wp_mail($to, $subject, $message);

    wp_send_json_success('Спасибо, ваша заявка принята.');
}
add_action('wp_ajax_wpboot_submit_form', 'wpboot_ajax_handle_form');
add_action('wp_ajax_nopriv_wpboot_submit_form', 'wpboot_ajax_handle_form');

Создайте файл js/wpboot-form.js с таким содержимым:

jQuery(document).ready(function($) {
    $('#wpboot_dynamic_form').on('submit', function(e) {
        e.preventDefault();

        var name = $('input[name="wpboot_name"]').val();
        var phones = [];
        $('input[name="wpboot_phone[]"]').each(function() {
            if ($(this).val() !== '') {
                phones.push($(this).val());
            }
        });

        $.post(wpboot_ajax.ajax_url, {
            action: 'wpboot_submit_form',
            name: name,
            phones: phones
        }, function(response) {
            if (response.success) {
                alert(response.data);
                $('#wpboot_dynamic_form')[0].reset();
                $('#phone_fields').html('<label>Телефон 1:</label><input type="text" name="wpboot_phone[]" required />');
            } else {
                alert('Ошибка: ' + response.data);
            }
        });
    });
});

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

Подведение итогов и рекомендации

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

Если хотите готовое решение с расширенными возможностями, обратите внимание на плагин Clearfy Pro — он помогает оптимизировать работу сайта и имеет инструменты для управления формами и безопасностью.

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