This guide walks you through the steps to add a form to your website using the embed code. Although you can use the Form element within the builder, the embedding options give you greater control over the visibility and behaviour of forms on websites or funnels. You can manage exactly when and how forms appear, with options to trigger and deactivate them based on specific conditions. Whether you want forms to show after a certain user action or switch off once a lead is collected, these options let you create a tailored, dynamic experience.

How It Works

Start by going to the Form Builder section of your account. Here, you can create a new form, or click an existing form in the list to access its options.

Click the "Integrate" button once you're happy with the elements and design. This will automatically save any changes made to your form.

Embed Layout Type

Choose how the form will be displayed on your website. The available options are:

  • Sticky Sidebar: The form sits as a sticky element on either the left or right side of the screen, staying visible as the user scrolls. It can be minimised or expanded as needed, keeping it out of the way.
  • Polite Slide-In: The form slides in gently from the left or right, drawing the user's attention without being intrusive. It can also be minimised to avoid disrupting the browsing experience.
  • Popup: The form appears in a modal window over the page content. This format gets immediate attention but requires the user to close it before interacting with the rest of the page.
  • Inline: The form is embedded directly within the page content as a native element, for a smooth and uninterrupted user experience.

Trigger Type

Trigger options determine when the form will appear on your site. Choose from:

  • Show on Scrolling [X]%: The form appears once the user scrolls a specified percentage of the page (e.g., 50%).
  • Show After [X] Seconds: The form appears after a set delay (e.g., 5 seconds).
  • Always Show: The form is visible at all times, without relying on any user interaction.

Activation Options

Determine when the form should be activated:

  • Activate on [X] Visit: The form only appears after the user has visited the page a set number of times (e.g., on their third visit).
  • Always Activated: The form stays active at all times, regardless of user behaviour.

Deactivation Options

Define when the form should stop being displayed:

  • Deactivate After Showing [X] Times: The form stops showing after it has been displayed a set number of times (e.g., 3 times).
  • Deactivate Once Lead Is Collected: The form automatically deactivates once the user submits their information.
  • Never Deactivate: The form stays active and visible indefinitely.

Once you've configured each setting, copy the embed code to save it to your clipboard.

Modifying Your Website

With the code copied, go to the Websites section of your account and either select an existing site or create a new one where you want to embed the form.

Add a Code element to your page and paste the embed code into it.

Before saving, find the script within the embed code that handles auto-adjusting the form's height. Remove or comment it out to disable the automatic height adjustment feature.

With that script removed, you'll need to set the height of the form manually. Do this by adding a height attribute directly in the embed code or via CSS styling. Start with something like 200px and adjust from there.

Test and Adjust

After embedding the form, preview your website to check how it looks. If it isn't displaying correctly, adjust the height gradually until you get the result you want.

Once everything is configured, your form should sit neatly within your website and work as expected.

Frequently Asked Questions

Q: What if I'm not comfortable editing HTML or CSS?

  • Use forms built on the platform with the "Form" element instead.

Q: Can embedded forms work dynamically if I change my options?

  • Embedded forms are static once placed on a website, meaning any changes to the form's settings (such as triggers or deactivation options) require you to generate a new embed code. After generating the updated code, you must replace the old embed code on your site for the new settings to take effect.