Как отправить форму на WordPress с использованием AJAX

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

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) — это технология, которая позволяет отправлять и получать данные с сервера без перезагрузки страницы. Это делает взаимодействие с пользователем более плавным и удобным.

Как настроить AJAX-обработчик для отправки формы на WordPress

Создание функции для обработки AJAX-запроса

Сначала создадим функцию, которая будет обрабатывать AJAX-запросы. Мы будем использовать хуки wp_ajax_ и wp_ajax_nopriv_ для регистрации наших функций.

add_action( 'wp_ajax_send_form', 'send_form' );
add_action( 'wp_ajax_nopriv_send_form', 'send_form' );

function send_form() {
    $message = '';
    $result['success'] = false;

    foreach ($_POST as $key => $value) {
        if ($key == '_wpnonce' || $key == 'agree' || $key == 'form_type' || $key == 'email_to') {
            continue;
        }

        $message .= "<b>{$key}</b>: {$value}<br>";
    }

    $post_title = $_POST['title'];
    $email_to = $_POST['email_to'];

    $data = [
        'post_type'    => 'forms',
        'post_status'  => 'publish',
        'post_title'   => $post_title,
        'post_content' => $message,
    ];

    $inserted_post_id = wp_insert_post($data);

    if (wp_verify_nonce($_REQUEST['_wpnonce'], $_SERVER['REMOTE_ADDR'])) {
        wp_mail($email_to, $_POST['title'], $message);
        $result['success'] = true;
        echo json_encode($result);
    }

    die();
}

Создание формы

Теперь создадим HTML-форму, которая будет отправлять данные через AJAX.

<form id="my-form" method="post">
    <input type="text" name="name" placeholder="Ваше имя" required>
    <input type="email" name="email" placeholder="Ваш email" required>
    <input type="hidden" name="action" value="send_form">
    <input type="hidden" name="_wpnonce" value="<?php echo wp_create_nonce($_SERVER['REMOTE_ADDR']); ?>">
    <input type="hidden" name="title" value="Новая форма">
    <input type="hidden" name="email_to" value="example@example.com">
    <button type="submit">Отправить</button>
</form>

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

jQuery(document).ready(function($) {
    $('#my-form').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: formData,
            success: function(response) {
                var result = JSON.parse(response);
                if (result.success) {
                    alert('Форма успешно отправлена!');
                } else {
                    alert('Ошибка при отправке формы.');
                }
            },
            error: function() {
                alert('Ошибка при отправке формы.');
            }
        });
    });
});

Подключение JavaScript к WordPress

Убедитесь, что ваш JavaScript-код подключен к WordPress. Вы можете добавить его в файл functions.php вашей темы или плагина.

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);
    wp_localize_script('custom-ajax', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

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

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

Быстрота: AJAX-запросы выполняются быстрее, так как не требуют полной перезагрузки страницы.

Безопасность: Использование wp_verify_nonce помогает предотвратить CSRF-атаки.