Маска ввода телефона для плагина Contact Form 7

Автор: Виталий Дата: 31.10.2015 Wordpress Комментарии (33)

Пользуюсь давно прекрасным плагином контактной формы для Wordpress “Contact Form 7″. Недавно задался целью сделать удобный ввод телефона по маске типа +38 (___) ___-__-__ . Нашел дополнительный плагин именно под Contact Form 7 (оказывается таких вспомогательных плагинов для расширения функционала CF7 много) с названием Contact Form 7 Phone Module, НО! Есть несколько причин, почему я не стал его использовать:

Плагин оказался не рабочим (хотя мне удалось его заставить работать) это уже было не приятно.
Сам факт установки еще одного плагина меня не радовал.
И главное – не было возможности задать placeholder. То есть само поле выглядело пустым, а маска появлялась только при нажатии курсора в него. По скольку я не любитель описывать поле сверху или снизу, мне этот метод не подошел.

И я нашел простой способ сделать маску через маленький настраиваемый скрипт.

Маска ввода для поля в Contact Form7 через скрипт

Качаем сам скрипт отсюда, выбрав версию Minified.
Скорее всего откроется код скрипта в отдельном окне браузера, поэтому просто копируем код, создаем новый файл с названием jquery.maskedinput.min.js и вставляем его туда. Или можно скачать готовый скрипт здесь.
Сохраняем в директорию своей темы с названием js (если есть). Если нету создаем или добавляем куда надо, но тогда нужно будет в коде ниже изменить путь к исполняемому файлу.

Далее в файле 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_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'));

}

В том же файле function.php активируем функцию

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
}

add_action('wp_footer', 'wpmidia_activate_masked_input');

function wpmidia_activate_masked_input(){

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

}

Здесь мы изменяем маску как нам надо или добавляем свои.
Теперь в настройках своей формы contactform7 в соответствующее поле (например телефон) добавляем соответствующий класс.
Добавляем такой же placeholder и получаем маску для телефона.

Маска только на определенных страницах

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

Для погрузки файла скрипта (изменяем код пункт 4)

add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');
function wpmidia_enqueue_masked_input(){

      if( is_page('contato') )  //vai carregar somente na pagina Contato.
            wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery'));

}

add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');

function wpmidia_enqueue_masked_input(){

if( is_page('contato') ) //vai carregar somente na pagina Contato.