Функционал форм в конструкторе страниц 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 записал специальный обучающий ролик:
Ссылки
Источник: https://www.kobzarev.com/wordpress/masked-input-for-elementor/
Что то не получается, ни по вашему описанию, ни по видео Александра…