This is gonna help A LOT! Good stuff 🙌

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

Thank you @Noah

Joe

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…

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.

@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:

@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

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 !