SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  CMS Wordpress How to Create Contact Page Template in Your Wordpress Theme

How to Create Contact Page Template in Your Wordpress Theme

Priyanshu Wordpress Jan 25, 2013

In this tutorial I will share a simple technique for creating a fully functional Contact Us page in the WordPress Twenty Eleven Theme.We will add a contact form with using any pugin, infact we will be aking use of page templates to achieve our objective.

What are WordPress Page Templates?

In Wordpress, page templates are php files which are responsible for the layout and functionality of a wordpress page (we are talking about pages and not posts).AllWordPress themes come with Page.php file which is the default page template. Page Template is an extremely powerful feature and it enables us developers to customize the theme to our heart's content.We will be creating a custom contact us template for this tutorial.

Step 1 : Create a Contact Us Template

Go to Theme folder , Create a Blank file and name it contact.php(its not the compulsion to use the same name ). This php file will hold the Form HTML Markup and PHP code for processing the user input.Add the following line ofcode at top of the file.

<?php /* Template Name: Contact Us */ ?>

This comment block is used by wordpress to uniquely identify our Custom Page Template.Now copy and paste the following code to in the file contact.php

<?php
/*
Template Name: Contact Us
 */
get_header(); ?>
<div id="primary">
<div id="content" role="main">
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>

With this code, we have added structure to the Contact Page Template.Our Template now has a Header and a Footer Section.We will add content section in the next step.

Step 2 : Adding HTML Form

Next we will add the html code for displaying the form. Its a simple form with standard fields. Here, I am not concentrating on the styling part.Simply add following code inside the Content Div ie (div id="content")

<form method="post" id="contactus_form">
Your Name:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Your Email:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subject:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Leave a Message:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</form>

The code is pretty self explanatory. We have used Four fields in the formName, Email,Subject and Text area. Next we will add some php code to process the form input.

Step 3: Add PHP Code for processing the Form input.

PHP code will handle two parts: 1) Validation 2) Sending the Actual mail.

Validation

Here I have used two types of validation 1) Required Field:- this will check whether the field is filled or not. 2) Field Format: this will check whether the value entered is in the desired format or not. We will apply both the conditions in all the 3 input fields except for "Leave us a Message" . Validation Logic

In our validation logic, we have used a flag variable. Its value will be either 0 or 1. If our validation is successful, the flag will be set to 1 and if some thing is wrong the flag value is set to 0. Pretty standard logic. Here is the code to implement this logic.

Validation applied to Name Field

if($_POST['yourname']=='')
{$flag=0;
echo "Please Enter Your Name<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['yourname']))
{$flag=0;echo "Please Enter Valid Name<br>";}

Validation applied to Email Field

if($_POST['email']=='')
{
$flag=0;echo "Please Enter E-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_POST['email']))
{
$flag=0;echo "Please Enter Valid E-Mail<br>";
}

Validation applied to Subject Field

if($_POST['subject']=='')
{
$flag=0;echo "Please Enter Subject<br>";
}
if($_POST['message']=='')
{
$flag=0;echo "Please Enter Message";
}

Validation applied to Message Field

As alreadysaid, for the message box field no need to apply format field validation.

if($_POST['message']=='')
{
$flag=0;echo "Please Enter Message";
}

[alert color=blue title="Note" align=center]All the code is pretty self-explanatory. It simply makes sure that the input fields are not empty and have desirable format (no special characters).[/alert] Processing the Form Input Ok, So now our input is properly validated. We now need to notify the Administrator. Following code will process the form data and will mail the details like Name, Email Subject and Message to the Administrator.We will use wp_mail function for sending emails. To know more about wp_mail, click here.

<?php
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[yourname])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[message])),"From: ".trim($_POST[yourname])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "Mail Successfully Sent";
}
?>

Final code of Contact Us Template

So this all of the code contained in contact us template file.

<?php
/* Template Name: Contact Us */
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<font color="#FF0000">
<?php
if(isset($_POST['submit']))
{
$flag=1;
if($_POST['yourname']=='')
{
$flag=0;
echo "Please Enter Your Name<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['yourname']))
{
$flag=0;
echo "Please Enter Valid Name<br>";
}
if($_POST['email']=='')
{
$flag=0;
echo "Please Enter E-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_POST['email']))
{
$flag=0;
echo "Please Enter Valid E-Mail<br>";
}
if($_POST['subject']=='')
{
$flag=0;
echo "Please Enter Subject<br>";
}
if($_POST['message']=='')
{
$flag=0;
echo "Please Enter Message";
}
if ( empty($_POST) )
{
print 'Sorry, your nonce did not verify.';
exit;
}
else
{
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[yourname])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[message])),"From: ".trim($_POST[yourname])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "Mail Successfully Sent";
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Your Name:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Your Email:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subject:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Leave a Message:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</form>
</div><!-- #content --></div><!-- #primary -->
<?php get_footer(); ?>

Final Screenshot of Contact Us page.

This is how your contact form will look like

Step 4: Using the Contact Us Template

Create new Page and inside the page attributes box don't forget to select the template "Contact Us" See the snapshot below

Now publish the page, add it to the menu and there you have a shiny , fully functional contact us page and that too without using any plugin. Now there are a lot of things which you can do. One thing which comes to mind is to add a captcha or some other sort of validation to prevent spam. How can we addCaptcha to our contact page template. ? Let us know in the comments section.

ABOUT THE AUTHOR

Priyanshu Priy

Priyanshu is co-founder of Appointzilla, a simple appointment booking plugin for wordpress. He loves internet marketing and is passionate about creating useful software products.

subscribe to newsletter