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

Введение в создание динамических форм через шорткоды WordPress

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

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

Мы реализуем форму с полями имя, email и сообщением, а также защитой от повторной отправки и базовой фильтрацией.

Создание шорткода формы: подключение и регистрация

Первым делом нам нужно зарегистрировать шорткод в WordPress. Это делается через функцию add_shortcode. Создадим функцию wpurok_dynamic_form_shortcode, которая будет выводить HTML формы и обрабатывать POST-запросы.

Лучше всего добавить следующий код в файл functions.php вашей темы или в отдельный плагин.

function wpurok_dynamic_form_shortcode() {
    ob_start();

    // Проверяем, была ли отправка формы
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpurok_form_submitted'])) {
        // Обрабатываем отправку
        wpurok_handle_form_submission();
    }

    // Выводим форму
    wpurok_render_form();

    return ob_get_clean();
}
add_shortcode('wpurok_form', 'wpurok_dynamic_form_shortcode');

Здесь мы используем буферизацию вывода, чтобы вернуть HTML шорткода корректно. Функции wpurok_handle_form_submission и wpurok_render_form опишем далее.

Вывод HTML формы

Давайте создадим функцию для вывода формы с необходимыми полями и скрытым полем для идентификации отправки.

function wpurok_render_form($errors = [], $old = []) {
    ?>
    <form method="post" action="">
        <p>
            <label for="wpurok_name">Имя:</label><br>
            <input type="text" id="wpurok_name" name="wpurok_name" value="<?php echo esc_attr($old['name'] ?? ''); ?>">
            <?php if (!empty($errors['name'])): ?>
                <br><span style="color:red;"><?php echo esc_html($errors['name']); ?></span>
            <?php endif; ?>
        </p>
        <p>
            <label for="wpurok_email">Email:</label><br>
            <input type="email" id="wpurok_email" name="wpurok_email" value="<?php echo esc_attr($old['email'] ?? ''); ?>">
            <?php if (!empty($errors['email'])): ?>
                <br><span style="color:red;"><?php echo esc_html($errors['email']); ?></span>
            <?php endif; ?>
        </p>
        <p>
            <label for="wpurok_message">Сообщение:</label><br>
            <textarea id="wpurok_message" name="wpurok_message"><?php echo esc_textarea($old['message'] ?? ''); ?></textarea>
            <?php if (!empty($errors['message'])): ?>
                <br><span style="color:red;"><?php echo esc_html($errors['message']); ?></span>
            <?php endif; ?>
        </p>
        <input type="hidden" name="wpurok_form_submitted" value="1">
        <p><input type="submit" value="Отправить"></p>
    </form>
    <?php
}

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

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

Теперь реализуем функцию wpurok_handle_form_submission, которая проверит поля и выведет либо ошибки, либо сообщение об успешной отправке.

function wpurok_handle_form_submission() {
    $errors = [];
    $name = trim($_POST['wpurok_name'] ?? '');
    $email = trim($_POST['wpurok_email'] ?? '');
    $message = trim($_POST['wpurok_message'] ?? '');

    // Валидация имени
    if (empty($name)) {
        $errors['name'] = 'Пожалуйста, введите имя.';
    } elseif (mb_strlen($name) < 2) {
        $errors['name'] = 'Имя должно быть не менее 2 символов.';
    }

    // Валидация email
    if (empty($email)) {
        $errors['email'] = 'Пожалуйста, введите email.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Введите корректный email.';
    }

    // Валидация сообщения
    if (empty($message)) {
        $errors['message'] = 'Введите сообщение.';
    } elseif (mb_strlen($message) < 10) {
        $errors['message'] = 'Сообщение должно быть не менее 10 символов.';
    }

    if (!empty($errors)) {
        // Показываем форму с ошибками и старым вводом
        wpurok_render_form($errors, ['name' => $name, 'email' => $email, 'message' => $message]);
        return;
    }

    // Если ошибок нет — обрабатываем данные
    // Например, отправим письмо администратору
    $to = get_option('admin_email');
    $subject = 'Новое сообщение с формы на сайте';
    $body = "Имя: $name\nEmail: $email\nСообщение:\n$message";
    $headers = ['Content-Type: text/plain; charset=UTF-8'];

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

    echo '<p style="color:green;">Спасибо! Ваше сообщение отправлено.</p>';
}

Обратите внимание, что для отправки почты используется стандартная функция WordPress wp_mail. В реальном проекте вы можете менять логику обработки — сохранять данные в базу, отправлять в CRM и т.д.

Дополнительные советы: защита и улучшения формы

Защита от CSRF с помощью nonce

Чтобы защитить форму от межсайтовой подделки запросов (CSRF), добавьте в форму nonce и проверяйте его при обработке.

function wpurok_render_form($errors = [], $old = []) {
    $nonce = wp_create_nonce('wpurok_form_nonce');
    ?>
    <form method="post" action="">
        <!-- поля формы -->
        <input type="hidden" name="wpurok_form_nonce" value="<?php echo $nonce; ?>">
        <input type="hidden" name="wpurok_form_submitted" value="1">
        <p><input type="submit" value="Отправить"></p>
    </form>
    <?php
}

function wpurok_handle_form_submission() {
    if (!isset($_POST['wpurok_form_nonce']) || !wp_verify_nonce($_POST['wpurok_form_nonce'], 'wpurok_form_nonce')) {
        echo '<p style="color:red;">Ошибка безопасности. Пожалуйста, обновите страницу и попробуйте снова.</p>';
        wpurok_render_form();
        return;
    }
    // далее валидация и обработка
}

Использование плагинов для расширения возможностей форм

Если вам нужно быстро сделать сложные формы с логикой, интеграцией с почтой и базами — рассмотрите популярные плагины, например:

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

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

Итоги и как использовать шорткод

После добавления кода в functions.php или в плагин, вы сможете вставлять форму на любую страницу или запись с помощью шорткода [wpurok_form]. Форма будет обрабатывать данные, выполнять валидацию и отправлять письмо админу.

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