Pop Up Window

An alternative to Embedded Integration is the Pop Up Window option. You might want this option if you would rather have the form display in a separate window or lightbox.

1. In the Form Designer, choose Integration from the toolbar. You can also right-click on the form in the Dashboard, then select Form Design Tools > Integration Manager.

2. When the wizard appears, click the Next button to begin.

3. You are given the choice of several integration options: Direct Link, Embedded, or Pop Up Window.

4. Click Pop Up Window, and then click Next to move forward in the wizard.

Pop Up Form Options

In this panel, you have two choices.

• Click Lightbox Overlay if you want the form to display in a floating overlay above the browser window (you can also take advantage of enhancements such as animation and auto-display).

• Otherwise, click Browser Popup, which displays a simple popup window.

Click Next to move on to the Settings panel.

Window Settings

On this panel, you can adjust all of the settings that control the windows appearance and size. If you selected to use the lightbox pop up the settings will be slightly different to the settings for a standard browser pop up window.

LightBox Settings

When using the lightbox pop up mode, you can configure how you want the lightbox to be displayed and other options that control the appearance of the lightbox.

AutoHeight

Seting autoHeight to true will automatically size the lightbox to fit the form. If your form has multiple pages or uses dependencies to hide and show fields which result in the form height changing, this option should be used. Otherwise, you can enter a static value based on the height of your form.  

Other settings

Roll your mouse over the information icons for additional details on the other settings. And remember, you'll be able to preview all of these settings on the final step of the wizard - and go back and make changes as needed.

Browser Pop Up Settings

If you selected to use a standard browser popup, you'll be able to configure the size of the window and select which window options to shown. These settings control things like the browsers status bar, toolbars and related display settings.

Show Options

In the Show Options panel, select how the form will be shown.

You can show the form via a button (this includes the sticky button option that aligns to the side of the window), show the form automatically after a delay, or via a simple hyper link.

If you select Automatic, you'll be asked if you want the window to be shown when the user arrives at the page or when they leave the page. If you select to show the window when the user enters the page you can also define the delay. The window will be shown to the user automatically after this delay.

Custom Button Settings

If you chose to use a button to show the form, the next step of the wizard will contain the settings to customize the button. Edit the settings to create your custom button and click preview to see how it looks.

Sticky Button

You can create a button that "sticks" the to the side of the browser window by selecting an alignment options from the sticky button drop down. Select where you would like to button to be displayed.

Limited Show Options

If you selected to use the Automatic Show Mode,  the wizard will ask you to configure some additional settings to control the display of the pop up window:

• Hide After Close - Selecting this option will hide the button / and not show the form after it has been opened once and then closed (with or without a submission).

• Hide After Submit - Select this option to hide the button; it won't appear after it has been submitted.

Getting the Integration Code

On the final step of the Integration wizard, the integration code is generated and ready to be copied and pasted into your website. You can copy and paste the code anywhere on your website.

Previewing the Integration

You can preview the integration on a sample website by clicking the Preview button. This will generate a live preview using the integration settings you just configured. It uses a fictitious website with the integrated form. If the integration doesn't look right, you can close the window and click the previous button to go back and make changes. Repeat this process until you are happy with the integration.

Pre-populate the Form with Values

Click the Add URL Params button to pass values into the form to 'pre-populate' the form. Each click of the button adds a new row for each field you want to populate. Select the field on the left and enter a value on the right. When the form loads, these fields will pre-populate with these values.

Saving your Settings

To preserve your settings for later use, click the Save Profile button and give the profile a name. The next time you need to generate the integration code for this form, you'll be able to re-use these settings.