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

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

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

− 2 = 1

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

Что такое ChatGPT и OpenAi, статистика, полезные данные и описание работы

С момента своего запуска ChatGPT стал вирусным как похожий на человека чат-бот, который отвечает пользователям на основе того, что они вводят. Инструмент может отвечать на вопросы и давать ответы на основе набора данных из 300 миллиардов слов и 175 миллиардов параметров. В будущем он обязательно...

WooCommerce — Сообщение о подтверждении перед удалением товара из корзины и авто обновление корзины

Бывает задача сделать всплывающее сообщение, чтобы подтвердить, хотите ли вы удалить что-то из корзины магазина. Это требуется для явного согласия, попробуем это добавить. На самом деле довольно просто, все, что вам нужно, это немного jQuery, как показано ниже: И сразу же решим частую задачу, как...

Обзор новой версии Woocommerce 7.4 — основные изменения, журнал разработки

Вышло обновление плагин интернет магазина Woocommerce в котором большое количество добавлено изменений, исправлений. Полный обзор всех новых деталей в этой статье. Журнал изменений 7.4.0 2023-02-18 WooCommerce Fix — добавлена ​​поддержка сортировки по включенному параметру. №36215 Исправление — Разрешить навигацию по вкладкам продуктов без запроса несохраненных изменений #36235 Исправление —...

При оформлении не проходит заказ на woocommerce, и просит ввести адрес для продолжения

В последних версиях Woocommerce при оформлении и управлении полями стала выскакивать ошибка, что заказ невозможно оформить и для этого необходимо ввести адрес. Хотя поле адреса есть. Решается вставкой кода в function.php Чтобы исправить ошибку нужно чтобы передавалось поле страны доставкиили страны платёжного адреса. Простое удаление...

14 советов по читабельности и качественному написанию статей для SEO продвижения

Одним из наиболее важных аспектов SEO является оптимизация контента вашего сайта для ранжирования в поисковых системах. Это включает в себя понимание различных сигналов ранжирования, используемых Google и Яндекс для оценки качества контента вашего веб-сайта, и обеспечение того, чтобы ваш контент соответствовал их стандартам. В этом...

100 вариантов запросов в ChatGPT — как получать ответы для SEO

Для того чтобы получить правильный ответ, нужно научиться правильно спрашивать. Простая истина при этом очень важная для того, чтобы уметь эффективно работать с чатом GPT, если вы хотите использовать его для Seo оптимизации. В этом списке набор запросов которые помогают получить хороший ответ для...
Содержание