rss

How to Create a Contact Form in Your WordPress Blog

contact-form-7I started out both my professional and entrepreneurial career ten years ago with a little book called: Sam’s Learn HTML in 24 Hours (I’d recommend the 7th edition for those wanting to learn HTML/CSS).  With that book began my journey into the online world with learning how to build web sites people wanted to use, love to use, but most importantly knew how to use.  One of the key interactive elements I learned was important for web sites to have that is both beneficial to the web site visitor and the owner of the site are web forms, most importantly a contact form. This will allow your web site visitors to contact you 24/7, without having to directly speak to you (because let’s face it, we’d all rather just tell you what we want, then have you contact us back with the answer!)

So how do you build contact forms in your WordPress-enabled blog? For me, it’s the nifty little plugin called “Contact Form 7.”

How to Intall Contact Form 7

Installing this plugin is very easy and can be accomplished one of two ways:

(NOTE: I am using the latest version of WordPress  (version 2.8.4) so your setup may differ slightly.)

1. Using WordPress’s built-in plugin installer

This would be considered the simplest way, but some of you may have a hosting setup where this is not allowed due to what is called “permissions.”  I still, however, would recommend trying this first as a way to determine how your WordPress installation is setup.

  1. Log-in to your WordPress administrative console
  2. Click the Plugins link in your main navigation column
  3. Click the Add New link in the Plugins sub-navigation
  4. In the search bar, type Contact Form 7 and click Search
  5. This plugin should appear as the first listed item, if not, locate it and click the Install link to the right of the plugin description
  6. Follow the dialogue to begin installing the plugin
  7. If all is successful, you will get a notice and an option beneath the notice that says Activate this plugin, click this to begin using the plugin
  8. You will now have a main navigation item called Contact, which is where you will create your forms and edit the settings
2. Downloading the source archive and uploading it to your WordPress installation

This option requires you to download the plugin from the WordPress plugin directory (found here) and then uploading the files via FTP to your WordPress directory on your hosting server. If you do not have an FTP client or do not know how to use one, you can read about them here.

  1. Download the Contact Form 7 archive from the WordPress plugin directory
  2. Unzip/unarchive the downloaded file to your computer
  3. Open your FTP client and connect to your web hosting space
  4. Upload the whole contact-form-7 folder to the /wp-content/plugins/ directory of your WordPress installation (after upload you should have a folder structure like this: /wp-content/plugins/contact-form-7 where all the actual files are inside this folder
  5. Log-in to your WordPress administrative console
  6. Click the Plugins main navigation link and in the list, click the activate link associated with the plugin
  7. You will now have a main navigation item called Contact, which is where you will create your forms and edit the settings

Start Simple, then Customize as Your Learn More

As much as we’d all love to be able to quickly learn and use new technology, this tool is not for the beginner to HTML and/or programming in general.  Whereas I could probably teach you how to create your own forms in 30 minutes to an hour (fully explaining how you could create all sorts of different layouts, form fields, etc.,) it would be more beneficial if you simply started with the pre-built form and then learned more about the plugin moving forward.

To start using the pre-built form, there are two important steps you must accomplish to get it working:

  1. Open the plugins settings by clicking on the Contact link in your main navigation, in the middle area section called Mail 1, insert the email address you want the form submissions going to in the “To” field.
  2. Copy the form code available in the top box above the form code and paste it into the page, widget, or blog post where you want your form to appear. For instance, I copied the form code “” and pasted it directly into the text editor for my “Contact” page in my Pages section.

That’s it! Visit your blog and test the form by submitting a request and see what you get in your inbox!

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.