How to Create Elementor Forms in 6 Easy Steps

Benefits of using Elementor Forms

Creating forms on your WordPress site offers several benefits. They provide a straightforward way for visitors to communicate with you, help in lead generation, and gather valuable information from your audience.

Forms are also essential for user registration and accepting payments. To add a form to your WordPress site, you typically need a plugin, but using a page builder like Elementor can simplify the process.

Elementor allows you to design appealing forms effortlessly without any coding. Its drag-and-drop editor lets you create responsive forms that align with your brand and website’s design. It offers many types of forms, including:

• Elementor Contact Forms: Ideal for crafting a basic form that allows users to reach out to you.
• Elementor Gravity Forms: This widget offers enhanced flexibility for customizing and styling your forms.
• Elementor Register Forms: Use this to create user registration forms on your website.

Each form type serves a unique purpose, enhancing your site’s functionality. 

6 easy steps to create an Elementor Contact Form

Now that we’ve discussed the benefits of using Elementor forms, let’s dive into how to create one. For the purposes of this guide, we’ll assume that Elementor is already installed and activated on your site. But if you haven’t, you can check our blog that includes a step-by-step guide on installing Elementor to your WordPress site.

Keep in mind that you will need Elementor pro to utilize the form features that we’re going to discuss . Let’s go through the steps to create a form using Elementor Forms:

Step 1: Insert the elementor contact widget

To begin, go to the page or post where you wish to add your contact form. Click on the “Edit with Elementor” button located at the top of the screen:

Edit page with Elementor to add contact form.

This action will open the Elementor editing interface. From the widget menu on the left, type in the ‘Form’ widget. Then simply drag and drop the widget into the desired area on your page. This action will place a standard contact form onto your page.

Add Form widget to page, drag and drop to place contact form.

Step 2: Configure your contact form fields

Once you’ve added your contact form to the page, there are several settings to adjust. Let’s start by configuring the form fields.

To edit existing form fields, click on the widget and customize the text to change any of the default settings. To add new fields, click on “Add Item.”

Edit form fields by customizing text or adding new ones with ‘Add Item’.

From there, select the type of field you want to add using the drop-down menu. You can then assign a label to each form field, which indicates to visitors what information they should enter. For example, Name, Email, Message, and other items you would like to add.

For the “Placeholder” option, customize the text that appears within the form field before a user inputs their data. This text can provide examples or hints about the information you expect to be filled in.

You also have the option to make a field required, adjust the column width to suit the form’s layout, and customize the form buttons. To modify button appearances, navigate to the “Buttons” panel where you can alter their size, font, and colors to match your site’s design.

Step 3: Set your form submission

Once you have set up the form fields, the next step is to configure the settings for form submissions. In the Elementor editor, go to the “Email” section to explore various options.

Here, you can enter your email address in the “To” field to specify where you want the form submissions sent. If needed, you can include multiple email addresses:

Configure form submission settings by adding recipient email addresses in the ‘To’ field.

When a visitor submits a form, the submissions can be sent to you via email. Use this section to configure the settings for these email notifications, including the option to customize the email’s subject line and the content of the message. After configuring all the necessary settings, remember to save your changes to ensure everything is applied correctly.

Step 4: Customize messaging for your contact form

To further customize your contact form, consider enabling custom messaging. To do this, go to Additional Options and toggle the Custom Messaging switch to ‘Yes’:

Customize your contact form by enabling custom messaging in Additional Options.

You can personalize four different types of messages:

• Success Message: This message will display once a user successfully submits the form.
• Error Message: This message appears if there’s an error during the form submission process.
• Required Message: This notifies users when a required field has not been completed.
• Invalid Message: This alerts users when there’s an issue with the form submission details.

Adjust these messages to reflect your brand’s voice and style. For instance, you can change the wording to have some personality, making the interactions feel more personalized and engaging.

Step 5: Style your Elementor contact form

After setting up the text and fields in your form, you can start customizing the design to align with your brand’s colors using Elementor. Begin by clicking on the “Style” tab located at the top of the widget editor:

Customize form design to match brand colors in Elementor. Click ‘Style’ tab in widget editor.

In this section, you’ll discover many options and settings that allow you to adjust the appearance of your contact form. You can modify elements such as spacing and padding, and you can also alter colors, sizes, labels, and buttons to ensure the form visually integrates with the rest of your site.

