Form Embedding

Embed RocketLead forms on any website. The widget handles rendering, validation, booking calendar integration, captcha, and submission.

Pages in this section

Quick Start — drop-in embed for static sites and CMS pages (below).
SPA Frameworks — React, Next.js, Vue, and the imperative create() API.
Stable Field Names — how name="" selectors work and why they’re stable across forms.
Troubleshooting — common issues and what causes them.

Quick Start

Add these three snippets to your website’s HTML.

In <head>:

<link rel="preload" href="https://cdn.rocketlead.io/widget.css" as="style">
<link rel="stylesheet" href="https://cdn.rocketlead.io/widget.css">

In <body> (where you want the form):

<div data-rocketlead-form data-form-id="your-form-id">
  <noscript>Bitte aktiviere JavaScript, um dieses Formular anzuzeigen.</noscript>
</div>

Before </body>:

<script src="https://cdn.rocketlead.io/static/forms/widget.js" async></script>

On DOMContentLoaded the widget scans for [data-rocketlead-form] elements, fetches each form’s published config from the CDN, and mounts the form UI into the container.

How It Works

On DOMContentLoaded, the widget scans for all [data-rocketlead-form] elements.
For each, it reads data-form-id and fetches the published config from the CDN.
It calls GET /public/forms/:id/availability to confirm the form is reachable and learn the captcha provider.
It mounts the form UI into the container.
The widget calls the Public Form API for availability, slots, appointment types, and submission.

Allowed Domains (CORS)

Forms can be restricted to a list of allowed origins under Form Settings → Erlaubte Domains. When the list is non-empty, browser requests with a disallowed Origin header are rejected with 403 forbidden.

This is a UX guard against accidental cross-site embedding — captcha and rate limits are the actual abuse defenses. See Public API → CORS for the threat model.

Debug Mode

For development, add a debug panel next to the form:

<div data-debug-form-id="your-form-id"></div>

This renders a real-time event log showing all API calls and user interactions.

Public API — direct API integration without the widget.
Field Types — what field types exist and how they validate.
Prefill — prefill values from URLs, integrations, or the create() config.
Events — DOM events and dataLayer for analytics and ad pixels.
Webhooks — outbound JSON payload to your endpoint.