Skip to content
Sites

How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained

TABLE OF CONTENTS Introduction Use Cases Step By Step Guide Step 1: Access the Integration Settings Step 2: Choose an Embed Layout Type Step 3: Configure…

4 min read939 words11 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Use Cases
  2. Step By Step Guide
  3. Step 1: Access the Integration Settings
  4. Step 2: Choose an Embed Layout Type
  5. Set a Custom Modal Height
  6. Step 3: Configure Trigger Options
  7. Step 4: Set Activation Options
  8. Step 5: Set Deactivation Options
  9. Step 6: Copy and Embed the Form
  10. FAQs

TABLE OF CONTENTS


Introduction

The Embedding Options for Forms provide users with enhanced control over how and when forms appear on their websites or funnels. This feature offers flexibility to manage form behavior dynamically, including advanced options for triggering and deactivating forms based on specific conditions. While embed codes are static once placed on a website, any changes made to the form—such as layout, triggers, or deactivation settings—require generating and replacing the embed code to reflect the updates. These options allow users to align forms with their goals, such as improving user experience, running time-sensitive campaigns, or managing lead collection effectively.

Use Cases

  • Time-Limited Campaigns - Deactivate forms after a specific number of displays to enforce urgency or exclusivity, such as for limited-time offers or seasonal promotions

  • Lead Management - Deactivate forms after a specific number of displays to enforce urgency or exclusivity, such as for limited-time offers or seasonal promotions


Step By Step Guide

Step 1: Access the Integration Settings 

Navigate to the Form Integration Settings - After creating a form and clicks on the "integrate" button

Step 1: Access the Integration Settings (image 1 of 11) What this shows Navigate to the Form Integration Settings - After creating a form and clicks on the "integrate" button What this shows Illustrates the "Step 1: Access the Integration Settings" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 1: Access the Integration Settings" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Navigate to the Form Integration Settings - After creating a form and clicks on the "integrate" button. Immediately after, the guide continues: The following screen shows up -. Image 1 of 11 Where to goNavigate to the Form Integration Settings - After creating a form and clicks on the "integrate" button Next stepThe following screen shows up -

The following screen shows up - 

Step 1: Access the Integration Settings (image 2 of 11) What this shows The following screen shows up - What this shows Illustrates the "Step 1: Access the Integration Settings" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 1: Access the Integration Settings" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: The following screen shows up -. For context, this section explains: Navigate to the Form Integration Settings - After creating a form and clicks on the "integrate" button. Immediately after, the guide continues: Here’s a step-by-step guide on how to use the entire feature shown in the screenshot, including all embed layout types, activation options, and deactivation options. Image 2 of 11 What this coversThe following screen shows up - Next stepHere’s a step-by-step guide on how to use the entire feature shown in the screenshot, including all embed layout types, activation options, and deactivation options:

Here’s a step-by-step guide on how to use the entire feature shown in the screenshot, including all embed layout types, activation options, and deactivation options:

Step 2: Choose an Embed Layout Type

You can select how the form will appear on your website or funnel. The options include:

  • Sticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. This can be minimized or maximized as needed.

Maximized

Step 2: Choose an Embed Layout Type (image 3 of 11) What this shows Sticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Sticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. This can be minimized or maximized as needed. Immediately after, the guide continues: Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Image 3 of 11 Where to goSticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. This can be minimized or maximized as needed. Next stepPolite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption.

Minimized

Step 2: Choose an Embed Layout Type (image 4 of 11) What this shows Sticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Sticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. This can be minimized or maximized as needed. Immediately after, the guide continues: Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Image 4 of 11 Where to goSticky Sidebar - The form appears as a sticky element on the left or right of the screen, remaining visible as the user scrolls. This can be minimized or maximized as needed. Next stepPolite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption.
  • Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption.

Maximized:

Step 2: Choose an Embed Layout Type (image 5 of 11) What this shows Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Immediately after, the guide continues: Popup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content. Image 5 of 11 What this coversPolite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Next stepPopup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content.

Minimized:

Step 2: Choose an Embed Layout Type (image 6 of 11) What this shows Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Polite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Immediately after, the guide continues: Popup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content. Image 6 of 11 What this coversPolite Slide-In: The form slides in from the left or right side of the screen, subtly catching the user's attention. It can also be minimized to avoid disruption. Next stepPopup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content.
  • Popup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content.

Step 2: Choose an Embed Layout Type (image 7 of 11) What this shows Popup - The form appears in a modal window that overlays the page content. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Popup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content. Immediately after, the guide continues: Inline: The form is embedded directly into the page content as a native element. It doesn’t interrupt the user experience. Image 7 of 11 What this coversPopup - The form appears in a modal window that overlays the page content. It grabs immediate attention but requires dismissal to view the underlying content. Next stepInline: The form is embedded directly into the page content as a native element. It doesn’t interrupt the user experience.

  • Inline: The form is embedded directly into the page content as a native element. It doesn’t interrupt the user experience.

Step 2: Choose an Embed Layout Type (image 8 of 11) What this shows Inline: The form is embedded directly into the page content as a native element. What this shows Illustrates the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Step 2: Choose an Embed Layout Type" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: Inline: The form is embedded directly into the page content as a native element. It doesn’t interrupt the user experience. Immediately after, the guide continues: Custom modal height gives you more control over how embedded forms appear on external pages. This helps prevent non-inline embeds from feeling oversized or overflowing on the host page while keeping existing embed behavior unchanged. Image 8 of 11 What this coversInline: The form is embedded directly into the page content as a native element. It doesn’t interrupt the user experience. Next stepCustom modal height gives you more control over how embedded forms appear on external pages. This helps prevent non-inline embeds from feeling oversized or overflowing on the host page while keeping existing embed behavior unchanged.

