Skip to main content

Embedding a Form on a Funnel or External Site

Add a form to a funnel page or embed it on an external website.

H
Written by Hub Support Team

Once a form is built, you need to put it somewhere people can fill it in. You can drop it onto a page in Funnels & Pages, or paste an embed code into a website hosted elsewhere, such as WordPress, Squarespace, Wix or Shopify. This article covers both.

Before you start

  • Build and save the form first. See "Building Forms and Surveys".

  • For an external site, you need access to edit that site's pages or code.

Option 1: Add the form to a page in Funnels & Pages

  1. In the left menu, click Funnels & Pages.

  2. Open the funnel or website, go to Steps (or pages), and click Edit on the step you want.

  3. In the page editor, click the + icon in the top toolbar, choose Elements, and scroll to the Form section.

  4. Drag the Form element onto the page where you want it.

  5. In the Form Picker, choose your existing form from the dropdown. To build a fresh one instead, choose Create New.

  6. To change the form without leaving the page, select it and click Edit form in the right-hand panel. The form builder opens as a pop-up. Click Save in the top right when done; closing without saving loses your changes.

  7. Save and publish the page.

Edits to a form apply everywhere that form is used, so you only maintain one copy.

Option 2: Embed the form on an external website

Get the embed code

  1. Open the Forms builder from Funnels & Pages (Forms are under Funnels & Pages) and open your form.

  2. Wait for the form to finish loading, then click Integrate in the top right.

  3. Select Embed Code.

  4. Choose a layout:

    • Inline: sits in the page like any other content. Best for contact and sign-up forms.

    • Popup: opens over the page and must be closed before the visitor continues.

    • Polite Slide-In: slides in from the left or right and can be minimised.

    • Sticky Sidebar: stays pinned to one side as the visitor scrolls.

  5. For Popup, Polite Slide-In and Sticky Sidebar, set Modal height (default 500 px) and choose when it appears: Always Show, Show After [X] Seconds or Show on Scrolling [X]%. You can also choose when it stops showing: Deactivate After Showing [X] Times, Deactivate Once Lead Is Collected or Never Deactivate.

  6. Click Copy Embed Code.

If you only need a link, click Copy Form Link instead and share the URL in an email or social post.

Paste it into your site

  • WordPress: edit the page, click + and add a Custom HTML block, paste the code, and update the page.

  • Squarespace: for one page, use the page's Code Injection field; for every page, go to Settings > Advanced > Code Injection and paste into Header or Footer. Save and publish. Forms are not supported on Squarespace checkout pages.

  • Wix: click +, choose Embed > Embed a Widget > Code, paste, click Update, then publish.

  • Shopify: go to Online Store > Themes, open the theme's Actions menu > Edit Code, open theme.liquid and paste inside the head or footer section. Save.

Open the live site, submit a test entry, and confirm it appears in the form's Submissions tab in the hub.

Tips

  • The embed code is a snapshot of the layout and trigger settings. If you change the layout, timing or deactivation options later, click Integrate again, copy the new code and replace the old one on your site.

  • Each form needs its own embed code. If one page has two forms, copy the code for each.

Troubleshooting

  • The form does not appear. Check the whole code was pasted, that it is in an HTML or code block (not a text block), and that the page has been published.

  • Submissions are missing. Submit a test and check Submissions. If nothing arrives, re-copy the embed code; it may have been cut short.

Still stuck? Open the chat widget in the hub and our support team will help.

Did this answer your question?