Title: [Plugin: Contact Form 7] Css style submit button after send
Last modified: August 20, 2016

---

# [Plugin: Contact Form 7] Css style submit button after send

 *  Resolved [coding4fun](https://wordpress.org/support/users/coding4fun/)
 * (@coding4fun)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-css-style-submit-button-after-send/)
 * Is there a way to style the submit button after the form has been sent? I have
   a horizontal arrow. I want to hit submit and have the submit icon change to a
   vertical arrow pointing down. Can this be done and if so how?
    Thanks
 * [http://wordpress.org/extend/plugins/contact-form-7/](http://wordpress.org/extend/plugins/contact-form-7/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [biswajeet](https://wordpress.org/support/users/biswajeet/)
 * (@biswajeet)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-css-style-submit-button-after-send/#post-3125452)
 * You need to prepare a css arrow graphics in place of the submit button and subscribe
   to jquery click events and finally adjust the css
 *  Thread Starter [coding4fun](https://wordpress.org/support/users/coding4fun/)
 * (@coding4fun)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-css-style-submit-button-after-send/#post-3125497)
 * Hey,
    So I figured this out. I gave the submit button an id and class like so.[
   submit class:firstclass id:form-submit ” “]
 * I went into my css and did this:
 * .firstclass {
    background-image: url(“/images/1.jpg”); background-repeat:no-repeat;
   background-color:transparent; height:50px; width:100px; border:0px; }
 * .secondclass {
    background-image: url(“/images/2.jpg”); background-repeat:no-
   repeat; background-color:transparent; height:50px; width:100px; border:0px; }
 * The jquery I used was the library
    `<script type="text/javascript" src="http://
   ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>` and then:
 *     ```
       <script type="text/javascript" charset="utf-8">
           $(document).ready(function(){
               $('#form-submit').click(function() {
                       $(this).removeClass("firstclass");
                       $(this).addClass("secondclass");
       	})
           });
       </script>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘[Plugin: Contact Form 7] Css style submit button after send’ is closed
to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [send](https://wordpress.org/support/topic-tag/send/)
 * [sending](https://wordpress.org/support/topic-tag/sending/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)
 * [submit](https://wordpress.org/support/topic-tag/submit/)
 * [submit button](https://wordpress.org/support/topic-tag/submit-button/)

 * 2 replies
 * 2 participants
 * Last reply from: [coding4fun](https://wordpress.org/support/users/coding4fun/)
 * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-css-style-submit-button-after-send/#post-3125497)
 * Status: resolved