How to Change the Input Type of a Form Field

The big benefit of setting your form's input type is that, on mobile, the correct keyboard appears when your leads fill out the form. This small change speeds up the input process and reduces form friction on your pages.

This script lets you change your input types to any valid type, without breaking any of the form styling.

Android examples

How to install in Unbounce

🚨 This is not an official Unbounce feature. It relies entirely on third-party code and has only been tested in limited cases, so the support team cannot help if something goes wrong. If you are not comfortable with HTML, JavaScript, and CSS, consider consulting an experienced developer.

You can see a full list of input types on W3Schools, and grab the latest version of the script from this GitHub gist.

1. Create a new form and add your form fields.
2. Copy the script from the gist above and paste it into your page's JavaScript section.
3. Update the setType call with your own form's values. The first parameter is the field name, the second is the input type. For example: setType("your_phone_number", "tel");

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

   

5. Republish and test.