Creating a contact form for your blog with WebFormDesigner

Contact forms can add a professional look to your blog, while offering an easy way for your readers to get in touch with you. An added benefit is that your email address will be disguised, so you can be sure your inbox is kept spam free.

Most contact forms rely on PHP or Perl scripts to send the data to your email address. This can be awkward for Blogger users, since we cannot host such scripts in our blog. But with WebFormDesigner, you can create and use contact forms in your Blogger blog, as demonstrated on my contact page. Here is an explanation of this great free service.

Contact forms allow your readers to send you an email directly from your blog. The details of the contact form (eg: the reader's name, email address and message) are then sent to your email address. When using contact forms, your email address is kept hidden and is not included in the source code of the page, which prevents spam-bots from discovering your email address.

While you could write the code for your contact form by hand, it can be quite a complicated process, particularly when you need to feature required fields (such as the sender's email address), or when you need to validate the content. Furthermore, you will also need to use a script to process the form. This acts a bit like your regular email client: it takes the contents of the form, processes it and passes this on in the form of an email to your email address. Unfortunately most form-to-email scripts are written in PHP or Perl, and Blogger is unable to host files of this type for us.

WebFormDesigner offers a way for Bloggers to use contact forms in their blogs by offering two valuable services:

• A free form design program, which can create the code for the contact forms you design


• A free "form-to-email" service, which processes the completed forms for you and sends the results to your email address.

The free form design program enables you to create contact forms quickly and easily using a drag and drop system. It can then create the code for the contact form (including validation and required fields) which you can simply copy and paste into a blog post. In addition, you can use the free form-to-email service to have the results of your forms sent to your email address.

How to use WebFormDesigners free services

First of all, it is best to create your free account to enable your forms to be processed. To create your account, simply visit the WebFormDesigner "form-to-email" page, and choose to sign up for an account. You will need to provide your email address which will be used to send your password and unique "form ID", which is required to process your forms.

Shortly after signing up, you should receive an email which contains your password and form ID. Make a note of your form ID as you will need this shortly.

If you haven't already done so by this stage, download the free WebFormDesigner program and install this on your computer. This is the program you can use to create your contact forms. Once installed, launch the program, and you can begin designing your contact form.

I have to admit that I found this program a little awkward to use at first. Perhaps the easiest way to begin is to click "Open" and open the pre-configured contact form which is delivered as part of the program. This form features the three main text-input areas you will need: Name, Email address and Message. You can play about with this form if you like: change the fonts, add color and new fields, etc. Then when you are ready, click on the "create code" button at the top of the window.

On the pop-up screen which appears, you can name your form (eg: My_Contact_form). Choose to "Embed routines with this form" as you will most likely only be using a single contact form in your blog page.

In the lower half of this screen, choose the option to use WebFormDesigners form-to-email service and enter your Form ID in the text input area (this is the Form ID you received with your confirmation email). Then click the continue button.

On the next screen, choose "relative positioning" to ensure the form does not interfere with the layout of your blog (this is the default setting). You can also choose to ask for confirmation from the form user when they submit their contact form, but this is optional and won't greatly affect the functionality of the form.

Following this screen, you can choose to sort the order the items are presented to you in the email you receive. For example, you can choose to see the email address first, followed by the message, even if this is not the order in which the fields appear in your form.

Finally, you will be presented with the form code which you can copy and paste into a blog post (see this page for details about creating "pages" in your blog). You can also choose to test the form in your browser to ensure everything works correctly.

Your new contact form should be working as soon as you have posted your "contact form" post. You can test this by visiting your blog post in your browser, including your own email address in the address field to see what the resulting email will be like.

Changing the settings for the form-to-email service

As I mentioned, the form will work as soon as you post this in your blog. However, there are a few settings you may like to change in your WebFormDesigner dashboard, to make things run more smoothly.

After logging in to WebFormDesigner, you can choose to edit:

• An autoresponder message, which will be sent to the user's email address as conformation of their email to you


• A redirect page: this is where users will be redirected once they have submitted their contact form. This could be your blog homepage or a thank you page should you wish to create one.


• Error Page: in case the user of your contact form makes an error, you can direct them to an error page of your choosing. If this is left blank, the default WebFormDesigner error page will be used instead.

Once you have changed any of these settings, click "Update Me" at the bottom of the page and the settings will be changed immedietly.

Things you should know about this free service

WebFormDesigner is currently free, and I hope this will be the case for some time! There are no limitations on the number of forms which can be processed, not on the number of forms you can use in your web/blog pages.

However, as with many free services, this may be subject to change in the future. If this service becomes hi=ugely popular, we may see limitations or fees imposed for it's users. The WebFormDesigner FAQ page does explain about this, and I'm sure that users will be warned well in advance of any future restrictions or charges.

If you are able to host your own PHP scripts, you can process your own contact forms using the sample PHP script provided, instead of relying on the form-to-email service. This may be something I will consider trying in the future, since this would bypass any restrictions or payment for service should they be imposed. For now I am happy to be able to use this free service though, and expect many of you Bloggers will be too.

Please let me know what you think of WebFormDesigner by leaving your comments and opinions below. I would also be interested to hear of any other "contact-form" services you may have found which work for Blogger blogs.

If you liked this post and would like to receive news of future updates to this site, please consider subscribing to Blogger Buster.

Technorati Tags: contact+form | email | reader+participation | blogger