Как настроить маску ввода телефона в формах Elementor Pro

Если вы используете Elementor Pro для создания форм на сайте под управлением WordPress, скорее всего, вы сталкивались с необходимостью добавить маску ввода телефона — чтобы пользователи не вводили номер в произвольном формате, а сразу видели шаблон: +7 (___) ___-__-__.

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

🔧 Почему стандартные решения не всегда работают?

• Плагины для масок часто тяжёлые, конфликтуют с темой или Elementor.
• Подключение через сторонние ресурсы создаёт зависимость от внешнего ресурса (если внешний сервер упадёт — маска пропадёт).
• Формы в попапах появляются динамически — обычный скрипт их «не видит».

Наше решение:

• ✅ Использует лёгкую и популярную библиотеку Inputmask,
• ✅ Подключает её локально (сохраняется в папке с темой),
• ✅ Работает везде: на страницах и в попапах,
• ✅ Не требует правки шаблонов (только через сниппет),
• ✅ Полностью совместимо с Elementor Pro.

📁 Шаг 1. Подготовка: скачиваем библиотеку Inputmask

1. Перейдите по ссылке:
   👉 https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js
2. Сохраните содержимое файла как phone-mask.js.
3. Загрузите этот файл в папку вашей дочерней темы (обязательно!):

   /wp-content/themes/ваша-дочерняя-тема/js/phone-mask.js

💡 Если у вас нет дочерней темы — создайте её! Это обязательно для безопасного обновления темы.

🧩 Шаг 2. Добавляем код через WP Code Snippets

Установите плагин WP Code Snippets (если ещё не установлен).

1. Перейдите в Сниппеты → Добавить новый.
2. Вставьте следующий код:

(function () {
    function applyPhoneMask() {
        const phoneInputs = document.querySelectorAll('input[name="form_fields[tel]"]');
        if (phoneInputs.length === 0) return;

        if (typeof Inputmask === 'undefined') {
            const script = document.createElement('script');
            // Подключаем ЛОКАЛЬНЫЙ файл из дочерней темы
            script.src = '/wp-content/themes/hello/js/phone-mask.js';
            script.onload = function () {
                if (typeof Inputmask !== 'undefined') {
                    initMasks(phoneInputs);
                } else {
                    console.error('Inputmask не инициализирована после загрузки скрипта');
                }
            };
            script.onerror = function () {
                console.error('Не удалось загрузить локальный файл phone-mask.js');
            };
            document.head.appendChild(script);
        } else {
            initMasks(phoneInputs);
        }
    }

    function initMasks(inputs) {
        inputs.forEach(input => {
            if (input.inputmask) return;
            new Inputmask({
                mask: '+7 (999) 999-99-99',
                placeholder: '+7 (___) ___-__-__',
                showMaskOnHover: false,
                showMaskOnFocus: true
            }).mask(input);
        });
    }

    const observer = new MutationObserver(applyPhoneMask);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyPhoneMask);
    } else {
        applyPhoneMask();
    }
})();

3. Важно! Замените в строке:

   script.src = '/wp-content/themes/hello/js/phone-mask.js';

название вашей дочерней темы (hello) на реальное имя вашей темы.

4. Назовите сниппет, например: «Маска телефона для Elementor».
5. Установите тип: «Frontend» (только на сайте, не в админке).
6. Нажмите Сохранить сниппет или «Save Changes and Activate».

🔍 Как это работает?

• input[name="form_fields[tel]"] — стандартное имя поля телефона в формах Elementor Pro.
• Скрипт автоматически подключает ваш локальный файл phone-mask.js, если библиотека ещё не загружена.
• MutationObserver следит за изменениями на странице — как только появляется новая форма (например, в попапе), маска применяется мгновенно.
• Проверка if (input.inputmask) предотвращает дублирование маски.

🛠 Настройка под ваш формат

Хотите другой формат? Просто измените параметры в new Inputmask({ ... }):

mask: '+7 999 999-99-99',
placeholder: '+7 ___ ___-__-__',

Или для международного формата:

mask: '+375 (99) 999-99-99',
placeholder: '+375 (__) ___-__-__',

Библиотека Inputmask поддерживает любые шаблоны!

✅ Проверка работы

1. Откройте страницу с формой Elementor.
2. Кликните в поле телефона.
3. Должна появиться маска: +7 (___) ___-__-__.
4. Попробуйте открыть форму в попапе — маска тоже должна работать.
5. Откройте DevTools (F12) → Console — убедитесь, что нет ошибок.

💡 Советы

• Если маска не появляется — проверьте точное имя поля в HTML. Иногда Elementor использует другие имена (например, form_fields[phone]). В этом случае замените селектор в коде.
• Чтобы обойти кэш при обновлении файла, добавьте версию в URL:

  script.src = '/wp-content/themes/hello/js/phone-mask.js?v=1.1';

• Не используйте пробелы в путях и URL — это частая причина ошибок 404.

🎯 Заключение

Теперь у вас есть надёжная, быстрая и независимая от внешних ресурсов маска ввода телефона для всех форм Elementor Pro — даже в динамических попапах.

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

Удачи в разработке! 🚀

Протестировано на: WordPress 6.8.3 + Elementor Pro 3.32.2 + Hello Theme (дочерняя)
Библиотека: Inputmask v5.0.8 (лицензия MIT)