The WebCommons Blog  • Go to Top

As part of the ongoing WebCommons site merger, I developed a new contact form.   I realize that this kind of development naturally doesn’t create a lot of excitement, but I think a lot of the power of the WordPress platform shines through with this example.

A contact form is one of those common things that a web programmer shouldn’t want to re-invent, so I went plugin shopping at the WordPress site and found a straightforward, well-ranked, WordPress 2.7-compatible plugin called Contact Form 7.   I was especially charmed that it had easy-to-setup CAPTCHA and Akismet support (great for stopping spammers!), and upon my initial testing of it, I was pleasantly surprised at how robust and straightforward the admin-side contact form management was.

Setting up my actual contact form really couldn’t have been easier.   Contact Form 7 supports a wide variety of field types, including:

Configuring a text field for entry into a contact form

• Text
• E-mail
• Text area
• Drop-down menu
• Checkboxes
• Radio buttons
• Acceptance (to ensure the user accepts terms or policies)
• CAPTCHA
• Quiz (along with CAPTCHA, a great way to block the spammers)
• File upload
• Submit button (can’t do without that!)

Customizing the e-mail that the contact form e-mails you

Basically, these fields are configured and dropped into a form, and using a regular text editor, you can surround the fields with whatever text suits your fancy.   As you can see in the first graphic, setting up a text field is rather trivial — even having Akismet check it is a matter of merely checking a checkbox.   The funny thing is that it doesn’t take long, especially for programmer types, to memorize the format for the fields such that using the field builder, if you will, becomes obsolete really fast.   But that’s cool.

Along with the form design comes the customizing of the e-mail the contact form will generate and send to you or whoever you decide for it to go to.   As you can see in the second graphic, this is about as straightforward as it can get.

Substituting the contact form into a blog page

Even placement of the form into a page couldn’t be more trivial.   It’s a simple substitution as you can see in the third graphic.   This pulls in all of the contact form as well as all the form processing functionality.   Too cool.

Last, you will love the message and error generation upon submitting the form — it’s all AJAX.   For non-techies, that means that when you submit the form, the page doesn’t have to reload, and errors (such as required fields not filled in) are noted right then and there in a very obvious manner.

I wholeheartedly recommend this WordPress plugin for wide use.   Its design is nearly immaculate and pain-free.

This entry was posted on Tuesday, February 17th, 2009 at 7:11 pm and is filed under WebCommons Announcements, WordPress Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.