WordPress AJAX: Как создать безопасную форму бронирования или контактов в плагине (Часть 1)

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

🔧 Подготовка структуры плагина

Начнём с создания нового файла внутри вашего плагина, например:
/inc/class-booking-form.php

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

class ALI_Property_Booking_Form {
    public function __construct() {
        add_action('wp_enqueue_scripts', [$this, 'enqueue_scripts']);
        add_action('init', [$this, 'register_shortcode']);
        add_action('wp_ajax_ali_booking_form', [$this, 'handle_ajax']);
        add_action('wp_ajax_nopriv_ali_booking_form', [$this, 'handle_ajax']);
    }

    public function enqueue_scripts() {
        wp_enqueue_script(
            'ali-property-booking-form',
            plugins_url('/assets/js/booking-form.js', __FILE__),
            ['jquery'],
            null,
            true
        );

        wp_localize_script('ali-property-booking-form', 'aliBooking', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('ali_booking_form_nonce')
        ]);
    }
}
new ALI_Property_Booking_Form();

Здесь мы регистрируем и подключаем скрипт для фронтенда, передавая ему переменные ajax_url и nonce, необходимые для безопасного взаимодействия с сервером.

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

Чтобы форма могла быть вставлена в любой шаблон или контент, добавим шорткод.

<?php
public function register_shortcode() {
    add_shortcode('ali_property_booking_form', [$this, 'render_form']);
}

public function render_form() {
    ob_start(); ?>
    <form method="post" id="ali-property-booking">
        <p><input type="text" id="ali-property-name" placeholder="Ваше имя"></p>
        <p><input type="email" id="ali-property-email" placeholder="Ваш email"></p>
        <p><input type="tel" id="ali-property-phone" placeholder="Телефон"></p>
        <p><button type="submit" id="ali-booking-submit">Отправить</button></p>
        <div class="ali-booking-result"></div>
    </form>
    <?php return ob_get_clean();
}

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

[ali_property_booking_form]

⚙️ Скрипт обработки формы (AJAX)

Создадим JavaScript-файл /assets/js/booking-form.js, который будет перехватывать отправку формы и отправлять данные через AJAX без перезагрузки страницы.

jQuery(document).ready(function ($) {
    $('#ali-booking-submit').on('click', function (e) {
        e.preventDefault();

        $.ajax({
            url: aliBooking.ajax_url,
            type: 'POST',
            data: {
                action: 'ali_booking_form',
                nonce: aliBooking.nonce,
                name: $('#ali-property-name').val(),
                email: $('#ali-property-email').val(),
                phone: $('#ali-property-phone').val()
            },
            success: function (response) {
                $('.ali-booking-result').html(response);
            },
            error: function () {
                $('.ali-booking-result').html('Произошла ошибка при отправке формы.');
            }
        });
    });
});

Этот код отправляет данные на сервер и выводит ответ от обработчика в блок .ali-booking-result.

🛡 Проверка безопасности и обработка данных

На сервере запрос обрабатывается методом handle_ajax(). В нём важно проверить nonce и корректность полученных данных, прежде чем выполнять любые действия.

public function handle_ajax() {
    check_ajax_referer('ali_booking_form_nonce', 'nonce');

    $name  = sanitize_text_field($_POST['name'] ?? '');
    $email = sanitize_email($_POST['email'] ?? '');
    $phone = sanitize_text_field($_POST['phone'] ?? '');

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

    // Пример — отправка письма
    $to      = get_option('admin_email');
    $subject = 'Новое бронирование';
    $message = "Имя: $name\nEmail: $email\nТелефон: $phone";

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

    wp_send_json_success('Спасибо! Ваша заявка успешно отправлена.');
}

💡 Что мы реализовали

В результате у нас готова базовая архитектура AJAX-формы:

• ✅ безопасная передача данных через wp_localize_script и nonce;
• ✅ обработка запросов как для авторизованных, так и для гостей (wp_ajax_nopriv_*);
• ✅ защита от CSRF через check_ajax_referer;
• ✅ гибкость — форму можно вставить в любом месте с помощью шорткода.

🚀 Что будет дальше (Часть 2)

Во второй части мы доработаем обработчик формы:

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

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.