Input Types on Forms for Mobile


#1

I read on one of the Unbounce blogs regarding mobile sites that it is recommended to have the input type specific to each field. This would be great especially when asking for phone numbers, zip codes and e-mail addresses. Is this on the list of coming features for Unbounce?

Telephone input type=“tel” /
Numeric input type=“number” /
Text input type=“text” /
URL input type=“url” /
Email input type=“email” /


#2

This is actually on our backlog for Page Builder improvements. So, we don’t have a firm date yet, but the plan is to take a look at some of these smaller improvements once we wrap up some larger projects.


#3

hi Quinn - is there a way to use dialpad on the phone field when on a mobile device? If so, how?


#4

David - see my answer below, but use the following javascript to change your phone_number field (or whatever you named it) to show the dialpad on a mobile device:


#5

Jeff, this is a nifty little script. So simple, too! 

I would love if you could publish this in a super quick ‘how-to’ thread in the Community, with an iPhone screenshot of how it looks to visitors. What do you think? 


#6

Guys seriously! Its bee well over a year and in some cases i saw this same question asked 5 years ago. Mobile is huge and adding this is critical for conversions. Please make this happen. Leadpages has it why cant you? 


#7

Thanks Jeff. This seems to work… though my unbounce form styling gets thrown off with the field name showing halfway through the form field.


#8

Tried the script with the exact same issue.


#9

If you’d like to, say, change your “email_address” field to input type “email” so that the email keyboard appears on mobile, add new javascript like this:

If that messes up the border color of your field, you can use this to change the field border to a 1px solid border with color #bbbbbb:


#10

@Jeff_Nobbs, @David_Quiec, @Drivetrain

Just wanted to let everyone in this thread know that you can now set specific form types on mobile using this nifty little script that @Noah whipped up.

Enjoy!