Show Confirmation Popup After Submission

Convert Forms can display an inline message or redirect the user to another page after form submission. Sometimes, this does not fit your needs, and you may want to display a confirmation pop-up instead. Thankfully, Convert Forms integrates perfectly with EngageBox, the best popup extension for Joomla, allowing you to display a popup immediately after form submission. Let’s see how you can set this up.

Steps to Trigger a Form Confirmation Popup

Follow these steps to configure EngageBox to display a popup when a Convert Forms submission is completed.

1. Edit Your Popup: Go to EngageBox in your Joomla admin panel and select the popup you want to display after form submission. If you haven’t created a popup yet, click New to create one.
2. Set the Trigger Point: Navigate to the Triggers tab and set the Trigger Point to Manually. This ensures that the popup will only appear when explicitly triggered by JavaScript.
3. Add the JavaScript Snippet: In the Advanced tab, locate the Custom JavaScript option and insert the following snippet:

ConvertForms.Helper.onReady(() => {
  // Set the ID of the form here
  const formID = 123;

  // Do not edit below
  const form = document.querySelector('#cf_' + formID)
  form.addEventListener('success', () => {
    const popup = EngageBox.getInstance({eb.id});
    popup.open();
  });
});

Save your popup settings and test the form submission to ensure the popup appears correctly. If it does not, verify that the correct form ID is set in the formID variable and that the popup is published on the same page as the form.

Triggering a Confirmation Popup Conditionally

Sometimes you only want the popup to appear when a specific answer is given in the form. The script below checks the value of a chosen field after a successful submission and opens the popup only when that value matches what you define.

1. Identify the form and input to check

• formID – The numeric ID of your Convert Forms form.
• inputToCheck – The name attribute of the input you want to inspect (without the cf[] wrapper).
• inputValueToCheck – The value that should trigger the popup.

2. Add the code to your popup

Edit the popup in EngageBox → Advanced → Custom JavaScript and paste the following snippet. Update the three constants at the top to match your use case.

ConvertForms.Helper.onReady(() => {
  // Set the ID of the form here
  const formID = 9;
  const inputToCheck = 'firstName';
  const inputValueToCheck = 'Tassos';
  
  // Do not edit below
  const form = document.querySelector('#cf_' + formID);

  form.addEventListener('success', (event) => {
    const formEl = event.detail.instance.selector;
    const inputValue = formEl.querySelector('input[name="cf[' + inputToCheck + ']"]').value;

    if (inputValue === inputValueToCheck) {
        const popup = EngageBox.getInstance({eb.id});
        popup.open();
    }
  });
});

Add a Custom Close Button

All popups in EngageBox include a close button (×) at the top-right corner by default. However, if you also want to display a more user-friendly custom button below the popup’s content, such as a “Got it” or “Continue” button, you can do so with a simple HTML attribute, no JavaScript required.

EngageBox lets you control popup actions through the data-ebox-cmd attribute. When you add it to an element, clicking that element will automatically perform the specified action, such as closing the popup.

Example using a link:

<a data-ebox-cmd="close" href="#">Close popup</a>

Example using a button:

<button type="button" data-ebox-cmd="close">Close</button>

These elements trigger EngageBox to close the active popup when clicked, providing a friendlier and more intuitive way for users to dismiss the confirmation message.

For more details, visit the Control Popup using HTML Attributes guide.

Auto-close the Confirmation Popup

If you want the confirmation pop-up to automatically close after a few seconds, rather than requiring the user to click the close button, EngageBox offers a built-in way to do so. This is useful when you’re using the popup purely as a short confirmation message (for example, “Your form has been submitted successfully”) and you want it to disappear on its own after a short delay.

To set this up, follow the steps described in the Auto-Close Popup After a Specific Time guide.

From there, you can define how many seconds the pop-up should remain visible before it automatically closes. This works perfectly with popups triggered by Convert Forms submissions and requires no additional code.