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

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

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

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

Всплывающая форма обратной связи для WordPress

Сегодня я расскажу вам как я пытался сделать и в итоге сделал красивую форму всплывающей обратной связи для сайта на Wordpress. Это пригодится для...

Изменение порядка перекрестных и дополнительных продаж в WooCommerce

Кросс-продажи и продажи в WooCommerce являются очень мощным инструментом для предложения предложений вашим клиентам. Возможно, вы знаете, что большинству людей, которые покупают продукт...

Полная инструкция как сделать правильный и эффективный landing (лендинг) сайт

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

Как встроить PDF в WordPress + 7 бесплатных плагинов на выбор

Спасибо, Adobe! Если бы не эта компания, хранение документов в Интернете, как мы знаем, было бы не таким полезным и простым, как сегодня. Поэтому, естественно, мы...

Как восстановить пароль администратора на сайте WordPress

Как восстановить пароль к админке от WordPress. Бывает так, что вы не успели записать пароль администратора, а сайт уже не впускает вас. И хорошо...

6 инструментов тестирования скорости сайта и советы по оптимизации

Как правильно сделать тестирование скорости сайта, какие инструменты для этого существуют, какие есть бесплатные сервисы для проверки скорости сайта. Сегодня мы подробно покажем и...

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

10 причин открытия интернет-магазина для малого и среднего бизнеса

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

10 плагинов WordPress для создания форума: настройка, описание и управление

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

Улучшения и дополнения в WordPress 5.5 (Возможности и скриншоты)

Выпущена бета-версия WordPress 5.5, выход которой запланирован на 11 августа 2020 года. Это будет второй по значимости выпуск WordPress в этом году, и он...

Jetpack 8.7 добавляет функцию развертывания Tweetstorm, улучшает настройку поиска

Jetpack 8.7 был выпущен на этой неделе с потрясающей новой функцией, которая позволяет пользователям «развернуть» твитторм и опубликовать его в посте. Функция работает внутри блока Tweet. После...

Обзор улучшений и изменений в редакторе Gutenberg 8.5

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

Установка, настройка, оформление темы Woodmart – учимся ставить на сайт

Многие работают с темой Woodmart, которая является одной из лучших тем для создания интернет магазина. Поэтому я делаю статью инструкцию по вопросам и ответам...