Set a Custom Modal Height

Custom modal height gives you more control over how embedded forms appear on external pages. This helps prevent non-inline embeds from feeling oversized or overflowing on the host page while keeping existing embed behavior unchanged.

You can set a Modal height for these embed layout types:

  • Popup
  • Polite Slide-in
  • Sticky Sidebar

The Inline layout does not show this option.

How to configure modal height

1. Open your form and click Integrate after the form finishes loading.

2. Select Embed Code.

3. Choose one of these layouts:

  • Popup
  • Polite Slide-in
  • Sticky Sidebar

4. Enter your preferred height in the Modal height field.

5. Click Copy embed code and paste it on your website.

Important details

  • The default modal height is 500 px
  • The field accepts any whole number 1 or greater
  • Existing embeds without this setting continue to work as before
  • The field is hidden for Inline layouts
Set a Custom Modal Height (image 9 of 11) What this shows The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work… What this shows Illustrates the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts. This part of the guide covers 6 fields, listed below. Immediately after, the guide continues: Trigger options control when the form appears. Select one of the following. Image 9 of 11 What this coversThe default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts
Fields in this part of the guide PopupPolite Slide-inSticky SidebarThe default modal height is 500 pxThe field accepts any whole number 1 or greaterThe field is hidden for Inline layouts
Buttons and menus referenced Modal heightInlineHow to configure modal heightIntegrateEmbed CodePopupPolite Slide-inSticky SidebarCopy embed codeImportant details500 px1 or greater
Next stepTrigger options control when the form appears. Select one of the following:
All 3 steps in this procedure
  1. Popup
  2. Polite Slide-in
  3. Sticky Sidebar
Set a Custom Modal Height (image 10 of 11) What this shows The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work… What this shows Illustrates the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts. This part of the guide covers 6 fields, listed below. Immediately after, the guide continues: Trigger options control when the form appears. Select one of the following. Image 10 of 11 What this coversThe default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts
Fields in this part of the guide PopupPolite Slide-inSticky SidebarThe default modal height is 500 pxThe field accepts any whole number 1 or greaterThe field is hidden for Inline layouts
Buttons and menus referenced Modal heightInlineHow to configure modal heightIntegrateEmbed CodePopupPolite Slide-inSticky SidebarCopy embed codeImportant details500 px1 or greater
Next stepTrigger options control when the form appears. Select one of the following:
All 3 steps in this procedure
  1. Popup
  2. Polite Slide-in
  3. Sticky Sidebar
Set a Custom Modal Height (image 11 of 11) What this shows The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work… What this shows Illustrates the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". This screenshot appears in the "Set a Custom Modal Height" section of "How to Use Embedding Options for Forms: Triggers, Layouts, and Deactivation Settings Explained". The text alongside this image reads: The default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts. This part of the guide covers 6 fields, listed below. Immediately after, the guide continues: Trigger options control when the form appears. Select one of the following. Image 11 of 11 What this coversThe default modal height is 500 px The field accepts any whole number 1 or greater Existing embeds without this setting continue to work as before The field is hidden for Inline layouts
Fields in this part of the guide PopupPolite Slide-inSticky SidebarThe default modal height is 500 pxThe field accepts any whole number 1 or greaterThe field is hidden for Inline layouts
Buttons and menus referenced Modal heightInlineHow to configure modal heightIntegrateEmbed CodePopupPolite Slide-inSticky SidebarCopy embed codeImportant details500 px1 or greater
Next stepTrigger options control when the form appears. Select one of the following:
All 3 steps in this procedure
  1. Popup
  2. Polite Slide-in
  3. Sticky Sidebar

Step 3: Configure Trigger Options

Trigger options control when the form appears. Select one of the following:

  • Show on Scrolling [X]% → The form appears after the user scrolls a certain percentage of the page (e.g., 50%).

  • Show After [X] Seconds → The form appears after a delay (e.g., 5 seconds).

  • Always Show → The form is always visible and does not rely on user interaction.

Step 4: Set Activation Options

Define when the form should become active:

  • Activate on [X] Visit → The form is displayed only after the user has visited the page a set number of times (e.g., on their third visit).

  • Always Activated → The form remains active at all times.

Step 5: Set Deactivation Options

Decide when the form should stop being displayed:

  • Deactivate After Showing [X] Times → Stops displaying the form after it has been shown a specific number of times (e.g., 3 times).

  • Deactivate Once Lead Is Collected → The form deactivates automatically once the user submits their information.

  • Never Deactivate → The form remains active and visible indefinitely.

Step 6: Copy and Embed the Form

  1. Click "Copy Embed Code" to get the HTML code for embedding the form into your website.

    • Paste this code into your website’s HTML wherever you want the form to appear.

  2. Alternatively, click "Copy Form Link" to get a direct URL for the form.

    • Use this link in emails, social media, or other platforms where you want users to access the form.


FAQs

1. How do triggers and deactivation options work together?

Triggers determine when the form appears (e.g., after a delay or scrolling). Deactivation Options control when the form stops appearing (e.g., after a specific number of displays or after a lead is collected). Both can work simultaneously to create a dynamic user experience.

2. Do I need to update existing embed codes for the new features to work?

Yes, to use the new embed options (e.g., triggers, deactivation), you need to update the integration by generating a new embed code from the "Integrate Form" section and replacing the old code on your site.

3. Can embedded forms work dynamically if I change my options?

Embed codes are static once they are placed on a website. This means that any changes made to the form require generating and replacing the embed code with the updated version for the changes to take effect.

Was this guide helpful?

Related guides