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

A cool Contact Form for blogger About a week back, my Photoshop Expert friend Nishad asked me about the Contact Form we are using at inTechgrity.

Nice contact form…how does it work…. i expect som tuts from u based on contact form…

The question was quite obvious, because, by default blogger does not let us to make Contact Me form and if we share our emails directly then what we are going to get everyday is SPAM. So making a Contact form is rather useful instead of sharing email directly.

So I decided to make this tutorial to explain how to make a PHP/AJAX/CSS based Contact form and host it yourself (You can also use any free host which I am going to discuss) and put it directly inside a separate post of your blogger blog. Also we shall discuss some Free Contact Form generators which you can use. So read below to know how…

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.
  • modify the code as per your need 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”.Upload all the files to the folder using FTP 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>

  • Paste the iFrame code 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

kontactr

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

Link: Click Here

2: EmailMeForm:

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…

9 comments

  1. Barnaby

    Just now I stumbled upon the web for exactly this type of info. Be grateful for to your write-up that search has to end right now. You had written the post within a understandable way. With this, I included your blog posts among my favorites! Many thanks!

  2. Anjali

    Thank you so much. for the tutorial and also for free hosting sites. My contact form is looking so unprofessional, and why would somebody fill a sloppy form. thanks once again, i will also share this tutorial with my readers. Don’t forget to check out my blog

    Blogger Tricks

  3. luxury villas

    What I mean by this is how can I have some lines of html in a blogger post that I use to explain an example but not have the code execute?

    • Swashata Post author

      I get it. You have to escape the code. You have convert < to &lt;, > to &gt etc. There are several tools in the Internet. Have a look

  4. Chi Sacramento

    I would like to convey my passion for your kindness for individuals that should have help with in this theme. Your real commitment to passing the message all-around ended up being astonishingly beneficial and have continually enabled individuals like me to achieve their goals. Your personal warm and helpful guide denotes a lot to me and further more to my peers. Thank you; from each one of us.

  5. Anu

    Since i am a fresher in this php , this blog helped me a lot, looking for more useful blog post

Comments are closed.