contactform

Configuring Contact Form 7 to Work Perfectly With a Twentyten Child Theme

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 7 plugin 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 />
    1 </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    1 </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">
 1
<label>Your Name (required)</label> 
</fieldset>

<fieldset class="email">
 [email* your-email]
<label>Your Email (required)</label>
</fieldset>

<fieldset class="subject">
 1
<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!

36 thoughts on “Configuring Contact Form 7 to Work Perfectly With a Twentyten Child Theme”

  1. Your post is very timely for me, exceedingly well-written and thorough. Thank you so much for taking the time to share what you did. I don’t have much time to experiment so your instructions will help me a lot! :-)

  2. Great, I never though about using a contact plugin before. I used to make a simple php form, but I can see all the potentially with a good contact plugin now. However, I would find it better to make a built-in page where one could retrieve the form contents and delete them as there are been responded. I guess that will be cool for a client, since the whole team can consult the form contents and be on the same page.
    Thanks, I will exploit that idea some time later.

    1. Ya, I was going to build my own form, but I figured why bother? CF7 is simple, and its been around for a while. Just figured it would be simpler to use it for my form. CF7 has a partner plugin, http://wordpress.org/extend/plugins/contact-form-7-to-database-extension/ which puts all contact form submissions into the DB. It used to just have some simple shortcodes, but the last update it got a shortcode builder. Basically allows you to display whatever you want from CF7 onto a page.

  3. This is a great resource – thank you! I am also in the process of “enhancing” a Contact Form 7. I really like to make use of fieldset, legend, label, etc… Can make for a really nice looking form (love CSS3 as well).
    Just a little unsure about the PHP forms I need to modify. Was always instructed to touch as little of the PHP files in WordPress as possible. In my case we also started with TwentyTen and then made a child theme. Can I just start adding classes and CSS to my child theme’s style.css file, or will my form not know to look there if I don’t address the PHP file first? Sorry for the lengthy question…

    1. Your style.css in your child theme is always loaded. So anything you add to it will affect the look of your form. One of the problems I had when working with twentyten was that there are already some default form styling set in the parent style.css.
      That’s why in the tutorial above, I made a page template specifically for my contact form. That way I could change the entry-content div to form-content. It removed all of the parent styling influence from my form. Touching the php files in the parent theme is definitely a no-no. However, anything you do in the child theme is safe.
      So basically, you can set up the contact form in any manner you like. You can use it in the default page template, or you can make your own page template as I did above, which is simply a copy of page.php out of twentyten, moved to my child theme, with the page template header added to it, and the change of the entry-content div.
      The style.css in your child theme will always apply. And you are also safe to mess with any php code, in your child theme. http://vudu.me/child has more info about child themes if you’d like that too.

  4. Hi Rev. Voodoo,
    Having taken a stab at the contact form I see what you mean about existing CSS attributes affecting my form.
    I started by building my form in a HTML editor, adding personalized CSS styles where needed. I then plugged the form HTML into my Contact Form 7 plugin editor. I then copied my CSS styles into my style.css.
    Some of the styles took, but others were being trumped by the entry-content family of styles. I’ve been slowly but carefully deleting the legend, fieldset and label from the entry-content selectors. I figure this is safe; if I ever find the need for a second form I can make sure it used the dedicated form selectors I have created.
    I imagine this is the challenge faced when trying to modify an existing Theme…some CSS you want to keep universal, others you want to be specific.

    1. Yeah, it’s always a challenge. That’s why if I’m creating pages where I need my custom css, I always make a page template with the entry-content div renamed (or whatever the main div is called depending on the theme). That way I have a template I can use over and over that is free from style.css influence.

  5. Right now I’m mixing standard HTML with then shortcode from the Contact Form 7…not suire if this is kosher, but through testing it seems to work.

  6. I’d really love to do this, but it didn’t work for me. It may be due to my lack of coding knowledge, but here’s what happened:

    To remove CF7 styling, I copied the Twenty Ten functions.php file, added your code to the bottom of the existing code there, then uploaded that into my child them as a replacement for functions.php. What happened is that the code appeared printed at the top of every site page. I’d like to put a palm to my head and realize my error, but so far I don’t get it.

    Does the code need to go into a particular part of functions.php, perhaps? I’m on hold for this at this point.

    1. Sure, I can help unconfuse you here. Functions.php is a special file. In your child theme, php templates for display such as header.php, index.php, etc load instead of the parent twentyten theme. So, if your child theme has an index.php it loads, if not, the twentyten theme’s is used.

      But, functions.php is different. Your child theme loads in addition to the parent theme. So you cannot copy twentyten’s functions.php to your child theme. The would register the various functions twice. All you need to do in your child theme, is start with a blank functions.php and add code to it to modify twentyten as you see fit.

      The important thing is to add your code after an opening php tag. So your functions.php file would look like:

      <?php
      // that's the opening php tag above
      // now you add any code you like after that
      function making_stuff_up {
                    $stuff == goes-here;
      }
      do_action ('wordpress', 'making_stuff_up');
      
      // and so one, just keep adding code
      

      Does that help at all?

      1. It certainly did help, Voo. My PHP knowledge is pretty lacking, but you put me on the right track and it all looks good now. Next, I’ll be tweaking the form a little here and there until it’s just like I want it.

        Thanks for the reply.

  7. One last thing Rev,

    If I go the route of making a new pape.php and changing the div to “entry-content”, would that get rid of the automatic and that CF7 likes to put into the rendered form?
    I found a fix by putting this script int the wp-functions.php:
    define( ‘WPCF7_AUTOP’, false );
    Of course if I ever update WordPress all the unwanted line breaks are back….

    1. First up, there is no need to ever edit core files. The only functions.php you ever touch is the one in your theme. If you look back at my tut, you will see I use that exact line of code, except I put it in my wp-config.php file, which never gets touched on an upgrade! Much better choice. You wouldn’t make a new page.php, you’d make a copy of it and name it something else, as describe in my tut. Then put the page template header in place, and only assign that page to contact form pages. Doing that will not stop any auto insertion of code from WP or CF7, all it does is remove the styling influence from the theme over the form elements, so that you can freely use css without having css conflicts.

    1. Sure thing! I had to stumble through a lot of stuff through my years with WP. I broke it A LOT! Just trying to help people whenever I can. All of my tutorials are written as a result of me screwing something up, or having to Google for 4 hours to figure out how to do something. I’m glad I can help in any way!

  8. Heeey! :)
    Its not really a subject of this thread, but maybe you can help…
    Is there any way to configure CF7 to post user uploaded picture to a post?
    I mean….like – user clicks on a button to add image and upload it, and then CF7, instead of sending it to email address, posts it to that page?
    Sorry for my bad English :)

    1. Nothing I can think of that can be done even remotely easily. It would probably require more coding than what is included in CF7. There are other post from front end plugins which could probably help you. I personally use Gravity Forms to do that, but it costs $$.

  9. You my friend are a genius. Thank you VERY much for this! Spent all day on this yesterday, trying to work it out by myself. If only I found this sooner, still I’m glad I’ve found it now. :D

    Now to get customising!

  10. Hi.
    First thanks for the great post.
    Second – its not so great for me.. :( It shows the form but when i press “Post Review” it does nothing. I have done everything that is here, though i have one doubt – the content (code) you say it should go to the “loop” – you mean to “loop.php” of the theme…?

    One more q. – the thing i would use frontend form is for making users of my blog offer and sell their own products – the think more to add is price and maybe shipping price. and little bit more.

    Anyway, I would be thankfull for any help…
    Bye from eu,
    Nik.

  11. Awesome post, very helpful.

    I have tried applying custom CSS to different forms by swapping .wpcf7-form with the actual ID of the form eg: .223 but it doesn’t seem to work. I seem to lose all styling for the forms. Do you have an idea of what i am doing wrong.

    /* CONTACT FORM 7 FORM 223 SPECIFIC STUFF*/
    .223{
    margin-left: 0px;
    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;
    }
    .223 fieldset {
    margin: 0 0 0px 0;
    }
    .223 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;
    }
    .223 fieldset:last-child {
    margin: 0;
    }
    .223 fieldset input[type=”text”],
    .223 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;
    }

    .223 fieldset textarea {
    width: 215px;
    }

    .223 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);
    }
    .223 fieldset input[type=”text”]:focus, .223 fieldset textarea:focus,
    .223 fieldset input[type=”text”]:hover, .223 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);
    }
    }
    .223 fieldset input[type=”text”]:focus,
    .223 fieldset textarea:focus {
    -webkit-animation: pulse 1.5s infinite ease-in-out;
    }
    .223 fieldset input[type=”submit”]:hover,
    .223 fieldset input[type=”submit”]:focus {
    -webkit-animation: pulse 1.5s infinite ease-in-out;
    }

    1. I am looking through the source of a contact form I have… I don’t see any instance of a class number being applied to a form. Where are you getting that class .223 from? If I look at my source, my form is identified as:

      <div class="wpcf7" id="wpcf7-f170-p158-o1"><
      

      which would allow me to target either .wpcf7 or #wpcf7-f150-p158-o1. Let me know what you are trying to target… or hit me up with a link to your form, and I can investigate if you like

      1. Thanks very much for your help I was being so stupid and not targeting specific items with specific CSS ids. I was trying to use the form ID instead in a stupid way. Looking back I can’t understand why I tried that, I misunderstood your post and didn’t use my brain when trying to implement the form ID.

        Sorry to have wasted your time.

        1. Not a waste of time at all! I’m glad we could get things straightened out! It’s easy to to go about things the wrong way sometimes…. especially when working through a problem!

Leave a Reply