Маска ввода номера телефона в 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 записал специальный обучающий ролик:
Здравствуйте! А вы проверяли работоспособность данного метода? Дело в том, что Элементор ругается на наличие скобок в поле ввода (которые маской подставляются) и не дает отправить форму. И сама маска должна быть в другом формате: +7 (***) ***-**-** — если девятки оставлять в маске, то девятки и выводятся, и вообще не получается ничего ввести
Само собой проверял, код взят из живого проекта. Если что-то не работает сейчас, так это может быть связано с тем, что сам Элементор обновился или какой другой плагин мешает. Я проверю ваши кейсы, вы можете создать тестовую страницу и дать на нее ссылку?
Разобрался сам. Нельзя использовать стандартное поле для ввода телефона, поскольку там своя валидация. Нужно создать обычное текстовое поле, задать ему уникальный id, указать его соответственно в скрипте маски, тогда все работает! Спасибо за статью!
Пользуйтесь
Роман, не могу разобраться с маской и данным решением. Можно у Вас попросить скрин или кусочек кода? Заранее очень признателен!
А что у вас не работает? Покажите свой код
Форма ElementorPro в попапе, там применен скрипт на маску:
function( $ ) {
$( document ).on(
‘elementor/popup/show’,
function ( event, id, instance ) {
$( ‘input[type=»tel»]’ ).mask(
‘+7-(999)-999-9999’,
{
placeholder: ‘ ‘
}
);
}
);
}
);</script>
Всё срабатывает, но поле ввода телефона становится недоступным для ввода и символы из скрипта не удалить никак
jQuery(function
( $ ) {
$('input[type="tel"]'
).mask(
'+7-(999)-999-9999'
, <---------- Тут можно попробовать вместо 9 поставить "_"
{placeholder:' '
});});Я отредактировал tel.php и валидация стандартного поля для ввода телефона заработала как мне нужно. Да, это плохая практика, но не смог побороть эту проблему решением через хук.
Добрый день! Работает. Но, как ее дополнить, чтобы если маска заполнена не до конца (не хватает цифр в номере), то выдавало бы ошибку и не отправляло форму? В данный момент, если человек отправляет форму и случайно пропускает цифру в номере, то Элементор спокойно отправляет форму, а я получаю пустое поле номера. Помогите, пожалуйста, это полностью закроет проблему! Нигде в интернете пока решения нет, у Саши Парфилова тоже.
Пример можете показать?
Мать моя женщина… Чтобы подключить простой скрипт, закидывают два плагина, пишут дополнительный код… Ребят, а вы у себя в доме на кухню через квартиры соседей не ходите случайно?
А вы случайно не в курсе, что 99,9% пользователей Elementor не могут в код и не понимают его, а уж тем более не могут сами его подключить без плагинов. Опуститесь с небес на землю к простым смертным и пойдите им на встречу 😉
Добрый вечер, спасибо за материал, на Элементор Про все заработало, однако, в формах Popup валидации нет. Вы пишите: Для работы масок внутри попапов код сниппета для инициализации библиотеки нужно немного поменять: и ниже код. Но можно ли подробнее расписать куда именно его вставить или где заменить чтобы валидация заработала в форме в всплывающих окнах. Спасибо!
Вставлять туда же, куда и первый) Смотрите видео прикрепленное
Чтобы заработало в popup нужно вставить код/сниппет. Делюсь своим примером:
<script>
jQuery(document).ready(function($) {
function initMask() {
$.mask.definitions[‘h’] = «9»;
$(‘input[type=»tel»]’).mask(«+7 (h99) 999-99-99», {placeholder: «_»});
}
// Инициализируем маску для полей типа «tel» при загрузке страницы
initMask();
// Инициализируем маску после добавления всплывающего окна
jQuery(document).on(‘DOMNodeInserted’, function(event) {
var popupContext = $(event.target).closest(‘.elementor-popup-modal’);
// Если всплывающее окно содержит класс «elementor-popup-modal», инициализируем маску в этом контексте
if (popupContext.length > 0) {
initMask();
}
});
});
</script>
В этом деле сейчас отлично помогает ChatGPT — ставишь задачу со всеми известными и получаешь весьма развёрнутый ответ. Либо скармливаешь код и просишь переделать со своими хотелками.
Почему то не срабатывает маска на popup. Хотя все сделал по видео.
Не можете помочь?
Делайте по статье, а не по видео или поставьте наш плагин «Events Tracker for Elementor»
Это как? Я поставил ваш плагин, но про маску в номере там ни слова
Не на то ответил, сорян. В этом плагине нет масок
По всей видимости в 23 году ничего из этого не работает
Всё прекрасно работает и в 2023 году, а что именно у вас не получилось?
Плагин Form Masks for Elementor PRO — намного более простое и изящное решение.
Просто меняете тип поля в форме Elementor с Tel на Text и во вкладе Advanced задаёте абсолютно любую маску, причём поддерживаются пробелы (чего данный скрипт не умеет). Не в обиду автору статьи, но это действительно в 100 раз проще) Хотя вероятно плагин появился позже, чем эта статья
Плагин реально появился намного позже и это платное решение как не крути.
Не работает в попапах от elementor pro и на андроидах
Используйте делегирование событий или вешайте на хук открытия попапа