Capturing information
Design and implementation
Research
So far, throughout the entire duration of this GCE in Applied ICT I have constantly referred to a terrific book by Rachel Andrew. Her book: “Build your own standards compliant website using Dreamweaver 8” has everything you need to create standards compliant, accessible, and cross-browser compatible websites. It is published by Sitepoint and I can’t recommend it highly enough.
In Chapter 9, she dwells on “Forms and Third-party services” and guides the reader through implementing a stylish form into the tutorial web site. When the form is ready to be submitted to a processing script she doesn’t leave the reader to hunt for a decent script on his or her own but provides a link to a PHP script which I initial thought would be a perfect fit for the PSD site’s capture purpose.
The script linked to is called “formmail.php” by a Mr Joseph Lumbroso. All I had to do was download the script, read the documentation and edit the PHP so to make it do what I intend and then upload the script to the PSD site and link to it in the form action.
Design
I did not need to design the “contact us form” because it is already in place. But I did need to design the additional part of the “What does Ryan say?” section of the blog's index page.
To make it easy for someone to use I avoided using too many mandatory fields, in fact only one field is present. All the user will have to do is type in their e-mail address and press enter or click the submit button. Simplicity usually churns out the best results. I created a few initial designs using Fireworks 8, the final version can be seen above on the right. Now all that is left is to implement the design in XHTML and CSS and then edit the PHP script and then the XHTML correctly.
Implementation
Before rolling out this new function I thought it wise to test this PHP solution first and read some more reviews about the security and safety of such a script. Sadly, I found some bad reviews and had trouble testing the PHP script on the SegPub server. In the web host's customer support forum, the SegPub Administrator stated in a reply to someone's question:
“Please note that insecure form mailers are NOT permitted.”
This was probably why I was experiencing difficulties testing the “formmail.php” script. An article I read also shook me up, it said the following:
“An incredible number of PHP-based contact form scripts can be found on the internet. Unfortunately almost all of them have serious security flaws. Many think that since the recipient’s address is hard-coded in the script, emails cannot be sent to other people. This is completely false. Unless your script is very secure, it is simple to inject alternate email headers into most contact forms. This means that your little mail script could be used to send out thousands of spam emails a day to random people.”
It would therefore seem that using this PHP script is not the right path to take. The author of the article then went on to say that certain content management system plug-ins provide much securer solutions. So I went to Textpattern Resources v2 and browsed the plug-ins section and discovered a terrific little plug-in that was far more secure.
The name of this plug-in is: zem_contact_reborn. It produces a flexible, customizable and secure email feedback form / email contact form for Textpattern. It’s intended for use as an enquiry form for commercial sites (perfect for PSD), and includes several features to help reduce common problems with such forms (invalid email addresses, missing information). This is definitely fit for purpose, just look at it's features:
- Arbitrary text fields can be specified, with min/max/required settings for validation
- Support for checkboxes, drop-down lists and radio buttons
- Nonce-based script spam prevention
- Email address validation, including a check for a valid MX record (Unix only)
- Safe escaping of input data
- Automatically generates an accessible form layout using valid XHTML, including tags
- Rejects faulty UTF-8 and is aware of the multibyte nature of the UTF-8 charset
- Errors can be displayed in a different part of the page than the contact form itself.
- ‘Send article’ functionality
- Copy sender, allows you to send an article to a friend
- External language plugin, zem_contact_lang, which makes it easy to localize the contact form messages
- API that can be used by anti-spam plugins like pap_contact_cleaner.
I have chosen to install: zem_contact_lang and pap_contact_cleaner as well as zem_contact_reborn. Zem_contact_lang is required, but pap_contact_cleaner is an optional extra which I believe is a worth while addition. It adds a hidden form field that only spammers will be tempted to fill out. This will definitely stop the script from being hijacked. Below is a screenshot of the list of plug-ins currently installed in Textpattern:
Email capture form for blog index...
Below is the Textpattern syntax that I placed into the blog's index template:
<txp:zem_contact to="psd@remza.co.uk" copysender="yes" thanks="Your email address has been submitted and you will recieve our monthly news update as soon as it becomes available." subject="You have submitted the following information to PSD" >
<txp:zem_contact_email break=": " default="Valid email address" />
<txp:zem_contact_serverinfo name="REMOTE_ADDR" label="IP" />
<txp:zem_contact_submit label="Enter!" />
</txp:zem_contact>
This generates a XHTML form enclosed within a fieldset with the label “Contact” with a text field with a label “Email address:” which actually uses PHP to validate whether or not the email address entered is valid or not. Below is a snapshot of what this looks like in a web browser without any CSS applied to it.
Contact us page form...
Now because using an isolated PHP script was not secure and therefore not legally considerate, the contact us page form has to use the power of the content management system to be processed. For this to work the contact us page has to be located within the content management system. This was done by creating a new page template, an article and a Textpattern category all called “contact”. Then, inside the page template I inserted the following:
<div id="form">
<txp:zem_contact to="psd@remza.co.uk" copysender="yes" subject="You have submitted the following information to PSD">
<p><txp:zem_contact_text break="" label="Name:" size="35" /> *</p>
<p><txp:zem_contact_text break="" label="Company name:" size="35" /> *</p>
<p><txp:zem_contact_email break="" label="Email address:" size="35" /> *</p>
<p><txp:zem_contact_text break="" label="Position:" required="no" size="35" /></p>
<p><txp:zem_contact_text break="" label="Telephone number:" min=7 size="35" /> *</p>
<p><txp:zem_contact_textarea break="" label="Company address:" cols="40" rows="3" /></p>
<p><txp:zem_contact_textarea break="" label="Area of interest:" cols="40" rows="3" /></p>
<p class="buttons"><input name="reset" type="reset" value="Clear Form" />
<txp:zem_contact_submit label="Send Query »" /> * Required</p>
</txp:zem_contact>
</div>
Which produces, wonderful valid semantic XHTML (complete with anti-spam protection) which when combined with CSS in a web browser displays like below.
This form should also automatically send the enquirer a copy of exactly what information he/she has disclosed to PSD. On the next page both of the capture solutions will be thoroughly tested to ensure that they function as intended and are easy for someone to use.
Click next to continue...