Маска ввода телефона для Elementor, Contact Form 7 и любых форм обратной связи

Сколько раз было так, что вы получаете заявку, а в номере телефона не хватает одной цифры или на несколько цифр больше? Маска ввода номера телефона помогает исключить ошибки посетителя при вводе номера и повысить конверсию сайта или landing page.
В этом видео мы рассмотрим универсальный способ создания маски ввода в WordPress для любых форм обратной связи: #Elementor Pro, Contact Form 7 и других плагинов.
Пишите в комментариях свои идеи по подключению других скриптов, будем разбирать.

Всё об Elementor:

#️⃣ Присоединяйся:

[ddulawyer]

Какие у вас доходчивые видео и правильный текст!

[DigitalAlex]

function wpl_scripts() {
$uploads = wp_upload_dir();
$upload_path = $uploads['baseurl'];
wp_enqueue_script('masked-input', $upload_path . '/FOLDER_NAME/jquery.maskedinput.min.js', array('jquery'), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'wpl_scripts' );


<script type="text/javascript">
{
$('input[type="tel"]').mask("[phone]", {placeholder:" "});
});
</script>


Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово!


Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана.
Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма.

[clubskynet]

Устал уже платить фрилансерам. сам сел, за вечер накидал страницу, а теперь еще и с маской! Спасибо, бро!

[remaster]

Спасибо, долго мучался с корявыми клиентами, которые ошибались при вводе.

[НиколайГончаров-жд]

Дружище, спасибо за видео. Респект! Все доходчиво и понятно! Лайк и подписка.

[Zhanar]

Все сделала по инструкции, кэш в браузере почистила, плагины ускорения и кэширования не установлены, а маска все равно не работает... В чем может быть дело?

[IgorShkarin]

Спасибо из 2020! Работает.
Для попапов – нужно в html виджет добавить тот скрипт, что в закрепленном комментарии.

[hostingukraine-]

элементор отправляет обязательное поле, даже если там заполнено только пару цифр, как отменить отправку пока полностью номер не заполнят ?

[toninlosin]

Если чё, то Code Snippet Extended в мае 2022 г. удалён из репозитория Wordpress. Я использовал вместо него Header Foter Code Manager (aka HFCM), полёт нормальный

[eVil]

Огромное спасибо!! Объясняешь, супер-понятно!:)) Все сразу заработало!

[ЮлияГригоращенко]

Спасибо огромное вам! Видео очень помогло

[venkovmax]

Супер! Как раз это мне сейчас и нужно было)

[al.fedorov]

В комментариях несколько раз поднимался вопрос о том, что при клике по полю ввода номера телефона, курсор устанавливается в конце. У меня в самом Contact Form 7 в шаблоне формы в коде строки ввода телефона был вписан placeholder: <label> Ваш телефон (обязательно) [tel* tel-385 placeholder "[phone]"] </label> . Такой placeholder можно установить во вкладке телефон в поле "Значение по умолчанию" (когда стоит галочка "Используйте этот текст в качестве заполнителя поля"). Я его установил до просмотра этого видео. После удаления этого placeholder в Contact Form 7 курсор устанавливается в начало строки.
Сам теперь ищу вариант проверки префикса номера телефона на наличие первым символом цифры 9, люди часто начинают вбивать номер с цифры восемь и приходит заявка с номером вида "[phone], то есть последняя цифра теряется.

[ДмитрийДорохин-юд]

Вставил шорткод в поп-ап и теперь и там все работает)

[قناةالعلاجفيروسيا]

Спасибо, очень интересный выпуск, скажите пожалуйста, а как сделать так чтобы Маска ввода телефона автоматически выстовляла код страны в зависимости от местоположение посетитела?

[dengimira]

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

Если например заполнить не все 12 номерных знаков, то contact form 7 не отправляет. Ведь в одной стране может быть 10, а в другой 12 номерных знаков.
Если в conact form 7 убрать обязательное поле номера, то пропускает, но тогда не приходит номер телефона ((((

Сталкивались с аналогичной задачей?:
Работа со всем миром с разной длиной номерных знаков...

[dmitriysmirnov]

Всем привет! Чтобы маска работала в попапе элементора, попробуйте вот это:

<script>
{
$("body").on("click", "input", function() {
$('input[type="tel"]').mask("[phone]", {placeholder:""});
});
});
</script>

[МаксимКнязев-дг]

В элементор про, если делаю поп-ап форму, там не работает скрипт

[szar]

Здравствуйте, не могу найти плагин Code snippets extended, можно его заменить каким-либо другим?

[naturaartura]

Благодарю, тема классная! Но у меня одного на всплывашках не сработало или ещё у кого?