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

Ссылки

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
9 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Roman Morenetc
Roman Morenetc
4 месяцев назад

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

Roman Morenetc
Roman Morenetc
4 месяцев назад
Ответить на  Кобзарёв Михаил

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

Павел Чатанов
Павел Чатанов
4 месяцев назад
Ответить на  Roman Morenetc

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

Павел Чатанов
Павел Чатанов
4 месяцев назад
Ответить на  Кобзарёв Михаил

Форма 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 месяц назад

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