Custom form layout has a huge impact on conversion rates. Create a natural path through the form fields for users to follow.
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 CSS classes as part of the WordPress form builder. They allow you to build row and column layouts simply and quickly.
Open the settings for any of your form fields to see the CSS layout classes box. Click on this box and the layout classes appear in the left panel. Then simply click on a class to insert it.
If your field is the first in the row, click the "First" button. Then click the field width button you'd like, such as 1/2 or 1/4. This may result in your first field having the class frm_first frm_half, and your second field having the class frm_half. This would give you a row split into two columns. For the following rows, again include the frm_first CSS class for the first field in each row.
These CSS layout classes 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, NOT 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.
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 CSS layout classes 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!
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!
Can you open a ticket in our help desk about this please, & we'll do our best to help.
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