Display Convert Forms in a popup

Convert Forms makes it easy to create forms and embed them in Joomla articles and pages. This guide shows you how to display the forms in a lightbox, popup, or modal.

There are two ways to insert the form into the popup content:

1. Using the form shortcode
2. Using the CMS Content → Convert Forms dropdown

Both methods achieve the same result. The difference is how the form is inserted into the popup content.

Method 1: Display Convert Forms in a Popup using shortcode

To be able to display any of your forms in a popup you will need to install EngageBox, our Joomla Popup Builder.

Next, go to Components → Convert Forms → Forms and copy the shortcode of the form you would like to embed in a popup.

Now that we have the shortcode copied into the clipboard, let's create our popup. To do so, go to Components → EngageBox. Click New and then select Blank Popup in the popup library.

Finally, paste the shortcode into the editor in the Content tab and save your popup.

Congrats! Your form is now converted into a popup.

Method 2: Display Convert Forms in a Popup using CMS Content Dropdown

If you prefer a visual method without copying shortcodes, you can insert the form directly using the editor dropdown.

• Go to Components → EngageBox → List.
• Create or edit your popup.
• Inside the popup content editor, click CMS Content in the editor toolbar.

• Select Convert Forms.
• Choose the form you want to insert.
• Click on "Insert shortcode"

• Save your popup.

Congrats! Your form is now converted into a popup.

How to open a popup when the form is submitted

Would you like to open a popup whenever someone submits your form without reloading the whole page? To make this happen, we will need to utilize the Convert Forms and EngageBox JS API.

The following code sample listens to the success event of form #2 and triggers popup #5 upon successful submission. Keep in mind that the popup must be present on the page.

ConvertForms.Helper.onReady(function() {
    let formID  = 2;
    let popupID = 5;

    // DO NOT EDIT BELOW
    var form = document.querySelector('#cf_' + formID);
    form.addEventListener('success', function(event) {
        EngageBox.getInstance(popupID).open();
    });
});

The above code can be placed into the Custom Code option in the Advanced panel in the form settings. Remember to wrap it with the <script> tag.