How To Style The Contact Form 7 Submit 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 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!

  1. Create your button style in the main stylesheet for your WordPress theme
  2. See code below for the blue button with round corners, you may need far less code than that.

    Contact Form 7 Submit Button
    .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.

  3. Go to >> Plugins >> Editor >> Contact Form 7
  4. 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.

  5. Now just add [class=”button”] onto the [input tag] and you’ll get this:
$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"]

About Pedro Matias

A central London SEO consultant and private tutor, also specialises in WordPress web design and training. All SEO, web consulting and training approaches are centered on user experience, minimalism, speed and engineering centric design. Runs 10K for lunch most days for fun and health.
This entry was posted in Wordpress. Bookmark the permalink.
  • Petr Gorkiy

    Try Ninja Kick Form plugin to style the CF7 — http://looks-awesome.com/portfolio/wordpress-plugins/nks-wordpress-contact-form/

    No coding required. Just use the shorcode and one of design presets. :)

  • Alain

    thanks for replying. But installing Google translate should not produce some conflicts with wpml?

    • http://pedromatias.co.uk/ Pedro Matias

      wpml translates just within your WordPress, Google translate, translates an y page in the browser so there should be no conflicts.

  • Alain

    Hello Pedro,

    do you know how to translate this plugin with the translation plugin wpml?

    • http://pedromatias.co.uk/ Pedro Matias

      Not with wpml, but I recommend using Chrome with the Google translate extension.

  • Alain

    the problem is already resolved-
    thanks

  • http://pedromatias.co.uk/ Pedro Matias

    Hi Alain

    In step 3 above change class=”button” to class=”yourclassname”.

  • Alain

    Hello Pedro,

    thanks so much for the nice tutorial. I am using CF7 version 3.4.1 and have my own class for the style. How to add this class in this version of CF7?

    Thanks again

  • Lin

    Very helpful, thanks! I added width: 55px ! important; and it worked like a charm.

  • Peter Towner

    Hi Pedro. 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"]

    hope this helps

    • http://pedromatias.co.uk/ Pedro Matias

      Brilliant, that’s a community working, thanks for that Peter!

  • Pax

    I have been looking for this, thank you!!

    I have a quick question – Do you have any tips on how convert the email sent by CF7? I want it to be an HTML email.

    • http://pedromatias.co.uk/ Pedro Matias

      You’re welcome Pax

      In the plugin settings page, the second section: “Mail” >> Look for “Use HTML content type”, tick that, hit save!

      • Pax

        Aaaah that obvious little check box, it’s always the simplest solution lol

        Thank you so much Pedro! :)

        • http://pedromatias.co.uk/ Pedro Matias

          No worries :) my pleasure!

          As I use to say things like this one are obvious once we know them but not before.

  • http://pedromatias.co.uk/ Pedro Matias

    background:#05A1F5 ! important; this is the line creating the blue, make sure to include  ! important; that should solve the IE issue. 
    IE is the new IE6

    • Tomaz Stubelj

      Tnx Pedro for a fast replay.
      I have this in my css, but still no colour in IE. Pls check: http://www.firmica.si/
      Any other idea?

      • http://pedromatias.co.uk/ Pedro Matias

        Tomaz, I’m out of ideas other than recommend you ask on http://stackoverflow.com where there’s bound to be someone more up to date with IE/CSS issues.

        I remember when I first wrote this the ! important; solved the problem but in IE 8 and prior.

  • Tomaz Stubelj

    The blue colour of the button is not visible in IE 9 (in other browsers is). Can you help?

  • http://pedromatias.co.uk/ Pedro Matias

    Thanks Mark,
    Not sure why that is happening, make sure that you copy the all CSS code above, something seems to be causing a bug. Possibly the closing bracket “}”.

    Look into CSS, add the line of code below to the button and play with the number until it gets where you want it.

    margin-right:50px;

    Look into MARGIN http://www.w3schools.com/css/css_margin.asp
    And PADDING http://www.w3schools.com/css/css_padding.asp
    Or maybe even POSITION http://www.w3schools.com/Css/css_positioning.asp

    Hope that helps, if you’re still having trouble post the link to where the problem is and I will take a closer look.

  • mark

    Pedro Great post, however my button in aligned to far right. Do you know how to move to the left?

  • http://pedromatias.co.uk/ Pedro Matias

    Glad to hear it Antonio!

  • Antonio

    Thanks…it worked a charm!

  • http://pedromatias.co.uk Pedro Matias

    Thanks Alex

    Only now noticed your comment, seems that my disqus notifications were paying up.

  • Alex

    Great technique and presentation Pedro.

    I would add a line like:
    cursor: pointer;

    at the end of your class in the stylesheet, so the user can see it’s a button and it react more normally this way…

    Thanks for that page. Everything else I found was outdated, or not to the point.

  • http://pedromatias.co.uk Pedro Matias

    Not the most clear of questions but I get you, go here
    http://code.google.com/p/curved-corner/

  • koala

    I’m not sure it works on IE but it works on all IE. Is there a way to work on IE