Embedding Forms on Your Website
Embedding lets you place your LeadCapture lead funnel directly on any website you control. The form loads inline on the page, with all the same features as the hosted version: multi-step navigation, validation, conditional logic, phone and email verification, and styling. This article walks you through the embedding process.
Getting the Embed Code
- Open your funnel in the builder.
- Click the Publish tab.
- Find the Embed Code section.
- Click the Copy button to copy the embed snippet to your clipboard.
The snippet consists of two parts: a container element that defines where the form appears, and a script tag that loads the form.
Adding the Embed Code to Your Site
- Open the page where you want the form to appear in your website's editor or CMS.
- Switch to HTML editing mode (not the visual editor).
- Paste the embed snippet at the exact location where you want the form to render.
- Save the page and preview it to verify the form loads correctly.
The form will render inside the container element and automatically adapt to the width of its parent. On narrow containers, it behaves like the mobile view.
How the Embed Works
When a visitor loads your page, the embed script:
- Fetches your funnel configuration from LeadCapture's servers.
- Renders the form inside the container on your page.
- Handles all form navigation, validation, and submission.
- Applies your configured styling (colors, fonts, buttons).
The form is fully self-contained. It does not depend on your website's CSS or JavaScript frameworks.
Placing the Form on Multiple Pages
You can paste the same embed code on as many pages as you like. Each instance loads the same funnel. All leads are tracked under the same funnel in your dashboard.
Responsive Behavior
The embedded form automatically adapts to its container width:
- On wide containers (desktops), the form uses its full layout including multi-column fields if configured.
- On narrow containers (sidebars, mobile), fields stack vertically for easy touch interaction.
You do not need to add any responsive CSS. The form handles it internally.
Custom Code for the Embed
If you need to add tracking pixels, custom CSS, or other code that runs alongside the embedded form, use the Custom Code section in the Publish tab. The embed supports two injection points:
- Before Form – Code injected above the form container. Use for tracking pixels or introductory HTML.
- After Form – Code injected below the form container. Use for conversion pixels or disclaimers.
Troubleshooting
| Issue | Solution |
|---|---|
| Form does not appear | Make sure the embed code is pasted in HTML mode, not the visual editor. Some editors strip script tags. |
| Form appears but looks wrong | Check that the container has enough width. The form needs at least 300px of horizontal space. |
| Form loads slowly | The embed script is lightweight and cached. Slow loading is usually caused by your host page's own scripts blocking it. |
| Changes not appearing | Make sure you saved the funnel in the builder. Changes are reflected immediately after saving. |
Pro Tips
- Test the embed on a staging version of your site before going live with traffic.
- The embed code never changes for a given funnel. If you update the funnel in the builder, the embedded form automatically reflects the latest version.
- If your website uses a Content Security Policy (CSP), make sure to allow scripts from your LeadCapture domain.
- You can style the container element on your site (width, margin, padding) to control the form's placement. The form fills the width of whatever container you put it in.