• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 29
  • Last Modified:

Cannot Style a WP Forms Button

Please see  web page truenasreseller.com/truenas/. Using wordpress with a Divi theme and WPForms Basic license.

The form on the right has a next button that I have been trying to style. I have tried adding this to the general theme's CSS:

div.wpforms-container-full .wpforms-form button .wpforms-page-next {
background: #2193d1;
border-width: 0px!important;
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
color: #fff!important;

I also have this already in the CSS, and it's working on the submit button:
/*** change color of wp-forms button***/
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #00aeef; /* Blue background */
    border: 1px solid #04a3df; /* Dark blue border */
    color: #fff; /* Text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */

Within WP Forms, when I click on that button, it's got an option to add CSS classes. I tried adding et_pb_button  et_pb_button_2 et_pb_module et_pb_bg_layout_dark, which is the class of the other blue buttons on the page.  Also not working.

Can you help? Thanks!
1 Solution
Chris StanyonCommented:
You have an extraa space in your your rule. Your button has a class of wpforms-page-next, so you need:

div.wpforms-container-full .wpforms-form button.wpforms-page-next

Open in new window

Notice the remove of the space between button and .wpforms-page-next
It is here:
div.wpforms-container-full .wpforms-form .wpforms-pagebreak-left .wpforms-page-button
It is in the forms CSS
Place it in your style.css and you may need to use !important on your definitions
mel200Author Commented:
Thanks so much!! Extra space, I might have never seen that. Very much appreciated!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now