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

Отвечаем вопрос, зачем нужна маска телефона в форме и как ее сделать в Taptop.

Смотрите видео:

https://vk.com/video-219751701_456239274

VK Видео | YouTube | Rutube

Зачем нужна маска телефона

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

Маска телефона:

  • автоматически добавляет код страны

  • ограничивает количество цифр

  • расставляет пробелы, скобки и дефисы

Как настроить маску телефона

Разберемся на примере стандартной формы обратной связи.

Шаг 1. Выберите поле ввода телефона

На холсте или в слоях выберите поле для ввода телефона и в нем слой Input.

Шаг 2. Установите для поля тип Телефон

В настройках на правой панели выберите тип Телефон.

Шаг 3. Настройте маску

В поле Маска доступны варианты для разных стран:

  • Россия
  • Казахстан
  • Беларусь
  • Украина
  • Узбекистан

Это готовые шаблоны телефонов, в которых отображается код страны и нужное количество символов, например:

  • Россия → +7 (ххх) ххх-хх-хх
  • Беларусь → +375 (хх) ххх-хх-хх

Выберите нужный вариант — маска применится автоматически.

Шаг 4. Проверьте работу маски

Опубликуйте страницу и откройте ее в браузере. Попробуйте ввести номер телефона. Маска автоматически добавит код страны и нужное форматирование.

Готово! Теперь пользователь сможет ввести номер быстрее, а вы получите данные в правильном формате.

Резюме

Чтобы сделать маску телефона в Taptop:

  1. Выберите поле ввода телефона в форме.
  2. В настройках установите тип Телефон.
  3. В поле Маска выберите нужную страну.