Key Highlights
- Input fields sizing
- Create step-by-step forms (Typeform style)
- Custom success message
- After submitting actions (send email, connect APIs, and webhooks)
Elementor Pro is one of the top website builders for WordPress. And because Elementor Pro is such a complete WordPress tool, you can achieve so much without having to add so many unnecessary WordPress plugins.
One of the cool tools provided to you by Elementor Pro is the forms widget (available only for pro). With it, you can do a variety of cool things that both enhance business productivity and the UI/UX of your websites.
Free Elementor Pro landing page templates ⇒
4 Elementor Pro Forms Hidden Hacks
Creating strong and effective forms is important for any business website. Elementor Pro offers the tools you need to register visitors to your newsletter, create beautiful-looking forms, and even the possibility to connect to other apps through the use of APIs and Webhooks.
That said, here are 5 Elementor Pro forms hidden hacks you probably didn’t know you could do:
1. Custom Sizing You Form Input Fields
Customizing your input field sizes can create a more appealing and cleaner look for your forms. Instead of having everything in a vertical lineup, you could have everything in line.
This looks especially good when using the multi-step form option (shown in the next step) or when having a single input field like an email newsletter for example.
You might as well sign up for my newsletter while you’re here ⇒
Change your input form field sizes in the “column width” section. Each field must be sized individually.
For buttons, the column width applies to all buttons.
Pro tip: Make sure that your form input fields and button sizes add up to 100%. For example, if you set your form fields to 60%, make sure your button sizes are set to a maximum of 40%.
2. Create Step-by-Step Forms (Like Typeform)
Breaking long forms into smaller steps can make them easier for users to fill out. This helps keep users engaged. With Elementor Pro’s multi-step form feature, you can lead users through a smooth process. This can increase how often forms are completed and the accuracy of the data.
Elementor Pro’s simple form widget makes it easy to create and personalize these multi-step forms. By splitting up input fields into clear sections, you help users focus better and form usability and complexity without occupying half the viewport.
To activate the multi-step feature, all you have to do is add a “step” item in between each input field to which you want to add a step.
Tip: You can have multiple input fields per step e.g. Name field -> step -> Email field and Phone number field -> step -> Text area field -> etc.
Get this consultant landing page for free ⇒
3. Custom Success (or Error) Message
This might be the most obvious Eleemntor Pro form hack out of the list, but still, a cool mention as some of you might not know it exists since it is tucked away in the form settings.
Tucked away in the Additional Options field, you can activate the custom messages and change all the different output messages like the success message, form error, server error, and invalid form error.
This just adds a nice personal touch to your forms if you choose to add the custom message option.
4. Integrating Third-Party APIs for Expanded Functionality
The form after-submit actions provide you with a large list of options you can configure once a user submits a form. The list of things you can do is pretty big:
- Collect Submissions
- Email 2
- Redirect
- Webhook
- MailChimp
- Drip
- ActiveCampaign
- GetResponse
- ConvertKit
- MailerLite
- Slack
- Discord
- Popup
One of the two actions I use the most (aside from the “collect submissions” action which should always be selected) is the Webhooksa and the APIs (connect to the different apps mentioned above).
Integrating your Elementor Pro forms with other APIs opens many doors for automating tasks and digital marketing. This connection links your forms to different marketing tools, CRM tools, and other online services.
For example, by connecting your form to MailerLite (my top email marketing provider), you could automatically add a new subscriber to your MailerLite email list when they fill out a form on your site or start an email automation sequence. These connections help simplify your business work and improve data handling across different platforms.
Besides direct Elemetnor-approved connections like the above, you can use Webhooks to connect to other third-party applications that are not within the list (e.i. make.com).
What are Webhooks in Elementor Pro?
Webhooks in Elementor Pro forms allow your website to automatically send information to another application whenever someone submits a form.
For example, if you have a contact form on your website and someone fills it out, a webhook can instantly send that information to your email marketing service or CRM (Customer Relationship Management) system without any manual effort.
To set up a webhook in an Elementor Pro form, you would:
- Edit your form: In the Elementor editor, select your form widget.
- Configure actions after submission: In the left panel, under the “Actions After Submit” section, add “Webhook” as an action.
- Enter the webhook URL: A new “Webhook” field will appear where you can paste the URL provided by the service you want to send the form data to.
Conclusion
Mastering Elementor Pro Forms can greatly improve your website’s performance. By using the hidden tips we talked about, like advanced field customizations, custom responses, and multi-step forms, you can boost user engagement and make form use smoother.
Also, adding third-party APIs and using browser local storage for form progress can help you get even more out of your forms. Use these tips to unlock the full power of Elementor Pro Forms and enhance your web design skills.
Frequently Asked Questions
Does Elementor Pro have forms?
Yes, Elementor Pro has a strong form widget as part of its features. The free version of Elementor does not have this form builder. You need to upgrade to Elementor Pro to use this function.
How do I add forms in Elementor?
Adding forms in Elementor is very easy. Just drag and drop the Elementor form widget to the part of the page you want. Then, customize the form with Elementor’s visual form builder. You can choose from many pre-built templates or create your own. You can also find many online tutorials to help you with this process.
Is Elementor Forms free?
The free version of Elementor does not include the form builder features. To use the full benefits of the form builder, you need to upgrade to Elementor Pro. The Pro version gives you advanced features and helps you connect easily with other marketing tools.
