Маска ввода номера телефона в 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, любую форму

Elementor JavaScript JQuery maskedinput WordPress