Создание интерактивных форм без перезагрузки страницы — одна из самых частых задач при разработке плагинов 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)
Во второй части мы доработаем обработчик формы:
- добавим валидацию на фронтенде,
- сохраним заявки в базе данных,
- и реализуем отправку писем в более гибком виде с настройками.