Contact Form 7: отправка данных через REST API WordPress

Почему стоит использовать REST API для отправки данных Contact Form 7

Contact Form 7 — один из самых популярных плагинов для создания форм в WordPress. Обычно формы отправляют данные напрямую через AJAX или классическую отправку POST-запроса. Однако в сложных сценариях, например, когда нужно интегрировать формы с внешними сервисами, микросервисами или собственными REST API, прямое использование Contact Form 7 может быть ограничено.

REST API позволяет отделить фронтенд и бэкенд, создавать более гибкие архитектуры и взаимодействовать с формами программно. Использование REST API в связке с Contact Form 7 открывает новые возможности для разработчиков, например, отправлять данные в собственные обработчики, интегрировать с CRM, сервисами аналитики и т.д.

В этой статье я покажу, как настроить Contact Form 7 для отправки данных через REST API WordPress, как создать собственный эндпоинт и обработать отправленные данные.

Создание кастомного REST API эндпоинта в WordPress для Contact Form 7

Первым шагом создадим собственный REST API маршрут, который будет принимать данные из формы Contact Form 7. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

add_action('rest_api_init', function () {
    register_rest_route('contactform7/v1', '/submit', array(
        'methods' => 'POST',
        'callback' => 'contactform7_handle_form_submission',
        'permission_callback' => '__return_true',
    ));
});

function contactform7_handle_form_submission(WP_REST_Request $request) {
    $params = $request->get_json_params();

    // Пример валидации
    if (empty($params['your-name']) || empty($params['your-email'])) {
        return new WP_REST_Response(['error' => 'Поля имя и email обязательны'], 422);
    }

    // Можно добавить логику обработки формы или сохранить данные
    // Например, отправка письма
    $to = get_option('admin_email');
    $subject = 'Новая заявка с формы Contact Form 7';
    $message = "Имя: " . sanitize_text_field($params['your-name']) . "\n";
    $message .= "Email: " . sanitize_email($params['your-email']) . "\n";
    if (!empty($params['your-message'])) {
        $message .= "Сообщение: " . sanitize_textarea_field($params['your-message']) . "\n";
    }

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

    return new WP_REST_Response(['success' => true], 200);
}

Этот код регистрирует REST маршрут /wp-json/contactform7/v1/submit, который принимает POST-запрос с JSON телом. В обработчике происходит базовая валидация и отправка письма.

Настройка Contact Form 7 для отправки данных через REST API

Теперь настроим форму Contact Form 7 так, чтобы при отправке данные отправлялись на наш REST API. Для этого используем JavaScript и событие отправки формы.

Добавьте следующий скрипт в подвал темы или в отдельный JS-файл, подключаемый на странице с формой:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.wpcf7 form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(form);
        const data = {};
        formData.forEach((value, key) => { data[key] = value; });

        fetch('/wp-json/contactform7/v1/submit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(json => {
            if (json.success) {
                alert('Данные успешно отправлены через REST API');
                form.reset();
            } else if (json.error) {
                alert('Ошибка: ' + json.error);
            } else {
                alert('Неизвестная ошибка');
            }
        })
        .catch(error => {
            alert('Ошибка при отправке: ' + error.message);
        });
    });
});

Этот скрипт перехватывает стандартную отправку формы Contact Form 7, собирает данные и отправляет их на наш кастомный REST API. После успешной отправки выводится сообщение и форма очищается.

Обработка файлов и расширенная валидация

Если в форме есть поля для загрузки файлов, отправка через JSON усложняется, так как файлы нельзя передать в JSON напрямую. В таких случаях стоит использовать FormData и отправлять данные как multipart/form-data.

Пример изменения JS для отправки с файлами:

form.addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(form);

    fetch('/wp-json/contactform7/v1/submit', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(json => {
        if (json.success) {
            alert('Данные успешно отправлены');
            form.reset();
        } else if (json.error) {
            alert('Ошибка: ' + json.error);
        } else {
            alert('Неизвестная ошибка');
        }
    })
    .catch(error => {
        alert('Ошибка при отправке: ' + error.message);
    });
});

В PHP-обработчике можно получить файлы через $_FILES и обработать их стандартными средствами WordPress.

Полезные плагины для расширения Contact Form 7 с REST API

Для упрощения интеграции и расширения возможностей Contact Form 7 можно использовать дополнительные плагины:

• WPGPT — интеграция AI для умной обработки сообщений, автоответов и анализа данных.
• Clearfy Pro — оптимизация безопасности и производительности, помогает защитить REST API.
• My Popup — создание всплывающих окон для подтверждения отправки форм и уведомлений.

Эти плагины помогают сделать работу с Contact Form 7 и REST API более удобной и безопасной.

Заключение: преимущества и важные моменты

Отправка данных Contact Form 7 через REST API дает гибкость для интеграции с внешними сервисами и собственными решениями. Важно уделять внимание безопасности: использовать nonce, проверять права доступа и валидировать данные.

Также стоит учитывать, что такая реализация требует базовых знаний JavaScript и WordPress REST API, но существенно расширяет возможности стандартного функционала Contact Form 7.