Add custom CSS to your Ninja Forms

Read below to add your own code to create styles but for a much simpler method check out our Layout & Styles Extension for Ninja Forms.

We built Ninja Forms to be extremely light weight, in some cases people may think to lightweight when it comes to terms of CSS. Ninja Forms relies almost completely on your themes styling of basic form elements. This means that the less you theme does with these elements the more it appears that Ninja Forms doesn’t look as nice as you would like out of the box. This is a common issue where theme developers don’t account for forms in their designs. But there is something you can do about it.

Ninja Forms gives you the ability to add a stylesheet or even just some basic styles to just pages that display your particular form. Here is what you would need to do.

Create a stylesheet or write some CSS to modify the appearance of your form

If you choose to create a stylesheet I suggest saving it someplace that won’t get altered by upgrades of any sort. Consider just placing your new CSS file in your wp-contents folder. Otherwise you could just echo out some css in-between some style tags. Either option will work.

Write a function that will output this newly created file or css

function YOUR_PREFIX_add_nf_styles( $form_id ) {
    if( $form_id == 1 ) {
        echo '<style>
            .ninja-forms-form-wrap{background:red}
        </style>';
    }
}

You could also enqueue a stylesheet instead by replacing the echo statement with…

wp_enqueue_style( 'YOUR_PREFIX-nf-css', WP_CONTENT_URL . '/style.css' );

 Hook your new function to the ninja_forms_display_css action

add_action ( 'ninja_forms_display_css', 'YOUR_PREFIX_add_nf_styles' );

That’s all that’s needed. Before I run through what’s actually happening let’s take a look at the completed code altogether.

function YOUR_PREFIX_add_nf_styles( $form_id ) {
    if( $form_id == 1 ) {
        echo '<style>
        .ninja-forms-form-wrap{background:red}
        </style>';
    }
}
add_action ( 'ninja_forms_display_css', 'YOUR_PREFIX_add_nf_styles' );

Here is what’s going on. When you the form loads it checks to see if the current form has an ID of 1. If it does it echoes out some simple CSS to make the container background color red, otherwise it does nothing at all.

You could use this to load a unique stylesheet for each of your forms or one for all your forms or any combination. This is obviously a basic example but will hopefully give you the power to create any style form you could possibly want.

There is a final issue that needs to be addressed. Where do you put this code. The absolute best option would be to place it in your own custom plugin.