Обработка форм на WordPress без плагинов

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

Почему стоит обрабатывать формы без плагинов

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

Кроме того, собственная реализация помогает лучше понять внутренние механизмы WordPress и PHP, повышает уровень навыков в разработке.

В итоге, можно создавать лёгкие, быстрые и безопасные формы, полностью адаптированные под задачи вашего сайта.

Создание формы и обработка данных на WordPress

HTML-форма с nonce для безопасности

Начнём с простой формы обратной связи. Она будет содержать поля для имени, email и сообщения. Важно добавить nonce — специальный токен, который защитит от CSRF-атак.

<form method="post" action="">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="wpcom_name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="wpcom_email" required>

  <label for="message">Сообщение:</label>
  <textarea id="message" name="wpcom_message" required></textarea>

  <input type="hidden" name="wpcom_nonce" value="<?php echo wp_create_nonce('wpcom_form_nonce'); ?>">

  <input type="submit" value="Отправить">
</form>

Такой код можно вставить в нужное место шаблона или в файл темы. Обратите внимание, что nonce создаётся с помощью функции wp_create_nonce — это встроенный механизм безопасности WordPress.

Обработка данных в functions.php с проверкой безопасности

Для обработки данных добавим функцию в файл functions.php вашей темы. Она будет проверять nonce, валидировать и очищать введённые данные, а затем отправлять их на почту администратора или сохранять в базе.

function wpcom_handle_form_submission() {
  if (isset($_POST['wpcom_nonce']) && wp_verify_nonce($_POST['wpcom_nonce'], 'wpcom_form_nonce')) {
    // Получаем и очищаем данные
    $name = sanitize_text_field($_POST['wpcom_name']);
    $email = sanitize_email($_POST['wpcom_email']);
    $message = sanitize_textarea_field($_POST['wpcom_message']);

    if (empty($name) || empty($email) || empty($message)) {
      echo '<p>Пожалуйста, заполните все поля.</p>';
      return;
    }

    if (!is_email($email)) {
      echo '<p>Введите корректный email.</p>';
      return;
    }

    // Формируем письмо
    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта';
    $headers = array('Content-Type: text/html; charset=UTF-8', 'From: '.$name.' <'.$email.'>');
    $body = '<p>Имя: '.esc_html($name).'</p>';
    $body .= '<p>Email: '.esc_html($email).'</p>';
    $body .= '<p>Сообщение: '.nl2br(esc_html($message)).'</p>';

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

    echo '<p>Спасибо за ваше сообщение!</p>';
  }
}
add_action('wp_head', 'wpcom_handle_form_submission');

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

Расширение функционала: сохранение данных в базу WordPress

Создание кастомной таблицы для данных формы

Если вы хотите хранить данные форм в базе для последующего анализа, можно создать отдельную таблицу. Для этого в functions.php добавим функцию, которая создаст таблицу при активации темы или плагина.

function wpcom_create_form_table() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wpcom_form_messages';
  $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,
    message text NOT NULL,
    time datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
    PRIMARY KEY  (id)
  ) $charset_collate;";

  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  dbDelta($sql);
}
add_action('after_switch_theme', 'wpcom_create_form_table');

Функция dbDelta безопасно создаёт или обновляет таблицу. Теперь у нас есть место для хранения сообщений.

Сохранение данных в таблицу при обработке формы

Изменим функцию обработки, чтобы записывать данные в базу:

function wpcom_handle_form_submission() {
  if (isset($_POST['wpcom_nonce']) && wp_verify_nonce($_POST['wpcom_nonce'], 'wpcom_form_nonce')) {
    global $wpdb;
    $name = sanitize_text_field($_POST['wpcom_name']);
    $email = sanitize_email($_POST['wpcom_email']);
    $message = sanitize_textarea_field($_POST['wpcom_message']);

    if (empty($name) || empty($email) || empty($message)) {
      echo '<p>Пожалуйста, заполните все поля.</p>';
      return;
    }

    if (!is_email($email)) {
      echo '<p>Введите корректный email.</p>';
      return;
    }

    $table_name = $wpdb->prefix . 'wpcom_form_messages';
    $wpdb->insert(
      $table_name,
      array(
        'name' => $name,
        'email' => $email,
        'message' => $message,
        'time' => current_time('mysql')
      )
    );

    echo '<p>Спасибо за ваше сообщение!</p>';
  }
}
add_action('wp_head', 'wpcom_handle_form_submission');

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

Дополнительные советы по безопасности и UX

Защита от спама и валидация

Обязательно используйте nonce и проверяйте его. Помимо этого, можно добавить простую капчу или скрытое поле (honeypot) для борьбы со спам-ботами.

Валидация данных на стороне сервера — обязательна, но желательно также делать её на клиенте с помощью JavaScript для улучшения пользовательского опыта.

Улучшение интерфейса и отзывчивость

Форму стоит стилизовать под дизайн сайта и обеспечить адаптивность для мобильных устройств. Добавьте подсказки и сообщения об ошибках рядом с полями. Это повысит доверие пользователей и увеличит конверсию.

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

Чтобы не перезагружать страницу при отправке формы, можно реализовать AJAX-запрос. Это требует создания обработчика на стороне WordPress с помощью admin-ajax.php. В результате пользователь получит мгновенный ответ без перезагрузки.

Пример AJAX-обработчика выходит за рамки текущей статьи, но при необходимости мы можем его разобрать отдельно.