Install Contact Page in WordPress Blog Without Any Plugin

Do you know that the Contact Form 7 plugin for WordPress increases the page load time? It runs the unnecessary scripts for every pages instead of running only when the contact form is loaded. It is not recommended to load unnecessary scripts in your blog pages if you’re careful about the performance of your WordPress blog. Here, I’ve described the process of installing the contact page without any plugin like Contact Form 7.
The process is too easy and it works very fine in WordPress blog. Follow the steps below to create your own contact page.

How to Create Contact Page in WordPress Without Plugin

At first we’ll create a WordPress page template, which will contain the necessary codes for 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.

Creating the WordPress page template

Open note Notepad (you can also use any other text editor) and add the codes from the following.

<?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 = 'tanmay@techtipsgeek.com';
			$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: Tanmay <noreply@techtipsgeek.com>';
				mail($email, $subject, $body, $headers);
			}
			$emailSent = true;
		}
	}
} ?>
<?php get_header(); ?>
<div class="content">
<?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'];?>" class="requiredField" />
					<?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'];?>" class="requiredField 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" class="requiredField"><?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" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" 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">Send &raquo;</button></li>
			</ol>
		</form>
		<?php endwhile; ?>
	<?php endif; ?>
<?php } ?>
</div>
<?php get_footer(); ?>

Download the text only version.
Save the document as contact.php and upload it to your theme directory. Now the contact page template for your site has been created.

Adding the CSS Rules

For the design purpose add the codes from the following to your theme’s style.css file.

.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; }

Download contact_form_css.

Creating the Contact Page in WordPress

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.
• Select “Contact form” from the “Template” drop-down box at the right side of the same window, .

• Click on “Publish”.

Voila!! Your contact page has been created without any plugin.

How to Use Contact Form 7 Plugin Scripts Only on Contact Pages

If you’re really a big fan of Contact Form 7 plugin and don’t want to leave it as it has different options to customize the contact form, there is a way to use Contact Form 7 plugin without slowing down your WordPress site.
What you need to do is to force the plugin to load scripts only for the contact pages; it should not load scripts for other pages of your blog/website which do not have any contact form. You can do it by adding the following code into your WordPress template file.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 function my_deregister_javascript() {
 if ( !is_page('Contact') ) {
 wp_deregister_script( 'contact-form-7','write-for-us' );
 }
 }
 add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
 function deregister_cf7_styles() {
 if ( !is_page(contact) ) {
 wp_deregister_style( 'contact-form-7','write-for-us' );
 }
 }

Just paste the above code into your theme’s functions.php file and you’re done.
Let us know which one do you like?