Once you've created a form, you can embed it on any website. The widget handles rendering, validation, the booking calendar and submission.
Find the embed code
Open your form in the editor
Click Publish — for an already-published form, use the three-dot menu → Embed code
Copy all three snippets with Copy all
Paste the code into your website
The embed code has three parts — stylesheet in the head, container in the body, script before the closing </body>:
1. In <head> — stylesheet
<link rel="preload" href="https://cdn.rocketlead.io/static/forms/widget.css" as="style"> <link rel="stylesheet" href="https://cdn.rocketlead.io/static/forms/widget.css">
The preload ensures the stylesheet loads as early as possible so the form renders without layout shift.
2. In <body> — container
Place this element wherever the form should appear:
<div data-rocketlead-form data-form-id="your-form-id"> <noscript>Please enable JavaScript to view this form.</noscript> </div>
3. Before </body> — script
<script src="https://cdn.rocketlead.io/static/forms/widget.js" async></script>
On DOMContentLoaded, the script scans for all [data-rocketlead-form] elements, fetches their published config from the CDN, and mounts the form into the container.
Full example
<!DOCTYPE html> <html> <head> <title>Book a trial lesson</title> <link rel="preload" href="https://cdn.rocketlead.io/static/forms/widget.css" as="style"> <link rel="stylesheet" href="https://cdn.rocketlead.io/static/forms/widget.css"> </head> <body> <h1>Book your trial lesson</h1> <div data-rocketlead-form data-form-id="abc-123-def"></div> <script src="https://cdn.rocketlead.io/static/forms/widget.js" async></script> </body> </html>
Platform-specific guides
WordPress
Edit the page where the form should appear
Add a Custom HTML block
Paste the container code (part 2)
Add the stylesheet (part 1) and the script (part 3) in the theme settings under Header Scripts and Footer Scripts respectively
Wix
Add an Embed HTML element
Paste all three code parts together
Webflow
Add an Embed element
Paste the container code
Go to Project Settings → Custom Code: stylesheet into Head Code, script into Footer Code
Stable field names for Tag Manager
Each field has an optional Name (in the editor under field settings). When set, it becomes the HTML name="" attribute on the rendered input:
<input id="field-abc12345" name="email" type="email" autocomplete="email" />
This makes stable selectors like input[name="email"] work across every form on your domain — Google Tag Manager and similar tools can target the email field on every form with a single selector.
Fields without a name set fall back to the internal field id (e.g. name="field-abc12345") — stable within a form, but different from form to form.
Prefilling values and hiding fields
Fields can be prefilled from the embed code, the URL, local persistence, or the editor default — and you can hide fields from the rendered form, for example to pin a different value per location. The full cascade, validation rules, and examples (such as one form across five WordPress sites pinning a different studio per page) live in a dedicated article:
Troubleshooting
Form doesn't appear
Open the browser console and check whether the script loads (no 404 on
widget.js)Make sure the
data-form-idis correct — copy it directly from the editorCheck that the form is published — drafts don't render
Form appears unstyled
The stylesheet (part 1 of the embed code) is missing. Without widget.css, only the bare HTML markup renders.
Form is too wide
The form adapts to the container's width automatically. To cap it:
<div style="max-width: 600px; margin: 0 auto;"> <div data-rocketlead-form data-form-id="abc-123-def"></div> </div>
Submission fails with a CORS error
If you've configured Allowed Domains in the form settings, your website's domain has to be on the list — otherwise the API rejects the submission. Leave the list empty if you want to embed the form on arbitrary domains.