Как сделать ввод телефона по маске в 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 и в конце добавляем сразу вот такой код вызова функции и исполнения:

add_action(‘wp_enqueue_scripts’, ‘wpmidia_enqueue_masked_input’);

function wpmidia_enqueue_masked_input(){

wp_enqueue_script(‘masked-input’, get_template_directory_uri().’/js/jquery.maskedinput.min.js’, array(‘jquery’));

}

add_action(‘wp_footer’, ‘wpmidia_activate_masked_input’);

function wpmidia_activate_masked_input(){

?>

<script type=”text/javascript”>

jQuery( function($){

$(“.data”).mask(“99/99/9999”);

$(“.tel”).mask(“(99) 9999-9999”);

$(“.cpf”).mask(“999.999.999-99”);

$(“.cnpj”).mask(“99.999.999/9999-99”);

});

</script>

<?php

}

 

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

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

<div class=”col-md-4″>
<div class=”form-group”>
<label for=”contact-name”>Телефон *</label>
[tel* tel id:tel class:tel placeholder”+345 (__) ___-__-__”]
</div>
</div>

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

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

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

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

СЕГОДНЯ ЧИТАЮТ

18 лучших расширений Google Chrome для WordPress и web разработчика сайтов

Вы ищете наиболее полезные расширения WordPress Chrome, чтобы сделать ваш сайт более функциональным и привлекательным? Взгляните на наш список лучших дополнений Chrome для использования! Что может...

Диагностика запросов и анализ производительности WordPress – плагин Query Monitor

Вы знаете эту ситуацию? Вы работаете над проектом WordPress и установили дюжину или более плагинов WP. Однако ваш веб-сайт не совсем такой, каким вы хотели...

Пять главных стандартных инструментов системного администратора Centos

Этот блог во многом сохранение для меня еще некоторых данных. Поэтому я пишу бывает и очень такие понятные вещи, чтобы в будущем мог для...

Как выбрать доменное имя сайта (основы и секреты выбора домена)

Ваш домен - это ваш цифровой адрес.  Выбор домена весьма нетривиальная задача, к которой разработчики сайта подходят с различных точек своего опыта и понимания...

BulletProof Security плагин для безопасности сайта на WordPress

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...

Защита сайта от вирусов, лечение сайта от вирусов и проверка

Вообще заражение сайтов вирусами вполне возможная участь для сайта на любой системе cms и для Wordpress в том числе. Вылечить сайт от вирусов возможно...

ПОХОЖИЕ МАТЕРИАЛЫ

TotalContest Pro – Плагин WordPress для конкурса фото, аудио и видео

TotalContest - это мощный плагин для проведения онкурсов WordPress, предназначенный для проведения и управления конкурсами и соревнованиями на вашем сайте. Он был разработан, чтобы...

Content-visibility: новое свойство CSS, повышающее скорость и рендеринг сайта

Поддержка новых возможностей css стилей, которые появились в Chromium 85, могут быть один из самых новых свойств впечатляющих CSS для улучшения производительности загрузки страницы....

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...

BuddyPress плагин для создания социальной сети на WordPress (профили, группы)

Вы ищете современный, надежный и утонченный движок социальной сети? BuddyPress — это набор компонентов, составляющих социальную сеть, с отличными дополнениями из обширной библиотеки плагинов...

Age Gate плагин WordPress для создания ограничения по возрасту при входу на сайт

Существует много применения для ограничения контента по возрасту, такие как трейлеры фильмов, алкоголь или другие «взрослые» темы. Данный плагин позволяет установить возрастное ограничение на...