Elementor have had a form widget for some time now, which means you don’t need to go elsewhere to make forms on your WordPress website anymore, thank goodness!
If you’ve tried to build forms previously with some of the plugins out there, you’ll know what a headache it can be, trying to design them and configure them can be frustrating. Thankfully for us all, the Elementor form widget is super easy to use.
How To Create A Form In Elementor
To create a form in Elementor, the first thing we’re going to do is open the Elementor editor, and then drag and drop the Form widget to wherever you’d like to build your form.
You can see this in the screenshots above, where I have inserted an Elementor form on the page by dragging and dropping the widget.
Building forms in Elementor is done visually, like everything else. You don’t need an extra plugin, and you don’t need to do it from the backend of your website.
Structuring Elementor Forms
Once your form is in place, the first step is to structure your form. What fields do you want, and what type of fields should they be?
Form fields are added and edited from the Content tab in the Elementor editor. As you can see below, forms come with a few default fields. You can add new fields by clicking on the Add Item button.
You can also duplicate a field by clicking on the icon that looks like two documents, one in front of the other.
Form Field Types
There are many different form field types from simple text fields, to password, recaptcha and honeypot.
To change what a form field does, click on the field then click on the Type dropdown menu to view the available field types.
Form Column Width
If you want to use two form fields on the same line, you can do this using Column Width. Click the dropdown selector and change the width from 100% to 50%. If you do this with two successive form fields, you’ll notice they then appear on the same line together.
Styling Elementor Forms
You can style your forms in Elementor in the same way you style other widgets, using the Style panel within the Elementor editor.
The form itself can be styled, as can the fields, buttons, any steps, even the error messages and confirmation messages.
So there’s not much extra you need to learn in terms of styling Elementor forms, if you are familiar working with Elementor already.
Form Actions
So we’ve covered how to create a form in Elementor, but how do you configure what happens when your form is submitted?
This is done through form actions, or as it’s called in Elementor, Actions After Submit.
Common actions taken when a form is submitted are to send an email and redirect to a different page. Well, you can add as many actions as you want to your forms, and combine them as you want. There’s a simple selector field, with no code involved, as you’d expect.
Each of the actions you add will appear as an additional tab option. So currently we have a tab option for Email, but if I were to add in a redirect in the Add Action field, I’d also see Redirect in my tab options, like I have demonstrated below.
To finish up I’ll just show you how to set the form From Email, as that’s the most commonly asked question on forms.
On the Content tab in the editor, click on Email, and you will see the below screen. Here you can customise the from email as well as the reply email, as well as CC or BCC in anyone who should receive a copy of the form submissions.
If you found this helpful, you might also enjoy our post How To Create An Elementor Single Post Template.
