How to load Convert Forms through EngageBox

Published in EngageBox
Updated 08 Jan, 2020

There are two distinct methods of loading a Convert Form through an Engage Box. There is the shortcode method and the module method.

The shortcode method

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

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

The module method

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 documentation to learn exactly how to do that.

engage box convert form module

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 box after a successfull submission

In case we'd like to auto-close the popup box after a successfull form submission, we'll need to use a small Javascript snippet which closes the popup 3 seconds after the "success" event of the form is fired.

You can place the code below into the Custom Code field (Advanced tab) of your popup box after you've replaced the boxID variable with your box ID.

  jQuery(function($) { 
      // Enter your box ID below
      var boxID = 1;

      // Do not edit below
      var box  = $("#rstbox_" + boxID)
          form = box.find(".convertforms");

      form.on("success", function() {
          setTimeout(function() {
          }, 3000);

The script above makes use of the Javascript Events API which is available for both Convert Forms and EngageBox extensions.