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

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

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

Плагины для форм, такие как Contact Form 7, Gravity Forms или WPForms, удобны, но имеют свои минусы: они могут замедлять сайт, создавать уязвимости или не давать полной свободы для кастомизации. Создавая формы вручную, мы получаем:

• Минимальный вес и нагрузку на сайт.
• Максимальную гибкость в обработке данных.
• Возможность глубокой интеграции с бизнес-логикой.

Однако, это требует понимания PHP, безопасности и особенностей WordPress.

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

Начнем с простой формы, которая собирает имя, email и сообщение. Разместим форму в файле темы (например, в шаблоне страницы) или через shortcode.

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

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

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

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

Чтобы обработать данные, добавим в functions.php следующую функцию с префиксом wpcompany_ для уникальности:

function wpcompany_handle_form_submission() {
  if (isset($_POST['wpcompany_submit'])) {
    // Очистка и валидация данных
    $name = sanitize_text_field($_POST['wpcompany_name']);
    $email = sanitize_email($_POST['wpcompany_email']);
    $message = sanitize_textarea_field($_POST['wpcompany_message']);

    if (!is_email($email)) {
      echo '<p style="color:red;">Неверный формат email.</p>';
      return;
    }

    // Отправка письма администратору
    $to = get_option('admin_email');
    $subject = 'Новое сообщение с формы на сайте';
    $body = "Имя: $name\nEmail: $email\nСообщение: $message";
    $headers = ['Content-Type: text/plain; charset=UTF-8'];

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

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

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

Как добавить защиту от спама и улучшить UX

Для защиты от спама можно реализовать несколько простых методов:

1. Использование скрытого поля honeypot

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

<input type="text" name="wpcompany_honeypot" style="display:none" tabindex="-1" autocomplete="off">

В обработчике проверяем:

if (!empty($_POST['wpcompany_honeypot'])) {
  return; // Спам-боты заполнили поле
}

2. Использование nonce для проверки формы

WordPress предоставляет специальные nonce-токены, чтобы убедиться, что форма отправлена с вашего сайта.

В форме добавьте:

<?php wp_nonce_field('wpcompany_form_action', 'wpcompany_form_nonce'); ?>

В обработчике проверяем:

if (!isset($_POST['wpcompany_form_nonce']) || !wp_verify_nonce($_POST['wpcompany_form_nonce'], 'wpcompany_form_action')) {
  echo '<p style="color:red;">Ошибка безопасности. Попробуйте снова.</p>';
  return;
}

3. AJAX-отправка формы для улучшенного UX

Можно сделать отправку формы без перезагрузки страницы с помощью AJAX. Для этого зарегистрируем обработчик в WordPress и подключим JavaScript.

PHP-обработчик:

function wpcompany_ajax_form_handler() {
  check_ajax_referer('wpcompany_form_action', 'security');

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

  if (!is_email($email)) {
    wp_send_json_error('Неверный формат email');
  }

  $to = get_option('admin_email');
  $subject = 'Новое сообщение с AJAX-формы';
  $body = "Имя: $name\nEmail: $email\nСообщение: $message";
  $headers = ['Content-Type: text/plain; charset=UTF-8'];

  wp_mail($to, $subject, $body, $headers);
  wp_send_json_success('Спасибо за ваше сообщение!');
}
add_action('wp_ajax_wpcompany_send_form', 'wpcompany_ajax_form_handler');
add_action('wp_ajax_nopriv_wpcompany_send_form', 'wpcompany_ajax_form_handler');

JavaScript (jQuery):

jQuery(document).ready(function($){
  $('#wpcompany_form').on('submit', function(e){
    e.preventDefault();

    var data = {
      action: 'wpcompany_send_form',
      security: $('#wpcompany_form_nonce').val(),
      name: $('#wpcompany_name').val(),
      email: $('#wpcompany_email').val(),
      message: $('#wpcompany_message').val()
    };

    $.post(wpcompany_ajax_object.ajax_url, data, function(response){
      if(response.success){
        alert(response.data);
        $('#wpcompany_form')[0].reset();
      } else {
        alert('Ошибка: ' + response.data);
      }
    });
  });
});

Не забудьте локализовать скрипт в PHP, чтобы передать URL AJAX и nonce:

function wpcompany_enqueue_scripts() {
  wp_enqueue_script('wpcompany-ajax-script', get_template_directory_uri() . '/js/wpcompany-ajax.js', ['jquery'], null, true);
  wp_localize_script('wpcompany-ajax-script', 'wpcompany_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpcompany_form_action')
  ]);
}
add_action('wp_enqueue_scripts', 'wpcompany_enqueue_scripts');

Пример комплексной формы с валидацией и защитой

В итоге у вас получится форма с:

• Проверкой обязательных полей.
• Проверкой email.
• Защитой от спама через honeypot и nonce.
• Отправкой письма админу.
• AJAX-отправкой для лучшего UX.

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

Дополнительные советы и плагины для расширения функционала

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

• Clearfy Pro — для оптимизации и безопасности WordPress, поможет обезопасить формы.
• WPRemark — плагин для расширенного управления комментариями и формами обратной связи.

Но лучше сначала освоить ручное создание форм — это даст понимание, как работает WordPress изнутри.