Jump to content
  • 0
Sign in to follow this  
notest

Как задать шаблон заполнения номер телефона?

Question

notest    2

Как сделать, чтобы когда пользователь кликнул на поле ввода телефона, чтобы возникал бы такой вот шаблон:
 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

Recommended Posts

  • 0

Это возможно сделать, но сам процесс требует значительных знаний JS и PHP. Поверьте, проще отказаться от затеи, чем ковыряться в скриптах не имея знаний.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

В Jotform легко реализуемо. Воспользуйтесь этим сервисом.

Cм.пример: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. (реализоавано на jotform)

Share this post


Link to post
  • 0

Да, мы любим "халяву", но какой проект будет действительно хорошим, если будет развиваться только на одном энтузиазме))

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

Share this post


Link to post
  • 0

А у Вас есть примера использования калькулятора на други сайтах (кроме официального)? Интересно посмотреть, к тому же, Вы рекомендуете, значит уже пробовали.

Share this post


Link to post
  • 0

Евгений, я сам испытыл только на днях и еще не успел где-то применить. Но возможности очень крутые.

Пример:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
Guest Гость   
Guest Гость

ребят, подскажите, а что именно на их сайте использовать для шаблона номера, а то у них приложений много так

Share this post


Link to post
  • 0
notest    2

нашел. хороший виджет.

но как соединить эту форму с формой muse ?1) например, чтобы Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. оттуда была почта и имя, а с этой формы только номер? 

2) либо полностью всю форму взять с jot? тогда как сделать, чтобы она отправляла данные?

Share this post


Link to post
  • 0

Как работает форма jotform можно испытать из сервиса, просто сделай предпросмотр и отправь форму. Для этого, конечно, нужно разобраться с настройками и прописать куда нужно все емайлы))

Соединить эту форму с формой Muse - не получится. Только вставлять целиком, как внешний код ("Объект" > "Вставить HTML")

Share this post


Link to post
  • 0

И так, как все же задать шаблон заполнения номера телефона в форме Muse?  А сделать это можно весьма просто.

По другому, это называется еще "маска ввода".

Сначала создадим саму форму с полем ввода номера телефона. Это обычная стандартная форма Muse:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Скрипт работает, только после загрузки на странице библиотеки jQuery, а т.к. в muse она подключается "автоматом" внизу страницы, то и код скрипта нам нужно разместить после строчки подключения библиотеки.

Для этого, воспользуемся моим виджетом (Statistix), который можно скачать Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Помещаем виджет в любое место страницы (не важно в какое, его содержимое не видно и будет добавлено перед закрывающим тегом </body>. В поле ввода данных виджета вводим следующий код:

<script type="text/javascript" src="assets/jquery.maskedinput.js"></script>

<script type="text/javascript">
	
        $(function() {
        $("#widgetu325_input").mask('+7 (999) 999-99-99', {placeholder:'X'});
        });	
		
</script>

Вот так это будет выглядеть в Muse:

gwDawxl.png

В первой строке этого кода подключаем тот самый скрипт, который вы скачали ранее. Как видите, путь к файлу указывает на стандартную папку сайта assets, следовательно файл jquery.maskedinput.js нужно туда загрузить. Как это делается, вы наверняка знаете (меню "Файл" > "Добавить файлы для передачи").

H3xsDzj.png

Далее, мы видим в коде, что указан некий ID элемента #widgetu325_input - его нужно заменить на свой. Для этого смотрите в исходном коде страницы ID отвечающий за поле "Сотовый телефон" вашей формы:

nbCrTm2.png

После внесения изменений в коде, виджет Statistix можно закрыть и проверить, что у нас получилось, нажав предпросмотр в браузере. Теперь, при клике на поле "Сотовый телефон" появляется маска ввода номера телефона:

ybpSQfj.png

Соответственно, ввод номера возможен только в заданном формате:

ppJdnl4.png

На этом все. Удачных экспериментов, друзья!

Share this post


Link to post
  • 0

спасибо вам. а как поставить. если несколько форм обратной связи на сайте?

Подсмотрите ID элементов у всех форм и впишите в скрипт через запятую:

<script type="text/javascript">
	
        $(function() {
        $("#widgetu325_input, #widgetu524_input").mask('+7 (999) 999-99-99', {placeholder:'X'});
        });	
		
</script>

Share this post


Link to post
  • 0
777    0

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

 

​можно ссылочку пожалуйста

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...