How to Create a PopUp Window for E-mail
February 22nd, 2009 by Bri posted in Design/Development, Tips & Tricks
This was the task at hand. I wanted to create an un-obtrusive contact form for sending an e-mail on a client’s website. I didn’t want to use the standard html mailto: tag, because, we have all heard about the spam e-mail farmers.
You’re Asking For What?
There were a couple of ways I could handle this. I could insert the standard web based contact form, or, I could mask the e-mail address using PHP or images. We already had a web based contact form on the site, and sometimes those forms can be a little frightening to users. I can hear it now… “OMG they’re asking me for my name, company, telephone number, e-mail address, my firstborn, my pet’s name, my favorite color AND what time I got out of bed this morning! Sheeeesh! How nosy can these people be??” The second alternative requires the user to have setup any web based e-mail service they may use, such as Hotmail or Gmail. What if they’re like me and haven’t? What if they have no idea what a POP or SMTP Server is? Soooo…..
Should be Easy, Yes?
What I wanted to do was create a little popup window, that contained the elements I needed, that let the visitor enter their e-mail address, along with checkboxes for the information they were interested in, and then a comment section just in case. The popup window wouldn’t take them away from the page they were on, and if they decided not to use it they could just close the little window. Easy, un-obtrusive, clean and tidy!
I Don’t Think So!
I searched all over the internet looking for a simple little script to do just this. Also, as I’m no javascript wizard, I didn’t know what kind of script I was looking for. I already had a form, I just needed some kind of script, and then I needed to find out how to incorporate the two.
Well, needless to say, I searched and searched. I found “How to Create PopUp Boxes That Never Close”. I was taken to websites that talk in javascript code that required a javascript interpreter. I was taken to forums and blogs that dated back to 1998. Come on! Someone has to have wanted to do the same thing as me! Next I searched for “How to Create a PopUp Window for E-mail”. Here I was taken to all kinds of websites showing me how to create a PHP form for e-mail. All nice and good….but not what I wanted.
Java Script Pop Up Window Generator Tool
During my search, I found out how to create the script and the elements that were needed. I just couldn’t figure out how to “call” my form. That’s when I stumbled on this cool little script maker Java Script Pop Up Window Generator Tool. All I had to do was enter some information and copy the code. Exactly what I wanted! Three files were needed. The first one contains the javascript to call the popup form with a link to it. The second file is the actual popup form. The third file is your PHP form mail. I use PHPFormMail created by Andrew Riley (http://developerkarma.com) and edit it accordingly.
Step One:
So after a bit of playing around, I inserted this script in the <head> section of the page where the link to the popup form is:
<script language=”JavaScript”>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(“page” + id + ” = window.open(URL, ‘” + id + “‘, ‘toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=1,resizable=1,width=375,height=380,left = 665,top = 325′);”);
}
</script>
This nifty little script creates a function called popUp. I’m specifying in the brackets that the function is calling a URL, and then in the link below I tell the script where to find it. The script “window.open” will actually open a new window or page, so my function is telling it to create a new window with the criteria listed. No toolbars, scrollbars, or statusbars. Yes I want a menubar, and yes I want the window to be resizeable. I want the size to be w,h positioned at x,y.
Step Two:
Next, I inserted this link in the <body>:
<a href=”javascript:popUp(‘testPopUpForm.html’)”>Open the Popup Window</a>
This link runs the function “popUp” and then opens the testPopUpForm.html in the popup window created.
Step Three:
Next, I created my test form page. I created it so that the maximum width was 350px wide, and my form elements could fit into it nicely.
<form method=”post” action=”TestFormMail.php” />
<div style=”font-size: 12px; background-color: #CCFFFF; color: #000; width: 350px; padding: 5px”>
<p>Please enter your name and e-mail address so that we can send you the materials requested.</p>
<p><label for=”realname”><strong>Enter your name:</strong></label><br/>
<input type=”text” name=”realname” id=”realname” size=”30″ /></p>
<p><label for=”email”><strong>Enter your e-mail address:</strong></label>
<input type=”text” name=”email” id=”email” size=”30″ /></p>
<!– Areas of Interest –>
<fieldset style=”display: inline; padding: 5px; margin: 5px 0; width: 335px; text-align: center”>
<legend style=”color: “>Please select: (check all that apply)</legend>
<input type=”checkbox” name=”check[]” id=”regForm” value”Pre-registration Form” />
<label for=”regForm”>Pre-Registration Form</label>
<input type=”checkbox” name=”check[]” id=”presMats” value=”Presentation Materials” />
<label for=”presMats”>Presentation Materials</label>
<input type=”checkbox” name=”check[]” id=”other” value=”Other” />
<label for=”other”>Other</label>
</fieldset>
<!– Comment Section –>
<fieldset style=”margin: 5px 0″>
<legend style=”color:”>Comments</legend>
<textarea name=”comments” id=”comments” rows=”5″ cols=”38″></textarea>
</fieldset>
<p><input type=”submit” value=”send” /> <input type=”reset” value=”cancel” /></p>
</div>
I created the form with elements I wanted, and also specified the required fields error and the re-direct within the popup itself. The visitor could see what was submitted and that it was submitted successfully. All that was needed was to close the little popup window, and then they could continue on at the same page they were on.
There we have it! A nice little pop-up contact form!
~Bri
Enjoyed this post?
Subscribe to my feed, follow me on Twitter or refer me to your friends and associates!
 |
 |
 |
Tweet Me | Share Me | Digg Me |
Keep working on your blog and i will come back – good job though. pay my blog a visit when you get the chance
Thanks so much! Next I’ll be working on a contact form that uses javascript to slide in and out. Thanks for the comment
~Bri
hello Brienn
i want to make form with checkboxes after checkboxes i want to have button which will open new pop-up window
in this window i want to be shown only this checkboxes which are marked in form
after this in the same pop-up page two buttons “send” and “cancel”
“send” must send form results at e-mail address
“cancel” must cancel
please help me ~Bri
sir,
i copied and run but is not working i need step by step procedure
Hi gowtham, not sure what you copied and pasted, but if you notice you need a php form mailer, and server side scripting access. If you’re running a test server on your own computer it shouldn’t be a problem. Show me what you copied and pasted and I’ll see if I can help from there
~Bri