Lists and lead capture
Embed a Leadnote lead form on your website
Copy the iframe or script code of a Leadnote form, paste it into your page, choose which websites may post to it, and learn how form keys and direct posts work.
To embed a Leadnote form, open Forms, copy one of the code snippets and paste it into the HTML of your page. The form appears inside your page and each submission becomes a lead in the form's list. This article covers the three places that give you code, the settings that protect an embedded form, and how to post to a form from your own page.
Where to get the code
| Where | What you get |
|---|---|
| Hub, Data Management, Leadnote Forms, then Website embed code | Iframe (simplest) and Script (adds the form where the div sits). Both are 100% wide, up to 640 pixels, 680 pixels high. |
| Lists, Actions, Edit List, Inquiry Forms tab, Embed on Your Website | A script line that loads /embed/leadnote-form.js from Leadnote plus a div with your list's form key in data-key. Below it, Ready to use Code Script is a complete stand-alone HTML page that frames the form. |
| Integrations, Website Forms card | Iframe, a Script embed that resizes itself to the form, and a Direct POST address. Also Allowed websites and spam rules. |
All of them show the same form and send leads to the same list. Forms and Website Forms are open to Account Owners and Managers by default, because they follow the Integrations permission.
Paste it into your page
- In Leadnote Forms, find the form. In Card View use Website embed code; in Table View use Embed in the Website Embed column.
- In the Website embed window, click the copy button on the snippet you prefer.
- Paste it where the form should appear: in plain HTML, or in a "Custom HTML", "Embed" or "Code" block of your website builder. Save and publish the page.
If a builder strips scripts, use the Iframe snippet. Embedded forms need a web page; for emails and messaging apps share the form link, see lead capture forms. To put a form on a page that Leadnote hosts for you, see Leadnote Pages.
Size and look
- Give the frame a container at least as wide as a phone screen and keep the width at 100%.
- A form with many fields or an address section needs more height than the default. Raise the
heightvalue, or use the auto-sizing script from Website Forms. - Choose Paper, Midnight, Marigold or Coral in the form builder. See customise your lead capture form.
The Website Forms page
Open Integrations and choose the Website Forms card; the page is titled Website enquiry forms. The Forms and snippets tab lists every form with its list, status, submissions, allowed websites and spam protection. Choose Embed and settings on a row to open a drawer with three tabs.
- Embed shows the hosted form link, then the iframe, the Script embed (paste both lines; it adds the iframe and resizes it so there is no inner scrollbar), the Direct POST address and a test command. Test the form opens the live form.
- Allowed websites limits which websites may send the form from a browser.
- Spam protection shows the checks below.
Allowed websites
Enter one website per line in the form https://www.shop.example: scheme and host only, no path, no trailing slash, no *. You can list up to 20 and click Save allowed websites. Leave it empty to allow any website. Your Leadnote pages are always allowed, and a call from your own server is never blocked by this list. A refused post is answered with 403 and written to the Activity log as rejected.
Because the hosted form submits from Leadnote's own pages, this list does not stop an iframe on another site from showing the form. It controls forms you build yourself.
Post from your own form
Direct POST is for a form you build yourself: send JSON with Content-Type: application/json to the POST address. Include an email address or a phone number, for example firstName, email and phone. The form's mandatory fields still apply. A successful post answers with ok: true; a wrong field answers 400 with the list of problems. For API keys and server-to-server calls, see the public API for developers.
Spam protection
| Protection | What it does |
|---|---|
| Honeypot | A hidden field named hp_check. If it is filled, the submission is refused and nothing is created. |
| Time trap | A submission less than 2 seconds after the form opened is refused. After 24 hours the visitor is asked to reload. A direct post without the form token is not checked. |
| Rate limit | 20 submissions a minute for each visitor address and form. |
| Size cap | The request body can be at most 64 KiB. |
| reCAPTCHA | Optional. Turn it on for a form on the Forms page. It is checked only when your Leadnote administrator has set the platform's reCAPTCHA secret; the Website Forms page tells you whether it is verifying or skipped. |
The form key
A form link looks like https://your-leadnote-address/f/FORM_KEY. For a list's own form the key is also the list's List key. You find list keys on the API reference tab of the API and webhooks page under Integrations, and developers send one as listKey when creating leads. The key is visible in the HTML of any page that embeds the form, so treat it as public. If a link is misused, an Account Owner or Manager can issue a new one; see QR code and QR display. The old embed then stops working and you must copy the code again.
If leads do not arrive
- Confirm that the snippet still matches the form. After a new link is created the old embed shows "Not valid!".
- If you use Direct POST from a browser, check Allowed websites and the Activity log for rejected posts.
- Make sure the form has a mandatory contact method, so visitors can complete it.
- Check the list's assignment rule on the Distribute leads tab to see who should have received the lead.
- See leads not arriving from forms and integrations.
Frequently asked questions
Do I need a developer to embed the form?
Usually not. If your website builder lets you paste HTML, such as a custom HTML block, you can paste the snippet yourself. Otherwise give the code to whoever manages the site.
Will the embedded form match my brand colours?
Colours and fields follow the form settings. Change the theme and wording in the form builder rather than in your own page's styles. You can still control the frame's width and position.
The form looks cut off on my page. What should I do?
Give the frame more height. In the Forms page iframe snippet change height="680" to a larger number, or use the auto-sizing script embed from Integrations, Website Forms.
What is the form key?
It is the part of the form link after /f/. For a list's own form it is the same value as the list's List key, which the public API accepts in the listKey field.
Does Allowed websites stop other sites from showing my form in an iframe?
No. The hosted form sends submissions from Leadnote's own pages, which are always allowed. The list matters for a form you build yourself that posts to Leadnote from your page.