How To Use Caldera Forms With Elementor

This guide explains how to add a contact form to your WordPress site using Caldera Forms and Elementor Page Builder.

how to add Caldera Forms to Elementor

1. Create the Contact Form Using Caldera Forms

The form I’m using is a basic form which includes: Name, Phone, Email and Message fields. Even though this plugin lets you create really intricate conditions, for this example I’ll be using the most basic form, which is very intuitive to create on Caldera using their drag and drop interface.
You can also integrate the form to MailChimp using Caldera’s add-in to Mailchimp. Caldera offers mailing list add-ons to services like MailChimp, Aweber, and ConverKit. To connect to Mailchimp, add the API key, choose the list, connect its fields to my form’s fields, and that’s it.

2. Add the section where the Caldera Form will be placed

Add a two column section where the form will be placed. The first column will include the main heading and subheading on the left, and the right column will include the contact form on the right.
3. Drag and Drop the Shortcode Widget
Back on the Elementor editor, drag the  Shortcode Widget onto the screen, and place the shortcode of the Caldera Form that you created inside.

Have a question about this?