Customize Ninja Form

[ccbeglin]

I’d like to add some custom styling to my ninja form. I will download the layout and styling add-on if needed, but from perusing some forums it looks like some of the changes I want to make won’t necessarily be included with that add-on.

I’d like to customize the styling of the submit buttons on my forms (to match the rest of my site…pill shaped, blue background with white text, reverse on hover). I’d also like to change the font color of the forms to match the dark navy on the rest of my site (instead of the current black), and to make sure the “Fields marked with an * are required” text is in line with the form (it’s currently too far to the left).

The basic Get in Touch form I am currently playing with is at this url: http://pacify2dev.wpengine.com/get-in-touch/

Can someone please help me with the custom css I should add to my theme to make these edits? Thanks!

[paul.r]

Hi,

To achieve that, you can add this in Theme Options > CSS

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
    background: #5fcae8;
    border: 0;
    color: #fff;
    border-radius: 8.35em;
    padding: 0.7em 2em 0.6em 2em;
}

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

.nf-field-label label {
    color: #6f59a5;
}

You may change the color and background as you like.

Hope that helps.

[ccbeglin]

Thank you! That successfully changed the shape of the button and the font color of the labels, but I can’t seem to change the color of the button. I have entered the following code:

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
background: #5fcae8;
border: 0;
color: #ffffff;
border-radius: 8.35em;
padding: 0.7em 2em 0.6em 2em;
}

.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover {
background: #6f59a5;
color: #ffffff;
}

.nf-field-label label {
color: #2c3347;
}

I would also like to push the “Fields marked with an * are required” to the right so it is in line with the form fields.

Thanks so much for your help!

[Joao]

Hi There,

Please add the following code to Theme Options CSS

.nf-form-content input[type=button] {
background-color: red !important;
color: white
}


.nf-form-content input[type=button]:hover {
background-color: blue !Important;
color: white
}

To push the labels to the right you can add:

.nf-form-content label {

    margin-left: 2px;
}

Hope it helps!

[ccbeglin]

Thank you so much! Everything now looks as it should, except that I can’t get the “Fields marked with an * are required” to align correctly (even with the margin content label margin css). What’s strange is that label is only pushed to the left of the form on the user-facing side…it looks right on the backend (see attached screenshots):

Desired alignment (as visible in Cornerstone):

Alignment as visible on the website.

Any help on this last piece would be greatly appreciated! Thank you!

[Prasant]

Hello @ccbeglin,

Thanks for updating thread.

Please add following CSS under X > Theme Options > CSS to fix label alignment:

.nf-form-fields-required {
    margin-left: 100px !important;
}

Thanks.

[ccbeglin]

Wonderful, I am all set now. Thank you as always for the awesome support!

[Prasant]

You are most welcome.