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!
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:
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!Shape your forms into rows and columns easily with Ninja Forms #THREE - Learn how now!Click To Tweet