[Resolved] Change style and colour of Ninja Forms submit button

[Clare]

Hi there

Can anyone advise how to change the style and colour of the submit button on the Ninja Form contact form so that it matches the style of the buttons on the rest of the site – a circular outlined button?
Thanks

[David]

Hi there,

can you share a link to a page where i can see the Ninja Form ?

[Clare]

Hi David. It’s at https://youreasymove.co.nz/contact-us/

Thanks

[Clare]

See link above

[Leo]

Ninja form is loading their own style so typically this should be answered by the plugin’s support team.

You can try this CSS first:

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
    background: #000;
    color: #fff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Clare]

Hi Leo. That didn’t seem to work unfortunately so I’ll contact the plug in support team. Cheers

[Leo]

It should’ve worked.

If you can add the CSS in then I can take another look to see why it isn’t working.

[Clare]

Hi Leo, I’ve added in the code but since realised that I need the paid version of Ninja Forms to make style changes and I’ve only got the free one currently!

[Ying]

Hi Clare,

Try this CSS:

body .nf-form-content button, body .nf-form-content input[type=button], body .nf-form-content input[type=submit] {
    background: #020202 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    font-size: inherit;
}

[Clare]

Fantastic Ying, that’s worked! You guys are geniuses.

[Ying]

You are welcome Clare 🙂

[Author]

Posts