How To Create A Two Column Website Form Using Elementor

This tutorial shows you two ways to add a multi-column form to your website using Elementor for WordPress.
Share on email
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook
Share on twitter

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.
Table of Contents

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.

The tools

You’ll need the following tools for this to work:

  • WordPress.
    • 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.
  • Piotnet.
    • An excellent WordPress form builder. Cannot be used without Elementor.

The page

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
The Blank Elementor Page, Ready For A Form.

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

In The Left Hand Sidebar, Scroll Down Until You Reach The Elementor Pro Section, Where You'll Find The 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
Click And Hold Down Your Mouse Button On The Widget.
Drag The Widget Onto The Section Where It Reads, Drag Widget Here
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 A Name, Email And Message Field
A Basic Elementor Pro Form, Featuring Name, Email And Message Fields.
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.

The Form Has A Default Name Of New Form
The Form Has A Default Name Of New Form.
Highlight The Form Name
Highlight The Form Name.
Give The Form A New Name. Any Name Will Do. It Might Make Sense To You
Give The Form A New Name. Any Name Will Do, But It Must Make Sense To You.
Click The Update Button To Save Your Work
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.

Add the other fields

Now let’s add the three extra fields, of which one will be invisible (the anti-spam honeypot 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
Make Sure The Form Is Active By Clicking On The Blue Edit Button That Pops Up When You Hover Over The Default Form.
Honeypot field

This is optional, but it’s one more way to defend your form from bots.

Click On Add Item In The Left Hand Sidebar
Click On ADD ITEM In The Left Hand Sidebar.
This Creates A New Form Field
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
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
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 The Button And Drag The Field Up To Below The Name Field
(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.

Phone field

Let’s add a phone field.

Click The Add Item Button In The Left Hand Sidebar
Click The ADD ITEM Button In The Left Hand Sidebar.
In The Dropdown For The New Field, Under Type, Select Tel, For Telephone
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
Move The Phone Field To Above The Message Field.
Product selection 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
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 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
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
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
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
Move The Product Select Field Above The Message Field.

Add columns

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
Click On The Name Field In The Left Hand Sidebar.
Under Column Width, Choose 50%
Under Column Width, Choose 50%.
This Causes The Name Field To Have A 50% Width On A Large Screen
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 Email Field To 50%.
Set The Phone Field To 50%
Set The Phone Field To 50%.
Set The Choose A Product 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
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!

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.

Click On The Plus Icon To Add A New Section
Click On The Plus Icon To Add A New Section.
Select A Single Column Structure
Select A Single Column Structure.

Let’s give it a different color.

In The Left Hand Sidebar, Click On Style
In The Left Hand Sidebar, Click On Style.
Under Background, Click The First Button In The List Of Icons Next To Background Type
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
Click On The Globe Icon.
Choose A Color For Your Background
Choose A Color For Your Background.
The New Section Now Has A Light Yellow Background, Which Distinguishes It From The Section Above
The New Section Now Has A Light Yellow Background, Which Distinguishes It From The Section Above.

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.

Click On The Nine Dot Menu At The Top Left Of The Screen, Next To Edit Section
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
In The Left Hand Sidebar, Scroll Down Until You Reach The PAFE FORM BUILDER Section.
Drag The Field Widget Into The Yellow Section
Drag The Field Widget Into The Yellow Section.
You Now Have A Boring Piotnet Form Field
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
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
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
Add A Label To Indicate To The User What The Field Requires.
Give The Field A Placeholder Of Name
Give The Field A Placeholder Of Name. This is optional.

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.

Hover Over The Black Column Icon To Reveal The Duplicate Option. Click It To Duplicate The Column With Everything Inside Of It
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
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
Make Sure The Correct Field Is Selected Before You Edit In The Left Hand Sidebar.
Change The Field Id To Email
Change The Field ID To Email.
In The Type Dropdown (drop Up) Choose Email
In The Type Dropdown (drop-Up?) Choose Email.
Change The Label And Placeholder Fields To 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
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
You Now Have Two Sections Containing A Name And Email Field Each.

Add a phone field

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
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 ID To Phone.
Change The Field Type To Tel
Change The Field Type To Tel.
Change The Label And Placeholder To Phone
Change The Label And Placeholder To Phone.

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.

Make Sure The Email Field In The Bottom Section Is Checked Before You Proceed To Edit In The Left Hand Sidebar
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 ID To Product.
Change The Field Type To Select
Change The Field Type To Select.
Change The Field Label To Choose A Product
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
Add Some Choices Into The Options Box For The Select Field.

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.

Duplicate The Bottom Section In Its Entirety
Duplicate The Bottom Section In Its Entirety.
Delete The Second Column Of The New Section
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
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
Change The Field ID To Message.
In The Type Dropdown (drop Up) Choose Textarea
In The Type Dropdown (drop-Up?) Choose Textarea.
Change The Label And Placeholder Fields To Message
Change The Label And Placeholder Fields To Message.

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.

Click On The Nine Dot Menu In The Top Left Hand Corner
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
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
Drag The Button Field Into The Section Below The Message Field.
Your Form Now Has A Generic Submit Button With The Text, Click Here
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
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
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.

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.

Duplicate The Message Field
Duplicate The Message Field.
Make Sure The Bottom Message Field Is Chosen
Make Sure The Bottom Message Field Is Chosen.
Change The Field Id To Honeypot
Change The Field ID To Honeypot.
Change The Field Type To Honeypot
Change The Field Type To Honeypot.
Make Sure The Label Field Is Empty
Make Sure The Label Field Is Empty.
Make Sure All Other Options Are Deactivated
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.

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.

On mobile

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

In conclusion

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.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.

Get excellent WordPress & marketing tutorials delivered via email