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="/2008/08/24/create-a-contact-page-i/">
 <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.

Follow this blogger on Twitter!

Sarah Written by Sarah from Stuff By Sarah
Posted on August 24th, 2008 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx

10 Responses to “Create a Contact Page Part I”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

  1. Armand says:

    It’s another good tip to try. Thank you.

  2. Bruno Auger says:

    I never really thought about putting a contact page on my blog. I guess it is something worth doing and making it easier for [eople to contact me.

  3. Very simple form …

  4. --Deb says:

    This looks like it could be really helpful, but … stupid question #1: How do you create a php page template? I have no idea!

  5. Thanks for the tip, however apart of my lack of PHP knowledge, so far I’ve been very pleased with cforms II plug-ins.

  6. Sarah says:

    @Deb, you’ll need to read the earlier post of Page Templates – Create a Links Page for an indepth look at creating a page template.

    @Budhi, cforms II looks alright but is quite bloated codewise for a basic form. Also, my ‘WordPress Design and Coding’ posts wouldn’t amount to much if I just said use a plugin ;) These posts are for people who would rather learn how to do things themselves or at least learn how to modify what they already have. :)

Comments are closed.

Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums

Subscribe To BloggingTips Via RSS Subscribe To Blogging Tips Via Email Follow Us On Twitter Find Out More About Our Newsletter
 

Blogging Tips Sponsors

Blogging Tips Newsletter

 

Blogging Tips Sponsors

 

Latest from the Blogosphere