How to create a pop-up/modal contact form using Caldera Forms

Caldera Forms was discontinued in 2022 – this post stays up for anyone maintaining a legacy site.

I originally wrote this because Caldera's own guide wasn't kept up to date with the UI. That guide's gone now along with the rest of calderaforms.com, but the steps below are what I used at the time.

I'm growing more and more in favour of having contact forms in a pop-up instead of redirecting to the Contact page, though most times I'd include the form at the bottom of the page as well too. Pop-up form buttons are great to put at the top of the page so you can capture your visitors' data without interrupting their browsing experience.

This guide assumes you've already built your form in Caldera.

To create your pop-up form, follow the steps below:

1. Switch to the WordPress text editor

If you use page builders like Visual Composer, WPBakery Page Builder, Elementor, Beaver Builder, or others, you'll need to go back to the standard WP text editor (Visual) to access the Caldera Form shortcode inserter.

2. Insert the form via the Caldera Form shortcode inserter

Click on the Caldera Form button
Select your form
Check the "Set as Modal" option, and fill in the options accordingly
Insert form. You should get a shortcode that looks something like this:

[caldera_form_modal id="CF123123123e27eb" type="button"]Get in touch[/caldera_form_modal]

Mine looked like this at the time (this was a live button that opened the modal, it just renders as plain text now that the plugin's gone):

[caldera_form_modal id="CF5abb7886e27eb" type="button"]Click to see how it looks like[/caldera_form_modal]

Optional: you can style the button with CSS.

3. Copy-paste that shortcode into your page builder

If you're using a page builder, cut the shortcode, go back into your page builder, and paste it as you would any shortcode (into a Text Block or Custom HTML element). The front end should show a button, and on click, should open the form as a modal.

Hope this helps! Feel free to comment below if you have any trouble or if you have questions. All the best!