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

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

|

Формы — неотъемлемая часть любого сайта. В WordPress для создания форм обычно используют плагины, например Contact Form 7 или Gravity Forms. Однако иногда нужно обойтись без них, чтобы уменьшить нагрузку на сайт и иметь полный контроль над функционалом. В этой статье я покажу, как создать интерактивную форму на WordPress с нуля, используя собственный код, и расскажу, как обеспечить безопасность и удобство работы с данными.

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

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

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

Далее рассмотрим, как написать простой пример формы обратной связи с валидацией и защитой от CSRF-атак.

Создание формы с обработкой POST-запроса в WordPress

Начнем с создания формы, которая собирает имя, email и сообщение пользователя. В файле темы, например в page-contact.php, вставим следующий HTML-код:

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

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

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

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

  <button type="submit" name="wpkit_submit_form">Отправить</button>
</form>

Обратите внимание на скрытое поле nonce — оно служит защитой от CSRF-атак. Далее напишем обработчик формы в том же файле или в functions.php:

function wpkit_handle_contact_form() {
  if (!isset($_POST['wpkit_submit_form'])) {
    return;
  }

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

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

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

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

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

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

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

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

Валидация и безопасность данных формы

Очень важно не только отобразить форму, но и защитить сайт от вредоносных действий. В примере выше мы использовали:

  • wp_create_nonce и wp_verify_nonce для защиты от CSRF;
  • Функции очистки данных: sanitize_text_field, sanitize_email, sanitize_textarea_field;
  • Встроенную проверку email через is_email;
  • Безопасный вывод через esc_html;
  • Отправку email с правильными заголовками.

Если вы планируете сохранять данные формы в базу, обязательно используйте подготовленные запросы через $wpdb или функции WordPress для работы с базой, чтобы избежать SQL-инъекций.

Пример сохранения данных формы в базу данных

Создадим таблицу при активации темы или плагина:

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

  $sql = "CREATE TABLE $table_name (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    name varchar(100) NOT NULL,
    email varchar(100) NOT NULL,
    message text NOT NULL,
    submitted_at 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__, 'wpkit_create_form_table');

В обработчике формы добавим сохранение в базу:

global $wpdb;
$table_name = $wpdb->prefix . 'wpkit_contacts';
$wpdb->insert(
  $table_name,
  [
    'name' => $name,
    'email' => $email,
    'message' => $message
  ],
  ['%s', '%s', '%s']
);

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

Интерактивность формы с помощью AJAX в WordPress

Чтобы форма работала без перезагрузки страницы, добавим AJAX. Для этого зарегистрируем в теме или плагине обработчик AJAX-запроса:

function wpkit_ajax_contact_form() {
  check_ajax_referer('wpkit_contact_form', '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.');
  }

  // Отправка письма или сохранение в базе тут

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

Подключите скрипт с AJAX-запросом в footer или header:

function wpkit_enqueue_scripts() {
  wp_enqueue_script('wpkit-contact-form', get_template_directory_uri() . '/js/wpkit-contact-form.js', ['jquery'], null, true);
  wp_localize_script('wpkit-contact-form', 'wpkit_ajax_obj', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpkit_contact_form')
  ]);
}
add_action('wp_enqueue_scripts', 'wpkit_enqueue_scripts');

В файле wpkit-contact-form.js:

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

    var data = {
      action: 'wpkit_contact_form',
      nonce: wpkit_ajax_obj.nonce,
      name: $('#name').val(),
      email: $('#email').val(),
      message: $('#message').val()
    };

    $.post(wpkit_ajax_obj.ajax_url, data, function(response) {
      if(response.success) {
        alert(response.data);
        $('form')[0].reset();
      } else {
        alert(response.data);
      }
    });
  });
});

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

Полезные плагины для расширения возможностей кастомных форм

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

  • WP Simple Pay — если нужно добавить оплату после отправки формы.
  • Really Simple CAPTCHA — для защиты от спама, можно интегрировать с вашим кодом.
  • FluentCRM — для управления контактами и рассылками, можно автоматически добавлять пользователей из вашей формы.

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

WooCommerce: как исключить товары с определёнными атрибутами из корзины
18.05.2026
Как удалить не удаляемые плагины в WordPress: эффективные методы
20.11.2025
WooCommerce: автоматическое изменение стоимости товаров при оплате
20.04.2026
Как создать автоматический импорт из внешнего источника с обработкой ошибок в WordPress
07.04.2026
Как создать автоматически обновляемый сайт на WordPress с помощью WPRemark
12.03.2026

Последние статьи