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

Включить нумерованное содержание?
Да

Содержание

Введение

В наше время, когда мобильные устройства стали основным инструментом для интернет-серфинга - важно, чтобы веб-формы были оптимизированы для комфортного использования на смартфонах. Одной из важных деталей удобства является правильная клавиатура для ввода номера телефона. Никто не хочет переключать раскладку с букв на цифры, когда нужно быстро ввести свой номер. Сегодня мы с вами поговорим о том, как без больших знаний программирования можно это осуществить за 5 минут.

Инструкция

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

AD_4nXcwr_abIkA40n2uII8H7_SWh_0wbrp-LvsUdwlthnM_s6f_PIu2PmFfUX0JSuiqf9CbEJZuNodnkuMPOYFb08E6SofHyt5_PHPiwCeq9nd4TM34maIQVnVs_4DIpCEVF4qnc8ES91lHaMcRL2lMyl73OcFM


При вводе номера телефона появляется клавиатура и нужно делать лишние действия чтобы открыть числовую клаву. Чтобы исправить эту ситуацию делаем следующие действия:

1. Скачиваем свой лендинг и открываем скачанный зип файл, выглядит он примерно так:

AD_4nXd5k_OlDBYfmIiHoBxEG_qjfvDk2vNaNtpUjXfIroMEsJlmFj0Xrx6BgobQk-ps7WBOgifqNr-SJ7yd9tW2J-h0OJ46zU5FvJlXx5U70WjfGftuaXYoQu8pkfbi6mQuKOpZAcGrzDPrGCQ2yH5daDs2UpvL


2. Открываем файл index.html через любой текстовой редактор и ищем по поиску в файле словосочетание “input type”:

AD_4nXdGdpt1UWAUBGe_haUyj9wK1S0tio1wOdl_SNT6puDFIoC3DjXqJpeRDBbDjcrOh02RjiB0JZClJg7s8TMQybHRnZCNLQ23pJc7LfgF7MgbigY6r_sH3ZoOlfXZ2bWozoJ_gzgVHwnY2hzDaqoC63-bjWs


В поле вместо слово “text” - пишем слово “tel” и сохраняем файл в той же папке:

AD_4nXcGIfBBeysER2socU5BiivQ8xA33kV5saUazDgJz4IWCBP-YVfQ5xlrtPU0Kw7APoEHxn7aXJXu4Y7hvDAnRN4GHZ1Ykjp6r6AyJHiA4Ezdzscs4y1He8yhP0uBE856VHTAa0cIw-7Ntcye1MFdjEAiZE4k


3. Все готово, теперь открываем наш лендинг с телефона и проверяем результат:

AD_4nXcEusbcCkihYWfCU9mfpPH8ebD3xJqZYxKzQw5Ow0Q-gKLSbYVC8chXd_bLfg7lV_lDb21WX6PqSkn2pGd7_bRkP48LjvpquSHltM8P9FEJEjdjcyI6W8Oj_YB63PVb64pHYq-rN_CbM8uVkMs8G8cyXmXh





Избавляемся от треш-лидов с помощью этой статьи: Валидация номера телефона в форме заявки: что это, почему важна и как установить на сайте в HTML-коде самостоятельно

Заключение

Добавление атрибута "type" с "tel" - это простой, но эффективный способ сделать форму лида более удобной для пользователей мобильных устройств. Это позволит им быстро и без лишних действий ввести свой номер телефона, повысив конверсию вашего трафика.
 
Последнее редактирование модератором:
Назад
Верх