TechTipsApp

Technology tips blog

  • Articles
    Categories
    • Tech news
    • Internet
    • Social Network
    • Google
    • Geeky Tips
    • Android
    • Windows 10
    Top Posts
    • Install Windows XP from USB
    • Install Windows 7 from USB
    • Open Facebook When It's Blocked
    • Partition Hard Drive Without Formatting
    • Reset Windows 7 Password
    • About
    • Contact
    • Privacy policy
    • Advertise
    • Terms of Conduct & Copyright Policy

Install Contact Page in WordPress Blog Without Any Plugin

Tanmay WordPress 25 Comments

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?

Post Tags: Blog, Contact, Plugin
Similar Articles from This Blog
How to Find My Contacts on Google Map
Auto Refresh Twitter Page for New Tweets
Auto Refresh Twitter Page for New Tweets
P3 Plugin Review: How to Improve WordPress Loading Speed
P3 Plugin Review: How to Improve WordPress Loading Speed
How to Configure MaxCDN without Any Plugin in WordPress
How to Configure MaxCDN without Any Plugin in WordPress
How to Use Google Publisher Plugin for Adsense in WordPress
How to Use Google Publisher Plugin for Adsense in WordPress
Get Free SMS Alerts for New Comments at Your Blog
Get Free SMS Alerts for New Comments at Your Blog

Comments

  1. Pavan Somu | Techvilla.Org :

    By this we can reduce some burden of page load and I have a doubt. Is this blog contact page created by this procedure. If so, there was a small loop hole in it. There was no subject line.

    Reply
  2. Tanmay :

    @Pavan,
    No doubt this procedure reduces page load time. If you have the contact page created by any plugin like Contact page 7, then you can check each page source by pressing Ctrl + U and see that some extra CSS scripts of the contact page are always present in each page though you are not opening the contact page. By this procedure the Contact page script loads only when the contact page is opened.
    Yes this blog contact page is created by this procedure. You are write and I’ll keep that in mind when redesigning my site.
    Thank you for your valuable comment.

    Reply
  3. Arjun Pakrashi :

    what you just wrote is itself a plugin.

    Reply
    • Tanmay :

      @Arjun,
      Generally, the plugins add some extra scripts in each pages, although you do not open the contact page. But this method avoid those scripts from loading in each page. The contact page script is loaded only when you open the contact page. Anyway thank you for your comment.

      Reply
  4. Arjun Pakrashi :

    Ya, manual tweaking and tuning is very good, and can be customized as per someone’s need.

    Reply
  5. Emily :

    Ya, manual tweaking and tuning is very good, and can be customized as per someone’s need.

    Reply
  6. coder :

    Hi there, thanks for the tutorial.
    However, have you checked the finished code?
    It has errors:
    ‘ . “rn” . ‘Reply-To: ‘ . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>
    That code sits on top of the form when finished? Missing some code in the top part of the PHP code. What would you recommend?

    Reply
  7. Tanmay :

    @Coder,
    I’ve double checked the above code and its is working fine. I recommend you to copy the whole code first in notepad then copy again copy from the notepad to paste in your theme template. By the way my contact page which is also created by using particularly the above codes is okay. Thank you for your comment. Keep coming.

    Reply
  8. Tom Dellany :

    I use Contact form 7, and I’ve not noticed any significant slowdown. Do you have any tests, or benchmarking that you used to determine the speed loss?

    Reply
  9. Tanmay :

    @Tom Dellany,
    You can try http://tools.pingdom.com/fpt/

    Reply
  10. Tanmay :

    @ Olli: Happy to know that I could help you. Keep touch with us. Thank you.

    Reply
  11. sariyanta :

    where should i put the contact.php file?

    Reply
  12. Tanmay :

    @Sariyanta: In the theme folder. For instance /public_html/wp-content/themes/your_theme/.

    Reply
  13. Einna :

    Thanks for the share. This article will surely be very helpful. Sometimes if you want something to be done right you’ve got to do it yourself

    Reply
  14. Udegbunam Chukwudi :

    This tutorial helped me load contact form 7’s script in one page only 😉 http://technicallyeasy.net/2010/08/how-to-load-the-contact-form-7-script-for-a-contact-page-only/

    Reply
  15. Tanmay :

    @Chukwudi: Thanks for sharing the link. obviously it will help the contact page 7 user. But I wanted to create the contact page my self and add the stuffs that I need.

    Reply
  16. yashmistrey :

    but it’s not working in my site as i am using smtp for my site php email not working how to add smtp class in this ?

    Reply
  17. Tanmay :

    Are you using WordPress? If so then the server command will handle WordPress it self.

    Reply
  18. yashmistrey :

    you can see same contact form here
    please tell me how to add class / mailer to that contact form to run with smtp
    http://threadbarecanvas.com/java-web/creating-a-javaweb-email-contact-form/

    Reply
  19. yashmistrey :

    sorry not this form see here this one http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/#comment-12058

    Reply
  20. Tanmay :

    yashmistrey: All this methods are for WordPress blog and WordPress itself manage the server response code. Here we are just using the placeholder for those codes.

    Reply
  21. Martin :

    Everything works fine except german umlauts like äöüß. Any hint on this?

    Reply
  22. Jake :

    Great post and I do think catswho copied this, but this has a honeypot which makes it superior. Is there an easy way to have a red border on the error fields rather than displaying text?

    Reply
  23. Angelia windy :

    Message successfully sent, but i dont receive email (Already check in inbox, spam or trash). Any suggestion?

    Reply
  24. User :

    And how to send mail through wp_mail? I am configured to send via “WP Mail SMTP” and therefore the server is reconfigured – mail sent via PHP Mail is sent to spam.
    Sorry for my English

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

About Us

Tech Tips App is a technology blog, looking forward to broaden the mental horizons of technical geeks round the web. Striving hard to quench your technical thirst, we have put our best efforts on the line of exhaust to satisfy your versatile technical vocabulary.

Recently Published

  1. Partitioning Hard Drive in Windows 7 Without Formatting
  2. How to Find My Contacts on Google Map
  3. Introducing SMS Organizer by Microsoft is the Best SMS App
  4. How to Fix Windows Update When It Gets Stuck
  5. How to Get Rid of Windows 10 Automatic Repair Loop [Solved]
  6. Best Antivirus for Windows 10 (Is Windows Defender Good Enough?)
  7. Best Facebook Messenger Bots to Get more out of Messenger
  8. How to Fax a Document From Your Smartphone
  9. Top Social Media Platforms You Should Always Know About
  10. Bitcoin vs Altcoin: Where to Invest? – Guide For Dummies

© 2021 Tech Tips App All Rights Reserved  Post Sitemap