Mobile Forms
Optimise forms for mobile: use correct input types for the right keyboard, prevent zoom on focus with large font sizes, and handle auto-correct.
jQuery
Intermediate
4 min read
Mobile Form Optimisation
Example
<!-- Use correct input types for mobile keyboard -->
<input type="tel" inputmode="numeric" pattern="[0-9]{10}" placeholder="Phone">
<input type="email" autocomplete="email" autocapitalize="none">
<input type="number" inputmode="decimal" step="0.01" min="0">
<input type="search" autocomplete="off" autocorrect="off" autocapitalize="off">
<!-- Prevent iOS zoom on focus (font-size >= 16px on inputs) -->
<style>input, select, textarea { font-size: 16px; }</style>
<!-- jQuery: auto-advance to next field after valid input -->
<script>
$("input[maxlength]").on("input", function() {
if (this.value.length === +this.maxLength) $(this).closest("form").find(":input").eq($(":input").index(this)+1).focus();
});
</script> Pro Tip
iOS zooms in on inputs smaller than 16px font-size — set inputs to at least 16px to prevent this.