How to Create WordPress Contact Us Page

WordPress contact us page is an essential part of any business site, personal blog, or online portfolio page. A contact form lets your audience ask you for more details about your products or services. It lets you boost your site’s credibility and collect more details about your customer base. Regardless of the many benefits of a contact form, WordPress doesn’t include this element by default.

This tutorial gives step-by-step instructions on creating a contact us WordPress page with and without using contact us page WordPress plugin.

To Whom This Guide Will Be Useful?

The following guide includes easy steps on creating a WordPress contact page on your own even if you aren't a WordPress expert yet, which will be especially useful to beginner webmasters. Using this guide, you can practice your web development skills. It will also come in handy to bloggers and micro-businesses looking forward to maintaining their WordPress sites on their own and make their online resources as usable and informative as possible. No matter how skilled or experienced you are, the techniques described in this article will come in handy to you.

Why Should You Add a WordPress Contact Us Page to Your Site?

WordPress contact us page is beneficial for both business owners and their customers for many reasons:

• Your blog or business site will look more professional. That way, your audience will know they can reach you whenever they have any questions or issues related to your micro-niche.
• You can establish better communication with your audience while letting users access you whenever they want. They only need to fill out a few fields provided.
• A WordPress contact us page is a valuable source of information for brands. Feel free to decide what pieces of information users will need to share. It may be customers’ email addresses, usernames, countries, etc.
• Using a contact us page, you prevent spam attacks.

Considering all the advantages above of using a contact us page WordPress plugin, let’s discuss:

• What plugin to choose to create a WordPress contact us page;
• How to create a contact us page for WordPress using a template.

How to Create a Contact Us Page in WordPress with a Plugin

There are many contact page WordPress plugins available, so it’s easy to get lost in their rich abundance. We have chosen Contact Form - WordPress Contact Form Plugin to facilitate the decision-making that makes it easy to add a contact form to your site.

It’s a premium WordPress plugin from Codecanyon priced at $24. Unlike free WordPress plugins that are easy to find through a simple search via WP dashboard, you need to download the plugin’s archive to your PC and upload it to your site afterward. Once done, you can choose from several ways to add the contact form to your site:

• Use a WordPress shortcode that you can add to any page of your WordPress site.
• The plugin includes the Visual Composer element to create a contact us page in the drag-and-drop mode.
• You can also use a widget to add a contact form to the sidebar or footer.

You may come across many other contact form plugins in the WordPress plugin directory. Many of them are free and easy to use. If you decide to create a contact us page using a dedicated plugin, you shouldn’t face any problems.

How to Create a Contact Us Page in WordPress without a Plugin

Let’s see how to create a fully functional Contact Us page in WordPress. We will add a contact form without any plugins. Instead, we’ll create a custom contact us page template to achieve our objective.

What are WordPress Page Templates?

In WordPress, these are php files responsible for a web page’s layout and functionality (we are talking about pages and not posts). All WordPress themes come with a Page.php file which is the default page template. Page Template is an extremely powerful feature that lets developers customize themes according to their needs. In this tutorial, we’ll check how to create a custom contact us template.

Step 1 : Create a Contact Us Template

Navigate to the Theme folder, Create a Blank file and name it contact.php (you may use a different name). The php file will hold the Form HTML Markup and PHP code for processing the user input. Write the following code at the top of the php file.

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

WordPress uses this comment block to identify our Custom Page Template uniquely. Next, copy and paste the following code to the file contact.php file:

<?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 add structure to the Contact Page Template. Now, our template has footer and header sections. In the next step, let’s see how to add the content section to our page.

Step 2 : Adding HTML Form

A contact form is a simple element with standard fields. In this guide, we won’t focus on the styling part. Simply add the following code to 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 form - Name, Email, Subject and Text. In the next step, 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:

• Validation.
• Sending the Actual mail.

Validation

We use two types of validation:

• Required Field:- this will check whether the field is filled or not.
• 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. If something goes 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>";
}

Validation applied to Message Field

There is no need to apply format field validation for the message box field as we’ve already mentioned.

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

All pieces of code are pretty self-explanatory. Simply ensure that the input fields are not empty and feature the right format (no special characters are used).

Processing the Form Input

Now, our input is properly validated. We need to notify the Administrator. The following code will process the form data and will email 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

The final version of the code contained in the contact us template php file looks like this:

<?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

Open your WordPress dashboard. Create a new Page and don't forget to select the "Contact Us" template inside the page attributes box. See the snapshot below.



Now, publish the page and add it to the menu. As a result, you get a shiny, fully functional contact us page that you made without using a plugin. There are many other things that you can add to your WordPress contact us page. One thing that comes to mind is adding a captcha or some other validation to prevent spam.