Как добавить маску ввода для телефона в Contact Form 7

Опубликовано автором

По умолчанию поле «телефон» в Contact Form 7 проверяет только набор символов, которые ввёл пользователь (цифры, плюс, дефис, скобки), но не корректность введённого номера. Исправим это! 🔨

Видеоруководство

Зачем нужна маска ввода для номера телефона?

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

Добавление маски ввода для телефона с помощью плагина Phone mask field

Устанавливаем и активируем Phone mask field, затем открываем раздел Contact Form 7 и переходим на экран редактирования существующей или создания новой формы.

Выбираем место для вставки нового поля (1), находим в списке тегов — «mask field» (2) и щёлкаем по нему.

В открывшемся окне вводим имя поля (1), например, your-phone. В поле «Mask» (2) вводим нужную маску, для России подойдет +7 (___) ___-__-__. При необходимости отмечаем поле как обязательное (3) и жмём кнопку «Вставить тег» (4).

Добавляем подпись аналогично другим полям.

Не забываем указать новое поле на вкладке «Письмо» в «Тело письма» (1) и жмём кнопку «Сохранить» (2).

Если форма ещё не выведена на сайте, то копируем её шорткод, вставляем на нужную страницу и проверяем результат.

Теперь телефон в поле сохранится только если пользователь ввёл его согласно маске.