HTML 5 WordPress contact form plugin
I’d been looking for ages for a decent plugin for WordPress that would give me a contact form that was easy to configure and didn’t use a CAPTCHA.
I eventually found Easy Contact which fulfilled those criteria. With a little jiggery-pokery, I hacked around the code so it produces an HTML 5 contact form featuring
autofocusto put the cursor in the first form field- in-browser validation of certain input types using
input type="email"andinput type="url" - the
requiredattribute on fields that can’t be submitted blank (name, email, message and challenge question). I’ve styled these a foppish pink usinginput[required], textarea[required], while retaining the clunky asterisk-for-required-fields convention until screenreaders automatically tell users that a field is required
With the blessing of the original author, Scott Wallick, the plugin is yours for the download. Using it is at your own risk. (Installation and use instructions)
Updated after comments: The accessibility of HTML 5 autofocus
14 Responses to “ HTML 5 WordPress contact form plugin ”
the consensus seems to be that “it depends on the particular page in question”. if the sole purpose of a page is to act as a form (think google’s homepage, for the most part), and there’s nothing relevant before the form itself, it could be acceptable (though this seems to have breakage issues in certain browsers, making keyboard navigation to the previous page not function properly anymore…not tested this myself).
i’d say the main problem comes when there’s actually relevant text in front of the form, be it instructions, clarifications, important links to other resources, etc. in the case of, say, a screenreader user, they’ll get yanked straight to the form, enter forms mode or equivalent, and not even be made aware that there was content there before the form.
Thanks for clearing that up Bruce. Clearly The plugin is not for everyone, but for those that need it, will find it to be a valuable item for their toolbox.
Sorry… Patrick, not Bruce.
Nice! I’m working at the same thing for my new site, using some jQuery to mimic the :invalid pseudo-class (simply adding an .invalid class) currently only supported in Opera. You can see a preview here, but note that it is under heavy development.
Note that if an input is required and empty, :invalid vill be triggered.
In Safari 4 (latest beta) and mobile safari (iPhone OS 3.0b5) the pink fields never change color (I assumed they were supposed to look more friendly when a valid response was entered, but on second thought that may not be the case).
I also suggest you enable full-content RSS, because waiting for a page to load to continue reading an article that *could* be in my news reader (especially when using the iPhone version of NetNewsWire) isn’t fun. I recently enabled full RSS on my own site.
The autofocus=”” attribute, being declarative rather than scripted, can be disabled by the user agent, and can be tweaked to work in ways that make more sense (e.g. not screwing up screen readers).
Having come to this page through a google search on how to turn autofocus off, I have to second the criticism. On very many pages, the first thing I do is to hit the space key to scroll down one page (to by pass the adverts, repeated introductory information, whatnot, that many pages have before the actual contents). With autofocus the result is that a space is entered into the form field. Similarly, after a search, it is almost always the case that I scroll down to review the search results outside of the original screen-full. Again autofocus is my enemy.
As a general rule: Never presume to know what is best for the user, nor how the user should behave on your site/with your software, etc. More often than not you will be sabotaging rather than helping.
Introducing HTML5 by Bruce Lawson and Remy SharpI
Hey Bruce,
Me myself using contact form 7 for my contact form. I can’t see your contact form in your contact page, did you remove it?
I also hate using captcha. I use growmap anti spambot plugin as substitute, and it replace captcha with tiny check box which can be checked by visitor to prove that they are human.
Syamsul Alam from Indonesia 😀
P.S: Come to Surabaya sometimes, try Rujak Cingur. Lots better than nasi goreng. 😀
Isn’t autofocus on form fields a bad idea? I can see it if your clicking an internal link that maybe says “Add Your Comment” or something similar. However If I am just entering a page the last thing I want is a form to autofocus. Especially since I use delete to return to the previous page. Obviously hitting delete when your inside a form field will have no effect.
Wouldn’t this also break a users expectation on how a page operates. Or possibly skip the content all together and go right to the form for a screen reader?
Your the master Bruce, so I look for your guidance on things like this. What are your thoughts.