Маска телефона в Тильде: IMask.js и проверка формата номера

Маска телефона в Тильде есть штатно: в настройках поля «Телефон» включается автоматическая маска с кодом страны либо задаётся своя, вида (999) 999‑9999. В большинстве проектов этого хватает, и в код лезть не нужно вообще. Ниже разбираю, где эта настройка лежит и что умеет, а дальше показываю кастомный вариант на IMask.js для случаев, которые штатная маска не закрывает: своя логика формата под несколько стран сразу и нормализация номера перед отправкой в CRM.

Зачем нужна маска ввода телефона в форме Тильды

Без маски поле «Телефон» принимает номер почти в любом виде. Своя проверка у него есть: по документации Тильды в этом поле «автоматически добавляется проверка правильности телефона (цифры и некоторые символы)», так что «89991234567abc» через него не пройдёт. А вот формат не задан никак: один клиент пишет 89991234567, второй +7 999 123-45-67, третий добавляет «доб. 123». На выходе в таблице лидов и в вебхуке для CRM оказывается мешанина форматов, и дальше приходится вручную разгребать базу перед прозвоном.

На практике это особенно больно в двух местах. Первое - интеграция с амоCRM или Битрикс24 через вебхук: если номер приходит в разных форматах, сделки дублируются, потому что система не узнаёт один и тот же контакт. Второе - оплата на T‑Bank и других эквайрингах, где номер телефона участвует в проверке платежа и должен быть в предсказуемом виде, иначе форма оплаты просто откажет.

Маска не только косметика. Она задаёт жёсткую структуру ввода («+7 (999) 999-99-99»), сразу отсекает лишние символы и даёт понятный сигнал пользователю, сколько цифр ещё нужно ввести.

Что умеет встроенное поле «Телефон» в Тильде и где оно не справляется

Начну с того, что маска в Тильде штатная. В справке описаны два её типа: «автоматическая маска с кодами стран для номеров телефонов и настраиваемая маска для остальных случаев». Обе включаются мышкой, без единой строчки кода: меню «Контент» блока с формой, поле типа «Телефон», дальше либо «Автоматическая маска с кодом страны», либо своё описание формата.

В настраиваемой маске символ 9 означает цифру, и другой символ в это место посетитель ввести не сможет, a означает букву, * любой символ. Среди примеров в справке прямо стоит «Телефон (999) 999‑9999». Автоматическая маска удобнее там, где заявки идут из разных стран: если поле «Код страны по умолчанию» оставить пустым, код подставится по стране посетителя сам.

Штатной маски не хватает в узких случаях. Когда раскладку формата нужно менять на лету по первым цифрам номера внутри одного поля. Когда номер надо привести к E.164 и положить в скрытое поле до того, как форма уйдёт в CRM. Когда своя проверка должна отработать раньше стандартной. Вот в этих случаях я и беру IMask.

HTML5 pattern решает задачу наполовину: браузер не даст отправить форму с неверным набором символов, но пользователь до последнего не видит, в каком формате от него ждут номер. Против штатной маски он смысла не имеет. IMask.js закрывает и маску, и проверку, и подготовку значения для CRM, но браться за него стоит только тогда, когда настройки поля объективно не хватает.

Подключаем IMask.js в кастомном коде блока T123

Дальше идёт вариант для случаев из списка выше, а не замена штатной настройки. Библиотеку подключаю через CDN и инициализирую после того, как Тильда отрендерит форму. Слушаю событие t_ready, которое Тильда генерирует после загрузки zero-блоков, и дополнительно ставлю проверку на дубли инициализации, потому что на странице с попапом форма может подгружаться повторно.

<script src="https://cdn.jsdelivr.net/npm/imask@7"></script>
<script>
document.addEventListener('t_ready', function () {
  document.querySelectorAll('input[name="phone"]').forEach(function (input) {
    if (input.dataset.imaskInit) return;
    input.dataset.imaskInit = '1';
    IMask(input, { mask: '+{7} (000) 000-00-00' });
  });
});
</script>

Если форма стоит в попапе, который открывается по кнопке, событие t_ready может отработать раньше, чем попап появится в DOM. В этом случае вешаю MutationObserver на контейнер попапа и инициализирую маску в момент появления инпута - разово, без опроса по таймеру.

Проверяем формат номера перед отправкой формы

Маска сама по себе не мешает отправить форму с недописанным номером вроде «+7 (999) 12». Чтобы отсечь такие случаи, вешаю обработчик на submit и проверяю mask.masked.isComplete, а заодно пишу очищенный номер в скрытое поле, которое реально уходит в CRM.

