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

Первый вариант – мы подключим маску к контактной форме на чистом 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>. Для этого в браузере, на странице вашего сайта введите команду CTRL+U, откроется код страницы. Теперь, с помощью команды CTRL+F найдите подключен скрипт JQuery или нет. Можно искать по фразе “jquery.js” или “jquery.min.js”. Пример, как выглядит в коде, ниже на скриншоте.

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

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

Мне удобно подключать через CDN Google. Чтобы подключить библиотеку JQuery скопируйте код ниже и вставьте между тегами <head> вашего сайта.

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

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

После того как мы убедились, что библиотека JQuery подключена, распаковываем скаченный архив с плагином “jQuery Masked Input”. Внутри архива находим папку “dist” и забираем оттуда минимизированный файл “jquery.maskedinput.min.js”. Я обычно кладу этот файл в корень сайта в папку со всеми скриптами “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, туда вставляем код ниже и сохраняем в папку “js” в корне сайта.

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

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

1
2
<script src="https://мой-домен.com/js/jquery.maskedinput.min.js"></script>
<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 Masked Input” по ссылке

Создаем папку “js” в папке вашей темы (путь: ваш-сайт/wp-content/themes/ваша-тема/). Внутри архива плагина “jQuery Masked Input” находим папку «dist» и копируем оттуда минимизированный файл «jquery.maskedinput.min.js». Этот файл вставляем в папку “js”, которую только что создали.

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

Например простейшую форму, с одним полем, над которым будем работать. И прописываем “class:phone”. Именно по наличию этого класса наш скрипт будет понимать, что к этому полю нужно добавить маску.

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

Вот код формы, если кому-то нужно:

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

3. Создаем скрипт с маской

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

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

В данном случае мы используем идентификацию поля по Class. В чем разница, читайте в первой части статьи.

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>

Однако данный способ не совсем правильный с точки зрения работы с системой WordPress. К примеру, если вы решите обновить тему, то наш сторонний код может удалиться. Поэтому более правильно подключить скрипты через файл functions.php.

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

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

1
2
3
4
5
6
7
8
9
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
8
9
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');

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

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Геннадий
Геннадий
1 месяц назад

Вы бы могли мне помочь сделать форму мне только надо добавить строку телефон я не знаю как это сделать, вот эта форма я вместо имя написал телефон, но мне надо отдельно телефон https://aneg1965.brest.by/4/myform.html

1
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x