Step 6: Click save and publish your form

Once you’re happy with the design and content of your Elementor contact form, the final step is to save and publish it. This can be done by clicking the “Publish” button located at the bottom left side of the screen.

And that’s all! After publishing, you can view your contact form on the front end to make sure it appears exactly as you intended.

How to troubleshoot common issues

Elementor contact forms are generally user-friendly and functional. However, a common issue users might encounter is undelivered emails.

Elementor relies on WordPress’s wp_mail function to send emails. This function depends on your hosting provider’s email service to deliver these emails. Some hosting providers, however, may disable the PHP mail function used for sending emails, leading to delivery issues. They may do this to prevent spam or to enhance security. When this function is disabled, your WordPress site won’t be able to send emails as usual, leading to what we call delivery issues.If you face this problem, it’s advisable to contact your hosting provider and request them to enable the send_mail function.

An effective alternative is to use a Simple Mail Transfer Protocol (SMTP) server. SMTP servers handle the sending of your emails through an external service like Gmail, which can help ensure that your emails are delivered to your customers’ inboxes and not marked as spam. To implement SMTP on your site, you can use plugins such as WP MAIL SMTP, which makes it easier to set up.

5 Best WordPress form plugins for Elementor

While Elementor forms offer a great deal of functionality, there are also other WordPress form plugins that can enhance your experience with Elementor. Here are five of the best plugins to consider:

WPForms

WPForms is available as a free Lite version in the WordPress repository. It’s straightforward and simple to use, although it has limited functionalities compared to the paid version. This plugin is exceptionally popular, gathering over 5 million active installations and maintaining a solid 4.9-star rating. WPForms allows you to create various types of forms using both its free and premium versions, including contact, survey, registration, payment, and newsletter forms.

Key features of WPForms include:

• Over 650 form templates available in the template library.
• An intuitive drag-and-drop form builder.
• Mobile device optimization and SEO-friendly design.
• Conditional logic to tailor form behavior based on user choices.
• The capability to create multi-step forms.
• File upload functionality.
• Multiple confirmation options for submitting forms.
• In-dashboard management of form entries.
• Built-in spam protection features.
• Over 15 integrations with services like PayPal, Stripe, HubSpot, ActiveCampaign, Zapier, and Google Sheets.

Pros:

• A unique user journey reports feature that tracks where a customer has been and what pages they’ve visited on your site before sending their form.
• Extensive template library with pre-set form fields.
• Comprehensive documentation for user assistance.

Cons:

• Limited functionality in the free version.
• Many integrations are only available in the highest-priced subscription.
• It costs $99/year for one project.

Gravity FormsGravity Forms, developed in 2008 by Rocketgenius, is a longstanding add-on for Elementor aimed at enhancing form-building capabilities to allow web creators to develop custom forms for effective business data management. Since then, Gravity Forms has grown into a comprehensive data management platform, now powering over 5 million websites globally.

Key Features of Gravity Forms:

• Over 30 form fields categorized into standard, advanced, post, and pricing options.
• User-friendly drag-and-drop editor.
• A library of templates.
• Conditional Logic for dynamic form fields.
• Mobile-responsive form creation.
• Support for multi-step and multi-column layouts.
• Save progress and collect partial entries.
• File upload capability.
• Export and import functions of form entries.
• You can set rules and conditions for when and how emails are sent after someone completes a form
• Features for creating quizzes, polls, surveys, and implementing e-signatures.
• eCommerce functionalities such as automated payments and discount codes.
• Integrations with reCAPTCHA, Really Simple Captcha, and Akismet for spam protection.
• API and developer hooks for extensive customization.

Pros:

• Accessibility-ready design.
• Rich developer features for extensive customization.
• Simple add-on setup process.

Cons:

• No free version available.
• Some advanced features require additional purchases.
• Common features like surveys, quizzes, and polls are not free, unlike in other platforms.

Ninja FormsNinja Forms is a form-building plugin for Elementor and WordPress created by Saturday Drive. It’s a popular solution within the WordPress community, shown by its 900,000 active installations and a 4.3-star rating. Ninja Forms offers a core version that is free to use, enabling both simple and complex form creation via a user-friendly drag-and-drop builder. The plugin is designed to be 100% beginner-friendly, allowing individuals without coding experience to easily utilize its features.

