PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Create a Contact Page Part I

Posted by on 24th Aug 2008 WordPress Coding & Design 11 comments

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.

[sourcecode language="html"]

Name: (required)


[/sourcecode]

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.

A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

View my posts Visit my homepage
Recommended Posts
EntreCard is up for sale EntreCard is up for sale 14
Control Membership Sites with Magic Members for WordPress Control Membership Sites with Magic Members for WordPress 9
Socrates WordPress Theme for Internet Marketers Socrates WordPress Theme for Internet Marketers 5
11 comments - Leave a reply
  • Posted by Armand on 24th Aug 2008

    It's another good tip to try. Thank you.
  • Posted by Bruno Auger on 24th Aug 2008

    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.
  • Posted by Dimitry Wolotko on 24th Aug 2008

    Very simple form …
  • Posted by --Deb on 24th Aug 2008

    This looks like it could be really helpful, but … stupid question #1: How do you create a php page template? I have no idea!
    • Posted by anwyn on 5th Nov 2010

      u just need to use Dreamwearver but to run a php page u need a server, create a local host by wamp
  • Posted by Budhi Mulyono on 25th Aug 2008

    Thanks for the tip, however apart of my lack of PHP knowledge, so far I've been very pleased with cforms II plug-ins.<blockquote cite="cforms is a highly customizable, flexible and powerful form builder plugin, covering a variety of use cases and features from attachments to multi form management, you can even have multiple forms on the same page!">
  • Posted by Sarah on 25th Aug 2008

    @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. :)