April 24, 2012

How to create a contact form for Blogger using Kontactr

Contact forms enable visitors to our sites to send us emails without having to expose our email address to potential spammers.

I've been using Kontactr to embed a contact form in this site for years now, and still believe it is the most ideal solution for those using the Blogger platform. However, it seems my previous tutorial is now out of date!

Recently, Kontactr added CAPTCHA functionality to their forms which makes even more difficult for spammers to abuse the facility. We can also now customize the appearance of the form to match the design of our sites.

Here is a comprehensive tutorial to help Blogger users embed a functional, customizable contact form for their blog using Kontactr.

Create your free Kontactr account

Go to Kontactr and click the "Sign Up Now" button to create your free account:

You will need to type your name, choose a username, type your email address and choose a password.

When choosing a username, bear in mind that a hosted version of your contact form will be made available in the format kontactr.com/user/yourusername.

Once you've signed up you'll need to validate your email address before you can begin using your account. Then simply sign in using your username and password.

A contact form is created for your account as soon as you register to use Kontactr's free service. Only one contact form can be generated for each email account, so if you need to use more than one for whatever reason, you will need to sign up again using a different username and email address.

Grab the code to embed your contact form

Once you've logged into Kontactr, the embed code you'll need for your contact form will be available right away!

Highlight all of the code in the "Ajax Widget" box and copy this to your clipboard. We can add this code to a static page to generate our contact form.

Create your Contact Page

In your Blogger dashboard, create (or edit) a "contact" page in which you would like to embed your contact form.

Add an introductory paragraph or any other content you like, then switch to "Edit HTML" mode before pasting your Kontactr code.

You can preview your page if you like and the contact form will show up in the area where you pasted the Kontactr code.

On slower connections, it may take a few seconds for the contact form to show up. This is because your contact form is rendered in an iframe (rather than within the page content), and also because CAPTCHAs are in place to deter spammers.

Here's a screenshot of a Kontactr form in use in the Blogger Buster contact page:

Once you're happy with your page, simply save and enjoy your new contact form!

Customizing your Kontactr form

By default, the Kontactr form uses a white background and black text, which may not be compatible with your Blogger template.

Luckily, within the Kontactr dashboard there is a link to customize the Ajax widget used to render your form. On this page you can change the colours used for your contact form to better match the appearance of your blog:

If you change the appearance of your contact form, you will need to paste the custom code found on this page instead of the default code to render the form correctly in your site.

What happens when a visitor uses the contact form?

The details used to submit the contact form will be emailed to the address you used when signing up to use Kontactr. It will appear as though the email originated from the sender so you'll easily be able to reply to their message.

Form submissions are not stored by Kontactr, so be sure to keep any important submissions sent via your form!

Final thoughts

So far as I'm aware, there are no limits on the number of submissions which can be made using Kontactr forms. The service is completely free, and has proved to be reliable.

Other contact form services I have looked at limit the number of submissions each month, which poses problems for those who require anything more than around 100 form submissions each month. 

I hope this tutorial has helped you create our own free contact form with Kontactr to embed in your Blogger site. Please feel free to leave your thoughts and comments below.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy