Displaying a Popup After Form Submission Using EngageBox

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 trigger a popup 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 Popup on Form Submission

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:

// Set the ID of the form here
const formID = 123;

ConvertForms.Helper.onReady(() => {
	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.

Trigger a Popup Conditionally Based on a Form Input

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.

// Set the ID of the form here
const formID = 9;
const inputToCheck = 'firstName';
const inputValueToCheck = 'Tassos';

// Do not edit below
ConvertForms.Helper.onReady(() => {
  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();
    }
  });
});