Blog

7 November 2017

How to customise styling in Ninja Forms 3

Written by Jamie Derrick

Having just spent several hours attempting to style a form built using the wonderful Ninja Forms plugin for a Wordpress site, I thought it would be a good idea to write about my findings. 

Firstly, it's worth pointing out that this quick article is written with the assumption that you have a relatively good understanding of HTML, CSS and Wordpress development. It's aim is to be the gentle nudge in the right direction you need when you've been trawling through Google trying to work out how to customise the styling of a Ninja Forms 3 (free version) form in Wordpress. Basically, it's the article I wish existed yesterday.

So my main problem was trying to customise a form to make it fit nicely within the UIKit framework. UIKit is my preferred front end framework and it's very similar to Bootstrap. This article should be just as applicable to you if you're trying to get Ninja Forms to play nicely with Bootstrap.

Ninja Forms actually makes it nice and easy to add classes to various elements of your form. I wanted a simple UIKit styled form with two columns, responsive of course with the two columns becoming one on mobiles. This is what I did:

  • In the form admin screen, go to Advanced. Then Click Display Settings. Under Advanced add uk-form to the wrapper field and uk-grid to the element field. The uk-form lets UIKit know this is a form and the uk-grid makes the form a grid so we can have two columns.
  • Over in the form fields section, for each of the fields you need styled, click the field and then expand out the display section. In the container field, add uk-width-medium-1-2 and in the element field, add uk-width-1-1. This effectively makes the field container 50% width (but 100% on mobiles) and the field itself will then take up the entire width of this.

If you're doing this with Bootstrap, then uk-width-medium-1-2 is pretty much the equivelent of col-md-6  and uk-grid is mostly the equivelent of row. However, you might want to have a play around with this.

Now you'd hope this would work. But it doesn't. You see for some reason Ninja forms likes to add its own non-standard HTML tags. Namely <nf-fields-wrap> and <nf-field>. <nf-field> was the one causing all the problems since it meant my uk-width-medium-1-2 elements weren't sitting directly under the uk-grid element as it should.

This caused a few problems. Firstly, UIKit's styling was assuming that my uk-width-medium-1-2 elements were going to be directly under uk-grid. This assumption is obvious from the CSS. Such as this bit:

.uk-grid > * {
padding-left: 15px;
}

So I had to add these extra bits in to my custom css to basically neutralise UIKit's assumption and then apply it to the correct elements:

nf-fields-wrap{
padding-left: 0px !important;
float: none !important;
flex: none !important;
margin: initial !important;
width: 100% !important;
}

.uk-grid > nf-fields-wrap > nf-field > * {
-ms-flex: none;
-webkit-flex: none;
flex: none;
margin: 0;
float: left;
}

.uk-grid > nf-fields-wrap > nf-field > * {
padding-left: 15px;
}

@media (min-width: 1220px){
.uk-grid > nf-fields-wrap > nf-field > * {
padding-left: 25px;
}
}

So that nearly works but we're still not there! For some reason, each of my grid elements seem to be falling on to a new line. Luckily we can fix that by adding this magic line of CSS:

.nf-field-container, #ninja_forms_required_items {clear:none !important;}

Hooray! Problem solved.

On my quest to discover how to do this I did a lot of exploring and found a few golden nuggets on how to change the HTML Ninja Forms spits out for each field. Unfortunately you can't get rid of the stupid nf-field tags like I was trying to do but this could still be useful:

Take a look in your wp-content/plugins/ninja-forms/includes/Templates folder. There's lots of lovely templates for all your Ninja Forms elements. Now what we can do is override these by copying them in to a folder in your template. So, create a folder called ninja-forms in your template folder and in that folder add a folder called templates (lowercase t this time). So you end up with wp-content/themes/[your template]/ninja-forms/templates

To test this out, copy the template file from wp-content/plugins/ninja-forms/includes/Templates for a field type you are almost definitely using, fields-textbox.html, and paste it in to your new wp-content/themes/[your template]/ninja-forms/templates folder. To test it works just stick <h1>HIYA!</h1> in there, save it and refresh your form. Bingo! You've got a form full of HIYA's. Not very useful but we've proved we can customise form elements.

Hope this helps!

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Powered by ChronoForms - ChronoEngine.com

This email address is being protected from spambots. You need JavaScript enabled to view it. +44 (0)1202 835905

JD (J Derrick Ltd), First Floor, Telecom House, 35 Holdenhurst Road, Bournemouth, Dorset, BH8 8EJ