Flexible phone input
The phone field suggests the format as you type and accepts numbers from any country.
The customer types a phone number and the field adds brackets and spaces on its own — the number reads clearly and a typo is obvious right away, not after the courier fails to get through.
What it does
- Suggests the format as you type: your country's format by default, but start with “+48” or “+49” and the field switches by itself, so a customer from another country can place an order too.
- Understands a number pasted from a contact list or a chat in any shape: with brackets, spaces, with or without the country code.
- Explains the mistake before submitting: if what was typed does not look like a phone number, the customer sees an example instead of a refusal after pressing “Place order”. The check uses the same engine as saving the order.
- Works in every shop form that asks for a phone: checkout, sign-in and registration, customer account, callback request, back-in-stock notification.
What it needs
Nothing has to be configured: the country comes from the shop's main settings, the fields are found automatically, and theme templates stay untouched. The look of the field stays yours — only the invalid-number highlight and the example hint are added.
What appears in the shop
This is what a shopper sees once it is installed.
- In every shop form that asks for a phone, the field starts suggesting the format as you type: checkout, sign-in and registration, callback request, back-in-stock notification. The fields are found automatically, so nothing has to be edited in the theme templates. The look of the field stays yours: only the invalid-number highlight and the example hint are added. If your theme has its own form markup, add its selector in the plugin settings.
Гибкая маска телефона
Поле телефона в магазине начинает подсказывать формат по мере набора: покупатель вводит цифры, а скобки и пробелы расставляются сами.
Что это даёт
- Номер видно целиком. Опечатка заметна сразу, а не после звонка курьера.
- Покупатель из другой страны оформит заказ. По умолчанию поле ждёт формат
вашей страны, но стоит начать с
+48или+49— и оно переключится само. - Вставка из записной книжки не ломается. Номер со скобками, пробелами,
через
8или вовсе без кода страны разбирается одинаково. - Видно, чего от покупателя ждут. В самом поле стоит образец номера, а под ним — подсказка «Например: +380 67 123 4567».
- Ошибка объясняется до отправки. Если введённое не похоже на телефон, подсказка становится красной, а не отказ приходит после нажатия «Оформить заказ»: проверка идёт тем же способом, что и при сохранении заказа.
- Ничего не пропадает. Готовый номер показывается с кодом страны — «+380 67 123 4567», ровно в том виде, в каком он уйдёт в заказ.
Где работает
Во всех формах магазина, где спрашивают телефон: оформление заказа, вход и регистрация, личный кабинет, обратный звонок, сообщение о поступлении товара. Поля находятся сами — в шаблонах темы ничего править не надо.
Настройки
Настройки → Плагины → «Гибкая маска телефона».
- Страна по умолчанию — формат какой страны поле ждёт, пока покупатель не ввёл код другой. Обычно менять не нужно: берётся страна из основных настроек магазина.
- Показывать под полем пример номера — под полем видно, в каком виде магазин ждёт телефон; при ошибке подсказка становится красной. Можно выключить, если форма и без того длинная.
- Дополнительные поля телефона — нужно только если у вашей темы или другого дополнения своя разметка формы: перечислите CSS-селекторы через запятую.
Как это выглядит для покупателя
Вид поля остаётся вашим — плагин не подменяет оформление темы. Добавляется только подсветка неверного номера и подсказка с примером под полем.
An icon of its own
In the «Plugins» section and in the list of installed items the add-on now shows its own icon instead of an identical box, so you find the one you need at a glance. The icon appears on shops running version 1.30.0 and newer.
No longer interferes with other add-ons
The mask settings are no longer written into the page head as a separate block. Because of it some of what other add-ons put there never reached the browser — for example, the shop stopped offering installation on a phone.
The field now shows a sample number, and under it the customer sees the shape the shop expects. A completed number is shown with its country code — previously “+380 67 123 4567” collapsed into “067 123 4567”, which looked as if the field had eaten the beginning.
Phone numbers entered without mistakes
The phone field suggests the country format and validates the number by the same rules as checkout, so a shopper does not learn about an error at the last moment.