[Support request] Some Help with CSS for WPForms Lite

[Linda]

Hi Support,

Can you please provide some guidance on where to place the CSS WPForms Lite provides to change the colours of their Submit button background and text.

I’m trying to change some of the WPForms default CSS, which they said is:

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Their instructions said to replace the colour Hex code with the new one and place it in Additional CSS in Customizer. Here’s the code as I edited:

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #ff6e4e; /* Orange background */
    border: 1px solid #ff6e4e; /* Orange border */
    color: #ffffff; /* White text color */
}

All the container CSS seemed like too much, but I tried pasting it as above without success.

I remembered your telling me about adding the CSS class in Advanced in the block sidebar. I tried various Classes based on the above code but none worked.

Can you see what I’m doing wrong?

Thanks for your help. My CSS skills are still a bit rudimentary!

Linda

[Leo]

Hi there,

I don’t see your CSS (second block above) being added but I do this and it’s working:

div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #FAF243;
}

https://www.screencast.com/t/wsyeXajb

[Linda]

Thanks for your help, Leo. I’ll try out what you suggest and let you know how I do.

Linda

[Leo]

Sounds good 🙂

[Author]

Posts