Маска ввода номера телефона в 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 и любых форм обратной связи

Ссылки

Источник: https://www.kobzarev.com/wordpress/masked-input-for-elementor/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

1 комментарий к “Маска ввода номера телефона в Elementor”

  1. Что то не получается, ни по вашему описанию, ни по видео Александра…

    Ответить

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

%d такие блоггеры, как: