Верх страницы
Логотип Telegram
@Злой_Полицейский — авторский канал вашего покорного слуги в Telegram, где я пишу заметки о веб-разработке, программировании, PHP, инструментах и WordPress.
Обложка к записи Маска ввода номера телефона в Elementor
Время для прочтения: 0 мин. 29 сек.

Маска ввода номера телефона в Elementor

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

Описание

Данный метод работает на основе старой, но до сих пор популярной библиотеки Masked Input Plugin for jQuery. Репозиторий проекта уже давно заархивирован его автором, но попрежнему используется тысячами проектов по всему миру.

Формы на странице

Чтобы задать маски для всех форм, которые уже отображаются на странице, нужно использовать следующие сниппеты.

PHP

Первый код предназначен для подключения файла самой библиотеки Masked Input Plugin for jQuery:

add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_script(
			'mihdan-masked-input',
			wp_upload_dir()['baseurl'] . '/FOLDER_NAME/jquery.maskedinput.min.js',
			array( 'jquery' ),
			'1.2',
			true
		);
	}
);

JavaScript

Второй код предназначен для инициализации библиотеки Masked Input Plugin for jQuery:

jQuery(
	function( $ ) {
		$( 'input[type="tel"]' ).mask(
			'+7-(999)-999-9999',
			{
				placeholder: ' '
			}
		);
	}
);

Формы внутри попапов

JavaScript

Для работы масок внутри попапов код сниппета для инициализации библиотеки нужно немного поменять:

jQuery(
	function( $ ) {
		$( document ).on(
			'elementor/popup/show',
			function ( event, id, instance ) {
				$( 'input[type="tel"]' ).mask(
					'+7-(999)-999-9999',
					{
						placeholder: ' '
					}
				);
			}
		);		
	}
);

Визуально

Для тех, кому лень читать и разбираться, Александр Парфилов из канала WPlovers записал специальный обучающий ролик:

Маска ввода телефона для Elementor, Contact Form 7 и любых форм обратной связиМаска ввода телефона для Elementor, Contact Form 7 и любых форм обратной связи

Ссылки

Автор: Кобзарёв Михаил

Суровый русский разработчик. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все.

Ведет блог о разработке, дайджест в телеграмме и в ВК.

Комментарии
Подписаться
Уведомить о
guest

16 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Roman Morenetc
Roman Morenetc
2 лет назад

Здравствуйте! А вы проверяли работоспособность данного метода? Дело в том, что Элементор ругается на наличие скобок в поле ввода (которые маской подставляются) и не дает отправить форму. И сама маска должна быть в другом формате: +7 (***) ***-**-** — если девятки оставлять в маске, то девятки и выводятся, и вообще не получается ничего ввести

Roman Morenetc
Roman Morenetc
2 лет назад
Ответить на  Кобзарёв Михаил

Разобрался сам. Нельзя использовать стандартное поле для ввода телефона, поскольку там своя валидация. Нужно создать обычное текстовое поле, задать ему уникальный id, указать его соответственно в скрипте маски, тогда все работает! Спасибо за статью!

Павел Чатанов
Павел Чатанов
2 лет назад
Ответить на  Roman Morenetc

Роман, не могу разобраться с маской и данным решением. Можно у Вас попросить скрин или кусочек кода? Заранее очень признателен!

Павел Чатанов
Павел Чатанов
2 лет назад
Ответить на  Кобзарёв Михаил

Форма ElementorPro в попапе, там применен скрипт на маску:

Спойлер
<script>jQuery(
 function( $ ) {
  $( document ).on(
   ‘elementor/popup/show’,
   function ( event, id, instance ) {
    $( ‘input[type=»tel»]’ ).mask(
     ‘+7-(999)-999-9999’,
     {
      placeholder: ‘ ‘
     }
    );
   }
  );   
 }
);</script>

Всё срабатывает, но поле ввода телефона становится недоступным для ввода и символы из скрипта не удалить никак

Безымянный.png
Сергей
Сергей
1 год назад
Ответить на  Павел Чатанов

jQuery(
  

function

( $ ) {
    $(

'input[type="tel"]'

).mask(
      

'+7-(999)-999-9999'

, <---------- Тут можно попробовать вместо 9 поставить "_"
      {
        placeholder:

' '
      }
    );
  }
);

ЧЕЛОВЕК СЛОВА
ЧЕЛОВЕК СЛОВА
2 лет назад

Добрый день! Работает. Но, как ее дополнить, чтобы если маска заполнена не до конца (не хватает цифр в номере), то выдавало бы ошибку и не отправляло форму? В данный момент, если человек отправляет форму и случайно пропускает цифру в номере, то Элементор спокойно отправляет форму, а я получаю пустое поле номера. Помогите, пожалуйста, это полностью закроет проблему! Нигде в интернете пока решения нет, у Саши Парфилова тоже.

Влад
Влад
1 год назад

Мать моя женщина… Чтобы подключить простой скрипт, закидывают два плагина, пишут дополнительный код… Ребят, а вы у себя в доме на кухню через квартиры соседей не ходите случайно?

Alex
Alex
1 год назад

Добрый вечер, спасибо за материал, на Элементор Про все заработало, однако, в формах Popup валидации нет. Вы пишите: Для работы масок внутри попапов код сниппета для инициализации библиотеки нужно немного поменять: и ниже код. Но можно ли подробнее расписать куда именно его вставить или где заменить чтобы валидация заработала в форме в всплывающих окнах. Спасибо!

Иван
Иван
1 год назад

Почему то не срабатывает маска на popup. Хотя все сделал по видео.
Не можете помочь?

Последний раз редактировалось 1 год назад Иван ем

Михаил Кобзарёв (mihdan)

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, фильмы и сериалы