Как сделать ввод телефона по маске в Contact Form 7 WordPress

Случилось такое дело, что столкнулся с созданием формы на Contact Form 7 и там были поля ввода телефона с маской для ввода. Вроде бы всё просто, но контакт форм не поддерживает маску, поэтому пришлось поискать решение, как это сделать. Изначально была надежда, что поставлю плагин для этого и всё будет сделано. Но плагина не оказалось, был один или два старых, которые не работали как надо. Значит пришлось решать этот вопрос, а, чтобы не забыть написать статью, возможно пригодится и другим такое решение.

Как сделать ввод телефона по маске в Contact Form 7 WordPress

Задача решения: сделать поле с маской ввода и placeholder поле в котором бы сразу отображалось, что нужно вводить номер и его вид. Начинаем решение задачи по пунктам:

Скрипт для отображения маски телефона

Нашёл разработку скрипта, вот его описание:

Это замаскированный вход плагин для JQuery библиотеки JavaScript. Это позволяет пользователю более легко вводить фиксированную ширину входа, где вы хотели бы их, чтобы ввести данные в определённом формате (даты, номера телефонов и т.д.). Он был протестирован на Internet Explorer, Firefox, Safari, Opera и Chrome. Маска определяется формат, состоящий из маски литералов и определения маски. Любой символ, не в списке определений ниже считается маска буквальным. Маска литералы будет автоматически введена для пользователя , как они печатают и не смогут быть удалены. Определения следующих масок предопределены:

а – Представляет альфа-символ (AZ, AZ)

9 – Представляет цифровой символ (0-9)

* – Представляет алфавитно-цифровые символы (AZ, AZ, 0-9)

Теперь его надо скачать к себе, брать тут.

Заливаем скрипт в шаблон сайта

После того как вы скачали скрипт надо залить его с названием jquery.maskedinput.min.js в папку JS вашего шаблона сайта. Если такой папки нет, то создать её.

Добавление в function.php

После того как файл залит, нам необходимо добавить функцию в function.php темы сайта. Заходим в шаблон, находим function.php и в конце добавляем сразу вот такой код вызова функции и исполнения:

Настройка вида маски телефона

Для того чтобы настроить правильно маску телефона, используйте вариацию $(“.tel”).mask(“(99) 9999-9999”);. Я например сделал вот так у себя.

Соответственно дальше в поле формы вставляете вот таким вот кодом, как на картинке ниже. После этого у вас будет работать маска телефона в обычном contact form 7 на сайте wordpress. Удачной вам работы!

2 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

OK2WEB
OK2WEB
Более 12 лет занимаюсь разработкой и продвижением сайтов. Городские порталы, информационные и новостные сайты. Сейчас в основном разрабатываю интернет магазины и коммерческие сайты. Если у вас есть вопросы пишите, стараюсь оперативно ответить и помочь.

Обновление Woodmart 6.1.3 что вышло нового: обзор всех изменений

Улучшение функционала и возможностей WoodMart WordPress продолжается и было выпущено новое значительное обновление 6.1. Основное направление сейчас - оптимизация как с точки зрения скорости, так и с точки зрения удобства пользователей. Много также изменений некоторых настроек темы, чтобы помочь людям находить некоторые настройки и...

Обзор визуального конструктора WordPress Zion Builder, легкий и пока бесполезный

Многие люди знают WordPress как инструмент для ведения блогов. Не ошибаюсь, но WordPress выходит за рамки этого. WordPress - это программное обеспечение CMS, которое можно использовать для создания веб-сайтов любого типа. Хотя WordPress очень помог в создании веб-сайта, плагин для создания страниц делает это еще проще. Вы можете использовать конструктор страниц, чтобы...

Быстрые покупки на Woocommerce – плагин Экспресс шоп, продажа товаров с 1 страницы

Express Shop - это надстройка WooCommerce для отображения всех продуктов на одной странице с помощью кнопки AJAX «Добавить в корзину». Покупатели могут быстро отфильтровать товары и ускорить процесс покупки. Функции включают в себя несколько шаблонов стилей , загружать больше, бесконечную прокрутку, быструю плавающую корзину,...

Как убрать вкладки на странице товаров Woocommerce (вариант Амазона без табов)

Если вам нравится макет страницы одного продукта Amazon, вам, вероятно, не нравится макет вкладок страницы одного продукта WooCommerce по умолчанию. В этом разделе по умолчанию отображаются «Описание», «Обзоры», «Дополнительная информация» и другое настраиваемое содержимое… в виде вкладок под изображением и кратким описанием. К счастью, есть очень...

Аналог Contact Form 7 – настройка и описание премиум плагина Form Builder

Начну с того почему я всегда использую аналог Contact Form 7 плагина для Wordpress и не рекомендую использовать этот плагин. Слишком большое распространение и бесплатность сыграли злую шутку с сайтами где этот плагин установлен. На него написано много инструментов автоматического спама. Вы еще не...

Структура базы данных WooCommerce: хранение данных, где что находится

Термин «база данных» широко используется и известен миллионам людей, но доля людей, которые имеют его в своем словарном запасе, не понимая, что он описывает, весьма значительна. Базы данных сегодня лежат в основе столь многих цифровых сервисов, что их легко полностью упустить из виду, но независимо...