Как сделать ввод телефона по маске в 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 КОММЕНТАРИИ

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

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

6 + 1 =

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

Как использовать частный адрес Wi-Fi на iPhone и iPad

Последняя мобильная операционная система Apple предоставляет новую функцию безопасности, называемую частным адресом . Это помогает защитить ваши личные данные в общедоступных или незнакомых сетях Wi-Fi. У каждого устройства есть собственный встроенный адрес. Эта новая функция случайным образом создает новый адрес, поэтому ваше устройство с меньшей вероятностью будет идентифицировано злоумышленниками. Это...

Учимся делать и управлять title и description для страниц сайта плагином Seopress (уроки SEO)

Из всей когорты seo плагинов Wordpress, которых достаточно много  я обычно выделяю SEOpress и работаю больше с ним. Из плюсов которые я выделяю для себя: очень понятный интерфейс охватывающий все детали seo оптимизации сайта, удобные настройки, возможность кастомизации. В общем для вас рекомендую также....

Проблема обновления Centos и Docker, что делать если не обновляется

На одном из серверов у себя уже месяца 4 не мог произвести обновления, возникал конфликт Docker с Centos. Плюс к этому надо прибавить установленный ISP manager и сайты на двух базах, одна из них основная Mysql 8 и вторая как раз таки в контейнере...

Как оптимизировать свой сайт для показателей Google Core Web Vitals

Контент остается решающим. Но если вы сравните два сайта с одинаковым текстом и популярностью, то тот, который предлагает лучший веб-опыт, получит более высокий приоритет в результатах поиска Google. Помимо улучшенного рейтинга страницы, высокопроизводительные сайты могут быть включены в карусель мобильного поиска. Ранее это было зарезервировано для ускоренных мобильных...

Core Web Vitals и WordPress SEO, скорость сайта как фактор ранжирования

В мае 2020 года Google объявил, что показатели качества страниц под названием «Core Web Vitals» станут фактором ранжирования в поиске Google. Это было наконец выпущено как часть обновления опыта страницы в июне 2021 года. Многие владельцы веб-сайтов упорно работают над улучшением своих показателей Core Web Vitals...

Ошибка добавления записей и постов в WordPress, решаем проблему с базой данных

Работая с одним из проектов заказчика столкнулся с ошибкой добавления постов. Они просто не добавлялись, залез в базу там висят несколько постов без номеров и перекрывают возможность добавлять новые. Ошибка Начал ковырять и вот как получилось исправить данную проблему Сделал резервную копию с помощью опции...