WordPress.org

Forums

[resolved] [Plugin: Contact Form 7] CSS Style for just Submit button (6 posts)

  1. databell96
    Member
    Posted 4 years ago #

    I'm trying to style the submit button on my contact form since it's taking all the styles from the input fields. Which I don't want.

    My form is here:

    and I see the class wpcf7-submit buttonSubmit so I tried to use styles like this:

    .wpcf7-submit buttonSubmit { width: 100px }

    or

    .buttonSubmit { width: 100px }

    Neither of which work. So what does?

  2. webjunk
    Member
    Posted 4 years ago #

    edit the Styles.css location in the plugins directory. Think you will have to add a section into it like:
    div.wpcf7-submit
    {
    color: #ff0000;
    background-color: #CC0000
    }

  3. databell96
    Member
    Posted 4 years ago #

    I just tried that. Didn't work at all.

  4. webjunk
    Member
    Posted 4 years ago #

    You know. Looking at it myself....I don't think it would work either. Its for an input field. It should be:

    input.wpcf7-submit
    {
    color: #ff0000;
    background-color: #CC0000
    }

    Sorry. I am not perfect. Just damn close....

  5. askjayson
    Member
    Posted 4 years ago #

    You can create its on CSS class and add the class name to the input field in the form.
    [submit class:submitbutton "Submit & Download Coupon"]
    Then add the styling in your css file.
    .wpcf7 .submitbutton {color:#FFF; background-color:#111;}

    The above would work for native CF7 styles if written like:
    input[type="submit"] .wpcf7-submit.submitbutton {}

    Hope this helps.

  6. databell96
    Member
    Posted 4 years ago #

    Just damn close? That's all you can hope for in this life ;-)

    Thanks to all.

Topic Closed

This topic has been closed to new replies.

About this Topic