Create a Contact Page Part I

Once you’ve got an established blog you’ll most likely want a contact page with a contact form on it. Whilst there are a few plugins that do this for you, I tend to find that they either bloat your pages with additional CSS code in the header (CSS code should always be put in an external stylesheet whenever possible), badly written form markup, or probably the worst culprit, the PHP code doesn’t validate the information in the form to help prevent spam or email header injection.

Create your Page Template

First of all we need to create a new page template. Take your page.php template file (or index.php if you don’t have a specific page template file) and save it as contact.php. At the top of the file, just after the opening PHP tag, insert the following:

/*
* Template Name: Contact Page
*/

This will now show up as a page template when you come to create your static Page in WordPress.

The Form Markup

In your template file, find the template tag the_content(). It may differ slightly to the basic tag, or it may even be the_excerpt() (if it is then change that to the_content();). Just below this tag you want to insert your form markup. You may want to have additional fields, if so just duplicate the appropriate code and edit it for each additional field. Do not remove the fields already in the form however, else the PHP code to validate the form will not work.

<form id="contactform" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
 <fieldset><legend>Contact Form</legend>
	<div>
	 <label for="cfname">Name: <em>(required)</em></label>
	 <input type="text" name="cfname" id="cfname" size="30" />
	</div>
	<div>
	 <label for="cfemail">Email: <em>(required)</em></label>
	 <input type="text" name="cfemail" id="cfemail" size="30" />
	</div>

	<!-- Add any more form fields that you want to add here -->

	<div>
	 <label for="cfmessage">Your Message: <em>(required)</em></label>
	 <textarea name="cfmessage" id="cfmessage" cols="30" rows="8"></textarea>
	</div>
 </fieldset>

 <div><input type="submit" value="Submit" name="cfsubmit" id="cfsubmit" /></div>
</form>

To explain a couple of points.

1. The action uses $_SERVER['REQUEST_URI']. This will echo out everything after your domain name that’s in the address bar of the contact page. This then means that if your contact page was at /contact-me/ or /?page_id=4 it would put either of these into the action without a problem.
2. The field name attributes have ‘cf’ in front of them to protect against clashing with reserved variable names in WordPress. Use a field name value of ‘name’ and your form won’t work.
3. For accessibility, ensure that the value of the for attribute in the label tag matches the value of the id attribute in its corresponding input/select/textarea tag.

Style the Form

For those who are not sure of styling their form, here’s some recommended CSS code:

fieldset {
width: 500px;
border:none;
border-top: 1px solid #999;
padding: 10px;
margin-top: 10px;
}
legend { font-weight: bold; padding: 0 5px; }
#contactform div { margin: 5px 0; clear: both; }
#contactform label { width: 150px; float: left; margin-right: 10px }


Next week I’ll go through the validation code that we’ll use to ensure your form is secure and protected.