The ability to easily align form fields into row and column form layouts is one of the most sought after features in a form builder. Who wants boring, vertically aligned fields all the time, right? Looking at the big picture, we’ve decided that easy, CSS-free row and column form layouts needs to be a core feature for Ninja Forms. And so, now it is! Let’s take a look at how to pull it off in just a few easy steps!
How to Make Row and Column Form Layouts
When I say CSS-free, I mean you need to know exactly zero CSS to do this. CSS is still what’s making it happen, but the actual editing is happening behind the scenes based on your settings on the form’s front end. Let’s look at those settings. Create a new Ninja Form and toss in an email field and submit button.
When you preview your form it will look like this, with default vertical field alignment forming a single column:
Let’s make one row out of this, with the submit button to the right of the email field.
Click on the email field in the builder to open its field setting. Expand the Display setting. The very first option under Display is Custom Class Names, which contains Wrapper and Element fields.
Type “one-half first” just like that (but without the quotations) into the Wrapper field. Now find Label Position at the top of the form settings window and set it to Hidden. Your email field form settings should now look like this (I’ve also added placeholder text to the email field under Advanced in the field settings):
Next, click Done to close the email field settings, and click the submit field to open those settings. Expand Display, and in the Wrapper field here type “one-half”, again without the quotations. Now hit Done and preview your form!
Woohoo!
Quick Row and Column Form Layouts Recap
In a form that has an email and a submit fields:
- In the field settings for the email field, expand Display and type “one-half first” into the Wrapper field, minus the quotation marks.
- In the field settings for the submit button, expand Display and type “one-half” into the Wrapper field, minus the quotation marks.
How Does This Work and What Else Can I Do?
For the curious, the text we typed into the Wrapper field of the field’s Display settings are CSS classes:
- one-half
- first
We’ve set THREE up so that when you put those CSS classes (or others) in the Wrapper field, the HTML wrapper of the form field is modified with the CSS class you gave it. You can see that if you use your browser’s Inspect Element tool:
Using one-half sets the expected behavior that there will be two fields in a row (because 2 halves make a whole, yay math!), and first prioritizes which one goes first. So what if you wanted to make 3 columns?
Use the class one-third instead of one-half. You’ll have to have 3 fields for this to work properly, and you’ll need to mark which one goes first. Maybe I want to add three checkboxes in a row above the email and submit row? Check it out:
That’s cool, but it looks clunky because the third checkbox is hanging waaay out over the right hand side of the submit button. Try changing the email and submit Wrapper styling to two-thirds and one-third respectively:
That’s better! Not perfect, but a lot better. Perfect is where the Layout and Styles extension for Ninja Forms THREE comes in, which we just released last week! With it, you can actually grab the border of any field and scale that sucker to be exactly where you want it.
If you’re interested in more CSS classes that you can use, we’re working on documentation that will list them out for you. In the meantime, feel free to ask me in the comments and I’ll go bug the dev team for you 🙂
We hope you enjoy this new core feature! We’ve poured innumerable hours into making Ninja Forms THREE the absolutely most supercalifragilistic form building experience we possibly can for you. That’s caused delays in many cases, and we know some of you are getting impatient with us. That’s understandable. We don’t blame you one bit. Once you get a fully functional Ninja Forms THREE in your hands and on your client sites though, the wait will be worth it. Check out what else Layout and Styles can do with our Discover #Three series, and fire off with questions below if you have them!
simon says:
Thank god! 🙂 Very welcomed addition feature 🙂
Roland says:
So how does this work for people who bought (or are looking at buying) the Layout & Styles add-on? Does this replace the add-on or is the add-on more sophisticated?
Quay Morgan says:
Roland,
Great question! Layout and Styles goes far beyond the simple CSS class adjustments that I’ve demonstrated here. Take the steps above for example- with Layout and Styles, there is no need to use a CSS class at all for resizing or grouping into columns or rows. You literally just grab a field with your mouse, drag it to where you want it, and drop it. The builder will do the resizing for you, creating columns and rows with no need to declare ‘one-half’, ‘one-third’ etc. You can even make further resizing adjustments from there just by grabbing the edge of a column and dragging it with your mouse. Column and row layouts are not the extent of Layout and Styles’ capability either, it’s just one part of the total package for really taking your form and sculpting it to look exactly how you see it in your mind’s eye.
Check out this video to see part of it in action! The good stuff starts about 2 minutes in. There’s also a link directly under that video to a demo of THREE. You can play with a preview of Layout and Style’s functionality there.
Hope that covers your question. Have a great day!
Cheers,
Quay
Roland says:
Thanks for the answer. That’s definitely good news. We’re working on two new sites with at least one more on the way, so we’ll likely be getting some licenses for add-ons soon.
Victor Smilgys says:
It seems to work fine on Chrome, but not on IE. In IE the fields still display on their own row. BTW, Ninja forms doesn’t have a field called wrapper, but it’s called container. That is where I’m adding the class, could that be the problem?
Quay Morgan says:
Victor,
Hey! I’m honestly not sure about IE- I’ll make myself a note to test on my pc at home, but it’s notoriously buggy.
For the wrapper, you’re not looking for an actual field that you add in the builder. Check out the 2nd screenshot of the article- the field settings window of an Email field. Look down at the bottom of that screenshot. See the Display options, and under that Custom Class Names? There’s a wrapper field there. That’s what the article refers to.
Cheers,
Quay
Victor Smilgys says:
Thanks Quay for the fast reply! I wanted to send you a screenshot, but I can’t do it here. So I’ll reply to that email in case you can get it. My screenshot is different than the one on the page. Under Display>Custom Class Names I have a field called “Container” where the screenshot shows that field is called “Wrapper”.
Flits says:
Hi,
Is it also possible to only get 2 columns visible on a desktop and on the mobile 1 column.
Because if I look now on my phone, the fields are to small.
Quay Morgan says:
Flits,
Ninja Forms is fully responsive to device size and will scale alongside screen size, but your theme controls how Ninja Forms responds. i.e. if it’s not responding to screen size changes properly, it’s because your theme’s styling is not allowing it to.
Cheers,
Quay
Rosy Spencer says:
Hi Quay,
I applied these steps to both, “Frist Name” and “Last Name” fields to have them in one row, but they are still in two rows. They both are half the size, but still in one column. The Last Name field is a little indented. Did anything change since the day you posted this article? Is the CSS different?
Rosy
Quay Morgan says:
Rosy,
Mileage will very on how much you are able to do with the wrapper classes dependent on how your theme applies styling. If it’s a bit over aggressive in the CSS rules it uses, then it can override your input here. Sorry.
Regards,
Quay
James Dimmeler says:
Great feature! Spent a while figuring out how to do it until I stumbled across this post.
Keep up the good work guys!
Will Tate says:
Noticing the same issue as Victor Smilgys in IE11.
The problem appears to be IE actually handling the wrapping elements and thus breaking the floats of the one-half elements nested within.
Fix requires some overriding IE only css :-\
Otherwise, amazing plugin. Keep up the outstanding efforts!
Quay Morgan says:
Thanks for the feedback, Will. I’ll mention this to our dev team and see what their thoughts on it are. Much appreciated!
Joakim says:
Do you happen to have the CSS fix?
Paul Aswad says:
Hello Quay!
Great article! Learnt a few tricks on getting exactly what I’m looking for with Ninja Forms Three! I do have one question though. I have a list, with 3 options in it. In the old NF, by selecting Label on right, the list would align horizontally. Now no matter what I do, I cannot seem to get the list to align horizontally.
Now I know you mention it in the article, but I do not have 3 lists so that I can use one-third first (for example). It would be nice to just have an option (like the switches you guys are now using!) allowing you to chose the display of your list as horizontal or vertical 🙂
Oh and if you have any references on getting this done with the least amount of coding knowledge possible, that would be awesome!
Thanks again!
Paul
Quay Morgan says:
Paul,
Thanks! Unfortunately there’s not a setting to align a single list’s options horizontally. It’s super easy to make a horizontal row of list fields that lay out horizontally using Layout and Styles, but not the list options themselves. For that you’d need to write custom CSS, unfortunately. That’s a really interesting idea though, and I’ll be sure to mention it to our dev team to consider!
Cheers,
Quay
billfalls says:
I had the same problem as Rosy and others: the second “one-half” just indented slightly instead of sharing the same line as “first,” due no doubt to the page theme as others noted.
As an experiment I tried setting the two wrappers to “one-third first” and “one-third second.” Eureka! Both fields are on one line. I suspect that Ninja Forms is taking one-half of the page width while the theme sets the margins in from that point. Maybe the developers could check that?
In any case, my workaround may help someone out there.
Blake says:
Did any documentation ever get made for this feature? It’s very useful, but I can’t find any information beyond this article.
Quay Morgan says:
Blake,
Hey! For working with the wrapper class names, this is all we have. For Layout and Styles, we have quite a bit.
Directly relevant to this: https://ninjaforms.com/docs/layouts-and-styles/
For all of our styling and other documentation, you can find that here: https://ninjaforms.com/documentation/
Cheers,
Quay