For several months now, I’ve been using several WordPress plugins to handle DailyManila.com’s contact form. One plugin to handle the form display, another plugin to enable notification when a reply is made to the comment, and another plugin to defeat spammers. However, this approach has several drawbacks. One main drawback is the inherent behaviour of WordPress when it loads plugins. WordPress loads all plugins even if the page you’re viewing doesn’t need that plugin. This adds unecessary code (CSS and JavaScript) which makes the page bloated and can affect loading time.
Good thing there’s Wufoo. What is Wufoo? Wufoo is a web service that allows you to build nifty forms for just about anything — contact forms, polls, and forms that can accept payments. What attracted me to Wufoo is the simplicity of designing beautiful forms and at the same time, avoiding the use of plugins. I’m going to show you how easy it is to use Wufoo on your WordPress blog.
1. Get a Wufoo account
Before you can use Wufoo, you need to signup for an account. Signing up is easy. For a simple blog, you can choose “Gratis” (or free) since you’re only starting and you won’t be needing advanced features like SSL and payment integration. The free account allows you to create up to 3 forms. That’s probably enough for your needs, for now.
Wufoo has 5 pricing models to choose from.
2. Create a form
After you have signed up for a free Wufoo account, you can now start creating forms. Select the “New Form!” button to get started.
Click on the New Form! button to create a new form
3. Design the form
Designing the form should be straightforward. The interface is loaded with help links which explain how to tweak things.
Designing forms in Wufoo is easy peasy!
4. Get the code
After you’re done designing the form, it’s time to get the code that we need to paste into the contact page on your WordPress blog. Save the form and select “I’m finished! Take me back to the Form Manager.” You should be able to see the screen below.
Click on the Code link to get the code
After you have clicked on Code, you’ll be given choices on what kind of code you need. For this exercise, you’ll be needing the “Embed Form Code” -> “JavaScript Version.”
Click on Embed Form Code and select JavaScript Version for the code
5. Paste the code inside the WordPress page
The JavaScript code we copied from Step #4 needs to be pasted in a blank page in your WordPress blog. If you don’t have a Contact Us blank page, you can do this by going to “Pages” -> “Add New” in your WordPress blog. Once you’re done with this, it’s time to paste the JavaScript code.
Insert the JavaScript code in the blank page you just created
6. You’re done!
Congratulations, you’ve just added a contact form in your WordPress blog without using any plugins. Below is the contact form I made for DailyManila.com.
Your form can now accept messages from your readers
Note: I’m not, in any way, paid by Wufoo to write this article. I’m just sharing my experience on how web services like Wufoo can be used to enhance your WordPress blog.
Comments on this entry are closed.