Автоматическое создание контактной формы с помощью WordPress хуков

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

Зачем использовать хуки для создания контактной формы

Контактная форма — один из базовых элементов большинства сайтов на WordPress. Обычно для этого используют готовые плагины, например Contact Form 7 или WPForms, но иногда нужно более легкое и гибкое решение. Использование хуков позволяет:

• Автоматически вставлять форму в нужные места без правки шаблонов;
• Контролировать структуру и обработку данных напрямую в коде;
• Избежать зависимости от сторонних плагинов, что положительно сказывается на производительности и безопасности;
• Облегчить кастомизацию и расширение функционала.

Пример ниже покажет, как создать базовую форму с полями Имя, Email и Сообщение, обработать отправку и вывести уведомление.

Создание формы с помощью хуков WordPress

Для начала создадим функцию wp_gpt_render_contact_form, которая выводит HTML формы. Затем подключим её к хуку the_content, чтобы форма отображалась в конце контента на страницах.

function wp_gpt_render_contact_form($content) {
    if (is_page('contact')) { // Показывать форму только на странице с ярлыком 'contact'
        $content .= '<form method="post" action="">'
            . '<p><label>Имя:</label>'
            . '<input type="text" name="wp_gpt_name" required /></p>'
            . '<p><label>Email:</label>'
            . '<input type="email" name="wp_gpt_email" required /></p>'
            . '<p><label>Сообщение:</label>'
            . '<textarea name="wp_gpt_message" required></textarea></p>'
            . '<p><input type="submit" name="wp_gpt_submit" value="Отправить" /></p>'
            . '</form>';
    }
    return $content;
}
add_filter('the_content', 'wp_gpt_render_contact_form');

Теперь, когда форма отображается, нужно обработать отправку данных. Для этого используем хук init, чтобы отследить POST-запрос и выполнить валидацию.

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

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

function wp_gpt_handle_form_submission() {
    if (isset($_POST['wp_gpt_submit'])) {
        $name = sanitize_text_field($_POST['wp_gpt_name']);
        $email = sanitize_email($_POST['wp_gpt_email']);
        $message = sanitize_textarea_field($_POST['wp_gpt_message']);

        if (empty($name) || empty($email) || empty($message)) {
            add_action('wp_gpt_form_message', function() {
                echo '<div style="color:red;">Пожалуйста, заполните все поля.</div>';
            });
            return;
        }

        if (!is_email($email)) {
            add_action('wp_gpt_form_message', function() {
                echo '<div style="color:red;">Введите корректный email.</div>';
            });
            return;
        }

        $to = get_option('admin_email');
        $subject = 'Новое сообщение с контактной формы';
        $headers = ['Content-Type: text/html; charset=UTF-8', 'From: ' . $name . ' <' . $email . '>'];
        $body = 'Имя: ' . $name . '<br>Email: ' . $email . '<br>Сообщение:<br>' . nl2br($message);

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

        add_action('wp_gpt_form_message', function() {
            echo '<div style="color:green;">Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.</div>';
        });
    }
}
add_action('init', 'wp_gpt_handle_form_submission');

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

Вывод сообщений после отправки

Добавим в wp_gpt_render_contact_form вызов хука wp_gpt_form_message для вывода сообщений пользователю.

function wp_gpt_render_contact_form($content) {
    if (is_page('contact')) {
        ob_start();
        do_action('wp_gpt_form_message');
        $messages = ob_get_clean();

        $content .= $messages;
        $content .= '<form method="post" action="">'
            . '<p><label>Имя:</label>'
            . '<input type="text" name="wp_gpt_name" required /></p>'
            . '<p><label>Email:</label>'
            . '<input type="email" name="wp_gpt_email" required /></p>'
            . '<p><label>Сообщение:</label>'
            . '<textarea name="wp_gpt_message" required></textarea></p>'
            . '<p><input type="submit" name="wp_gpt_submit" value="Отправить" /></p>'
            . '</form>';
    }
    return $content;
}
add_filter('the_content', 'wp_gpt_render_contact_form');

Расширение функционала: защита от спама и AJAX

Чтобы избежать спама, можно добавить простую капчу или nonce-проверку:

• Используйте функцию wp_nonce_field('wp_gpt_contact_nonce', 'wp_gpt_nonce') для генерации скрытого поля в форме.
• В обработчике проверяйте nonce с помощью check_admin_referer('wp_gpt_contact_nonce', 'wp_gpt_nonce').

Для улучшения UX можно реализовать отправку формы через AJAX. Это позволит не перезагружать страницу и оперативно выводить сообщения об успехе или ошибках.

Пример AJAX-обработчика:

add_action('wp_ajax_wp_gpt_send_contact_form', 'wp_gpt_send_contact_form');
add_action('wp_ajax_nopriv_wp_gpt_send_contact_form', 'wp_gpt_send_contact_form');

function wp_gpt_send_contact_form() {
    check_ajax_referer('wp_gpt_contact_nonce', 'nonce');

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    if (empty($name) || empty($email) || empty($message)) {
        wp_send_json_error('Пожалуйста, заполните все поля.');
    }
    if (!is_email($email)) {
        wp_send_json_error('Введите корректный email.');
    }

    $to = get_option('admin_email');
    $subject = 'Новое сообщение с контактной формы';
    $headers = ['Content-Type: text/html; charset=UTF-8', 'From: ' . $name . ' <' . $email . '>'];
    $body = 'Имя: ' . $name . '<br>Email: ' . $email . '<br>Сообщение:<br>' . nl2br($message);

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

    wp_send_json_success('Спасибо за ваше сообщение!');
}

И подключите скрипт с передачей nonce и обработкой ответа.

Полезные плагины для создания и кастомизации форм

Если вы хотите расширить функциональность без написания кода, рассмотрите следующие плагины:

• Contact Form 7 — классика с большим количеством расширений и простым интерфейсом.
• WPForms — удобный конструктор форм с drag-and-drop интерфейсом.
• Fluent Forms — современный плагин с богатым набором функций и интеграций.

При этом созданный вручную вариант на хуках всегда даст максимальный контроль и легковесность.

Итоги и советы по применению

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

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

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