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

Первый вариант – мы подключим маску к контактной форме на чистом html.

Второй вариант — мы рассмотрим, как сделать маску телефона для Contact Form 7, и заодно, как правильно подключать скрипты в WordPress через файл functions.php.

Содержание


  1. Маска ввода телефона к форме на html + js
  2. Маска телефона в WordPress плагине Contact Form 7
  3. Файлы для скачивания

Сперва посмотрим о чем идет речь:

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

Итак начнем! В обоих случаях нужно скачать файлы плагина jQuery Masked Input по этой ссылке с официального репозитория. Также даю ссылку на документации по плагину на GitHub.   

Маска ввода телефона к форме на html + js

1. Создаем простую форму

1
2
3
4
5
6
7
<form>
<div id="form-inner">
<label for="name">Ваш Телефон</label>
<input type="text" id="phon" placeholder="+375 (XX) XXX-XX-XX">
<input type="submit" class="button" value="отправить">
</div>
</form>

2. Проверяем подключение библиотеки JQuery

Обязательно проверьте подключение библиотеки jquery между тегами<head>. Она может быть подключена как из папки со скриптами у вас на сайте, так и через CDN Google или через другой, например Microsoft, CDNJS, jsDelivr. Посмотреть можно на официальном сайте JQuery на странице скачивания, или перейти по ссылке. Если библиотека у вас не подключена, то нужно обязательно подключить, иначе работать плагин не будет. 

Подключение JQuery

Копируем код подключения библиотеки, если у вас не подключен. Мне нравится и удобно подключать через CDN Google.

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3. Подключаем скрипты плагина

После того как мы убедились, что библиотека JQuery подключена, распаковываем скаченный архив с плагином. Затем нужно перейти в папку dist и забрать от туда минимизированный файл jquery.maskedinput.min.js. Я обычно кладу этот файл в корень сайта в папку со всеми скриптами, и подключаю его между тегами <head>

1
<script src="https://мой-домен.com/js/jquery.maskedinput.min.js"></script>

Далее нам нужно сделать вызов кода маски и привязать его к уникальному идентификатору. Мы можем сделать это прописав уникальный class или id к полю input. В нашем случае мы пропишем id phon. Далее просто перед формой нужно вставить вот этот код:

1
<script type="text/javascript">jQuery(function($){$("#phon").mask("+375 (99) 999-99-99");});</script>

Или, как обычно делаю я, 
создаём отдельный файл js, например maskphone.js и туда вставляем этот код и сохраняем.

1
jQuery(document).ready(function() {jQuery("#phon").mask("+375 (99) 999-99-99");});

Теперь этот файл тоже нужно подключить, для удобства скопируйте это код и вставьте его сразу после кода подключения плагина jquery.maskedinput.min.js между тегами <head>

1
<script src="https://мой-домен.com/js/maskphone.js"></script>

4. Определяем в какой форме и в каком поле будет работать плагин.

Всё, что нам нужно сделать, чтобы идентифицировать поле, это указать class или id в нужном поле input. Пример на картинке. На практике используйте что-то одно.

Как сделать маску телефона в форме HTML и Contact Form 7

В примере, который я вам привёл, я использовал id — уникальное имя элемента. В таком случае, если у вас несколько одинаковых форм на одной странице маска телефона работать не будет. Так как id на странице может повторяться только 1 раз. Поэтому, если у вас на странице вызывается много раз одна и та же форма нужно прописать в поле input уникальный class.

Пример:

1
<input type="text" class="phon" placeholder="+375 (XX) XXX-XX-XX">

А для активации скрипта в поле по class прописываем этот код в maskphone.js:

1
jQuery(document).ready(function() {jQuery(".phon").mask("+375 (99) 999-99-99");});

С этим все, теперь рассмотрим как сделать тоже самое на одной из самых популярных CMS WordPress и дополнительного плагина к ней Contact Form 7.

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

1. Первым делом проверяем подключение библиотеки jQuery

Разбирали выше.

2. Скачиваем плагин по ссылке

3. Создаем форму в Contact Form 7

Например простейшую форму, как у меня, с одним полем, над которым будем работать

Как сделать маску телефона в форме HTML и Contact Form 7

И вот код формы, если кому-нибудь нужно. Class form-flat это стили темы для формы, вам нужно использовать свои:

1
2
3
4
<div class="form-flat">
[text* your-phone id:phon placeholder "Ваш телефон"]
[submit class:button primary "Отправить"]
</div>

4. Теперь подключим скрипты

Есть самый простой и на мой взгляд не совсем правильный способ подключения скриптов. Мы просто открываем файл header.php или footer.php, которые расположены по адресу ваш-сайт/wp-content/themes/ваша-тема/ предварительно закинув туда файлы плагина, и вставляем код:

1
2
<script src="https://мой-домен.com/wp-content/themes/ваша-тема/js/jquery.maskedinput.min.js"></script>
<script src="https://мой-домен.com/wp-content/themes/ваша-тема/js/maskphone.js"></script>

В директории мой-домен.com/wp-content/themes/ваша-тема/js/ создаем файл maskphone.js и вставляем код:

1
2
3
jQuery(document).ready(function() {
jQuery("#phon").mask("+375 (99) 999-99-99");
});

Обращаю ваше внимание, что используем идентификатор id.

Если используем class, то в maskphone.js вставляем такой код:

1
2
3
jQuery(document).ready(function() {
jQuery(".phon").mask("+375 (99) 999-99-99");
});

А в форму вставляем такой код:

1
2
[text* your-phone сlass:phon placeholder "Ваш телефон"]
[submit class:button primary "отправить"]

Теперь у вас всё будет работать. Если же нет —  проверяйте какие идентификаторы вы использовали.

4.1 Подключаем скрипты через файл functions.php

Я всегда использую только такой способ подключения скриптов и файлов css. Это очень удобно. Из проекта в проект на WordPress у меня перетекает кусочек кода и папка с файлами, которые я сейчас приложу для скачивания. Итак, открываем файл functions.php и между тегами <php> вставляем код:

1
2
3
4
5
6
7
function wpb_add_scripts() {
wp_register_script('jquery.maskedinput.min.js', get_stylesheet_directory_uri() . '/js/jquery.maskedinput.min.js','','', true);
wp_enqueue_script('jquery.maskedinput.min.js');
wp_register_script('maskphone.js', get_stylesheet_directory_uri() . '/js/maskphone.js','','', true);
wp_enqueue_script('maskphone.js');
}
add_action( 'wp_enqueue_scripts', 'wpb_add_scripts' );

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

1
2
3
4
5
6
7
function wpb_add_scripts() {
wp_register_script('jquery.maskedinput.min.js', get_template_directory_uri() . '/js/jquery.maskedinput.min.js','','', true);
wp_enqueue_script('jquery.maskedinput.min.js');
wp_register_script('maskphone.js', get_template_directory_uri() . '/js/maskphone.js','','', true);
wp_enqueue_script('maskphone.js');
}
add_action( 'wp_enqueue_scripts', 'wpb_add_scripts' );

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *