Free Web Contact Form Using Zoho Creator

We already covered a way to make a Blogger contact page with a form which sends you the user imputed data to your email by using Kotactr but it doesn't work very well because Kontactr captcha fails 9 out of 10 times: it says the user has imputed the wrong code. But I found a much better way to implement free web forms which can be used to create a contact page or any other similar thing (for instance, I also use it for quick tips from Web Upd8 readers) by using Zoho Creator.

What's great about Zoho Creator is that you can input any field you want to and basically anything can be customized. The benefits of using Zoho Creator:

* Zoho Creator is free
* Zoho is a reputed company and will not burst in a dot com bubble any time soon.
* No separate user account is needed. If you have a Google account (obviously, you do own a Google account if you are blogging in Blogger), then you can use it to log into Zoho.
* The input form that you create is highly customizable. The flexibility in customizing the form is much greater than Google Forms. Hence you can easily blend this form with the rest of your blog.
* You can configure Zoho to email you the contents that user submitted. Therefore, you don’t have to login to Zoho’s web site ever after.
* Zoho provides many ready made scripts which provides many added functionality. Like for instance, if you have added an email field in the form, you can configure it to check whether the email that the user entered is a valid email or not.

Before getting started, you may want to know how the form will look like: example 1, example 2.

Here is a complete how to for creating a "Contact Me" page by using Zoho Creator:

1. You have to login to Zoho Creator (if you don't have an account, you can login with your Google credentials).

2. Click on "Create new application", specify a form name and application name and choose if you want to pick from a template or not. Choose the template option because it's easier. Also, select your time zone for this application and select the "Public" radio button next to the time zone.

3. Now you can drag and drop forms from the left onto your form. Hovering your mouse over forms in your new contact form and then moving the mouse over the pen icon in the left allows you to customize the form fields. Clicking on the "Edit Field" you will have the option to rename a field and make it a require field (*) or not (required fields must be filled in by the user, otherwise he will not be able to submit the form). Add as many forms as you want.

4. To set up email notification, above your application there is a drop-down called "More Actions". From it, select "Set Email Notification", like in the image below:

Enter the following values into the fields that appear in the newly loaded popup screen:

From: zoho.adminuserid
To: enter your email address where you want to receive the emails
Reply to: input.Email_address
Subject: anything you want, I entered: Web Upd8 Contact form so I know from where the email came from.
Message: enter the following 2 lines in the message body:

Time: <%=Added_Time%>
IP: <%=Added_User_IP_Address%>

And most importantly, check the "Include user submitted data" box at the bottom of the form and that "Email Notification is:" "Enabled" (at the very bottom, next to the "Done" button). Basically, this is how this should look like after you have completed the above step:

Now click the "Done" button.

5. On the same "More Actions" drop-down as in step 4, click on "Form Properties" and under "Success Message:" enter the message you want to be displayed after someone successfully submits the form, like for instance: "Email Sent Successfully!" and also select the desired width under "Label Width:". You can also choose if you want a verification code for your form:

6. You now need to click the "Access this application" button on top of your newly created contact form:

And then, in the upper left corner you will see a drop-down called "More actions" click it and select "Embed in your website":

A code to embed the form will be displayed. Paste this code into a new post on your website or a static page and publish it / save the changes.

This is how it will look like: example 1, example 2.

There is also a video tutorial on how to do this, if the above explanations are too hard to understand:

But this video tutorial on how to make a Contact form using Zoho Creator is a simplified version of my post, so for the complex version, use the steps described in my post.