Добрый день. Для бывалых владельцев сайте уже не секрет, что люди часто делают ошибки при заполнении форм обратной связи, из за чего лид теряется, а затраченные средства на рекламу уходят в пустую.
Эту ситуацию можно исправить, путем создания специальной маски номера, которая не позволит делать ошибок при заполнении, и повысит удобство пользования сайтом.
Самый верный способ для Contact Form 7 и других модулей
Пользуюсь давно прекрасным плагином контактной формы для Wordpress “Contact Form 7″. Недавно задался целью сделать удобный ввод телефона по маске типа +38 (___) ___-__-__ . Нашел дополнительный плагин именно под Contact Form 7 (оказывается таких вспомогательных плагинов для расширения функционала CF7 много) с названием Contact Form 7 Phone Module, НО! Есть несколько причин, почему я не стал его использовать:
- Плагин оказался не рабочим (хотя мне удалось его заставить работать) это уже было не приятно.
- Сам факт установки еще одного плагина меня не радовал.
- И главное – не было возможности задать placeholder. То есть само поле выглядело пустым, а маска появлялась только при нажатии курсора в него. По скольку я не любитель описывать поле сверху или снизу, мне этот метод не подошел.
И я нашел простой способ сделать маску через маленький настраиваемый скрипт.
1. Качаем сам скрипт
2. Сохраняем в директорию своей темы с названием js (если есть). Если нету создаем или добавляем куда надо, но тогда нужно будет в коде ниже изменить путь к исполняемому файлу.
3. Далее в файле 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’));
}
3. В том же файле 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}


Создание маски номера “вручную”
Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь – это может быть полезно с точки зрения безопасности сайта. Мы не позволим вводить в поле лишние символы, а во вторую – пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.
Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.
Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать – это подключить библиотеку jQuery:
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
>
script
>
Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с нашего сайта
а подключаем следующим образом:
<
script
src
=
"js/maskedinput.js"
>
script
>
Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:
<
script
type
=
"text/javascript"
>
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
script
>
Где #phone – идентификатор поля с номером телефона, а .mask(“(999) 999-9999”) – маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.
<
input
type
=
"text"
id
=
"phone"
name
=
"phone"
placeholder
=
"Введите ваш телефон"
>
Кроме того, можно сделать запись с уже прописанным кодом страны, который будет выводится по умолчанию:
$("#phone").mask("+7(999) 999-9999");
Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:
- a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
При использовании плагина Contact Form 7 – все еще гараздо проще.
Нам просто нужно скачать плагин по ссылке: https://ru.wordpress.org/plugins/cf7-phone-mask-field/
Или с нашего сайта
Этот плагин добавляет новое поле в котором можно установить маску ввода телефонного номера, или любую другую, для Contact Form 7.
Обратите внимание, плагин «Contact Form 7» должен быть установлен и активирован.
Кнопка «маска ввода» будет добавлена в панель кнопок Contact Form 7.

По материалам seo-pro.net.ua, smartlanding.biz и ru.wordpress.org, pageup.com.ua
Легко продвижения Вашим проекта. Ваш SEO PRO