Как сделать ввод телефона по маске в Contact Form 7 WordPress

Случилось такое дело, что столкнулся с созданием формы на Contact Form 7 и там были поля ввода телефона с маской для ввода. Вроде бы всё просто, но контакт форм не поддерживает маску, поэтому пришлось поискать решение, как это сделать. Изначально была надежда, что поставлю плагин для этого и всё будет сделано. Но плагина не оказалось, был один или два старых, которые не работали как надо. Значит пришлось решать этот вопрос, а, чтобы не забыть написать статью, возможно пригодится и другим такое решение.

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

Tags: вордпресс советыконтакт форм 7маска ввода