*This blog post was updated 10/20/2019 to reflect changes made within the plugin.
If you use the free version of Ninja Forms to create long or complex forms, you may want to design your form with fields that sit side-by-side.
Before you get started:
Go to Ninja Forms > Settings.
Scroll down to “Advanced Settings.” Check the box next to “Form Builder Dev Mode“.
Then scroll down and Save it.
I’ve been using Ninja Forms for a long time now. One of the things people will ask for is to separate the single “Name” field (which is set by default when installing Ninja Forms) out into “First” and “Last” name. When we do this, the First and Last name fields are displayed in a single column. To display the First and Last name side-by-side, follow these instructions.
Open the Ninja form you’d like to update. Let’s configure the First Name.
- Click the “First Name” field on the left.
- Click “Display” on the right.
- In the “Container” field, you will add – “one-half first“.
Now let’s do the Last Name.
- Click the “Last Name” field on the left.
- Click “Display” on the right.
- In the “Container” field, you will add – “one-half“.
Publish your form. Your First and Last name fields should be side by side.
To do this with other form fields, make sure you put the fields in the order you wish to display them so that the field you’d like on the left is “before” the field you would like on the right.
That’s it! For more ways to configure your Ninja forms or to check out some of the premium add-ons, go here!
