Оглавление:
Номер телефона в Contact Form 7 используется довольно часто, когда нам нужно получить с потенциальным клиентом, посетившим наш сайт, обратную связь. Поле с номером телефона применяется в формах заявок, при бронировании, для обратной связи (Перезвоните мне), для получения консультаций и т.д.
Для популярной формы, на основе бесплатного плагина для WordPress Contact Form 7, есть довольно простой и бесплатный способ, добавить поле с номером телефона в требуемом формате.
Плагин маска телефона для Contact Form 7
Эту задачу успешно решает плагин Contact Form 7 — Маска ввода телефонного номера. Вы можете скачать его по ссылке или установить обычным способом из библиотеки в разделе плагины админки вашего сайта на WordPress. Настройка плагина, одна из самых простых.
Настройка плагина
Достаточно установить плагин и начать использовать. После установки, перейдите в вашу форму созданную в Contact Form 7 и добавьте поле с маской телефона в нужную область. Для этого нажмите новую кнопку Маска ввода и в открывшемся окне заполните поле Маска (см. пример ниже).
В примере используется маска ввода для обычного мобильного номера используемого в России. То есть, мы заполняем +7, скобки ( ) и дефисы, а также знак _ для цифр номера телефона. Формат заполнения произвольный, то есть вы можете не указывать скобки или дефис, а вместо +7 указать 8. Главное, чтобы и вам и клиенту было легко понять, что это формат телефона, а не что-то иное.
Вот и вся настройка. Осталось протестировать форму отправив тестовую заявку с вашего сайта.
Решение проблем с курсором
В некоторых темах WordPress вы можете столкнуться с проблемой некорректного положения курсора в маске поля с телефоном. Выглядеть это может как на скрине. То есть, куда тыкнули мышкой, туда курсор и встал и, с того места и начинается ввод номера телефона. В результате вы получите только часть номера и не сможете связаться с клиентом, что не есть хорошо.
Решение проблемы с размещением курсора в начале поля ввода номера можно осуществить добавлением небольшого скрипта прямо в форму и добавлением класса в код самой маски class:teldo. Класс вы можете указать произвольный, только в этом случае не забудьте добавить его и в скрипт.
Скрипт можно добавить непосредственно в форму, если у вас 1-2 формы на сайте с полем телефона. Если форм больше, то имеет смысл разместить код с помощью плагина Header and Footer Scripts в область Head или перед закрывающим тегом Body.
Не забудьте протестировать работу форму и положение курсора при добавления телефона.
При добавлении скрипта в форму, код будет выглядеть вот так.
Код для курсора маски с телефоном
А вот и сам код, который нужно просто скопировать и вставить после формы.
<script>
jQuery(document).ready(function($) {
$(document).on('click', '.teldo, input[type="tel"]', function() {
$(this).get(0).setSelectionRange(0, 0);
});
});
</script>
