Как сделать ввод телефона по маске в 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. Удачной вам работы!

РЕКОМЕНДУЕМ

Как использовать консоль браузера Chrome для поиска и исправления ошибок JavaScript

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

Как работать с header в теме Newspaper: делаем лого и настраиваем...

После выхода последних двух версия Newspaper темы, в ней появились новые, очень интересные особенности управления элементами сайта. По сути команда Newspaper реализовала свой блочный...

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

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

Что такое LVM, принцип работы и детали использования

LVM, или Logical Volume Manager, - это решение для создания разделов томов Linux, которое существует уже некоторое время и предоставляет ряд расширенных...
Alecs Retin
Работаю в сфере web с 2009 года. Занимался созданием своих проектов в разных тематиках. В основном делаю сайты на Instantcms и Wordpress. Оказываю услуги разработки сайтов и стартапов, инвестирую в интернет проекты и сервисы. Более 10 лет занимаюсь Web разработкой и создание интернет проектов. Интернет магазины, информационные порталы, городские порталы. Оказываю поддержку в развитии и продвижении сайтов.