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.



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



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: 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.

Continue reading →

Contact Form for blog or website: Avoid email harvester and spam

IMPORTANT: Codes below are for email to my email address. You will have to generate your own codes for your own contact form.

The standard HTML mailto: code

<a href="mailto:email@abc.com">

to create a hyperlink to contact you is prone to email harvesting for spam. It is better to use a contact form for this purpose if you want your blog or website visitor to email you. The best I found so far is Kontactr.com. Update 28 September 2008: Looks like kontactr.com is no longer available (no permission to access server). We will have to find another way/

To get a contact form for yourself to embed in your blog or website, sign up for an account. After verification and login, you will have 2 scripts (code of widget) for embedding. One is HTML code and one is AJAX. I recommend you use the AJAX code as it is simpler and you will have less work. Instructions for both will be given below after the examples:

Explanation and screen shots of various methods to get a Kontactr form

You can see an example of Kontactr contact form using the HTML widget in its original form at Kontactr Contact Form using original HTML code where there is a huge blank space above the form. An example of a contact form using the edited Kontactr HTML code can be seen at Dream Driven Life^TM contact form

Example of contact form using Kontatr AJAX original script is given at Kontactr contact form using original AJAX code. Example of contact form using the edited AJAX code is at Natural Remedies contact form.

Explanation and Instructions for Kontactr contact forms

HTML code or widget

Below in the scroll box is Kontactr original HTML code for the contact form (Important note: the script below is a script for a contact form which send mail to my email inbox. You will have to go to kontactr.com and generate your own script.:

<form method="post" action="http://kontactr.com/euser.php">
<input name="id" type="hidden" value="5142" />
<table cellpadding="10px" border="0" style="font-size: 13px; font-family: Tahoma, Verdana;">
<tr>
<td align="right">Your Name : </td>
<td><input name="sender_name" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td><input name="sender_email" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td><input name="subject" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td><textarea rows="10" cols="40" name="message" style="font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td><img src="http://kontactr.com/captcha.php" /> <input type="text" name="captcha_code" style="margin-bottom: 10px; font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>

If you paste this direct into a Blogger blog post editor window and publish, you will get that contact form with a huge blank space above the contact form. This is because Blogger treat each "return stroke" (like clicking ENTER or RETURN key to type something on the next line) as a space. Since there are so many "spaces" (code in different lines) in the original HTML code, you will then have lots of empty lines above the contact form.

To get rid of the blank space, copy-paste the HTML code into Wordpad (available from Windows Accessories), on the first line, click the END key to put the mouse cursor at the end of the line. Click DELETE to bring the next line up to the first line. Then click END and DELETE again. Keep repeating this until you come to the end of the code. You will then have only a single line of code. I suggest you save this Wordpad file into, say, a folder named "email address" so you can use it whenever needed.

After getting the HTML code into a single line, press ctrl+A to select the whole code, click ctrl+C to copy into clipboard. Go to the Blogger post editor and click inside the post editor window. Press ctrl+V to paste the single line HTML code into the post editor window. Publish. You will not have any space above the contact form this way.



If you think the above is too troublesome, there is an alternative where you just need to surround the Kontactr code with a simple inline CSS. For details refer to How to avoid blank space above table Part 2.

AJAX code or widget

An example of the original Kontactr AJAX code for the contact form is given in the scroll box below (Important note: the script below is a script for a contact form which send mail to my email inbox. You will have to go to kontactr.com and generate your own script.:

<script type="text/javascript"> id = 5142; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>

Note that it is only 2 line of code. You can either copy-paste direct the AJAX code into your Blogger post editor window and publish or you can edit it into a single line of code as explained above before copy-pasting. Both will give excellent result.

Continue reading →

eMail Contact Form Part 2

I have written an earlier post on this subject: eMail Contact Form for Blogger (click BACK button to get back to this page), but the site that offered the contact form required me to download a program, which I was reluctant to do. In that post Amit suggested another alternative - Contactify where you don't have to download any program, but you will have to divulge your email address as well as the password. I was not willing to do this for my normal email address, so I created a new gmail address to test it out. I have in this way created a way for the blog visitors of Blogger Articles to contact me (at the new gmail address) without having to reveal that email address. The "email me" link to the contact form is at the bottom of the left sidebar of the above blog. Try it out, click on it and see what is the result. (Note: turned out that the password to to log into Contactify, and not the password to sign into your email Inbox).

To creat the link to the contact form, what you need to do, as mentioned above, fill in the field for your email address, your email password (twice), then click a "Create link" button and you will be taken to a page for word verification, then click "I agree, create link" and you will be taken to a page where you can copy the link (URL) to your contact form. Then all you have to do is to sign into your Blogger account to get to the Dashboard, click LAYOUT for the blog you want the link to the contact form to be displayed, click "Add a Page Element", then select either LINK LIST or HTML/Javascript to create the hyperlink. I used LINK LIST to create the hyperlink to the contact form in this blog: Blogger Articles

Update 28 April 2007: Shawn of Stock Blog Hub commented you don't need to give the password to your email address, but an email address to log into Contactify. I tested that by creating a gmail address, register with Contactify and gave my email address plus a password different from the gmail address to create the link. I copied the link, click a Add a Page Element and selected Link List to create a link to the Contactify contact form. You can see the link at the bottom of the left sidebar of the blog Career and You. Try clicking on that link and see what happens. I did that and found the responses were instantaneous.

Continue reading →

email contact form for Blogger

I have created a special gmail address for reader of this blog to contact me using mailto link:
<a href="mailto:email address">Click here to email Me</a>
and I am fine with it even though the email address do get harvested by email harvester and I do get spam. But gmail spam filter is so good all of them ends up in the spam folder, so it don't trouble me.

However, if you are picky, you may want to create an email contact form for your visitors to contact you without revealing your email address. You can get it by going to Create a Contact Form for Blogger. I had originally intended to use it to demonstrate, but what I didn't like about that site was when I landed on the site, I got a message that IE7 blocked a pop-up which may cause security risk, and also the fact that one need to download a Webform Designer software which I didn't want to do.

If you don't mind that, and you want a contact form badly enough, you can go to the above site which will give you a link to the page to download WebForm Designer, and if you don't want to set up your own script to email you the form's data, you may also be interested in our free form-to-email service.

Update 29 April 2007: Here is an alternative for you if you have no appetite for downloading a program to get a contact form: eMail Contact Form Part 2 (click BACK button to get back to this page).

Continue reading →