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.
Code | Download
<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.


Code | Download
<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.

Code | Download
<a href="javascript:popup()">contact</a>
View demo here

DHTML Ajax popup : How to generate

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.
Code | Download
<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.
Code | Download
<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>
#Comments:

DHTML Ajax popup

COMMENT BY: IVideo DATE: Jul 26, 16:12
By default whole modarn browsers (IE, Mozilla, Opera, and Safari) block any popup to generate. So it is not intelligent to use conventional popup contact form. Instead you should use DHTML Ajax popup.

DHTM pop-up code

COMMENT BY: ramona DATE: Oct 28, 02:20
Hi,

I have been searching all over for this type of pop up, and finally found this blog. Would you be able to further elaborate on how to build this type of popup from scratch (ie. designing the actual form - completion)?

Eaglery awaiting your response,

Ramona

step by step procedures to generate DHTML popup

COMMENT BY: admin DATE: Oct 28, 04:35
Ok,
I shall explain step by step procedures to generate DHTML popup. Please allow me 2 to 3 days.

No title

COMMENT BY: ramona DATE: Nov 02, 04:55
Hi, I shall wait for your response. Also, what is the PHP or ASP file that goes along with this?

Thanks,

Ramona

pop up contact form

COMMENT BY: pschill2 DATE: Jan 02, 01:28
I've got the pop-up functioning, but the verify image is not working. Also, the div for "pop-up" is appearing before my header in the page. It shouldn't be visible. Lastly, the link for close button in pop-up window is broken -- but all image files are in subfolder from straight upload of 'mail' folder and all sub-folders.

pop up contact form

COMMENT BY: pschill2 DATE: Jan 02, 15:33
I was able to eliminate pop-up div, no longer visible. All permissions are at '644' for the files that need that. Still have broken link for the close button on the pop up. Still not able to get the random security images to function. Lastly, cannot find in any of the .css, .js or sample .html files to change the 'post' function so we can get email from contact page. Or, if logging to db.php, how do we get to that file?

Add comment