Key Features of Ninja Forms:

• Over 27 different field types.
• Pre-made form templates that are customizable.
• Row and column layouts for form structuring.
• Capabilities for creating multi-step forms.
• Form import and export features.
• Available in 25 languages.
• User analytics and submission export tools.
• Customizable email alerts.
• Spam protection with Akismet and reCAPTCHA integrations.
• Fully responsive and SEO-friendly design.
• More than 25 integration options.
• GDPR-compliant form creation.  The General Data Protection Regulation (GDPR) is a set of privacy and security laws in the European Union. It makes sure that personal data is collected, stored, and managed in a secure and lawful manner.

Pros:

• User-friendly interface suitable for beginners.
• Comprehensive documentation of guides available for users.
• The available free version covers most basic form needs, like large selection of form fields and form customization options.
• Option to purchase only the additional add-ons like advance datepicker, excel export, and more.

Cons:

• Payment gateway features are restricted to the paid plans.
• The starting price for paid plans is relatively high ($99/year).

MetFormMetForm is a free form builder plugin tailored for Elementor and WordPress, developed by WPmet since 2018. It offers a versatile toolkit for creating various types of forms, such as contact, feedback, and subscription forms. With a 4.7-star rating and over 200,000 active installations, MetForm is also highly regarded among WordPress users.

Key Features of MetForm:

• 38 Elementor input fields.
• Over 30 form templates available in the library.
• Supports multi-column layouts and multi-step forms.
• Ability to submit forms through AJAX , a web development technique that enhances the functionality and user experience of web forms by making submissions faster, reducing page reloads, and improving interactive responses.
• Payment integrations including PayPal and Stripe.
• Capabilities to send confirmation emails to users and notifications to admins.
• Conditional Logic for dynamic form fields.
• Formula calculations within forms.
• More than 40 form styles.
• Google reCAPTCHA for enhanced spam protection.
• Over 20 third-party integrations, such as Slack, Moosend, Google Sheets, and ActiveCampaign.
• Supports shortcodes, a powerful feature in WordPress that allows you to add complex functions to your posts, pages, or widgets without needing to write lengthy code. For example, shortcodes can auto-populate fields based on user data.

Pros:

• GDPR-compliant, ensuring data protection.
• Supports Repeater fields, allowing addition of field groups to form layouts.
• Options to restrict form entries and set submission limits.
• Generous feature set in the free version.
• 14-day refund policy after purchase.

Cons:

• It only supports Slack and Mailchimp integrations
• Lacks the ability to create multi-step forms
• Cannot utilize calculation and conditional logic functionalities.

WooriseWoorise is a software company established in 2016 with the mission to create affordable software and web applications that help businesses expand their reach. Their free form plugin for Elementor enables the creation of various interactive campaigns like surveys, forms, quizzes, and promo pages, aimed at lead collection.

Key Features of Woorise:

• Modern drag-and-drop form builder.
• Access to premade layouts.
• Conditional logic for dynamic form fields.
• Personalized email notifications.
• User verification with reCAPTCHA for spam protection.
• Integrations with Mailchimp, HubSpot, Zapier, and over 30 other platforms.
• Supports file and image uploads.
• Connection to payment gateways.
• Multi-page form capabilities.
• Data import and export as CSV.
• Ability to create campaigns in multiple languages for your landing pages and other type of campaigns.

Pros:

• Capable of building advanced surveys, quizzes, and polls.
• Accepts payments directly through forms.
• 14-day money-back guarantee.
• Real-time data collection.

Cons:

• Some advanced features are only available in the paid version.

Save time setting up your forms by getting professional help

And there you have it—your easy step-by-step guide of using Elementor Forms. By now, you should have a solid understanding of how to design, customize, and optimize forms within your Elementor-built websites. Whether your goal is to gather leads, conduct surveys, or provide a platform for customer inquiries, Elementor Forms provides you with a versatile and powerful tool to achieve your goals with ease and efficiency.

You’ve learned a lot about using and setting up your Elementor Forms. But setting it up and configuring them can take a lot of time. This is where we can help. Our team of professional WordPress website support can help you create forms for your website that look good, easy to use, and are focused on getting more interactions. With 1dea taking care of your website, you can spend more time on more important parts of your business. Contact us today!