Как добавить дополнительные поля в формы WordPress без плагинов

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

Почему стоит добавлять дополнительные поля вручную?

Использование плагинов для форм — популярное и простое решение, но у него есть свои минусы:

• Плагины могут замедлять работу сайта.
• Они часто перегружены функциями, которые не всегда нужны.
• Зависимость от стороннего кода усложняет поддержку.

Добавляя поля вручную, вы получаете легкий и гибкий код, который можно адаптировать под конкретные задачи.

Добавление дополнительных полей в форму комментариев WordPress

Создание дополнительного поля

Допустим, нам нужно добавить поле "Телефон" к форме комментариев. Для этого в файле functions.php вашей темы или в отдельном файле плагина добавим следующий код:

function wplike_add_phone_field_to_comment_form($fields) {
    $fields['phone'] = '<p class="comment-form-phone"><label for="phone">Телефон</label>' .
        '<input id="phone" name="phone" type="text" size="30" maxlength="20" /></p>';
    return $fields;
}
add_filter('comment_form_default_fields', 'wplike_add_phone_field_to_comment_form');

Этот код добавляет новое поле с именем phone в набор стандартных полей формы комментариев.

Валидация и сохранение дополнительного поля

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

function wplike_verify_phone_field($commentdata) {
    if (isset($_POST['phone']) && empty($_POST['phone'])) {
        wp_die('Ошибка: поле Телефон обязательно для заполнения.');
    }
    return $commentdata;
}
add_filter('preprocess_comment', 'wplike_verify_phone_field');

function wplike_save_phone_meta($comment_id) {
    if (isset($_POST['phone'])) {
        $phone = sanitize_text_field($_POST['phone']);
        add_comment_meta($comment_id, 'phone', $phone);
    }
}
add_action('comment_post', 'wplike_save_phone_meta');

Здесь мы проверяем, что поле не пустое, и сохраняем его в метаданные комментария после прохождения валидации.

Отображение дополнительного поля в комментариях

Чтобы вывести телефон рядом с комментарием, добавим фильтр:

function wplike_display_phone_in_comment($comment_text, $comment) {
    $phone = get_comment_meta($comment->comment_ID, 'phone', true);
    if ($phone) {
        $comment_text .= '<p class="comment-phone"><strong>Телефон:</strong> ' . esc_html($phone) . '</p>';
    }
    return $comment_text;
}
add_filter('comment_text', 'wplike_display_phone_in_comment', 10, 2);

Добавление дополнительных полей в кастомные формы на сайте

Создание HTML-формы с дополнительными полями

Иногда необходимо сделать собственную форму (например, форму обратной связи) с дополнительными полями. Вот пример простейшей формы с полями "Имя", "Email" и "Телефон":

<form method="post" action="">
  <p><label for="name">Имя:</label><br>
  <input type="text" id="name" name="name" required /></p>
  <p><label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required /></p>
  <p><label for="phone">Телефон:</label><br>
  <input type="text" id="phone" name="phone" /></p>
  <p><input type="submit" name="wplike_submit" value="Отправить" /></p>
</form>

Обработка данных формы в WordPress

Для обработки формы добавим в functions.php обработчик, который будет проверять и сохранять данные, например, отправлять на email администратора:

function wplike_handle_custom_form() {
    if (isset($_POST['wplike_submit'])) {
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);
        $phone = sanitize_text_field($_POST['phone']);

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

        $to = get_option('admin_email');
        $subject = 'Новая заявка с сайта';
        $message = "Имя: $name\nEmail: $email\nТелефон: $phone";
        $headers = ['Content-Type: text/plain; charset=UTF-8', "From: $name <$email>"];

        wp_mail($to, $subject, $message, $headers);
        echo '<p style="color:green;">Спасибо за ваше сообщение!</p>';
    }
}
add_action('wp_head', 'wplike_handle_custom_form');

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

Рекомендации по безопасности и удобству

Используйте nonce для защиты от CSRF

Чтобы обезопасить форму от подделки запросов, добавьте nonce — специальный токен безопасности WordPress:

wp_nonce_field('wplike_custom_form_action', 'wplike_custom_form_nonce');

И проверяйте его при обработке:

if (!isset($_POST['wplike_custom_form_nonce']) || !wp_verify_nonce($_POST['wplike_custom_form_nonce'], 'wplike_custom_form_action')) {
    wp_die('Ошибка безопасности.');
}

Используйте sanitize функции для очистки данных

Обязательно очищайте все данные из формы с помощью sanitize_text_field, sanitize_email и других подходящих функций для предотвращения XSS и других уязвимостей.

Добавьте пользовательские стили и валидацию на JS

Для удобства пользователей добавьте валидацию полей на стороне клиента с помощью JavaScript и стилизуйте форму под ваш дизайн.

Использование плагинов для расширенных форм, если нужно

Если ваши задачи выходят за рамки простых форм, рассмотрите легкие и оптимизированные плагины, например, My Popup для создания всплывающих окон с формами или Quizle для интерактивных опросов и сбора данных. Но если нужна легкая форма с минимальной нагрузкой — лучше делать вручную, как мы описали.