Install Contact Page in WordPress Blog Without Any Plugin

A few days ago I described about the reduction of the page load time of your WordPress blog and if you read that article thoroughly then you can find I’ve mentioned the fact about the contact form 7 plugin which participates in slowing down your page load time.

I recommend to uninstall that plugin which runs the script for every page instead of running only when the contact page is loaded. Here I’ve described the process of installing the contact page with out using any plugin like Contact Form 7.

The process is too easy and it works very fine in WordPress blog. Follow the steps to create your own contact page.

What we are actually going to do?

At first we’ll create a WordPress page template, which will contain the necessary codes of the contact form. Then we’ll create a page that uses the page template. For design purpose you have to add some CSS rules in your style.css.

The ultimate procedure

Create the WordPress page template: Open note Notepad ( you can also use any other text editor) and add the following codes.

<?php /* Template Name: Contact Form */ ?> <?php //If the form is submitted if(isset($_POST['submitted'])) { //Check to see if the honeypot captcha field was filled in if(trim($_POST['checking']) !== '') { $captchaError = true; } else { //Check to make sure that the name field is not empty if(trim($_POST['contactName']) === '') { $nameError = 'You forgot to enter your name.'; $hasError = true; } else { $name = trim($_POST['contactName']); } //Check to make sure sure that a valid email address is submitted if(trim($_POST['email']) === '')  { $emailError = 'You forgot to enter your email address.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $emailError = 'You entered an invalid email address.'; $hasError = true; } else { $email = trim($_POST['email']); } //Check to make sure comments were entered if(trim($_POST['comments']) === '') { $commentError = 'You forgot to enter your comments.'; $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } //If there is no error, send the email if(!isset($hasError)) { $emailTo = 'your email address'; $subject = 'Contact Form Submission from '.$name; $sendCopy = trim($_POST['sendCopy']); $body = "Name: $name \n\nEmail: $email \n\nComments: $comments"; $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); if($sendCopy == true) { $subject = 'You emailed Your Name'; $headers = 'From: Your Name <noreply@example.com>'; mail($email, $subject, $body, $headers); } $emailSent = true; } } } ?> <?php get_header(); ?> <?php if(isset($emailSent) && $emailSent == true) { ?> <div class="thanks"> <h1>Thanks, <?=$name;?></h1> <p>Your email was successfully sent. I will be in touch soon.</p> </div> <?php } else { ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">There was an error submitting the form.<p> <?php } ?> <form action="<?php the_permalink(); ?>" id="contactForm" method="post"> <ol class="forms"> <li><label for="contactName">Name</label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </li> <li><label for="email">Email</label> <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </li> <li class="textarea"><label for="commentsText">Comments</label> <textarea name="comments" id="commentsText" rows="20" cols="30"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </li> <li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></li> <li class="screenReader""><label for="checking">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" /></li> <li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Email me &raquo;</button></li> </ol> </form> <?php endwhile; ?> <?php endif; ?> <?php } ?> <?php get_sidebar(); ?> <?php get_footer(); ?> 

Save the document as contact.php. Now the contact page template for your site has been created.

Download the text only version.

Add some css rules:

For the design purpose add the following codes to your themes style.css

.screenReader { left: -9999px; position: absolute; top: -9999px; } .thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding: 10px; } /*****Forms*****/ ol.forms { float: left; list-style: none; margin: 0; width: 100%; } ol.forms li { clear: both; float: left; margin-bottom: 18px; position: relative; width: 100%; } ol.forms label { cursor: pointer; display: block; float: left; font-weight: bold; padding-right: 20px; width: 100px; } ol.forms input, ol.forms textarea { border: 1px solid #7E8AA2; border-radius: 3px; font: inherit; -moz-border-radius: 3px; padding: 2px; -webkit-border-radius: 3px; width: 214px; } ol.forms textarea { height: 300px; width: 334px; } ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; } .error { color: #f00; } ol.forms li .error { font-size: 12px; margin-left: 20px; } ol.forms li.textarea .error { display: block; position: absolute; right: 0; top: 0; width: 100px; } ol.forms li.screenReader { margin-bottom: 0; } ol.forms li.buttons button { background: #ff9800; border: none; color: #000; cursor: pointer; font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif; overflow: hidden; padding: 6px 3px 3px 3px; text-transform: uppercase; width: auto; } ol.forms li.buttons button:hover { color: #222; } ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; } ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; } ol.forms li.inline input { width: auto; } ol.forms li.inline label { display: inline; float: none; width: auto; }

Create the contact page:

Now you are done and ready to use the page template as a page of your WordPress blog. To do so

• Create a new page by clicking on Add New under “Pages” from the left side of your WordPress dashboard.
• Give the name of the page as “Contact us”
• Don’t write any thing in the content area.
• From the right side of the same window select “Contact form” from the “Template” drop-down box.

• Click on “Publish”.

Voila!! Your contact page has been created without any plugin. For more information visit here.