Many WordPress users love to use Elementor because it has a very intuitive visual editor, making web creation getting way more enjoyable. If you use the pro version, you can add a beautiful form to the page or template you area creating since the pro version comes with a Form widget. What if you use the free version of Elementor? You can also create a beautiful form with the free version of Elementor, but you need to install an extra plugin. One of the plugins you can use is Caldera Forms.
Caldera Forms is a popular enough form builder plugin for WordPress. You can use it to create any type of form. From a very simple contact form to a complex application form. There are two ways to add the forms you created with Caldera Forms to an Elementor page or template.
How to add a Caldera Forms form in Elementor
Before adding a Caldera Forms form to an Elementor page or template, make sure that you have created the form you want to add. Once the form is ready, you can use one of the following ways to add it to your Elementor page or template.
1. Adding a Caldera Forms form in Elementor using the Shortcode widget
Elementor has a Shortcode widget that allows you to integrate all WordPress plugins that use shortcode, including Caldera Forms. To add a Caldera Forms form to Elementor using this widget, first, go to Caldera Forms -> Forms. Select a form you want to add and click it to get its shortcode. Copy the shortcode.
Create a new page or post and edit it with Elementor (you can also edit an existing page, of course). On the Elementor editor, add the Shortcode widget to the canvas area. Paste the form shortcode you have just copied to the Shortcode field on the left panel.
2. Adding a Caldera Forms form in Elementor using an add-on
When adding a Caldera Forms form using the Shortcode widget, you have no option to customize the form. If you want to customize your form to make it match the color scheme of your page or template, you can use an add-on. Essential Addons and Happy Addons are two of Elementor add-ons that have a widget to add a Caldera Forms form. In this example, we will show you to add a Caldera Forms form in Elementor using Happy Addons.
Happy Addons itself is a freemium add-on. The widget to add a Caldera Forms form is available on the free version. You can download the free version of Happy Addons on the official plugin directory of WordPress. While for the pro version, you can download it from the Happy Addons website.
Once Happy Addons is installed and activated, create a new page or a new post and edit it with Elementor. Add the Caldera Forms widget to the canvas area and select the form you want to add via the dropdown menu on the Caldera Forms block under the Content tab.
To style up your form, you can go to the Style tab. To style up the form fields, you can open the Form Fields block. From this block, you can set the field spacing, border radius, typography (font size, font style, font family), field text color, placeholder color, and background color.
To style up the label of the form fields, you can open the Form Fields Label block. From this block, you can set the margin of the form fields label, the padding, label typography, description typography, label text color, required label color, and description text color.
To style up the submit button, you can open the Submit Button block. From this block, you can set the button width, margin, padding, the typography of the button text, border radius, text color, and background color (normal and hover).
Once you are done editing the page/template, you can click the PUBLISH/UPDATE button on the left panel to publish/update your page.