Change Form Field Input Types

input_types.js

<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("date","date");
    setType("phone","tel");
    setType("color","color");
    setType("number", "number");

    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>