Customized Ajax based Contact Form for Blogger.com or any other site
Blogger is very nice and powerful Blogging engine, the good part of it that its customizable, you just play with template and you can do anything you want, though I couldn’t discover it an year back when I got registered here and then moved to weblogs.com.pk.
One thing I missed in it was a typical Contact Form, one has to go to Profile of blogger to contact him and if one hasn’t enabled it, there is no chance other than to make a comment in any of his post, its not appropriate. I don’t know why blogger people didn’t give a way to send feedback/message to the author. Anyway, it made me to work on my own contact form; I didn’t want typical send form to email thingy, other issue was that I didn`t want typical Submit feature, i:e server round trip. I wanted a seamless server side solution to send me email via php or asp whatever scripting language. The other restriction was that I don’t have access to Blogger.com web server as well that I put my script file on machine and run it, the only choice was left was AJAX, I had tried it first time with J2EE in an a project at Cybernet where I work and developed Access Control Module for the mentioned system. Since I had time, got my own machine as well,so I worked on it and with help of God, it got implemented successfully.
It was not easy though, one of the draw back of AJAX approach that XmlHttp Object doesn’t support doesn’t support cross-domain request, you will experience Permission Denied error. After 2 days of online research, I found http://ajaxextended.com/ , this guy used Proxy approach for dealing external requests, his library is awesome and very simple too, it didn’t take more than 5 minutes to implement it(
The contact form I have developed is using php script engine, installed on my website, for emailing, I have used phpmailer class for sending mails via php and ajaxextended library for handling cross domain requests, the best of this library is that you don’t need to create separate instance of Xmlhttp for IE and FF(Mozilla based browsers), as many of programmers would have idea that IE used ActiveX control for XmlHttp request unlike FireFox.
This contact form is reusable in its current form, that is one can use it without any installation on his machine at all,by adding references of javascript file and a simple HTML form within a DIV tag, you may use same facility for your website/blog. Following things you will require to use this feature on your website/blog.
- CSS Style
Ok, this is not necessary, if you want to make your own styles you can change it, for sake of simplicity, I am mentioning everything right here:
Add following between <style type=”text/css”> </style>
<!–
.area {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FF9900;
}
.labels {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
–>
</style>
You are not bound to use same class names at all you can make new style and apply on form. Or if you want make your form css-less.
- JavaScript
Enter following between <head></head>
<script language=”javascript” src=”http://adnansiddiqi.com/xmlhttp.js” type=”text/javascript”>
</script>
<script language=”javascript” src=”http://adnansiddiqi.com/contacts.js” type=”text/javascript”>
</script>
- Html Form
You are not bound to use similar form for your site but yes, the form fields and Div ID MUST HAVE same name as mentioned in the code below:
<!– DIV for Contact Begins –>
<div id=”contacts” style=”position:absolute; width:500px;top:250px; left:140px; display:none;”>
<form name=”myform” method=”post” action=”">
<table width=”70%” border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#333399″>
<tr>
<td colspan=2><span class=”heading”>Contact Form(BETA)</span></td>
<td> </td>
<td> </td>
<td> </td>
<td class=”labels”><div align=”right”><a href=”javascript:closeme();” title=”Close Window”><font color=white>Close</font></a></div></td>
</tr>
<tr>
<td colspan=”6″ class=”labels”><div id=”message” align=”center” style=”display:none “>Please Wait … </div></td>
</tr>
<tr>
<td width=”25%”><span class=”labels”>Your Name </span></td>
<td width=”75″ colspan=”5″ valign=”top” align=”left”><input name=”your_name” type=”text” id=”your_name” size=”30″></td>
</tr>
<tr>
<td><span class=”labels”>Email</span></td>
<td colspan=”5″ valign=”top” align=”left”><input name=”your_email” type=”text” id=”your_email” size=”30″></td>
</tr>
<tr>
<td><span class=”labels”>Subject</span></td>
<td colspan=”5″ valign=”top” align=”left”><input name=”subject” type=”text” id=”subject” size=”30″></td>
</tr>
<tr>
<td valign=”top”><span class=”labels”>What do you wanna say? </span></td>
<td colspan=”5″ valign=”top” align=”left”><span class=”area”>
<textarea name=”say” rows=”5″ id=”say”></textarea>
</span></td>
</tr>
<tr>
<td> </td>
<td colspan=”5″ valign=”top” align=”left”>
<input type=”Button” name=”S” value=”Send” onClick=”sendMe(’<your email>’);”>
<input type=”Reset” name=”Submit” value=”Start Over”></td>
</tr>
<tr>
<td colspan=”6″> </td>
</tr>
<tr>
<td colspan=”6″><div align=”center” class=”style1″>Developed By </div></td>
</tr>
<tr>
<td colspan=”6″><div align=”center” class=”style1″><a href=”http://adnansiddiqi.com” class=”style3″>Adnan Siddiqi </a></div></td>
</tr>
</table>
</form>
</div>
<!– DIV for Contact Ends –>
In order to make it compatible with your side and email address, enter your Email address where you wish to receive user feedbacks, for this purpose you need to make changes in sendMe() function:
onClick=”sendMe(’<your email>’);
That’s it! You can run form on your site too.
Note: Since it’s in beta stage, I have kept it open for others means anyone could use it on his/her website. I have no plan to offer my side for Emailing facility, yes code is free of cost, and anyone could grab it, customize it and use it, but don’t forget to give credits to those who made it possible that is.
- AjaxExtended.com
- PhpMailer
- To me (Adnan Siddiqi)
Last but not least, don’t use it for spamming; I am logging IP addresses for every visitor who submits the form.
So please give me suggestions, about bugs, I will fix it up, also about that should I host server side code for others or not, right now I am kinda unsecure about it. I will upload the code soon on my website and one would be able to download it free of cost.
For Demo, goto main page and click on Contact Me link,lots of things need to be done,like Validation of form etc.
Bookmark at:
January 10th, 2006 at 10:30 pm
Eid mubarak…………..
thanks for dropin by ma blog…….wesa i do agree with u abt kids…..
January 14th, 2006 at 6:16 pm
hummm,
I wud like to tell u some thing.
AJAX is useless for small tasks.
Use needle where needle is required.
Ajax is good for doing something fatafat with lots of data.
I am bit hesitant in using AJAX.
first coz not every browser supports it.
Every browser doesnt mean NN/FF/IE and Opera.
OK I am getting too fussy.
But I suggest U look on all the sides.
Do U know AJAX is bad for browser back buttons?
I tried to submit a comment on ur tech blog that said some thing about Gmail lemme find a link for it
I found it from my blog.
Do this
a) Login to ur gmail account
b) Right click near the labels
c) From menu select refresh this frame and reload only that portion.
d) Now click on any link or try to compose.
What happened???
January 14th, 2006 at 6:30 pm
AJAX is useless for small tasks.
this task is small but not unimportant and useless,think of using serverside features on a site like geocities.com where you cant run your own serverside scripts
first coz not every browser supports it.
Every browser doesnt mean NN/FF/IE and Opera.
its not using conventional Xmlhttp object which is implemented differenly in IE and other other browsers,i created a single instance for both FF and IE
January 15th, 2006 at 12:50 pm
I know yaar.
y dont u post it on ur t3ch blog
August 1st, 2006 at 7:59 pm
I cut and pasted the contact form code on your blog, but had to have someone modify it to get it to work. I’m just learning web programming. I can email you the modified code if you want. Here’s the link where it’s displayed, but I haven’t incorporated it into the main website links yet. You can use the contact form here to send me an email if you want the code. Thanks: http://johnhguitar.com/wp-content/themes/default/Contact.php
August 8th, 2006 at 10:34 pm
Anonymous:There is also an example mentioned on my geocities website,follow the code and let me know
February 7th, 2007 at 12:29 am
I’ve also got one here. Hope you would like it.