Support » Plugin: Contact Form 7 » Contact 7 – changing colour of submit buttons

  • Hi
    I have installed various contact forms using this plug in, all look and working fine, however I cannot anywhere find where you would change the colour of the submit button (as it is currently a pea green colour which doesn’t tie in with my colour pallette).

    Any ideas please?

Viewing 2 replies - 1 through 2 (of 2 total)
  • You can try adding an ID to the button the when you insert it in your form:

    [submit id:SubmitbtnID “Submit”]

    Then in your themes (ideally child theme) custom CSS you could refer to the ID:

    /* This uses the ID you gave the button to set colours and other settings as you need them. The # makes the theme refer to the individual ID. If you wanted to affect a group of buttons, you would set a class in the config instead of an ID and refer to the class below with a . instead of a #
    */

    #SubmitbtnID{
    background-color: #d6d6d6;
    Color: #FFFFFF;
    }

    /* This changes the button look when you hover over it */
    #SubmitbtnID:Hover{
    background-color: #FFFFFF;
    Color: #000000;
    }

    I use the Avada theme and find I need to put !important on the end of my lines to force precedence.

    background-color: #d6d6d6!Important;

    Hope this helps. I am a novice but this has been working for me.

    All the best,
    Sam

    Great – thanks for your help – i’ll give it a go!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Contact 7 – changing colour of submit buttons’ is closed to new replies.