How to Add a Popup (Modal) Contact Form Button

If you want a sleek way to collect user inquiries without redirecting them to a new page, the Totla theme makes it easy to create a popup (modal) contact form. Here’s how to set it up:

Step 1: Create a Modal Template

1. Go to Theme Panel → Dynamic Templates in your WordPress dashboard.
2. Click Add New Template.
3. Set the Template Type to Modal and give it a name like Contact Form Modal.

Step 2: Add Your Contact Form

1. Edit your new modal template.
2. Add the Total Contact Form element, or insert a 3rd-party form shortcode (like Contact Form 7, WPForms, Gravity Forms, etc).
3. If using a 3rd-party form, it’s recommended to enable sending the form via AJAX so that the form can submit without reloading the page. This ensures a smooth experience inside the modal popup.
4. Style the modal as needed.

Step 3: Add the Button to Your Site

1. Edit the page, header, or section where you want the button.
2. Insert a Button element.
3. In the button’s Link tab, set Link Type to Open Modal Template and select your modal template.
4. Save and preview — clicking the button should open your contact form in a modal popup.