Skip to main content Accessibility Feedback

Better Forms

Ever notice how on some sites, the keyboard on your iPhone or Android changes based on what you’re doing?

Entering a URL? Here’s a .com button. Entering an email address? The @ symbol is conveniently located on the main keyboard.

This feature improves the usability of your site on mobile devices. It’s actually really easy to implement, and it’s already built-in to the Go Mobile First theme.

Here’s how to add it to your site…

Changing Input Type

Just a quick heads up: this is an HTML5 feature.

Most input fields have a type=“text” tag associated with them. For URLs, change this to type=“url”. For email addresses, type=“email”. There’s a bunch of stuff you can do with numbers, too.

What about older browsers that don’t support HTML5? They’ll treat the new tags like they’re type=“text”, so nothing breaks.

Learn more at Dive Into HTML5.

Bonus: Required Fields

Content Management Systems like WordPress do server-side validation on forms and kick out an error if a required field is left blank. However, this requires your site to send data to the server, get a reply, and then reload the page. Not the fastest way to do things.

HTML5 offers browser-based form validation. Just add required to the required field, and modern browsers will generate an error if it’s left blank. Once again, older browsers just ignore it.

Referenced & Useful Links

  1. Go Mobile First
  2. Dive Into HTML5