Menu
Elementor Pro comes with a fantastic form builder that lets you hammer together a great form in a few minutes.
It’s much easier to use than other WordPress form creators I’ve used, including Contact Form 7, Ninja Forms, WP Forms and Gravity Forms.
But can you use Elementor’s form builder to create a two-column form? Or a multi-column form?
Yes you can!
There are two ways: one requires Elementor Pro; the other method lets you get away with using the free version of Elementor, but you need the PAFE Piotnet plugin for Elementor.
And although Elementor’s form builder comes with multi-step capabilities, the PAFE Piotnet plugin is FAR more powerful and allows you to build conditional forms, as well as forms with payment options.
PAFE also gives you more flexibility WRT to field placement. More on that later in this tutorial.
Let’s take a look at the tools you’ll need for the job.
You’ll need the following tools for this to work:
I’ve set up a test page for this tutorial.
If you’re new to Elementor you might want to read my post on how to activate Elementor for a page or post.
The Blank Elementor Page, Ready For A Form.
We’ll create a form—using two methods—with the following fields:
Let’s start with Elementor Pro’s built-in form widget.
In The Left Hand Sidebar, Scroll Down Until You Reach The Elementor Pro Section, Where You’ll Find The Form Widget.
Click And Hold Down Your Mouse Button On The Widget.
Drag The Widget Onto The Section Where It Reads, Drag Widget Here.
You’ll see a form pop up on the page out of thin air.
You now have a basic Elementor Pro form, including a name, email and message field.
Note that, if you make use of Elementor’s global settings, the form takes on the visual style you’ve added to the global settings, which is true in the case of my test form too, since I’ve set up global colors.
A Basic Elementor Pro Form, Featuring Name, Email And Message Fields.
This is optional, but I prefer to give my forms meaningful names. This makes it easier to see which form a message was sent from on your website, if your site contains more than one form.
The Form Has A Default Name Of New Form.
Highlight The Form Name.
Give The Form A New Name. Any Name Will Do, But It Must Make Sense To You.
Just To Be Sure, Click The UPDATE Button At The Bottom Left Of The Screen, To Save Your Work. I Do This After Every Edit.
Now let’s add the three extra fields, of which one will be invisible (the anti-spam honeypot field).
Make Sure The Form Is Active By Clicking On The Blue Edit Button That Pops Up When You Hover Over The Default Form.
This is optional, but it’s one more way to defend your form from bots.
Click On ADD ITEM In The Left Hand Sidebar.
This Creates A New Form Field.
Click On The Type Field To Reveal A Dropdown (Or Drop-up?) Select Field And Select The Honeypot Option.
Add A Label. This Can Be Anything. I Name All My Honeypot Fields Last name But You Can Name It Whatever You Wish.
(Optional Step) Click On The Last name Field, Hold Down Your Mouse Button And Drag The Field Up To Below The Name Field.
Remember to press the UPDATE button after every step to ensure your work is saved.
Let’s add a phone field.
Click The ADD ITEM Button In The Left Hand Sidebar.
In The Dropdown For The New Field, Under Type, Select Tel, For Telephone.
It makes more sense to have the phone field above the message, so we’ll move it.
Move The Phone Field To Above The Message Field.
Let’s add a product selection field.
Make Sure The Form Element Is Active By Clicking On The Blue Edit Button That Pops Up When You Hover Over The Default Form.
Click On ADD ITEM In The Left Hand Sidebar.
Click On The Type Field To Reveal A Dropdown (or Drop-Up?) Select Field And Choose The Select Option.
Add A Label To The Select Field. In This Case It’s Choose a product.
Let’s add some products for people to choose from.
I’m just pasting a bunch of names into the box.
Add Some Choices Into The Options Box For The Select Field.
(Remember to hit the UPDATE button after every change!)
The product select field should go above the message field, so we’ll move it.
Move The Product Select Field Above The Message Field.
Now it’s time to add columns. Although it’s possible to add up to five columns in a row, or even have fields with odd widths stacked next to each other, for the purpose of this tutorial I’m only adding two columns.
With the Elementor Pro form builder, you’re not adding columns, strictly speaking. You’re just modifying form field widths. It’s different with the Piotnet form builder, where you actually need to add Elementor columns to create a form with multiple columns. More on that later in this tutorial.
We only want the four first fields to show in a two-column fashion. The message field will remain full width.
Make sure the form widget is active, then proceed as follows.
Click On The Name Field In The Left Hand Sidebar.
Under Column Width, Choose 50%.
This Causes The Name Field To Have A 50% Width On A Large Screen.
You can set the width to 50% for tablet and mobile too, but things get a little bit tight, so it’s best to leave the width to 100% for smaller screens.
Let’s set the other fields to 50% too.
Set The Email Field To 50%.
Set The Phone Field To 50%.
Set The Choose a product Field To 50%.
The Four Fields With 50% Width Are Now Neatly Stacked In A Two Column Style.
And there you have an Elementor form with two columns!
Now we’re moving on to the far more powerful form builder for Elementor: the PAFE Piotnet plugin.
Multi-column layouts is the least of its capabilities, but for this tutorial we won’t jump into Piotnet’s other features.
I’ll be constructing the Piotnet form right below the Elementor Pro form I just built, on the same page.
Let’s add a section and give it a different background color to ensure it stands out from the Elementor Pro form.
It’s important to note that, unlike with Elementor Pro’s built-in form widget, you use Elementor’s column structures for building a multi-column form layout with Piotnet.
But we’ll start by adding a single column layout and work from there.
Click On The Plus Icon To Add A New Section.
Select A Single Column Structure.
Let’s give it a different color.
In The Left Hand Sidebar, Click On Style.
Under Background, Click The First Button In The List Of Icons Next To Background Type.
The next step depends on whether you have global colors set up or not.
If you have global colors set up you’ll click the globe icon. If not, you’ll click the little box next to it, into which you can paste any hex you wish, or choose from a palette any color you wish.
I have global colors set up so I’ll use one.
Click On The Globe Icon.
Choose A Color For Your Background.
The New Section Now Has A Light Yellow Background, Which Distinguishes It From The Section Above.
Let’s start creating the form, which takes a little more effort than with Elementor Pro’s form widget, but is worth the sweat.
We’ll start by creating a name field, then duplicate the name field to create another form field and simply change the duplicate field’s details. We’ll do this until we have all the form fields.
Click On The Nine Dot Menu At The Top Left Of The Screen, Next To Edit Section.
In The Left Hand Sidebar, Scroll Down Until You Reach The PAFE FORM BUILDER Section.
Drag The Field Widget Into The Yellow Section.
You Now Have A Boring Piotnet Form Field.
The next step is uber important. You must add a form ID, and all form fields for the same form must have the same ID, else the form will fall flat.
Make sure the new form field is selected before you continue.
In The Left Hand Sidebar. Add A Form ID.
Note the requirements for adding a form ID. You can only use latin characters and you’re not allowed to use spaces. Common practice is to connect more than one word in an ID using an underscore.
Add A Field ID. Because This Is A Name Field We’ll Keep It Simple And Call It Name.
Adding a field ID automatically creates a shortcode for the field too. This is handy for more advanced form usage, but won’t be necessary for this tutorial.
The default Type for any new Piotnet form field is Text. Since a name is made up of text, this is fine. We’ll leave it like that.
Add A Label To Indicate To The User What The Field Requires.
Give The Field A Placeholder Of Name. This is optional.
That’s the first field.
Instead of creating the email field from scratch, we’ll simply duplicate the Name field.
But we won’t just duplicate the field.
To save time in creating a two-column layout, we’ll duplicate the Elementor column the Name field is in.
Hover Over The Black Column Icon To Reveal The Duplicate Option. Click It To Duplicate The Column With Everything Inside Of It.
You Now Have Two Columns With A Name Field In Each.
Let’s edit the second Name field.
Make Sure The Correct Field Is Selected Before You Edit In The Left Hand Sidebar.
Change The Field ID To Email.
In The Type Dropdown (drop-Up?) Choose Email.
Change The Label And Placeholder Fields To Email.
Now we’re going to copy the whole section to create copies of the first two fields, which we’ll edit accordingly.
Hovering Over The Main Section Housing The Two Piotnet Fields Reveals A Duplicate Button. Click This Button To Duplicate The Whole Section.
You Now Have Two Sections Containing A Name And Email Field Each.
To create the phone field we’ll simply change the setting of the name field in the bottom section.
Make Sure The Name Field In The Bottom Section Is Checked Before You Proceed To Edit In The Left Hand Sidebar.
Change The Field ID To Phone.
Change The Field Type To Tel.
Change The Label And Placeholder To Phone.
To create the product selection field we’ll simply change the setting of the email field in the bottom section.
Make Sure The Email Field In The Bottom Section Is Checked Before You Proceed To Edit In The Left Hand Sidebar.
Change The Field ID To Product.
Change The Field Type To Select.
Change The Field Label. In this case we’ll make it Choose a product.
Add Some Choices Into The Options Box For The Select Field.
We have three more fields to add.
We’ll copy the bottom section, remove a column and change the remaining field into a message field.
Duplicate The Bottom Section In Its Entirety.
Delete The Second Column Of The New Section.
Make Sure The Phone Field In The Last Section Is Selected Before You Start Editing In The Left Hand Sidebar.
Change The Field ID To Message.
In The Type Dropdown (drop-Up?) Choose Textarea.
Change The Label And Placeholder Fields To Message.
Remember to click the UPDATE button!
Now it’s time to add a submit button.
We cannot duplicate a current field and change it into a submit button. You must add a fresh button from the left hand sidebar.
Click On The Nine Dot Menu In The Top Left Hand Corner.
In The Left Hand Sidebar, Scroll Down Until You Reach The PAFE FORM BUILDER Section.
Drag The Button Field Into The Section Below The Message Field.
Your Form Now Has A Generic Submit Button With The Text, CLICK HERE.
This next step is super important. You MUST do it for the form to work properly.
Make sure the button field is selected before you continue to edit in the left hand sidebar.
Add The Form ID. If It’s Not The Same As The Other Fields The Form WILL NOT Work. In this case it’s product_form.
Change The Button Text To Send.
The send button comes with a host of options.
It’s automatically set up to send an email with all the completed fields to your WordPress install’s admin email address.
Piotnet’s form submission lets you do far more than shown in this tutorial. For instance, you can create a payment form.
But that’s beyond the scope of this tutorial. I might tackle it in a future post.
To add a basic level of security, we’ll add a honeypot field.
We’ll duplicate the message field and edit it.
Duplicate The Message Field.
Make Sure The Bottom Message Field Is Chosen.
Change The Field ID To Honeypot.
Change The Field Type To Honeypot.
Make Sure The Label Field Is Empty.
Make Sure All Other Options Are Deactivated. The honeypot field must not be visible to human users.
That’s it! You now have a simple multi-column form created with Piotnet forms for Elementor.
What makes PAFE Piotnet for Elementor better than Elementor Pro’s form builder?
As far as form layout goes, Piotnet is superior because form fields are separate from each other, as opposed to Elementor’s form widget, which does not allow for the form fields to be split up.
Why’s that better?
With Piotnet, you could have a form field (one or more), followed by some text or an image, then the next fields for the same form.
The glue that holds the form together is simply the form ID.
PAFE Piotnet’s form builder is superior to Elementor Pro’s form widget for other reasons too, but I’ll cover that in other articles.
It’s not a good idea to add multi-column forms to a mobile layout. This should be obvious, but the reason is that space is already limited. If you cram too many fields into a limited space next to each other you’re making your form difficult to use.
That’s why this sort of form is suitable only for large screens.
Elementor automatically scales their fields to full width when the screen width drops below a specific size, so you don’t have to worry about adapting your multi-column form for mobile.
Elementor’s Mobile Preview Shows That All Fields Automatically Stretch To Full Width On Small Screens, Even If Form Fields Are Set To Narrower Widths On Larger Screens.
Elementor Pro’s built-in form widget is fantastic, but Piotnet’s form builder is leagues ahead.
It not only lets you build multi-column forms, but complex multi-step forms too. Yes, Elementor also lets you build multi-step forms, but it doesn’t come with all the other functionality inherent in Piotnet’s plugin. And that’s not even mentioning the other Piotnet widgets.
I’d advise you to invest in Piotnet for Elementor. It’s one of the best plugins built around the Elementor page builder.