Pop-up Mail Form

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/popupmailform/index.php and it reads as though you are viewing the actual page:

I wanted to replace the somewhat clunky message options on the site, as outlined on the Stopping Spambots page, with a safe and secure pop-up mail form.

There is an item on the blog previous to this page which talks about this a bit, it's probably a good idea to check it out before reading the rest of this.

You can download a zip archive of the relevant files called rwa_mailform1.zip. Files in the archive are from 15.01.2011 and may not reflect the current state of the site. Any links in this page to sendmail.php will instead take you to a file called sendmail_publish.zip - this is a version of sendmail.php with my address and key removed.

I had several objectives to achieve here:

• Building the form
• Open the form in pop-up window
• Validate user input
• Prevent Injection Attacks
• Pass a sub-string of the referring page's url forward
• Enable a CAPTCHA box on the form.

In tandem, almost, with making this page was the creation of another page called sendmail.php which does all the validation, error handling and sends the message. This page will not cover these issues. For a full run-down on sendmail.php please go to the Mail Validation & Sending page.

The first task was to create the pop-up window for the form to go in. There are two parts to this, the first is a link in the navbarlinks.htm file:

>a href="/contact/mailform.php" onClick="popUp(this.href, 'fixed', 495, 605);  
return false;" target="_blank"<Send me a message about this page>/a<

The href in the link targets the mailform.php page. The onClick part of the tag calls the JAVA function to open the href in a pop-up window. There are four parameters sent to the popUp function: this.href takes the href defined earlier in the link; 'fixed' tells the function to make a pop-up window of fixed dimensions, as defined by the last two parameters; width, and; height.

The second part is the JAVA function to open the pop-up window, which is placed in the sitewideheadcode.htm file, and thus loaded into every page on the site:

>script type="text/javascript"<
<!--
 var newWin = null;  
 function popUp(strURL, strType, strHeight, strWidth) {  
  if (newWin != null && !newWin.closed)  
   newWin.close();  
  var strOptions="";  
  if (strType=="console")  
   strOptions="resizable,height="+ 
   strHeight+",width="+strWidth;  
  if (strType=="fixed")  
   strOptions="status,height="+  
   strHeight+",width="+strWidth;  
  if (strType=="elastic")  
   strOptions="toolbar,menubar,scrollbars,"+  
   "resizable,location,height="+  
   strHeight+",width="+strWidth;  
  //set new window to open in centre of screen
  var left   = (screen.width  - strWidth)/2;
  var top    = (screen.height - strWidth)/2;
  strOptions += ",top="+top+",left="+left;
  //open window
  newWin = window.open(strURL, 'newWin', strOptions);  
  newWin.focus();  
 }
//-->
>/script<

This robust JAVA function for opening a pop-up window, came from a page at sitepoint.com. It does some clever tricks which are explained really well on their site. I added the three lines which centre the new window on the screen. Previous to this I had been using alternative code from this page at www.htmlcodetutorial.com. Check the link out, there is a fantastic Under The Hood link there also which explains the JAVA code line-by-line. Unfortunately this function stopped working properly - it either opened my mail-form in the same window or a new tab - so I replaced it with the one above.

The next task was to design the form itself. Forms are pretty straightforward in XHTML, a good explanation can be found at w3schools.com. Here is the code for the form from mailform.php:

<form id="thisform" method="post" action="sendmail.php">
<div class="bluetext" style="position:fixed; top:1%; bottom:1%; left:1%; background:#ebf5fc; right:1%; " >
 <fieldset>
  <legend style="color:black; ">  Send an email to Rich's Web Archive: </legend>
  Your Name:<br />
  <input type="text" name="name" size="20" tabindex="1" /><br />
  Your E-mail Address:<br />
  <input type="text" name="address" size="40" tabindex="2" /><br />
  <input type="hidden" name="subject" size="60" readonly />
  <script type="text/javascript" language="JavaScript">
   <!--
   // set subject to shortened url of referring page
   var refpage = new String(document.referrer.replace( "http://www.richswebarchive.com", "RWA"));
   document.forms['thisform'].elements['subject'].value = refpage;
  //--<
  </script>
  Subject:
  <script type="text/javascript" language="JavaScript" >
   <!--
   document.write(document.forms['thisform'].elements['subject'].value);
  //--<
  </script>
  <br />
  <input type="text" name="subjectUser" size="60" tabindex="3" /><br />
  Message:<br />
  <textarea name="message" cols="70" rows="5" wrap="soft" maxlength="500" tabindex="4" /></textarea><br />
  <p>Your message can include <code>html</code></p>
  <?php // set up CAPTCHA box
   require_once('recaptchalib.php');
   $publickey = "6LcldMASAAAAAJhgijHTLH-0JWhliBd_G6KdmCIQ";
   echo recaptcha_get_html($publickey);
  ?>
  <br/>
  <input type="submit" value="Send">
  <input type="reset" value="Reset">
 </fieldset>
</div>
</form>
<script type="text/javascript" language="JavaScript">
 <!--
 // set focus to first field 
 document.forms['thisform'].elements['name'].focus(); 
//-->
</script>

I'm not going to go into explaining about the form elements as others do it much better elsewhere. It's a simple form with 4 visible fields and 1 hidden field for passing the referring page's url.

The first thing of note then is the two lines of JAVA that deal with the url:

var refpage = new String(document.referrer.replace( "http://www.richswebarchive.com", "RWA"));
document.forms['thisform'].elements['subject'].value = refpage;

The first line creates a new var of type String called refpage with the referring page's url, stripped of the string http://www.richswebarchive.com which is replaced with RWA. The second line then puts refpage into the subject element of the form, which is hidden as a field on the form, although it is displayed after Subject: on the mail-form, above the subjectUser field. The subject and subjectUser fields will be combined into one in the sendmail.php page.

This is a neat feature of the mail-form as it means I'll always know what page a user was looking at when they felt motivated to send me a message.

The next thing to mention is setting up the CAPTCHA box on the form. You have to sign up with a CAPTCHA service first and get hold of the two keys, one public one private, which make the whole system work. The instructions given and the bit of code they send you are simple and easy to understand. The following PHP code is inserted at the bottom of your form, just before the submit button:

<?php // set up CAPTCHA box
 require_once('recaptchalib.php');
 $publickey = "6LcldMASAAAAAJhgijHTLH-0JWhliBd_G6KdmCIQ";
 echo recaptcha_get_html($publickey);
?>

All you have to do is edit in your own public key and that's it for this page. The verification of the input takes place in the sendmail.php page.

One final thing to note is the JAVA line at the end of the body section which sets the focus to the name field:

document.forms['thisform'].elements['name'].focus(); 

So that's it, the mail-form is set up, we're about half way there. Now it's time to look at the Mail Validation & Sending page to get the rest of the story.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/popupmailform/index.php and it reads as though you are viewing the actual page: