WPForms is one of the most popular form builder plugins while Elementor is the most popular page builder plugin. If you use both plugins on your WordPress site, you can easily integrate them. We will cover it shortly in this article.
As you have known, Elementor Pro (read the differences between Elementor Free vs Elementor Pro) actually has a Form widget that you can use to create beautiful forms on your site. However, for an advanced need such as accepting payment or creating a user registration form, you need a more capable plugin. In addition, most form builder plugins — including WPForms — come with built-in submission management to streamline your workflow.
How to integrate WPForms with Elementor
There are at least two ways to integrate WPForms with Elementor. We will cover them all in this article. Don’t worry, you don’t need to spend extra money to integrate WPForms with Elementor.
Before getting started, make sure you have installed and activated both the WPForms and Elementor plugins on your WordPress site. Also, make sure that you already have at least one form created with WPForms. If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.
Integrating WPForms and Elementor using the Shortcode widget
Elementor has a widget called Shortcode. This widget is available on Elementor Free. As the name suggests, you can use this widget to integrate all WordPress plugins that use shortcode with Elementor. Since WPForms also uses a shortcode to add a form you created with it, you can use the Elementor’s Shortcode widget to integrate WPForms with Elementor.
First off, simply create a new page (Pages -> Add New) and edit it with Elementor. Of course, you can also edit an existing page. On the Elementor editor, drag the Shortcode widget to the canvas area.
Go to the left panel and paste the shortcode of the WPForms form you want to add to the field on the Shortcode block under the Content tab.
To get the shortcode of a WPForms form, you can go to WPForms -> All Forms. Each WPForms form has a shortcode that you can use to add the associated form to any page on your WordPress site.
Integrating WPForms and Elementor using the Happy Addons
Happy Addons is a freemium Elementor add-on that comes with a widget — the WPForms widget — that you can use integrate WPForms with Elementor. This widget is available on the free version Happy Addons so you don’t need to spend extra money. Unlike the first method above, when integrating WPForms with Elementor using the Happy Addons, you will be able to customize the look of your form.
Before being able to use the Happy Addons, you definitely need to install it first on your WordPress site. You can get the free version of this add-on on the official plugin repository of WordPress. Once the Happy Addons is installed and activated, create a new page and edit it with Elementor. Or, you can also edit an existing page. On the Elementor editor, add the WPForms widget by dragging it from the left panel to the canvas area.
Go to the left panel and select a form you want to add from the dropdown menu on the WPForms block under the Content tab.
To customize the look of your form, you can go the Style tab. There are 3 styling option blocks you can open to customize the look of your form.
- Form Fields
You can open this block to set the field spacing, field padding, border radius of the fields, typography of the text fields (font family, font size, font style, and so on), the color of the text fields, the color of the field placeholder, and so on.
- Form Fields Label
You can open this block to set the margin of the fields label, padding, typography, and text color.
- Submit Button
You can open this block to customize the submit button. You can set things like button width, margin, padding, the typography of the button text, the color of the button text, background color, and border radius.
Once done customizing your form and editing your page, you can publish/update your page.
While you can use Happy Addons for free, there are some useful features available on the pro version such as preset, cross domain copy paste, live copy, image masking, and so on.