How to 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.

Display Convert Forms in a Popup

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.

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.