Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Njones35 / Last Updated August 11, 2021

How to Create WordPress Forms with a Custom Form Layout

Custom form layout has a huge impact on conversion rates. Create a natural path through the form fields for users to follow.


How to create a custom form layout in WordPress forms

As someone who specializes in front-end web design, wasted screen space is one of my biggest pet peeves. This is never more apparent than in badly designed forms.

Unfortunately, there is no magic formula for the perfect form layout. Forms are too diverse for one simple solution. However, you may want to research designs that improve conversion rates and apply those same principles.

In this tutorial I'll cover the basics of building layouts and designs. This will give you the skills to build a custom form layout that is a perfect fit for your unique needs.

The basic form layout with rows and columns

Formidable includes built-in field layouts as part of the WordPress form builder. They allow you to build row and column layouts simply and quickly.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Just drag any of your form fields next to another field. Then, use the Row Layout options to get the layout you want.

custom form layout CSS

These form fields are mobile friendly and responsive so they will adjust depending on screen size. On small screens the form layout will automatically rearrange to a single column of 100% width fields to maintain usability. This is automatic and does not require any setup.

For a full list of available CSS layout classes and their functions, see our form layout knowledgebase article. If you use the Bootstrap add-on, you can use Bootstrap form layout classes too for even more custom form layout options.

Advanced custom form layout with sections

Basic layouts have one small limitation. When you split a row into columns, you can only have one form field in each column.

Paragraph text fields and upload fields are a lot taller than radio button fields. Arranging these fields side-by-side can look messy. Section fields are the answer!

When using sections for form layouts, apply the CSS layout classes to the sections, instead of the individual fields. Also, when using sections, set the Label Position to None unless you would like a heading displayed.

Even though the paragraph text field is the only item in my first column, I still placed it inside a section. This is because section padding would make the two columns look uneven if only half the row was inside a section.

Sections used for custom form layout

As you can see, the Radio Button, Single Line Text and Website/URL fields (that are contained in a section) stack in the same column below each other. This allows them to match the height of the Paragraph Text field. It's a simple way to avoid messy white-space in your form.

Combine the side-by-side fields with sections to build almost unlimited form layouts. Forms can be designed to perfectly fit the available space, neatly and without wasted space.

So what are you waiting for? Use the power of Formidable to build your perfect WordPress form today!

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Almin Valyani says

    September 12, 2017 at 6:20 am

    I am trying to use WP Forms with Elementor, but when I add the shortcode for the WP Form via the text editor widget, the save never finishes once I hit the save button.

    When I try to enter the shortcode in the shortcode widget and hit apply, nothing happens.

    Is there a way to use WP Froms with Elementor?

    Thanks!

    Reply
    • Nathanael Jones says

      September 12, 2017 at 6:36 am

      Can you open a ticket in our help desk about this please, & we'll do our best to help.

      Reply
  2. Wordpress Form Builder says

    September 12, 2017 at 6:25 am

    Ninja Forms is good, but they charge their plugins annually…I almost fell into that trap, thankfully I notice it just before I bought the plugin

    Reply
  3. mahesh says

    April 23, 2018 at 6:37 am

    pls you can make a video for better undestand...

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews