I needed a contact form for VoodooPress. Normally I use cforms. It’s very powerful, but it seemed like too much for a simple form. I decided to give the Contact Form 7plugin a try this time. I came across a few challenges getting it set up perfectly with my twentyten child theme. But it was a cool learning experience. Let’s take a look at what I did. A lot of this information may help you on themes besides twentyten as well, it’s just focused on that.
Just a note, something is happening to the displayed code below that I can’t figure out. Certain bits of code are being parsed into the number 1. Where you see that, all that is missing is the bit of code from the CF7 plugin which displays the field. I hope you can still follow along with this.
Obviously the first step here is to install and activate the plugin. Then go ahead and set up your form. You can stick with the default, or you can make your own. I’m not going to go into a lot of detail on configuring the form, as there is plenty of info on their website about that. But one thing to note is that you may wish to change the layout of your form a little. I really didn’t like the default layout. Here is the code you are given:
<p>Your Name (required)<br />
</p>
<p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
</p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>
It didn’t seem all that semantic to me, so I went ahead and redid it. You really only need to keep the stuff in square brackets, the rest is up to you. So here is the above form layed out again in a manner I prefer.
<fieldset class="name"> <label>Your Name (required)</label> </fieldset> <fieldset class="email"> [email* your-email] <label>Your Email (required)</label> </fieldset> <fieldset class="subject"> <label>Subject</label> </fieldset> <fieldset class="message"> [textarea your-message] <label>Your Message</label> </fieldset> <fieldset class="submit"> [submit "Send"] </fieldset>
Of course you don’t need to follow along with that, I just wanted to show you that you are free to code away in the plugin’s form edit area as much as you like. Also, the classes aren’t necessary on the fieldsets, it can just say fieldset. I put them there out of habit in case I want to to style each later down the road. I don’t even use them right now.
After I set up the form, I noticed the layout completely sucked to put it mildly. We have 3 major problems here for controlling our own layout. Even though we are using a child theme of twentyten, twentyten’s form css is acting on our form. Also, Contact Form 7 has it’s own styling. And finally there is an autop feature, which adds paragraph and linebreaks into the source.
The first thing I wanted to do was get rid of twentyten’s influence. This is quite easy. There are many ways to accomplish the same thing here, but the goal is to make sure the form you put on your page is no longer inside of the entry-content div class. The easiest way I thought was to make a page template. If you aren’t familiar with page templates, read up! They are very useful. This page template is a combination of twentyten’s (from WP 3.1) page.php and loop-page.php. I just combined everything into one file. I only changed one line here. I changed the div class=entry content here:
<h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?>
To read div class=”form-content”. I am using this page only for the contact form, so I just needed to get rid of entry-content as twentyten styles forms within entry-content. If I am not being too clear, or you just wanna see what I did, take a look at the full template
<?php
/*
Template Name: Contact Form
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="form-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
You can just save that as a new file in your child theme called contact.php, and apply it to a page, and you have solved a big part of your styling problem.
Next up is Contact Forms 7 styling. We can get rid of that super easily. Just plop this down into your functions.php:
//DEREGISTER CONTACT FORM 7 STYLES
add_action( 'wp_print_styles', 'voodoo_deregister_styles', 100 );
function voodoo_deregister_styles() {
wp_deregister_style( 'contact-form-7' );
}
Now if you plan to let Contact Forms 7 handle your styling, that’s cool. But I wanted to do my own. And yes, I will share that with you shortly as well. But remember, after the previous 2 steps, you will have no css on your form. It’ll look narsty. But that’s cool. Let’s fix the last problem and then you can get to work on styling. I’ll show you my own css for my form, chock full of css3 goodness.
OK, now twentyten’s default form styling doesn’t have us in it’s clutches. And we are free of Contact Form 7’s default styling. Why does the form still seem like it has some styling? It’s because there is an autop feature that automatically inserts paragraph and line breaks into your source code. If you view your output source from within the browser, you’ll see em. Let’s get ’em! You’ll need to use ftp or a file manager with your host to accomlish this step. We are going to edit wp-config.php. My rule here, never touch this file without backing it up first. Got it backed up? Good! You just need to scroll down and find the stop editing happy bloggin line towards the bottom, and add one line of code above that line so it looks like this:
define ('WPCF7_AUTOP', false ); // set to false to remove <br> tags
/* That's all, stop editing! Happy blogging. */
And that my friends is it as far as stripping away outside influences off of your Contact Form. If you check out your form now, you’ll truly hate it. No styling at all! Well, you are now free to add your own styling to your child theme’s style.css, and have it actually work as you expected. Wanna peek at mine? Sure thing! Like I said earlier, it’s chock full of CSS3 goodies. Shadows, Alphas, Gradients, even animations for webkit browsers. I feel they are a good combination of bold but not over the top. If you haven’t played around with CSS3 yet, there’s good news. Everything degrades nicely for browsers that don’t support it yet. It is very cool on the ones that do, and it looks like a nice clean form on browsers like IE. You can see it yourself on my contact page. Anyway, here’s my css, please note, this will only work if you laid out your form as I did above! You can have different itmes than I do of course, I actually have many more than that. Just the layout style needs to match.
/* CONTACT FORM 7 SPECIFIC STUFF*/
.wpcf7 {
margin-left: 50px;
background: #9e9786;
background: rgba(158, 151, 134, 0.6);
padding: 15px;
border: none;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
.wpcf7-form fieldset {
margin: 0 0 10px 0;
}
.wpcf7-form fieldset label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
margin-left: 10px;
}
.wpcf7-form fieldset:last-child {
margin: 0;
}
.wpcf7-form fieldset input[type="text"],
.wpcf7-form fieldset textarea {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
background: #FFFFFF url('images/grad.jpg') left top repeat-x;
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.wpcf7-form fieldset textarea {
width: 430px;
}
.wpcf7-form input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
background-image: -moz-linear-gradient(0 100% 90deg, #fff, #bbb);
background: #FFFFFF url('images/grad.jpg') left top repeat-x;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wpcf7-form fieldset input[type="text"]:focus, .wpcf7-form fieldset textarea:focus,
.wpcf7-form fieldset input[type="text"]:hover, .wpcf7-form fieldset textarea:hover {
border: 1px solid #401f1f;
-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
-moz-box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
box-shadow: 0 0 12px rgba(64, 31, 31, 0.5);
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.2);
}
50% {
-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.9);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(64, 31, 31, 0.2);
}
}
.wpcf7-form fieldset input[type="text"]:focus,
.wpcf7-form fieldset textarea:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
.wpcf7-form fieldset input[type="submit"]:hover,
.wpcf7-form fieldset input[type="submit"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
That was an eyefull eh? A lot of cool stuff on there to check out. Google is your friend if you don’t know much about CSS3 or styling forms. It’s where I learned everything. And a little note, my css will style all Contact Form 7 forms cross site. If you want to target individual forms, you will need to swap out .wpcf7-form for the form specific ID you get for each form. You can see it in your browser source.
That’s it for cleaning up CSS influences and getting your form styled. As a little bonus for those of you who stuck around to the very end, here’s a performance improvement. By default, Contact Form 7 loads it’s javascript on every page. We don’t need it loading if there is no form on the page. Check out this little snippet for your functions.php file:
//DEREGISTER CONTACT FORM 7 SCRIPTS ON ALL PAGES WITH NO FORM
add_action( 'wp_print_scripts', 'voodoo_deregister_javascript', 100 );
function voodoo_deregister_javascript() {
if ( !is_page('contact-us') ) {
wp_deregister_script( 'contact-form-7' );
}
}
That works for me. It only loads the scripts on my contact form page, which is named ‘contact-us’. You’ll obviously need to swap that out for your page name. If you have more than one page, that’s cool, just be sure to put them in an array, like:
//NOTE this is just one line from the above block to illustrate using the array
if ( !is_page( array('contact-us', 'contact-them', 'contact-someone-else') ) ) {
And that’s it. There you have the ins and outs of Contact Form 7 and using it in a twentyten child theme. I hope you learned something. I know I did today!