Skip to content
Leat Help Center

How to embed a form on your website

You can put a form straight on a page of your website, so contacts sign up without leaving it. Every form offers 3 ways to embed it, all on the form's Embed form page. Use Embed on your website unless you have a reason not to.

Finding the embed code

  1. Go to CRM → Forms and open the form.
  2. Click Embed form in the sidebar.

The page opens with Ways to use your form. It shows Your form's own page, the address where we host the form, with a button to copy it, and a tile for each way to use the form. Share a link takes you to the Share form page for the link and QR code. The other 3 tiles jump to their section further down: Embed on your website, Embed without a script and Advanced embedding.

Not sure where the code goes on your website? Click Ask Leat AI in the same card. Leat AI asks which platform your website runs on and walks you through it.

Embed on your website

This is the one marked Recommended. The code is 2 lines: an empty element where the form goes, and a script that loads the form into it. Copy the code and paste it into your page at the spot where the form should appear.

  • On Shopify, add a Custom Liquid section and paste the code there.
  • In WordPress, use a Custom HTML block.
  • In Wix or Squarespace, use an Embed code block.

The form takes exactly the height it needs. It grows when an error message appears or the next step is longer, and your visitors scroll your page as usual, also with the mouse over the form. When a contact goes to the next step and the top of the form is out of sight, the page scrolls back to it.

The form keeps the look you gave it in the form editor. The CSS of your own website doesn't reach it, and it doesn't change anything on your website either.

Before you copy the code, you can set:

  • Show form background: when this is off, the form card sits on your page's own background. Switch it on to show the form's background colour around the card, as on the form's own page.
  • Full width: stretch the form to the width of the space you place it in, instead of the width set on the form.
  • Source: every submission that comes in through this embed shows this source, for example homepage. Use a different source for each page you put the form on to see which one brings in the most sign-ups.

The code changes with every setting. Preview, next to the settings, shows the form as it will look on your page.

If your form uses your own domain, the code already points to it.

You embedded a form before

If your page has the code from Embed without a script (an iframe), the form scrolls inside its own frame and can be cut off. Replace that code with the code under Embed on your website.

Embed without a script

Use this only when your website builder doesn't allow scripts. Copy the code and paste it into your page's HTML, at the spot where the form should appear.

The form sits in a frame with a fixed height. It doesn't grow with the form, so set Height iframe before you copy the code. It starts at 980 pixels. Make it tall enough for the whole form, including error messages, or visitors have to scroll inside the frame.

Advanced embedding

Use this when you want to style the form with your own CSS, or run your own code when something happens in the form. The code draws the form directly into your page without any styling of its own, so it takes on your website's fonts, colours and buttons.

Copy the code under Advanced embedding and paste it into your page. It starts with an empty element, <div id="your-custom-id"></div>, where the form appears, and contains portalId: "your-custom-id". Both have to be the same. If you change the id of the element, change the value in the code too. Without a matching element, the form doesn't appear.

Callbacks

Turn on Use callbacks to add 2 callbacks to the code:

  • onError runs when an error occurs.
  • onSubmit runs each time a step of the form is submitted successfully.

In the code you copy, both show a browser alert. Replace those alerts with your own code.

Google Tag Manager

Whichever of the 3 ways you embed the form, it sends its events to the Google Tag Manager that's already on your website: leat_form_view, leat_form_step, leat_form_submit_success and leat_form_submit_error. With Embed on your website and Embed without a script, the form hands them to your page from its frame. With Advanced embedding, it puts them in your page's data layer directly. The Google Tag Manager you set on the form itself only runs on the form's own link.

For what each event means and how to count a sign-up as a conversion, see Tracking form views and sign-ups in Google Tag Manager.

Before you go live

The form has to be active to collect data. The CRM → Forms overview shows each form's status. To change it, open the form, click the options button (the three dots) next to Edit form and choose Activate.

A private form asks every visitor for their email address and sends them a sign-in link before they can fill it in. To sign people up on your website, embed a public form.

Back to the help center