Sunday, January 24, 2010

Creating Contact forms with Kontactr (plus comparison with Google Docs)

Rather than publishing your email address which may attract robotic email harvesters and spam, it is wise either to display a graphic of your email address or even better, a contact form (which I have done at Contact form for Blogger Tips and Tricks which don't reveal your email address. This post will discuss the pros and cons of using either plus how to use Kontactr for your contact form. I think I will leave a post about how to use Google Apps for contact forms till later since I have opted for Kontactr for contact form.

Kontactr for contact form

It is very easy to create a contact form with Kontactr. All you need to do is to sign up for an account, using the email address which you wish to receive emails sent from the contact form. On successful registration, an email will be sent to that email address with an activation link which you must click to activate your account. If after some time you still haven't receive the activation email, click RESEND and it will be sent to you again.

Once your account is activated and you successfully signed in, there will be a total of eight choices out of which 3 will send your respondent to Kontactr's website and the other 5, your respondent will not leave your website. I have put demonstration contact forms, links and buttons over at my test blog with the eight possibilities in the exact order as they occur over at Kontactr

The very first one is uses AJAX Embed Widget and is highly recommended.

Kontactr Ajax Embed Code for contact form

You can also customize the color to blend with your website's colors. All you need to do is to copy and paste the script into the post editor and publish the post and if you want the contact form in a post or alternatively, into a HTML/Javascript gadget (page element) if you want it in your footer, sidebar or whatever, but the place where you embed it must be wide enough to contain the contact form. However, the good thing is it will not send your respondent to Kontactr website, but will remain in your website.

The last one at the bottom of the page is the HTML embed widget which I do not recommend

Kontactr HTML embed code for contact form

as you will have to edit the HTML to get rid of all the line breaks, otherwise you will get lots of blank spaces above your contact form.

Somewhere in the middle of the page will be the codes for the "button contact form" which is what you should choose if you don't want a large contact form and a little non space invading button that fits nicely into a little space in your sidebar. Don't take those three codes on the left. Pick any of those 3 "KPU form" with KPU a short for Kontactr Pop Up. If you install these either somewhere in a post or in the sidebar or anywhere, clicking on the button will cause the contact form to pop up with the respondent staying on your site.

Pros and cons of using Google Docs and Kontactr for contact forms

I have used Kontactr before for contact forms for other blogs except for this blog until recently. In fact, I made a small donation to Kontactr in gratitude.

Kontactr gives a "true contact form" in the sense that when someone enters his true email address into the Kontactr contact form, what you receive is actually an email from that email address and not a message from Kontactr that someone has sent you a message and you have to go to Kontactr's website to read the message. With that email message, if you so choose, you can respond direct to that email address. In addition, Kontactr provides a captcha (word verification) to help you reduce spam from the contact form.

What I don't like is that you will be dependent on Kontactr, a third party not as big or as strong as the mighty cash cow Google. If Kontactr services or website goes offline, there goes your contact form. Not many people provide services and products for charity, and if a provider is not making any money or worst, losing money, it is very likely to cease to provide support. This is exactly what happened in the case of a Philippine online favicon generator and host.

Google Apps: While Google Docs is still a third party provider, I have confidence in Google Apps because it is backed by that cash cow Google and so unlikely to go bust anytime. Another pro if you consider it a plus is that all the fields created in that contact form when someone fill in and submit will go to an online Google Spreadsheet which tabulates them neatly into searchable rows and columns. That can be mighty handy for you to organize all the data collected.

Unfortunately, using Google Docs don't give you a "true" contact form because it only provide you with the possibility that when someone fill in that contact form, an email message is sent to you plus a link to read the fields (such as name, email address, message) that you included in the contact form at the Google Spreadsheet that is created when you create that contact form.


  1. Hi,

    Maybe it's a good thing to know that Blogger has launched Pages. In blogger in draft you now have the option to create a static page for your blog. In Emailmeform which allows you to create fully customizable forms and copy-paste the form code anywhere, in this case in my static Blogger page.

  2. Hi Schmitzl,

    Have to confess I have been lazy to check out Blogger in Draft, and if I understand you, one can actually create an EmailMe form? I just tested and created a test page at Testing Blogger Beta (which title I think is about time to change to Testing Blogger in Draft. However, I don't see any option to create an email me form? Can you elaborate?

  3. Hi Peter,

    No, Blogger doesn't have that built-in. With pages, you create a new page like you did. On you can create your contact form. After doing so, you can copy the form code off emailmeform and paste it in your page in Blogger, thus creating a contact form for your blog.

    Hope this helps :-)


  4. hi peter i use to chat with you sometimes ago but due to nature of my primary job i was offline for a long time but i'm back and i have a blog which i realy want to make income from and i need you help on evrything. on what to post and how to start,

  5. As i load a picture on my blog when its clicked it enlarges almost 3 times the original size,
    Though the 1st blog i posted i didn't have that problem,
    How can I control the size when my picture is clicked.

  6. You can use Irfanview to resize it first before uploading. Alternatively, first get the photo hosted somewhere on the web first then use <img> tag to display it together with a width="some number" attribute to control the size. Here are some related post to read to familiarize yourself with what is involved:

    Getting Blogger to host your photo (for profile as well as other purposes)

    Display images in larger sizes (can also apply to smaller)

    Make clickable images

    Uploading animated gif images to Blogger

  7. hi this is good for many people

  8. Hi I'm new to blogging, how do you create a contact me form on a separate page on your blog, without it showing up as a post or in the Archives.


  9. Just wanted to say thanks, Peter, for this very helpful post. I was searching how to put up a contact form and yours is the first helpful page I found. Thanks so much!

  10. E-mail form is created more easily with help of form creator.

  11. Thank you for advice on how to make a contact form using google docs. The only problem I now have is that the form is too large and needs scroll bars.

  12. i would prefer google docs for not just contact me forms but any form you would like to embed in your blogs.
    coz you don't have to depend on third party sites.

    view my blog, how i used it in help & support forum page.

  13. If anyone is looking for an "Email me" tutorial, I have posted one here.

    It is listed under tutorials.

  14. is really easy to use, when is finished you go and embed it in a blogger page. That's it!

  15. Hi, I have placed the Kontactr code on my 'Contact' page for a form.
    I tried testing it but when I filled out the 'Captcha' box & clicked 'send' it came up with 'not sent, wrong code entered'
    I have tried all the different formats for the forms & the same thing happened. One of the 'contact us' buttons worked (which was linked to the name of the account, not the ID number).
    I've e-mailed Kontactr but nothing back. Any tips would be greatly appreciated.

  16. This problem with the captcha is known and how I go around it is to have more than 1 contact form in my Contact me page together with a note to visitors to use other contact forms when they experience this problem.

    Unfortunately I am not the developer so I can't solve that problem any other way.

  17. Many thanks for your response. Looks like I'll have to search for another form.
    Thank you again.

  18. You can also check out emailme widget

  19. Added this to my art blog,

    Thanks so much for your help!

  20. Hi, is it possible to reduce the size of the contact for through Kontactr to place it on the sidebar?

  21. The code will look something like this:
    add a width attribute to the img tag so it becomes
    <a.....><img..width="some number".../></a>


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics