Как сделать автозаполнение форм в Elementor с помощью AJAX

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

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

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

Elementor в базовой комплектации не предоставляет возможности для полноценного автозаполнения, но с помощью AJAX и программной логики можно реализовать гибкие решения с динамическим поиском и подсказками.

Рассмотрим практический пример, как реализовать автозаполнение поля ввода с динамическим поиском по записям кастомного типа.

Подготовка: создание кастомного типа записи и формы в Elementor

Для примера создадим кастомный тип записей "Клиенты", по которым будет осуществляться автозаполнение.

Код для регистрации типа записей wpelementor_register_custom_post_type_clients() добавляем в functions.php темы или в плагин:

function wpelementor_register_custom_post_type_clients() {
    $args = array(
        'public' => true,
        'label'  => 'Клиенты',
        'supports' => array('title')
    );
    register_post_type('clients', $args);
}
add_action('init', 'wpelementor_register_custom_post_type_clients');

Далее создаем форму в Elementor с одним текстовым полем, к которому будем подключать автозаполнение. Важно задать полю уникальный ID, например client_name.

Реализация AJAX-обработчика для автозаполнения

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

Добавим следующий код в functions.php:

function wpelementor_ajax_autocomplete_clients() {
    // Проверяем nonce если нужно для безопасности
    $search = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    $results = [];

    if($search) {
        $query = new WP_Query([
            'post_type' => 'clients',
            's' => $search,
            'posts_per_page' => 10
        ]);

        if($query->have_posts()) {
            while($query->have_posts()) {
                $query->the_post();
                $results[] = get_the_title();
            }
            wp_reset_postdata();
        }
    }

    wp_send_json($results);
}
add_action('wp_ajax_wpelementor_autocomplete_clients', 'wpelementor_ajax_autocomplete_clients');
add_action('wp_ajax_nopriv_wpelementor_autocomplete_clients', 'wpelementor_ajax_autocomplete_clients');

Этот обработчик принимает параметр term, ищет посты типа "clients" с похожим названием и возвращает список названий.

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

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

Добавим скрипт в футер темы или через enqueue с зависимостью от jQuery:

function wpelementor_enqueue_autocomplete_script() {
    wp_enqueue_script('wpelementor-autocomplete', get_stylesheet_directory_uri() . '/js/autocomplete.js', ['jquery'], null, true);
    wp_localize_script('wpelementor-autocomplete', 'wpelementor_ajax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpelementor_enqueue_autocomplete_script');

Файл autocomplete.js:

jQuery(document).ready(function($) {
    var $input = $('#client_name');
    var $list = $('<ul id="autocomplete-list" style="border:1px solid #ccc; max-height:150px; overflow-y:auto; position:absolute; background:#fff; z-index:9999;"></ul>');
    $input.after($list);

    $input.on('input', function() {
        var term = $(this).val();
        if(term.length < 2) {
            $list.empty();
            return;
        }
        $.ajax({
            url: wpelementor_ajax.ajax_url,
            method: 'GET',
            data: {
                action: 'wpelementor_autocomplete_clients',
                term: term
            },
            success: function(data) {
                $list.empty();
                if(data.length) {
                    data.forEach(function(item) {
                        var $item = $('<li style="padding:5px; cursor:pointer;"></li>').text(item);
                        $item.on('click', function() {
                            $input.val(item);
                            $list.empty();
                        });
                        $list.append($item);
                    });
                }
            }
        });
    });

    // Закрытие списка при клике вне поля
    $(document).on('click', function(e) {
        if(!$(e.target).closest('#client_name, #autocomplete-list').length) {
            $list.empty();
        }
    });
});

Этот скрипт создаёт выпадающий список под полем ввода, отправляет AJAX-запросы по мере набора текста и заполняет поле при выборе варианта.

Дополнительные советы и плагины для автозаполнения в Elementor

Если хочется использовать готовые решения, на wpshop.ru есть несколько плагинов, которые могут помочь:

• WPForms — мощный конструктор форм с поддержкой AJAX и автозаполнения;
• WPRemark — для создания отзывов с функцией автозаполнения;
• Clearfy Pro — оптимизация и улучшение функционала, включая AJAX-запросы.

Использование плагинов сокращает время разработки, но собственный код даёт больше гибкости и контроля.

Заключение по реализации автозаполнения форм в Elementor

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

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