Маска “красивого” номера на сайте

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

Эту ситуацию можно исправить, путем создания специальной маски номера, которая не позволит делать ошибок при заполнении, и повысит удобство пользования сайтом.

Самый верный способ для Contact Form 7 и других модулей

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

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

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

1. Качаем сам скрипт

Скачать maskedinput.js.

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
}
4. Здесь мы изменяем маску как нам надо или добавляем свои.
5. Теперь в настройках своей формы contactform7 в соответствующее поле (например телефон) добавляем соответствующий класс.
Contact Form 7
6. Добавляем такой же placeholder и получаем маску для телефона.

Создание маски номера “вручную”

Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь – это может быть полезно с точки зрения безопасности сайта. Мы не позволим вводить в поле лишние символы, а во вторую – пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.

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

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать – это подключить библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">script>

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с нашего сайта

Скачать 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» должен быть установлен и активирован.

Кнопка «маска ввода» будет добавлена в панель кнопок Contact Form 7.

Этот плагин добавляет новое поле в котором можно установить маску ввода телефонного номера, или любую другую, для Contact Form 7. Обратите внимание, плагин «Contact Form 7» должен быть установлен и активирован. Кнопка «маска ввода» будет добавлена в панель кнопок Contact Form 7.

По материалам seo-pro.net.ua, smartlanding.biz и ru.wordpress.org, pageup.com.ua

Легко продвижения Вашим проекта. Ваш SEO PRO