How to Change the Input Type of a Form Field 🔥

Follow

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

input 5

Android Examples:


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


How to Install in Unbounce

🚨 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.


📱 You can see a fulll list of input types here:
W3Schools.com

Grab the latest version of the script here: Change Form Field Input Types

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.
ezgif-1-78fce365da

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

Step 5.

Republish and test!