Cool PHP/AJAX Contact Me form for Blogger BlogSpot – Host directly or use any Free Contact Form generator

Method 1 ~ Using a custom PHP based Contact me Form and host yourself:

This is my favorite. There are many PHP based Contact me form which are even powered by AJAX, giving us more customization options through CSS. Even if you don’t have any web host, you can use free web hosts which are ad free as well as fast. Below is a quick list of them…

Free Webhosting Alternative for Your Contact Form:

1. HostHelper (My recommended! Even I am using the same host for my Contact me form on Blogger)
2. AwardSpace (Another Good Web host)
3. Zymic
4. 000webhost

If not already then just create an account on any of the Ad-Free webhosting listed above. (Preferably hosthelper). We going to need it to host our own Contact Form. They will give you a free sub domain along with a 500MB of disc-space and 5000MB monthly Bandwidth (More than enough for hosting your Contact Form). Note down the sub domain name they gave you! We are going to need it in future…

Now just follow the steps below!

Step 1.1 ~ Making your Own Contact me form and Hosting it:

As said before, there are many PHP based Contact form available freely on net! Here is a quick list from minervity. Personally I like the AJAX/PHP LightForm (Demo) from Web-Kreation. So in this tut I shall be discussing on that. But you can use any of the forms you like.

• First Download the Contact Form Source code from Here and UnZip it. (Check here if the download link is not working.
• Now open up the index.php file with Notepad or Preferably Notepad++ and do the Following modifications…
• On Line number 55 replace yourname@domain.com with the Email Address you want the mail to be sent. Similarly on line 64 change [LightFormX Contact Form] to something like “Visitors Message” or something similar so that you can identify the contact messages easily seeing the subject.
• Now scroll down until you see something like <div class="dwnld">. Simply delete the following code.

  <!-- Download -->

  <!-- You can delete this! -->

  <div class="dwnld">

     <a href="http://web-kreation.com/?dl_id=8" title="Download!">Download LightForm! &raquo;</a>

  </div> <!-- / Download -->

  Personally I have liked the Contact Form much and have decided not to remove the credit footer. Here we just removing the Download Link which does not look good!

• Now save the index.php file. Upload every files to a specific sub-folder of of your Web hosting account. I have used a subfolder “contact-me”. Use anything you want.
• Now note down the URL of the Contact form. Like mine is http://itg.intechgrity.com/contact-me/index.php. If you are using free webhosting with free sub domain, then it will be like http://yourname.yourhost.com/contact-me/index.php. (TIP: Check here to know how to add only a particular sub domain of your own Domain to free hosts), What ever it is, just note it down for now as we are going to need it very soon.

Now only one more step left for inserting the Contact Form. But before that, do check your form by sending a test-email. Everything should work fine! If not, feel free to ask mere here by your comments.

Step 1.2 ~ Putting the Contact Form on a Single post using an iFrame:

Very much easy… Just Follow the steps

• Go to Blogger Dashboard and make a new post. Now go to Edit HTML to view the Source html code.
• Now just paste the Following code

  <iframe style="margin: 10px 0pt 10px 5px;" src="YOUR_CONTACT_FORM_URL" frameborder="0" height="950px" width="500px" scrolling="auto">

  </iframe>

• Do change the “YOUR_CONTACT_FORM_URL” with the URL you have noted before. Also change the height and width accordingly.
• Now just Publish the post backdating it to months before. (So that it does not appear on the front page)
• Now check the post you have published. It should Display the Contact form properly now. Voila You are done now!

Expecting more? Well now that you have a good Contact Me form ready, you can simply link it on your Navigation bar or somewhere in your sidebar! The basic thing is …… just link it!

[TIP: If you are having problem finding the Post due to backdating it, just search for it on your Blog Post areas from Blogger Dashboard and then Click on View and copy the URL from that page!]

Method 2 ~ Using external Contact Forms:

I strongly recommend you to use the method stated above for getting Full control over your Contact Form. But in addition, you can also use some third-party contact forms, which are available for free. I have liked the following Two:

1: kontactr

• Clean, Simple with Captcha Protection
• You can customize the Looks the way you want!

Link: Click Here

2: EmailMeForm:

• Favorite of many Bloggers. Especially easy to customize and generate.
• Gives you total protection from SPAM using Captcha method

Link: Click Here

Integration Guide:

Pretty much simple, just remember to follow the three steps below

• Register with the Website [FREE] and generate your code. Read their documentation for more info.
• Simply Paste the code you have generated on a Blogger Post through “Edit HTML” Mode.
• Publish the post and link to it!

A detailed information is available here at blogbulks.

So that was a complete tutorial on making a self-hosted or readymade Contact form for your Blogger blog. Do tell us how you liked this tutorial. Also if you face any problem, feel free to ask us! And don’t forget to give your feedbacks and share it with your friends…