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 »</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; }
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?
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.
@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.
what you just wrote is itself a plugin.
@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.
Ya, manual tweaking and tuning is very good, and can be customized as per someone’s need.
Ya, manual tweaking and tuning is very good, and can be customized as per someone’s need.
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?
@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.
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?
@Tom Dellany,
You can try http://tools.pingdom.com/fpt/
@ Olli: Happy to know that I could help you. Keep touch with us. Thank you.
where should i put the contact.php file?
@Sariyanta: In the theme folder. For instance /public_html/wp-content/themes/your_theme/.
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
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/
@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.
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 ?
Are you using WordPress? If so then the server command will handle WordPress it self.
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/
sorry not this form see here this one http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin/#comment-12058
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.
Everything works fine except german umlauts like äöüß. Any hint on this?
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?
Message successfully sent, but i dont receive email (Already check in inbox, spam or trash). Any suggestion?
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