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

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 ”

Comment by Mark Aplet

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.

Comment by bruce

I’m definitely not the man, Mark, so have asked a few people for their opinions which I’ll summarise here when they’ve replied.

It seems to me that autofocus is fine when the whole point of the page is the form, as it is with my contact page.

Comment by patrick h. lauke

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.

Comment by Mark Aplet

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.

Comment by Jacob Rask

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.

Comment by Bruce

Because I’m not The Man, I asked on twitter about autofocussing. Here are some of the comments I received:

FataL said “autofocusing drives me nuts sometimes, especially when I navigate through tabs with [1] [2] keys in Opera. Woud like option to off.”

(sounds like a browser setting to me, too)

ahiggi (a screenreader user) pointed out that “most assistive technology [is] now very good at alerting user they’re in form field so not being aware isn’t the issue it used to be”, pointing out that autofocus damages accessibility “only if you have place holder text in there that isn’t highlighted hence not deleted when user types”

Derek Featherstone said “consider impact on keyboard navigation eg using backspace or Alt/Cmd left arrow goes back in history, but not when autofocus is used”.

Derek continued that autofocus “also creates other usability problem in that if done on a slow-loading page, user can be typing and have focus stolen away”, but in my interview with Ian Hickson, the editor of the HTML 5 spec, Hixie suggested that this was a misplaced worry: “now you can just say autofocus=”” to focus a form field when the page loads, instead of using control.focus(), which allows the browser to do clever things like not actually focus the control if the user is already typing elsewhere”.

Thanks to all those who gave me feedback.

Meanwhile, I have a cunning plan that will allow me to continue to get the usability benefits of autofocus for those who aren’t using an assistive technology, while not damaging the experience for those who do. Naturally (having just released a plugin) I shall have to change it. Stay tuned.

Comment by Alan Hogan

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.

Comment by Bruce

Hi Alan, the pink never actually changes; it means a required field (actually some testing CSS that I never turned off!

I’m planning to introduce some better styles for input[required], textarea[required] on Friday).

I used to have a full-content RSS, but I got tired of spam blogs scraping all my content, every time, and sticking their ads next to it.

Comment by Ian Hickson

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).

Comment by Michael

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.

Comment by Syamsul Alam

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 :D

P.S: Come to Surabaya sometimes, try Rujak Cingur. Lots better than nasi goreng. :D

Comment by Bruce

Syamsul

I removed it as I was getting massive amounts of automated spam.

When I’m next in Surabaya, I shall. I very much enjoyed Masakan Padang when I was there three years ago.