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.
