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:
