[How-to] Change the Input Type on a Mobile Form Field 📱🚀

convertables
landingpage
forms

#1

community tips scripts banner

The big benefit of setting your form’s input type is that, on mobile, the correct keyboard will display when your leads are filling out your form. This small change helps speed up the input process and reduces form friction on your pages.

This script allows you to easily change your input types to any valid type – without breaking any of the form styling.

input 5


Android Examples:


:unbounce: You can see this in action (built in Unbounce) here:
http://landingpage.noahmatsell.ca/input-types/


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


:iphone: You can see a fulll list of input types here:
https://www.w3schools.com/tags/att_input_type.asp

Grab the latest version of the script here: https://gist.github.com/noahub/65a67b6a32dd5b4d87e3d7fecff79592

Step 1.

Create a new form and add your form fields.

Step 2.

Copy the JS snippet from the above link and paste in your page’s javascripts section.

Step 3.

Update the setType function call with your own form’s values. The first parameter passed to the function is the field name, the second is the desired input type. For example: setType("your_phone_number","tel");

ezgif-1-78fce365da

Step 4.

Call the function again for any additional form fields that you are changing.

Step 5.

Republish and test!

Our theory is that this will make it easier for your leads to convert on mobile, but be sure to A/B test this script and report back to the Community on how it went!



Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


The Ultimate List of Unbounce Tips, Scripts & Hacks
Input Types on Forms for Mobile
[How to Add] Dynamic Click To Call Buttons
The Ultimate List of Unbounce Tips, Scripts & Hacks
Exclude a Script Applied Via Script Manager from Executing on a Page
Mobile phone number field - kepad
Dynamic Image Replacement Using URL Parameters
[How To] Preview Your Popup or Sticky Bar in Your Website
[Create] Reading Progress Bar on Scroll
Adwords Conversion Tracking On Click
[Add] Fixed CTA On Scroll 2.0
#3

Love it :slight_smile: thanks Noah - i’ll report back with results shortly :slight_smile:


#4

This is gonna help A LOT! Good stuff :raised_hands:


#5

Great post, thanks! I followed the instructions yesterday and it worked. I am now trying to validate the country code and area code of the phone number field, to avoid getting too many fake phone numbers. Can anyone provide a script to that? Thanks!


#6

This is huge. I cannot wait to implement on an a/b test ASAP.

Thank you @Noah

Joe


#7

Hey Noah. This is a great addition to the script library!

I have suggestion to adjust the script.

We are testing right now a from that has the postal code input field visible in one variant and hidden (and automatically filled) in another variant.

If I use the same script on the variant with the hidden field for some reason that hidden input field becomes visible (in a very weird format).

My suggestion is to not apply the input field modification if the input field is hidden. That allows the script to be rolled out with the script manager for the global use on all variants.

change line 34

if (document.getElementById(id) ) {

to

if (document.getElementById(id) && ( document.getElementById(id).getAttribute('type') != 'hidden'  )) {

and line 38

console.log("ID not found");

to

console.log("ID not found or input field is hidden");

#8

#9

Awesome Noah,

However, I’ve been using this for the past 3 months I think lol

<script>
  document.getElementById('contact_number').type = 'tel';
  document.getElementById('contact_number').style.marginTop = "25px";
  document.getElementById('email').type = 'email';
  document.getElementById('email').style.marginTop = "25px";
</script>

I agree, this makes it a lot easier for the users to fill out the form.

Thanks for the tutorial will try out your method as well.

PS: The only thing i would do differently is to have tel type on mobile but not on desktop as its quiet weird…


#10

This is great.

This script works for me in and of itself (although a. I had to slightly modify it because my form’s stylization wasn’t completely unaffected otherwise and b. my Unbounce dashboard shows an error message next to the script, both with and without my modification, even though I tested it).

However, I’m trying to implement a separate script for custom form validation in the phone # field, almost exactly similar to what was suggested here by another Unbounce team member.

The two scripts both work when implemented separately but they’re not compatible; the input type overwrites the validation script on mobile. I can’t use a simpler script for the input type to avoid the issue because everything else I’ve tried breaks the stylization, and editing the HTML of the form isn’t an option on Unbounce, though if it were, it’d be an easy solution for me.

Any suggestions?


#11

Thank you for another excellent script, @Noah. I realize I am using a lot of scripts in this example, but why do I get an error on the script for fields types? Pasted exactly as your code.


#12

Like Finge before, i also have the orange warning.

does anyone have an explanation about this ?

Thanks !


#13

@Finge + @julien_level it looks like for whatever reason the built-in js validator didn’t like having the stylesheet.cssRules.length value in the for loop condition in the getInputStyle function. While the script still worked perfectly fine as it was, I’ve made an update that should no longer throw a validation warning. Take a look here:


#14

thanks Noah !
The error has disappeared.

There is still one thing strange as the script is affecting the prefill.

Example on this landing page where the script is active (sorry it’s in french) : http://recevoir.mes-devis-pratiques.fr/sfte-dynamic/?firstname=Julien&lastname=BOUR&email=bat@welcome-media.fr&region=ILE-DE-FRANCE&zipcode=92420&phone=0989787898&city=SAINT-REMY-EN-BOUZEMONT-SAINT-GENEST-ET-ISSON&b_id=WM-ParsienMeteo

When the script is off, the email, zipcode and phone (like all the field) are prefilled.
When active, the prefill isn’t working anymore.

Here what the code in the script looks like :
setType(“zipcode”,“tel”);
setType(“email”,“email”);
setType(“phone”,“tel”);

Do you have any idea why it’s affecting the prefill ?

Thanks again for your help !


#15

@julien_level nice catch! I’ve set the code to fire once the page loads and that appears to fix the URL parameter autofill functionality. Take a look at the latest update here: https://gist.github.com/noahub/65a67b6a32dd5b4d87e3d7fecff79592


#16

Thanks again Noah for you fast response !


#17

Hello @Noah,

A small update on this topic as we just added your script on a landing page where the Labels are not hidden.
Most of our LP hides the label but on this one, the script is creating a bug when used with pre-filling : the labels disappears on the field where the script is active.

here is a screen cap :

here is the JS we used:

<script>
window.onload = function() {
//set up input styling
var newStyle;
getInputStyle();
//Use the setType function to update the input type. First parameter is input name, second is the input type.
setType("phone","tel");
setType("email","email");
setType("zipcode","tel");

function getInputStyle(){
  var formId = '#'+$('.lp-pom-form').attr("id");
  var styleClass1 = '.lp-pom-form-field input[type="text"]';
  var styleClass2 = ".lp-pom-form-field input.text";
  var legacyStyle = 'position: absolute; left: 0; margin-bottom: 12px;';
  //Get basic field styling  
  var stylesheet = document.styleSheets[0];
  newStyle = "";
  var ruleLength = stylesheet.cssRules.length;
  for(var i=0;i<ruleLength;i++){
    if(stylesheet.cssRules[i].selectorText == formId+" "+styleClass1){
      newStyle += document.styleSheets[0].cssRules[i].style.cssText;
    }
    if(stylesheet.cssRules[i].selectorText == formId+" "+styleClass2){
      newStyle += document.styleSheets[0].cssRules[i].style.cssText;
    }      
  }
  newStyle += legacyStyle;
}
function setType(id, newType){
  document.getElementById(id).type = newType;
  document.getElementById(id).style.cssText = newStyle;  
}
}
</script>

thanks again !