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:
- This is the self-hosted version of WordPress, not wordpress.com.
- Page Builder Framework.
- Strictly speaking, you don’t need Page Builder Framework, but it’s my theme of choice. I use the free version, but it’s available in a pro version too.
- Elementor Pro.
- You need Elementor Pro for the first part of this tutorial. For the second part, when using Piotnet for your form, Elementor’s free version is sufficient.
- An excellent WordPress form builder. Cannot be used without Elementor.
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.
Add the form
We’ll create a form—using two methods—with the following fields:
- Name (text field)
- Last name (optional, invisible honeypot field to combat spam)
- Email (email field)
- Phone (tel field)
- Product choice (select field)
- Message (textarea field)
Using Elementor Pro
Let’s start with Elementor Pro’s built-in form widget.
Add the form widget
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.
Rename the form
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.
Add the other fields
Now let’s add the three extra fields, of which one will be invisible (the anti-spam honeypot field).
This is optional, but it’s one more way to defend your form from bots.
Remember to press the UPDATE button after every step to ensure your work is saved.
Let’s add a phone field.
It makes more sense to have the phone field above the message, so we’ll move it.
Product selection field
Let’s add a product selection field.
Let’s add some products for people to choose from.
I’m just pasting a bunch of names into the box.
(Remember to hit the UPDATE button after every change!)
The product select field should go above the message field, so we’ll move it.
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.
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.
And there you have an Elementor form with two columns!
Using Piotnet for Elementor
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.
Add a new section (optional)
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.
Let’s give it a different color.
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.
Add a name field
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.
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.
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.
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.
That’s the first field.
Add an email 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.
Let’s edit the second Name field.
Now we’re going to copy the whole section to create copies of the first two fields, which we’ll edit accordingly.
Add a phone field
To create the phone field we’ll simply change the setting of the name field in the bottom section.
Add a product selection field
To create the product selection field we’ll simply change the setting of the email field in the bottom section.
We have three more fields to add.
Add a message field
We’ll copy the bottom section, remove a column and change the remaining field into a message field.
Remember to click the UPDATE button!
Add a 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.
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.
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.
Add a honeypot field
To add a basic level of security, we’ll add a honeypot field.
We’ll duplicate the message field and edit it.
That’s it! You now have a simple multi-column form created with Piotnet forms for Elementor.
Why Piotnet is superior
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 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.