How To Add Forms with Elementor in WordPress

Creating forms on your WordPress site is easy with Elementor, one of the most popular page builders. Whether you need a simple contact form, a feedback form, or a more complex form with multiple fields, Elementor makes it easy to create and customize forms to suit your needs. In this article, we will show you how to add forms with Elementor in WordPress.

Step 1: Install and Activate Elementor

• Go to your WordPress dashboard.
• Navigate to Plugins » Add New.
• In the search bar, type "Elementor."
• Click Install Now next to the Elementor plugin.
• Once installed, click Activate.

Step 2: Install and Activate Elementor Pro

• Visit the Elementor website.
• Purchase the Pro version and download the plugin.
• Go back to your WordPress dashboard.
• Navigate to Plugins » Add New » Upload Plugin.
• Upload the Elementor Pro zip file and click Install Now.
• Activate the plugin and connect your Elementor Pro license.

Step 3: Create a New Page

• Go to your WordPress dashboard.
• Navigate to Pages » Add New.
• Enter a title for your page, such as "Contact."
• Click the Edit with Elementor button.

Step 4: Add a Form Widget

• Open Your Page: Open the created page in Elementor by going to Pages in your WordPress dashboard and clicking Edit with Elementor next to the page you want to add the form to.
• Add a New Section: In the Elementor editor, click the + icon to add a new section where you want the form to appear.
• Choose Structure: Select the structure for your section (e.g., single column).
• Form Widget: In the Elementor panel on the left, search for the Form widget.
• Drag and Drop: Drag and drop the Form widget into your section.

Step 5: Customize Your Form

Elementor Pro offers extensive customization options for your form:

• Add or Remove Fields: Click on a field to customize its type (e.g., Text, Email, Textarea, etc.). To add a new field, click the Add Item button. To remove a field, click the X icon next to it.
• Field Settings: Customize each field's label, placeholder, required status, and more.
• Submit Button: Customize the text and style of the submit button.
• Actions After Submit: Choose what happens after the form is submitted (e.g., email, redirect, webhook).

Step 6: Style Your Form

• Go to the Style tab in the Elementor panel.
• Customize the form fields' typography, colors, spacing, and more.
• Style the submit button to match your site's theme.

Step 7: Configure Form Settings

• Click on the Actions After Submit tab in the Elementor panel.
• Select the actions you want to trigger after submission (e.g., Email, Redirect).
• Configure the settings for each action. For example, if you choose Email, enter the email address where you want to receive form submissions.

Step 8: Publish Your Page

• Click the Publish button at the bottom of the Elementor panel.
• View your new page to see your form in action.

Conclusion

Adding forms to your WordPress site with Elementor is straightforward and highly customizable. With Elementor Pro's powerful form widget, you can create any form you need with ease. Follow these steps to add forms with Elementor and enhance your site's functionality and user experience.

Video Tutorial

For a more detailed guide, check out our video tutorial below. In this video, we demonstrate how to add and customize forms with Elementor, providing additional tips and tricks to help you make the most out of Elementor's form features.

This step-by-step instruction will help you get the most out of Elementor's form features.