Contact form 7 is a WordPress plugin for building forms, it is one of the most popular and one that I use on this site and a few others. I really like the AJAX messages it gives to the users without refreshing the page. Skip the prose and go straight to the code.
I have applied some CSS styling to the submit button so that it looks like other buttons on the site, in this case the send button on the contact form in my contact page. I have Googled it and there seems to be a fair amount of people struggling with the issue and putting ways to solve the problem forward, I have tried a few but some were either too complicated or didn’t work for me.
My best solution was to create a CSS style in the main WordPress theme stylesheet and then call the style from the plugin itself. This isn’t the most elegant solution but it works, the only problem is every time the plugin is updated (around once a month in the past few months) it wipes my style. So in order to update the plugin I need to go over the process again, sigh, worse still if there isn’t documentation on how to do it, it takes about half the time it takes to write this post to go and look for what I’ve done not long ago, so here it is, it may help some of you.
Yes, yes nice story but I do I do it? I hear you gasp impatiently. Patience grasshopper WordPress wasn’t built in a day. OK, let’s pretend the post begins on the next line.
How To Style the Contact Form 7 Submit Button for Real!
- Create your button style in the main stylesheet for your WordPress theme
- Go to >> Plugins >> Editor >> Contact Form 7
- Now just add [class=”button”] onto the [input tag] and you’ll get this:
See code below for the blue button with round corners, you may need far less code than that.
.button {
background:#05A1F5 ! important;
border:1px;
color:white ! important;
font-weight: bold ! important;
font-size: 11px ! important;
border-radius: 2px;
height: 30px ! important;
behavior:url(border-radius.htc);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
}
Update: If you have the plugin 3.4 version see the update 2 at the bottom of this page.
Now locate “submit.php” and look for the line of code below:
$html = ' <input type="submit" value="' . esc_attr( $value ) . '" />';
An easy way to do this is to hit CTRL+F and type “send“, since it is the only instance of “send” on that page it will take you there pronto.
$html = ' <input class="button" type="submit" value="' . esc_attr( $value ) . '" />';
All you’ve got to do the next time the plugin is updated and destroys your hard work is to add class=”button” as in step 3 above and you’re away, 3 clicks and 14 characters that’s all!
You may also want to bookmark this page for future reference.
Happy contact forming…
Ha and use the comments below for questions or comments related to this post.
UPDATE 1: after a few thousand views on this page, I realise that some of you may not be aware of the best practice for making changes to live wordpress themes, as in changing the stylesheet as suggested above. It is a good idea to understand and create a child theme, this will enable you to then update WordPress and your theme without losing the changes made. The best way to learn is to go through the page linked above and do it by hand, the lazy way to create a child theme would be using a plugin such as One-Click Child Theme.
UPDATE 2: 09/05/13 A new version of this plugin 3.4 was released today and the solution above no longer works, there’s also a requirement of WordPress 3.5 for the new plugin version.
It now works following the solution from Peter Towner (see comments below)
I just got the button style to work with the 3.4 version by.
1. following your section (1) code into style.css , then using the class section on the button form in CF7. The Button code then lookes like this:
[submit class:button "Send"]
