This guide from Caldera isn’t updated to the latest UI so I’ll post it here for the time being.
I’m growing more and more in favour of having contact forms in a popup instead of redirecting to the Contact page – of course, most times I’d include the form at the bottom of the page as well. But 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 is assuming 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 or WPBakery Page Builder, Elementor, Beaver Builder, or others, you’ll need to go back to the standard WP text editor (Visual) in order 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 the shortcode that looks something like: [ caldera_form_modal id=”CF123123123e27eb” type=”button”]Get in touch[/caldera_form_modal ]
[caldera_form_modal id=”CF5abb7886e27eb” type=”button”]Click to see how it looks like[/caldera_form_modal]
Optional: You can style the button via CSS codes (to be updated later)
3. Copypaste that shortcode into your Page Builder
Assuming you use pagebuilders, just cut that shortcode, go back into your Page Builder mode, and paste the code as you would any shortcode (into a Text Block or Custom HTML element). The front end should look like 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!
