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

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

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

16 − = 13

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

Прощай Юра Шатунов, мы любили твои песни

Даже трудно сказать когда я первый раз услышал песни Ласкового мая. В некотором роде они были настолько ясными для того возраста. Мне было лет 14 и конечно простые слова про любовь, жизнь, в исполнении мальчишки моего примерно возраста трогало и цепляло. Даже сейчас спустя...

Оптимизация графики в WordPress, отключаем лишние, сжатие, чистка размеров графики

Графика самый тяжелый элемент сайт Wordpress и поэтому правильный подход к их оптимизации очень важен. Это не сделать одной операцией, особенно если раньше вы не особо обращали на это внимание. Раздувание размеров сайта со временем становится проблемой, решать которую надо. Но как решить оптимально...

WordPress 6 изучаем что было добавлено, улучшения и дополнения

Поздоровайтесь с «Arturo» и новой версией WordPress 6.0, вдохновленными обладателем Грэмми джазовым музыкантом Артуро О'Фарриллом . Известный своим влиянием на современный латиноамериканский джаз, Артуро выпустил более 15 альбомов, охватывающих работу за пять десятилетий. Потратьте некоторое время на изучение WordPress 6.0, созданного, чтобы помочь вам раскрыть...

Нехватки памяти для работы сайта WordPress — увеличиваем память в конфиге сайта

Просматривая журналы работы сайта вы можете увидеть очень частую ошибку нехватки Wordpress. Обычно это этом пишет предупреждение: PHP Warning: Use of undefined constant ‘WP_MEMORY_LIMIT’ - assumed '‘WP_MEMORY_LIMIT’' (this will throw an Error in a future version of PHP) То есть Вы видите ошибку исчерпания...

Google консультирует что запросы и показы в поиске отличаются по цифрам

Адвокат Google по поиску Джон Мюллер говорит, что показы, которые ваш сайт получает по ключевому слову, не являются показателем объема поиска по этому ключевому слову. Об этом говорится в Twitter в ответ на вопрос о том, можно ли использовать данные о показах в Google Search...

Инструкция WordPress cron, запуск, управление, решение ошибок, основные параметры

WP-Cron выполняет определенные задачи для сайтов на WordPress. Название Cron происходит от системы Unix для планирования заданий, от одного раза в минуту до одного раза в год. Будь то плановое обслуживание или запланированные предупреждения, любая команда, которая может быть выполнена в Unix без вмешательства...