--- title: "Convert Forms Integration - EngageBox" description: "Display contact forms in a popup in Joomla. Integrate with Convert Forms to create lead generation popups." url: "https://www.tassos.gr/docs/engagebox/integrations/joomla/convert-forms" date: "2026-04-06T13:45:11+00:00" language: "en-GB" --- [ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Integrations ](https://www.tassos.gr/index.php?option=com_content&view=category&id=55) / [ Joomla ](https://www.tassos.gr/index.php?option=com_content&view=category&id=108) # Convert Forms Integration ## Display contact forms in a popup in Joomla. Integrate with Convert Forms to create lead generation popups. Convert Forms Integration is available in Pro Unlock this and dozens of other powerful features by upgrading to EngageBox Pro. [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe) In this article you will learn how to display a form created with Convert Forms in a popup using EngageBox. ## [1. Using Convert Forms shortcode](#1-using-convert-forms-shortcode) First of all, we need to find the shortcode of the Convert Form we're going to use. Let's see how to do that. - Navigate to *Components > Convert Forms > Forms* - While you are on the list view of your forms, find the form you are interested in and hover of the "chain-link icon" at the right of the forms row. See the screenshot below. ![convert forms how to find shortcode](https://www.tassos.gr/images/convert-forms-how-to-find-shortcode.png) Now that we have the shortcode all that's left is to type that shortcode into our Engage Box editor like it is depicted in the screenshot below and save it! That's it! ![engage box convert form shortcode](https://www.tassos.gr/images/eb-convert-form-load-via-shortcode.png) ## [2. Using Convert Forms module](#2-using-convert-forms-module) It is assumed that you have already published the module of the Convert Form you're interested in. If not, then first take a look at our [How to display a form on the frontend](https://www.tassos.gr/joomla-extensions/convert-forms/docs/how-to-display-a-form-on-the-frontend) documentation to learn exactly how to do that. ![engage box convert form module](https://www.tassos.gr/images/eb-convert-form-load-via-module.png) Using a module of Convert Forms inside an Engage Box does not differ in any way than any other conventional module. As seen in the screenshot above, just set the Box Type to **Existing Module** and right below select your Convert Forms module. That's it! ## [Auto-Close Popup After Form Submission](#auto-close-popup-after-form-submission) If we'd like to auto-close the popup after a successful form submission, we'll need to use a small JavaScript snippet that closes the pop-up after the "success" event of the form is triggered. Edit your popup and go to Actions -> Click on *Add action* -> On *Event* and *Action* select **After Open** and **Run Javascript** respectively, and enter the code below: ``` var form = me.el.querySelector('.convertforms'); form.addEventListener('success', () => { me.close(); }); ``` If you'd like to add a delay, use the following Javascript snippet instead: ``` var form = me.el.querySelector('.convertforms'); form.addEventListener('success', () => { setTimeout(function() { me.close(); }, 3000); }); ``` This will close the popup 3 seconds (3000 milliseconds) after the form has been submitted. Adjust the delay as desired. The script above utilizes the JavaScript Events API, which is available for both [Convert Forms](https://www.tassos.gr/joomla-extensions/convert-forms/docs/using-the-javascript-api) and [EngageBox](https://www.tassos.gr/joomla-extensions/engagebox/docs/engagebox-javascript-api-2) extensions. ## [Hide popup for session after form submission](#hide-popup-for-session-after-form-submission) If you want to hide the popup as long as the session lasts and only after the form has been successfully submitted, place the following code into the **Custom Code** option in the **Advanced** tab of your popup. ``` EngageBox.onReady(function() { let popup = EngageBox.getInstance({eb.id}); var form = popup.el.querySelector('.convertforms'); form.addEventListener('success', (event) => { document.cookie = "engagebox_{eb.id}=true; path=/"; }); }); ``` If you would like to also auto-close the popup, use this snippet instead: ``` EngageBox.onReady(function() { let popup = EngageBox.getInstance({eb.id}); var form = popup.el.querySelector('.convertforms'); form.addEventListener('success', (event) => { document.cookie = "engagebox_{eb.id}=true; path=/"; popup.close(); }); }); ``` Convert Forms Integration is available in Pro Unlock this and dozens of other powerful features by upgrading to EngageBox Pro. [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe) Last updated on Sep 4th 2025 09:09 ## Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.tassos.gr" }, { "@type": "ListItem", "position": 2, "name": "Home", "item": "https://www.tassos.gr/docs" }, { "@type": "ListItem", "position": 3, "name": "EngageBox", "item": "https://www.tassos.gr/docs/engagebox" }, { "@type": "ListItem", "position": 4, "name": "Integrations", "item": "https://www.tassos.gr/docs/engagebox/integrations" }, { "@type": "ListItem", "position": 5, "name": "Joomla", "item": "https://www.tassos.gr/docs/engagebox/integrations/joomla" }, { "@type": "ListItem", "position": 6, "name": "Convert Forms Integration", "item": "https://www.tassos.gr/docs/engagebox/integrations/joomla/convert-forms" } ] } ``` ```json { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.tassos.gr/docs/engagebox/integrations/joomla/convert-forms" }, "headline": "Convert Forms Integration", "image": { "@type": "ImageObject", "url": "https://www.tassos.gr/" }, "publisher": { "@type": "Organization", "name": "Tassos", "logo": { "@type": "ImageObject", "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png" } }, "author": { "@type": "Person", "name": "Tassos Marinos", "url": "https://www.tassos.gr/docs/engagebox/integrations/joomla/convert-forms" }, "datePublished": "2017-01-04T18:57:52+02:00", "dateCreated": "2017-01-04T18:57:52+02:00", "dateModified": "2025-09-04T09:34:03+03:00" } ```