WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Css style submit button after send (3 posts)

  1. coding4fun
    Member
    Posted 1 year ago #

    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/

  2. biswajeet
    Member
    Posted 1 year ago #

    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

  3. coding4fun
    Member
    Posted 1 year ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic