How To Change Style Contact Form 7 Send Button

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 actually like the AJAX messages it gives to the users without refreshing the page. Skip the prose and go straight to the code. (this link but works after unlocking the content below). Thank you.

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 accept Googled information technology and there seems to be a fair amount of people struggling with the issue and putting ways to solve the trouble forward, I have tried a few merely some were either too complicated or didn't piece of work for me.

My best solution was to create a CSS style in the main WordPress theme stylesheet and and then call the style from the plugin itself. This isn't the near elegant solution but it works, the simply trouble is every time the plugin is updated (around in one case a month in the past few months) it wipes my way. So in society to update the plugin I need to become over the process again, sigh, worse still if there isn't documentation on how to do information technology, it takes about half the fourth dimension information technology takes to write this mail to go and expect for what I've done not long ago, so here it is, information technology may help some of y'all.

Yes, yeah prissy story simply how do I do it? I hear yous gasp impatiently. Patience grasshopper WordPress wasn't built in a twenty-four hour period. OK, let's pretend the post begins on the next line.

How To Way the Contact Form 7 Submit Push button for Real!

Create your button style in the main stylesheet for your WordPress theme

See code below for the blue button with round corners, yous may need far less code than that.

            .button { background:#05A1F5 ! of import; border:1px; color:white ! important; font-weight: bold ! important; font-size: 11px ! important; border-radius: 2px; acme: 30px ! important; behavior:url(edge-radius.htc); -webkit-border-radius: 2px; -moz-edge-radius: 2px; -khtml-border-radius: 2px; }

Update: If you lot have the plugin 3.4 version come across the update 2 at the bottom of this page.

Get to >> Plugins >> Editor >> Contact Form 7

Now locate "submit.php" and wait for the line of code below:

            $html = ' <input type="submit" value="' . esc_attr( $value ) . '" />';

An like shooting fish in a barrel way to do this is to hit CTRL+F and type "ship", since it is the but instance of "transport" on that page information technology will take you there pronto.

At present simply add class="push button" onto the input tag and you'll become this:

            $html = ' <input class="button" type="submit" value="' . esc_attr( $value ) . '" />';

All you've got to exercise the next fourth dimension the plugin is updated and destroys your hard work is to add course="button" as in step three above and you lot'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 utilise the comments beneath for questions or comments related to this postal service.

UPDATE 1: subsequently a few g views on this page, I realise that some of you may not be aware of the best do for making changes to live WordPress themes, equally in changing the stylesheet as suggested above. It is a good idea to understand and create a kid theme, this will enable y'all to and then update WordPress and your theme without losing the changes fabricated. The all-time way to learn is to go through the folio linked above and practice it by mitt, the lazy mode to create a kid theme would be using a plugin such as Ane-Click Child Theme.

UPDATE ii: 09/05/xiii A new version of this plugin 3.four was released today and the solution to a higher place 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 push manner to work with the three.4 version by.

1. following your department (1) code into style.css , then using the class department on the button form in CF7. The Push code and so looks like this:
[submit class:push "Transport"]