AJAX popup contact form
It's nice to see the contact form to open in popup window. To open our contact form script in popup window you have to make the following modification.
Ajax DHTML popup contact form has been released.
Demo | Report bug | Documentation | Download
1. Add the following line of code at the top of the contact-us.php page. This line of code actually prevents from direct opening of the contact page. If viewers try to open directly by typing url of the contact page he/she will be redirected to the home page of the site.
<script>
if(window.name!='ContactUs'){location.href='your home page url';}
</script>
2. Add the following javascript code between <head> and </head> tags of the page(s) from where you want to open your contact page. This script actually opens your contact form in popup window.
<script type="text/javascript">
function popup(){
var url = "contact-us.php";
window.open(url,'ContactUs','width=500,height=550,toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,copyhistory=yes');
}
</script>
3. And finally create a clickable link to run the javascript popup to your
contact page.
<a href="javascript:popup()">contact</a>View demo here
DHTML Ajax popup
DHTML Ajax popup : How to generate
DHTML POPUP:
 | ||||||||||
Contact us (DEMO):
___________________________ |
DHTML popup window are not real window at all. They are actually HTML elements like division, paragraph etc. Initially they are kept hidden. When you click a link to open a DHTML popup a JavaScript function is called which make the HTML element visible. More advanced JavaScript codes are used to track the mouse event and to control drag operation. Here is a simple example of DHTML popup.
DHTML popup code
Add the following lines of code between <head> and </head> tags.
<script type="text/javascript">
<!--
function fw_DHTML_popup(){document.getElementById('popup').style.display='block';}
function fw_close(){document.getElementById('popup').style.display='none';}
-->
</script>
<style type="text/css">
#popup{border:1px solid #FFFFFF; position: absolute; left: 100px; top: 20px; width: 300px; z-index: 100; color: #000000; padding: 4px; background-color: #ffffff; display:none;}
</style>
Add the following lines of code any where between <body> and </body> tags.
<div id="popup"> <table cellspacing="0" style="clear:both; border:2px outset;"><tr><td style="background:#444444;"><div style="float:left; clear:left; color:#ffffff;padding-left:3px; vertical-align:middle;">DHTML POPUP:</div> <a href="javascript:fw_close();"> <img style="float:right; border:1px solid #660000;" src="close.png" width="20" height="19" /></a></td></tr><tr><td style="padding:5px; clear:both; border-left:1px solid #dddddd; border-bottom:1px solid #dddddd; border-top:1px solid #888888; border-right:1px solid #888888; background:#ffffff;"> <!-- Put your HTML code to be displayed on popup window. --> </td></tr></table></div>
