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

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

Почему автозаполнение важно для форм WordPress

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

Например, в форме заказа интернет-магазина автозаполнение адреса и контактных данных существенно упрощает процесс покупки.

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

Использование плагинов для автозаполнения форм в WordPress

Плагин Gravity Forms с дополнением Auto Complete

Gravity Forms — один из самых мощных конструкторов форм для WordPress. Он поддерживает множество расширений, в том числе и для автозаполнения.

Для реализации автозаполнения можно использовать дополнение Gravity Forms Auto Complete, которое позволяет подставлять значения из базы данных, предыдущих вводов пользователя или даже внешних API.

Пример настройки:

• Установите и активируйте Gravity Forms и плагин Gravity Forms Auto Complete.
• При создании формы в настройках поля укажите источник данных для автозаполнения — например, список клиентов из базы.
• Настройте минимальное количество символов для запуска подсказок.

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

Плагин Contact Form 7 и автозаполнение с помощью jQuery UI

Contact Form 7 — бесплатный и популярный плагин для создания форм. Для него нет встроенного автозаполнения, но можно реализовать его с помощью jQuery UI Autocomplete.

Пример подключения автозаполнения для поля email:

jQuery(document).ready(function($) {
  var emails = ["user1@example.com", "user2@example.com", "user3@example.com"];
  $("input[name='your-email']").autocomplete({
    source: emails
  });
});

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

Создание собственного автозаполнения форм на PHP и JavaScript в WordPress

Шаг 1. Создаём AJAX обработчик для получения данных

Добавим функцию для обработки AJAX-запроса, которая вернёт JSON с подсказками. В файле functions.php темы или в плагине добавьте:

function yarpp_get_autocomplete_suggestions() {
  // Проверяем nonce для безопасности
  check_ajax_referer('yarpp_autocomplete_nonce', 'security');

  $term = sanitize_text_field($_GET['term']);
  global $wpdb;
  $results = $wpdb->get_col($wpdb->prepare(
    "SELECT DISTINCT post_title FROM {$wpdb->prefix}posts WHERE post_title LIKE %s AND post_status = 'publish' LIMIT 10",
    "%" . $wpdb->esc_like($term) . "%"
  ));

  wp_send_json($results);
}
add_action('wp_ajax_yarpp_autocomplete', 'yarpp_get_autocomplete_suggestions');
add_action('wp_ajax_nopriv_yarpp_autocomplete', 'yarpp_get_autocomplete_suggestions');

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

Шаг 2. Подключаем JavaScript для вызова AJAX и отображения подсказок

Создайте файл js/yarpp-autocomplete.js с таким содержимым:

jQuery(document).ready(function($) {
  $("#yarpp-search").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: yarpp_vars.ajax_url,
        dataType: 'json',
        data: {
          action: 'yarpp_autocomplete',
          term: request.term,
          security: yarpp_vars.nonce
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2
  });
});

Зарегистрируйте и подключите скрипт в functions.php:

function yarpp_enqueue_scripts() {
  wp_enqueue_script('jquery-ui-autocomplete');
  wp_enqueue_script('yarpp-autocomplete', get_template_directory_uri() . '/js/yarpp-autocomplete.js', array('jquery', 'jquery-ui-autocomplete'), null, true);
  wp_localize_script('yarpp-autocomplete', 'yarpp_vars', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('yarpp_autocomplete_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'yarpp_enqueue_scripts');

Шаг 3. Добавляем HTML форму с автозаполнением

В нужном месте шаблона добавьте поле поиска с id yarpp-search:

<input type="text" id="yarpp-search" name="yarpp-search" placeholder="Начните вводить название записи" />

Теперь при вводе текста в поле будет происходить AJAX-запрос к серверу, и пользователю будут предлагаться подходящие варианты.

Расширение и кастомизация автозаполнения

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

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

Для визуальной части можно улучшить внешний вид подсказок с помощью CSS и jQuery UI тем.

Альтернативные решения и рекомендации по безопасности

Если вы не хотите писать код, рассмотрите плагины, такие как Autocomplete for WooCommerce или WPForms с дополнениями, которые уже поддерживают автозаполнение.

Обязательно используйте проверку nonce и sanitize функции для защиты от XSS и CSRF при работе с AJAX и пользовательскими данными.

Соблюдение этих рекомендаций обеспечит надёжную и удобную систему автозаполнения форм на вашем WordPress-сайте.