Using HTML5 Input Types In Your WordPress Forms

If you want to make your WordPress comment forms more user-friendly for mobile users, you might want to consider HTML5 input types.

If you have ever gone to fill out a form on a mobile device, you may possibly have noticed the keyboard changing dependent on what you are filling-in, or where you are typing more specifically. On an iPhone for example, an email field will cause the @ symbol to appear and a url field will show @, a variation of .com and other often-used characters.

This is because in HTML5, form input fields can have types set, other than ‘text’.

However, many WordPress themes are still showing all the fields as type=text and not taking advantage of a really simple function that will fix this.

Open up your functions.php file and add this:

// Switch default core markup for search form, comment form, and comments to output valid HTML5.

add_theme_support( ‘html5’, array(
‘search-form’, ‘comment-form’, ‘comment-list’,
));

Now save your file, upload it and check out your form on your mobile device.

I found this function in the new twentyfourteen theme – worth having a look! You might also want to have a further look at the WordPress Codex for more on the comment form functions here.

other page


What do you think?

It's good to talk!

Your email address will not be published. Required fields are marked *