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

Автор: Екатерина Николаева | Опубликовано: 04.11.2025

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

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

Стандартные формы WordPress часто не покрывают всех потребностей сайта. Например, вы хотите собрать не только имя и email, но и телефон, дату рождения, комментарии или другие специфичные данные. Пользовательские поля позволяют сделать формы гибкими и адаптированными под ваши задачи.

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

Добавление пользовательских полей в форму Contact Form 7 вручную

Рассмотрим пример добавления пользовательского поля «Телефон» в форму Contact Form 7 и обработку этого поля в письме.

1. В админке WordPress перейдите в Contact Form 7 и отредактируйте форму. Добавьте поле:

[tel your-phone placeholder "Введите телефон"]

2. В шаблоне письма добавьте метку, чтобы в письме отображался телефон:

Телефон: [your-phone]

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

Пример PHP-валидации поля телефона для Contact Form 7

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

function wpkey_cf7_validate_phone($result, $tag) {
    $name = $tag->name;
    if ($name == 'your-phone') {
        $phone = isset($_POST[$name]) ? trim($_POST[$name]) : '';
        if (!preg_match('/^\+?[0-9\s\-]{7,15}$/', $phone)) {
            $result->invalidate($tag, 'Пожалуйста, введите корректный номер телефона.');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_tel*', 'wpkey_cf7_validate_phone', 20, 2);

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

Создание пользовательских полей в собственной форме WordPress

Если вы хотите создать форму без плагинов, можно написать код самостоятельно. Рассмотрим простой пример формы с полями «Имя», «Email» и «Телефон» с базовой валидацией и обработкой.

HTML формы в шаблоне

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

Обработка данных формы в functions.php

function wpkey_handle_form_submission() {
    if (isset($_POST['wpkey_submit'])) {
        $name = sanitize_text_field($_POST['wpkey_name']);
        $email = sanitize_email($_POST['wpkey_email']);
        $phone = sanitize_text_field($_POST['wpkey_phone']);

        $errors = [];

        if (empty($name)) {
            $errors[] = 'Введите имя';
        }
        if (!is_email($email)) {
            $errors[] = 'Введите корректный email';
        }
        if (!empty($phone) && !preg_match('/^\+?[0-9\s\-]{7,15}$/', $phone)) {
            $errors[] = 'Введите корректный телефон';
        }

        if (empty($errors)) {
            // Здесь можно сохранить данные, отправить письмо или выполнить другое действие
            wp_mail(get_option('admin_email'), 'Новая заявка с сайта',
                "Имя: $name\nEmail: $email\nТелефон: $phone");
            echo '<p>Спасибо за заявку!</p>';
        } else {
            foreach ($errors as $error) {
                echo '<p style="color:red;">' . esc_html($error) . '</p>';
            }
        }
    }
}
add_action('wp_head', 'wpkey_handle_form_submission');

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

Хранение пользовательских данных из форм в базе данных WordPress

Если вы хотите не только получать данные на email, но и сохранять их в базе для последующего анализа, нужно создать собственную таблицу или использовать пользовательские типы записей.

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

function wpkey_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpkey_submissions';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT,
      name tinytext NOT NULL,
      email varchar(100) NOT NULL,
      phone varchar(20),
      submitted datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
      PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'wpkey_create_table');

После создания таблицы, данные из формы можно сохранять с помощью:

global $wpdb;
$table_name = $wpdb->prefix . 'wpkey_submissions';
$wpdb->insert(
    $table_name,
    [
        'name' => $name,
        'email' => $email,
        'phone' => $phone
    ]
);

Вывод данных пользовательских полей в админке WordPress

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

Пример добавления меню и вывода данных:

function wpkey_admin_menu() {
    add_menu_page('Заявки WPKey', 'Заявки WPKey', 'manage_options', 'wpkey-submissions', 'wpkey_render_admin_page');
}
add_action('admin_menu', 'wpkey_admin_menu');

function wpkey_render_admin_page() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpkey_submissions';
    $results = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submitted DESC");

    echo '<h1>Заявки с сайта</h1>';
    echo '<table border="1" cellpadding="5">';
    echo '<tr><th>ID</th><th>Имя</th><th>Email</th><th>Телефон</th><th>Дата</th></tr>';
    foreach ($results as $row) {
        echo '<tr>';
        echo '<td>' . esc_html($row->id) . '</td>';
        echo '<td>' . esc_html($row->name) . '</td>';
        echo '<td>' . esc_html($row->email) . '</td>';
        echo '<td>' . esc_html($row->phone) . '</td>';
        echo '<td>' . esc_html($row->submitted) . '</td>';
        echo '</tr>';
    }
    echo '</table>';
}

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

Заключение: рекомендации по работе с пользовательскими полями

При добавлении пользовательских полей в формы WordPress важно:

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

Используя описанные подходы и примеры, вы сможете легко расширить функциональность форм на вашем сайте wpkey.ru и получать от пользователей именно ту информацию, которая нужна вашему проекту.

Ресурс в разработке, скоро здесь будет сайт по вордпресс

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