You’re busy. You have websites to build and not enough time in the day to learn a new tool. Don’t worry, with Ninja Forms, you don’t have to. Our Layout and Styles add-on comes with an awesome drag-and-drop tool that lets you adjust the layout of your WordPress form by drag-and-dropping form fields into place. It’s that easy.
Worried about mobile-first design? Don’t be. Our form builder automatically adjusts your layout, so it appears mobile-first every time. Sparing you from needing to do anything extra, like add media queries 🤮.
Stop spending time futzing around with your WordPress form and spend that time creating beautiful websites. Instead, find out how easy it is to create multi-column, mobile-first layouts with Ninja Forms.
Turn on the Ninja Forms layout display settings
By default, your form will look like something out of the 90s. Fixing this is a cinch. Just turn on Opinionated Styles. It will make your dinosaur of a form modern in an instant.
Navigate to Ninja Forms > Settings > Advanced Settings > Opinionated Styles and select Light or Dark from the field option.
If your WordPress theme contains a lot of light backgrounds, select Light; otherwise, choose Dark. That’s it.
How to adjust the layout of your WordPress form
Now that you’ve turned on your layout settings and installed the Layout and Styles add-on, it’s time to put that drag-and-drop tool to work.
Display your WordPress form fields side by side
To make your WordPress form fields appear side by side in neat columns, first, add the form fields to your WordPress form. After that, click and drag the form field next to the blue bar. Once the blue bar turns green, let it go.
Congrats. You have just created a new column with your form fields side by side. Piece of cake, right?
How to make form fields appear long or short
Now that you know how to align your form fields side by side, let’s learn how to adjust the size of the form fields. Don’t worry; you don’t need any CSS to get this done. All you have to do is click on the new column bar and move it left or right with your mouse.
As you move the column back and forth, percentages will appear, signifying know how big or small the column is. Easy as pie, right?
Adjusting your WordPress forms layout is easy with Ninja Forms
Now that you know how to adjust the layout of Ninja Forms using the Layout and Styles add-on, give it a try. Besides building multi-column layouts, you can make quick edits with our built-in color picker, changing backgrounds, borders, text, and more. So get it today!
We offer the Layout and Styles add-on separately ( unlike our competitors ), or you can get it as part of the Personal Membership.
