WordPress.org

1. databell96
   Member
   Posted 1 year 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 1 year 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 1 year ago #

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

4. webjunk
   Member
   Posted 1 year 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 1 year 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 1 year 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.