Добавляем телефонную маску для форм в Bricks Builder

Работая с формами в Bricks Builder, многие сталкиваются с тем, что там нет встроенной маски для телефонов. Но решение оказалось проще, чем я думал!

Проблема

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

Решение: JavaScript маска ввода

Я нашел простое решение с использованием библиотеки Inputmask. Вот готовый код:

php

function artplit_phone_mask_assets() {
    wp_enqueue_script(
        'inputmask',
        'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8-beta.17/inputmask.min.js',
        array(),
        '5.0.8',
        true
    );

    wp_add_inline_script(
        'inputmask',
        "
        document.addEventListener('DOMContentLoaded', function() {
            var input = document.querySelector('input[name=\"phone-field\"]');
            if (!input) return;

            // ПРОСТЕЙШИЙ ВАРИАНТ БЕЗ ОПЦИЙ
            var im = new Inputmask('+7 (999) 999-99-99');
            im.mask(input);
        });
        "
    );
}
add_action( 'wp_enqueue_scripts', 'artplit_phone_mask_assets' );

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

1. Подключаем библиотеку Inputmask через CDN
2. Находим поле телефона по имени phone-field
3. Применяем маску +7 (999) 999-99-99

Настройка в Bricks

После добавления кода в functions.php нужно настроить само поле:

1. В форме Bricks добавьте поле «Телефон»
2. В настройках поля перейдите в раздел «Атрибуты»
3. Задайте атрибут:
   • Имя: name
   • Значение: phone-field

Что дает маска?

• Автоматический формат: +7 (___) ___-__-__
• Только цифры: пользователь не может ввести буквы
• Визуальные разделители: скобки и дефисы добавляются автоматически
• Улучшенный UX: понятно, какой формат номера ожидается

Важные моменты

1. Имя поля должно совпадать в коде и в настройках Bricks
2. Библиотека загружается только на фронтенде, не мешая админке
3. Код работает без дополнительных плагинов

Можно кастомизировать

Если нужен другой формат, просто измените маску:

javascript

// Без кода страны
new Inputmask('(999) 999-99-99');

// Только цифры
new Inputmask('9999999999');

Результат

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

Это один из тех случаев, когда небольшой код решает большую проблему пользовательского опыта!