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.