Style Ninja Form Send Button

  • Hi,
    I am fairly new to creating sites and creating them with WordPress, so please simplify your response as much as possible, please. =) I’m trying to style a ‘Send’ button on a Ninja Form on this page https://ahealthymommy.com/contact-me/ to look like the button on this page: https://ahealthymommy.com/about-me/, hover state and all.

    I can change things like font size, padding, border radius, but when I try to change the colors of the button itself, no styles get applied. Can someone please give me a clue to what I’m doing wrong?

    Thanks,
    Steve

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Steve,

    To change your ninja form button styling is very simple, just add this css code below.

    #ninja_forms_field_5 {
    background: #ff005c !important;
    box-shadow: none !important;
    text-shadow: none;
    border: 0;
    transition: background 0.2s ease-in-out;
}

#ninja_forms_field_5:hover {
    background: rgba(255,0,92,0.5) !important;
    border: 0;
}

    You have to add !important at the end of the css rule to force applied your custom styling.

    Regards,
    Septian

    Thread Starter stephenippolito

    (@stephenippolito)

    Thank you Septian, that worked perfectly!

    –Steve

    Hello!
    I happened upon your thread, as I am also using Ninja Forms. My issue however, is that after the send button, there is a random text box that pops up. I have provided a link to the problem. https://nashvillebarnwedding.ashleylawal.com/contact-us/

    Do you know if there is a specific code or fix in order to remove this box?

    Thanks for any help you can provide.

    Ashley!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Style Ninja Form Send Button’ is closed to new replies.