document.addEventListener('t_ready', function () {
  var form = document.querySelector('form[data-tilda-form]');
  if (!form) return;

  var phoneInput = form.querySelector('input[name="phone"]');
  var mask = IMask(phoneInput, { mask: '+{7} (000) 000-00-00' });

  form.addEventListener('submit', function (e) {
    if (!mask.masked.isComplete) {
      e.preventDefault();
      e.stopPropagation();
      phoneInput.classList.add('t-input-error');
      return false;
    }
    var hidden = form.querySelector('input[name="phone_e164"]');
    if (hidden) hidden.value = '+7' + mask.unmaskedValue.slice(1);
  }, true);
});

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

Форматы номеров: E.164, +7 и локальные особенности

Для большинства российских лендингов хватает штатной маски в настройках поля. Если через форму заявки идут клиенты из Казахстана, Беларуси или Узбекистана, первым делом смотрю на автоматическую маску с кодом страны: она для этого и сделана, код подставляется по стране посетителя, и клиент вводит свой номер без ухищрений. Кастом нужен там, где нужна не просто подстановка кода, а своя раскладка формата под каждую страну или единый вид номера на выходе.

В таких случаях делаю динамическую маску: базовый паттерн +000000000000 без жёсткой раскладки по скобкам, либо набор из нескольких масок с автоматическим выбором по первым цифрам через опцию dispatch в IMask. Для передачи в CRM и SMS-сервисы в любом случае привожу номер к E.164 (+79991234567, без пробелов и скобок) - это формат, который принимают почти все внешние API без дополнительной нормализации.

Как маска телефона стыкуется с CRM и уведомлениями

Очищенный номер из скрытого поля уходит дальше по цепочке: в вебхук CRM, в уведомление боту на aiogram, который присылает менеджеру заявку в Telegram, или в сценарий n8n, который раскладывает лид по нескольким системам сразу - CRM, таблице учёта, рассылке. Если номер уже пришёл в едином формате, эти сценарии не нужно захламлять дополнительной нормализацией на каждом шаге.

Отдельно слежу, где физически хранятся контакты клиентов после того, как они попали в CRM или таблицу учёта - по 152-ФЗ персональные данные российских пользователей должны обрабатываться на серверах в России, так что для CRM и таблиц с телефонами выбираю сервисы с локализацией на РФ-серверах, а не зарубежные облачные таблицы. Когда с интеграцией нужно повозиться плотнее - завязать форму на CRM, эквайринг и доставку СДЭК одним потоком, обычно проще заказать комплексную интеграцию форм Тильды с внешними сервисами, чем собирать это самостоятельно из разрозненных кусков кода.

Частые ошибки при настройке маски

• Инициализация маски до того, как Тильда дорисовала форму - IMask цепляется к несуществующему элементу и просто ничего не делает, без ошибки в консоли.
• Повторная инициализация на одной и той же форме после ререндера попапа - маска задваивается, и ввод начинает вести себя рывками.
• Жёсткая маска под «+7» на сайте, где часть клиентов из СНГ вводит номер с другим кодом страны.
• Отправка в CRM значения прямо из замаскированного поля со скобками и дефисами вместо очищенного номера в скрытом поле.
• Кастомная маска там, где хватало штатной: лишний скрипт на странице, лишняя точка отказа и лишние деньги за доработку.
• Одновременно включённая маска в настройках поля и своя маска на IMask - два обработчика дерутся за одно значение, ввод скачет. Ставишь свою, штатную в поле выключай.

Частые вопросы

Какую маску ставить для российских номеров в Тильде

Для формы под клиентов из России хватает штатной настраиваемой маски в поле «Телефон», формат (999) 999-9999 приведён примером в самой справке Тильды. Если нужен вид с кодом страны, беру автоматическую маску и задаю Россию в «Код страны по умолчанию». К IMask с маской +{7} (000) 000-00-00 перехожу только тогда, когда тем же скриптом надо ещё и подготовить номер для CRM. Для СНГ-аудитории со своей раскладкой формата под каждый код беру динамическую маску с несколькими паттернами.

Работает ли IMask.js на мобильных и в адаптиве Тильды

Да, библиотека не завязана на десктопные события и одинаково работает с сенсорным вводом, автоподстановкой номера из адресной книги и голосовым набором на мобильных - маска применяется к значению поля независимо от способа ввода.

Как передать замаскированный номер в вебхук или CRM в чистом виде

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

Сколько стоит подключить маску телефона в Тильде

Штатная маска настраивается в интерфейсе за пару минут и денег не стоит, отдельно её заказывать незачем. Платят за то, что находится за её границей: кастомная раскладка под несколько стран, нормализация номера, передача в CRM. Простая доработка вроде такой маски на одну-две формы стоит от 3 000 ₽. Если нужна связка с проверкой формата, скрытыми полями и передачей в CRM, эквайринг или СДЭК - это уже комплексная интеграция, от 40 000 ₽ в зависимости от количества форм и внешних сервисов.