Adding forms to your WordPress website is essential for collecting information, generating leads, and communicating with your visitors. Whether it’s a simple contact form or a detailed inquiry form, forms help businesses connect with potential customers and gather valuable data.
If you are using Elementor, creating a form becomes very easy with the Form widget available in Elementor Pro. This widget allows you to build fully customizable forms directly inside the Elementor editor without writing any code.
In this guide, we will walk through the essential steps required to create and configure an Elementor form, including adding fields, setting up email notifications, and styling the form to match your website design.
Table of Contents
Key Takeaways
- Learn how to add the Elementor Form widget to your WordPress pages.
- Configure important form settings such as form fields, submission actions, and email notifications.
- Customize the design of your form to match your website.
- Understand how to deploy the form on your website and start collecting leads.
- Discover how to store Elementor form submissions in the database using Form Vibes for better lead management.
How To Create an Elementor Form
Before creating a form, make sure you have installed and activated the following plugins:
The Form widget is available only in Elementor Pro, so it must be installed for this tutorial.
Step 1: Add the Elementor Form Widget
First, open the page where you want to add your form, such as a Contact page.
- Edit the page using the Elementor editor.
- From the Elementor widget panel, search for the Form widget.
- Drag and drop the Form widget onto the page.
Once added, Elementor automatically inserts a basic contact form with default fields such as Name, Email, and Message.
You can now customize the form according to your needs.
Step 2: Configure Elementor Form Settings
After adding the form widget, the next step is configuring its settings. Elementor provides several options that allow you to customize how your form works.
The most important sections include:
- Form Fields
- Buttons
- Actions After Submit
- Email Notifications
Let’s explore each of these sections.
Form Fields
The Form Fields settings allows you to add and customize the fields that users will fill out. By default, Elementor includes three fields, Name, Email, and Message
To add a new field:
- Click Add Item
- Choose the field type
- Next, add the label for the form field.
- Then, in the Placeholder settings, enter the text that shows in the form field when a user hasn’t entered any data.
- Enable the Required option to mark the field not to be left empty when the form is submitted.
- Then, in the column width settings, set the column width to align your fields.
Buttons
Here, you’ll find options to adjust your form’s submit button settings, such as its size and column width. You can also customize the text for the submit button and any step buttons and even select icons to accompany them.
Actions After Submit
The Actions After Submit section defines what happens after a user submits the form. Elementor supports multiple actions, which means you can trigger several events once the form is submitted.
Common actions include, Email notification, Redirect to another page, Creating a new post, and more.
In this guide, we will focus on the Email action, which sends the form submission directly to your email address.
Email Action Settings
Once you select Email as an action after submission, Elementor displays additional email configuration settings. These settings control how the form notification email is sent.
Important email options include:
- To: Enter the email address that will receive form submissions. You can add multiple email addresses separated by commas.
- Subject: Defines the subject line of the email notification.
- Message: The content of the email. You can insert form field shortcodes to include submitted data.
- From Email: The email address used as the sender.
- From Name: The name that appears as the sender of the email.
- Reply-To: This email address will receive replies when the recipient clicks Reply.
- CC and BCC: Optional fields used to send copies of the email to additional recipients.
Next, you will see the metadata that was sent with the mail.
Then, finally, there’s the “Send as” option. The send option allows you to select whether to send the submitted entry as plain text or HTML (defaults to HTML).
Steps Settings
If you are creating a multi-step form, Elementor provides the Steps Settings option to control how the step indicator appears to users. This feature helps break long forms into multiple sections, making them easier to complete and improving the user experience.
Elementor allows you to choose how the steps are displayed, such as: icon, number, progress bar, and more.
You can also customize the shape of the step indicator, such as displaying it in a circular format. These options help users understand which step they are on and how much of the form is left to complete.
Additional Options
The Additional Options section provides extra settings to control form behavior and messages. Some of the important options include:
Form ID
Allows you to assign a unique ID to the form. This can be useful for applying custom CSS or JavaScript.
Form Validation
Controls how the form validates user input before submission. Elementor uses the browser’s default validation to ensure required fields are completed.
Custom Messages
You can enable custom messages to control what users see after submitting the form, including success message, Form error message, Server error message, and Invalid form message.
Step 3: Style Your Elementor Form
Once the form functionality is configured, the next step is customizing its appearance.
A well-designed form improves user experience and makes your website look more professional.
To style your form:
- Click on the Style tab inside the Elementor editor.
- Customize different elements of the forms
Elementor allows you to style form fields, button, messages, steps, and more. These styling options allow you to match the form design with your website’s branding.
How To Capture The Form Leads in WordPress
After publishing your form, visitors can start submitting their information through it.
Elementor Pro includes a Submissions feature, which allows you to view submitted entries inside the WordPress dashboard. However, if you receive a large number of submissions, managing and analyzing the collected data can become difficult.
This is where Form Vibes can help.
Form Vibes is a plugin designed to capture and manage form submissions efficiently. Once installed, it automatically stores Elementor form entries in the WordPress database.
With Form Vibes, you can:
- View submissions in a centralized dashboard
- Filter entries by form or date
- Export submissions as CSV files
- Analyze form performance using analytics
- Manage entries more efficiently
To learn how to store Elementor form submissions in detail, check out our guide on How to Save Elementor Form Submissions in Database.
FAQs on Configuring Elementor Form
Can I customize the success message displayed after form submission?
Yes. Elementor allows you to customize the success message shown after a form is submitted. You can display a confirmation message, redirect users to another page, or trigger additional actions.
Can I export form submission data?
Yes. Using plugin such as Form Vibes, you can export captured form submissions into CSV files for backup or analysis.
Can I create multi-step forms using Elementor?
Yes. Elementor allows you to create multi-step forms using the Steps field. This helps break long forms into multiple sections, improving user experience and increasing form completion rates.
How do I make a field required in Elementor forms?
To make a field mandatory, enable the Required option inside the field settings. This prevents users from submitting the form unless the field is filled.
Where can I view Elementor form submissions?
You can view form submissions inside the WordPress dashboard under Elementor → Submissions. If you need advanced management options like filtering, exporting, and analytics, you can use tools such as Form Vibes.
How can I create a post using Elementor’s Form directly from the frontend?
To create a post using Elementor’s Form directly from the frontend, you need to download the Elementor Addon Elements plugin. Once installed, follow our article and video tutorial for step-by-step guidance
Conclusion
Creating forms using Elementor Pro is simple and highly flexible. The Form widget allows you to add customizable form fields, configure submission actions, and design forms that match your website’s style.
By following the steps in this guide, you can quickly create a functional contact form and start collecting valuable information from your visitors.
