• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Accessibility Statement
    • Terms of Service & Privacy
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » How to Add Fields Side-by-Side with Ninja Forms

How to Add Fields Side-by-Side with Ninja Forms

*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.

  1. Click the “First Name” field on the left.
  2. Click “Display” on the right.
  3. In the “Container” field, you will add – “one-half first“.

Now let’s do the Last Name.

  1. Click the “Last Name” field on the left.
  2. Click “Display” on the right.
  3. 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!

 

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares21

    Filed Under: Plugins, Tutorials, WordPress Plugins

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2023 · Designed with by Me! · Hosted on SiteGround