Friday, July 18, 2008

How to create a contact form for blogger

>

Many professional web sites and even personal blogs sometimes have a contact form on their site. These forms are generally made using PHP, ASP, CGI etc and is possible only if your site is hosted on your own web server. Since Blogger is just a blogging platform and does not give users access to the actual server, adding such a form is out of question. However, with third party tools you can add a contact form to your blogger blog just like any other website. This tutorial will show you how.

A contact form can be created using two ways, either through Zoho Creator or through Google Docs.

Using Zoho Creator

1. Go to Zoho Creator and either create a new account or login using your existing Gmail or Yahoo ID

2. Click Create New Application and then in the next page name your form "Contact Form". Click Next.

3. In the next page, you will find various fields on the left hand panel. Drag the Single Line field to the right hand panel. Name the label "Name". Click on Options and check the box "This is required field".

zoho-name

4. Similarly drag the Email field to create email box and the URL field to create website box. Drag the Multi line field to create the Comment box. Drag and add any other elements you wish to add to the form. Choose which fields are necessary and mark them accordingly. The final layout looks something like this.

zoho-form

5. Hover your mouse over More Actions on the right hand panel to reveal a drop down box. Click on Form Properties, to add a Success Message (the message that will be displayed after a user submits the form) and verification code.

zoho-form-properties

6. Again under More actions, click Set Email Notification and fill-in the details to receive email notification whenever users submit the form. This is necessary, otherwise you will have to manually keep checking whether anybody had tried to contact you using the form. Make sure the box "Include user submitted data" is checked.

zoho-email

7. After you have finished creating all fields, click Access this application. On the next page click More Actions>Embed in your website

zoho-embed

8. You must now make the form accessible without requiring login. Click on the appropriate link. You should see a message "Through this code snippet, you can access the form without login."

zoho-customize

9. Using Customize Items and Customize looks you can further customize the form. Finally copy the code and embed it in a post on blogger. Of course, you can use this form on any website and blogs like Wordpress, Typepad etc. The final contact form looks like this (sorry there is no demo)

 zoho-final

Using Google Docs

1. Sign in to Google Docs using your Google account and create a new spreadsheet. Click on the tab Form and then click Create Form.

2. Add questions and name them appropriately and check the box Make this a required question wherever required. For the comment box, choose Question Type as Paragraph text.

googledoc-form

4. After you are done, Save the form. Now click on Preview and Send on top. Check the box "Custom confirmation message" and type the message you want to display after the user submits the form.

googledoc-form2

5. Now click on Embed under the Preview section to get the code. You can edit the width and height of the form by editing the parameters in the code. You can see a sample of such a form here

Whenever any user uses the form, the entries will automatically appear on the spreadsheet. The drawback of using Google doc to create the contact form is that there is no email notification. You have to keep checking the spreadsheet to see if anybody tried to contact you. The Zoho contact form is much better in this respect. Embed it on your blog and forget it. It is also much better looking than the one by Google.

17 comments:

  1. Interesting ways to add a form to blogger, you might want to create an article on creating a form for wordpress, don't forget to mention plugins

    ReplyDelete
  2. A new online contact form generator, Magic Call Button (at magic-call-button.com), just made it a lot easier, faster, and cheaper for just about anyone to put a super-attractive email contact form on their website in under five minutes. Specific questions can be added, followed by an editable confirmation "thank you" message. Finally, a small piece of code is inserted into any web page. The whole process takes less than five minutes. It's free to try, no ads, no credit card required, and no programming skills needed. See the press release today on Google news and at http://www.magic-call-button.com/news/MagicCallButton_pr_121308.pdf.

    ReplyDelete
  3. There is a way to set notification rule for ur email. follow the steps below to do this-
    >open ur spreadsheet corresponding to d form.
    >click on 'Share' link(top rightmost corner).
    >select d 'Set notification rules' from d drop down menu.
    >a window will be in front of u. select d check box having message 'A user submits form'. then save this setting.

    ReplyDelete
  4. Good article, I use Google docs for my feedback form. The form can be customized to integrate perfectly with your blog by editing the html.

    ReplyDelete
  5. great way to create contact form with google docs..
    thanks a lot!

    ReplyDelete
  6. Thanks, I just created my contact form and it was painless and the result is great, thanks to your advice.

    ReplyDelete
  7. Thanks a lot. I just created one for my blog. Very helpful post.

    ReplyDelete
  8. many Thanks for this article.I used 1st one and it's work like a charm.
    you can see it in here.
    http://www.latest300mbmovies.blogspot.com/

    thanks again.

    ReplyDelete
  9. THANK YOU.....this works great with the googles docs...used the set the notification rule as advised by "santosh" and works great, I get an email everytime somebody sends a note....just what I needed

    ReplyDelete
  10. This tutorial help me so much! I've tried use other contact form before,but still from ZOHO CREATOR is the best..it's fully customizing..its about everything,haha..i try googles doc too but it seems like they have a limitation on box..they don't have a file attachment box..and it's hard to know when we got a message without notification..i choose ZOHO even i have GOOGLES DOC..thanks for the nice tutorial here!

    ReplyDelete
  11. thanks alot for wonderfull sharing...

    ReplyDelete
  12. great advice - keep up the good work man

    ReplyDelete
  13. Customize the Zoho Success Message!

    To further customize your success message when using Zoho, follow this link:

    http://www.squidoo.com/zoho-success-message

    This links explains how to:
    - Customize the look and feel of your success message
    - Specify how long your success message stays up before it closes or redirects.
    - Add links to your success message.

    NOTE: I use Zoho with WordPress, for questions concerning how to get Zoho to work with WordPress, follow the link above and post a comment with your question. Thanks

    Hope this helps!

    ____________
    Mark Hendley
    http://w3.synesisintl.com

    ReplyDelete
  14. Zoho is great and I used for some time until I found this free service for contact forms that hosts your form (send to email, but also store on their servers so you can access,search,export results, track status etc)

    ReplyDelete
  15. It's a great informations, i will try for my blogspot site. thank you

    ReplyDelete

Popular Posts