Sobald du dein Formular erstellt hast, kannst du es auf jeder Website einbetten. Das Widget übernimmt Rendering, Validierung, Buchungskalender und Absendung.

Embed-Code finden

Öffne dein Formular im Editor
Klicke auf Veröffentlichen — bei einem bereits veröffentlichten Formular auf das Drei-Punkte-Menü → Einbettungscode
Im Dialog findest du zwei Tabs: HTML für statische Websites und React / Next.js für SPA-Frameworks. Wähle den passenden Tab und kopiere die Snippets.

Code in deine Website einfügen

Der HTML-Embed-Code besteht aus drei Teilen — Stylesheet im Head, Container im Body, Script vor dem schließenden </body>:

1. Im <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">

Das preload sorgt dafür, dass das Stylesheet so früh wie möglich geladen wird, sodass das Formular ohne Layout-Sprung erscheint.

2. Im <body> — Container

Setze dieses Element dort ein, wo das Formular erscheinen soll:

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

3. Vor </body> — Script

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

Beim DOMContentLoaded sucht das Script alle [data-rocketlead-form]-Elemente, lädt deren Konfiguration vom CDN und mountet das Formular in den Container.

Vollständiges Beispiel

<!DOCTYPE html> <html> <head>   <title>Probestunde buchen</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>Jetzt Probestunde buchen</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>

Plattform-spezifische Anleitungen

WordPress

Bearbeite die Seite, auf der das Formular erscheinen soll
Füge einen Custom HTML-Block hinzu
Setze den Container-Code (Teil 2) ein
Stylesheet (Teil 1) und Script (Teil 3) gehören in die Theme-Einstellungen unter Header Scripts bzw. Footer Scripts

Wix

Füge ein Embed HTML-Element hinzu
Setze alle drei Code-Teile zusammen ein

Webflow

Füge ein Embed-Element hinzu
Setze den Container-Code ein
Gehe zu Project Settings → Custom Code: Stylesheet ins Head Code, Script ins Footer Code

Single-Page-Apps (React, Next.js, Vue)

Der Embed-Code oben funktioniert für statische Websites und klassische CMS-Setups. Bei Single-Page-Apps mit Client-Routing (z.B. Next.js, React Router, Vue Router) wird das Formular beim ersten Besuch korrekt eingebunden — beim Zurücknavigieren bleibt der Container aber leer, weil das Script nicht erneut nach [data-rocketlead-form] sucht.

Verwende für SPA-Frameworks stattdessen die window.rocketlead.forms.create()-API. Sie gibt ein Handle mit einer unmount()-Methode zurück, das du in den Lebenszyklus deiner Komponente einklinken kannst.

Tipp: Den passenden Code für SPA-Frameworks findest du im Veröffentlichungs-Dialog unter dem Tab React / Next.js.

Script laden

Lade widget.js mit defer, damit es parallel zum HTML-Parsing geladen wird, aber garantiert vor der React-Hydration ausgeführt wird:

<link rel="stylesheet" href="https://cdn.rocketlead.io/static/forms/widget.css"> <script src="https://cdn.rocketlead.io/static/forms/widget.js" defer></script>

In Next.js App Router gehört das in app/layout.tsx. Für Pages Router in _document.tsx.

React / Next.js

'use client';
import {useEffect, useRef} from 'react';export function RocketLeadForm() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const handle = window.rocketlead?.forms?.create({
      target: ref.current!,
      formId: 'deine-form-id',
    });
    return () => handle?.unmount();
  }, []);
  return <div ref={ref} />;
}

Der useEffect-Cleanup demontiert das Formular sauber, wenn die Komponente entfernt wird (Routenwechsel, Conditional Rendering). Beim nächsten Mounten wird create() erneut aufgerufen — idempotent: Ein zweiter create()-Aufruf auf demselben Element räumt die vorherige Instanz vorher auf.

Vue 3

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';const el = ref(null);
let handle;onMounted(() => {
  handle = window.rocketlead?.forms?.create({
    target: el.value,
    formId: 'deine-form-id',
  });
});onUnmounted(() => handle?.unmount());
</script><template>
  <div ref="el"></div>
</template>

Stabile Feldnamen für Tag Manager

Jedes Feld hat einen optionalen Name (im Editor unter den Feldeinstellungen). Wenn du einen Namen vergibst, wird er als HTML-name=""-Attribut auf dem gerenderten Input gesetzt:

<input id="field-abc12345" name="email" type="email" autocomplete="email" />

Damit funktionieren stabile Selektoren wie input[name="email"] über alle deine Formulare hinweg — Google Tag Manager und ähnliche Tools können das E-Mail-Feld auf jedem Formular auf deiner Domain mit demselben Selektor erfassen.

Felder ohne gesetzten Namen fallen auf die interne Feld-ID zurück (z.B. name="field-abc12345") — diese ist innerhalb eines Formulars stabil, ändert sich aber von Formular zu Formular.

Werte vorbefüllen und Felder verstecken

Felder können aus dem Embed-Code, der URL, lokaler Persistierung oder dem Editor-Default vorbefüllt werden — und du kannst Felder aus dem Formular ausblenden, etwa um pro Standort einen anderen Wert zu fixieren. Die volle Kaskade, Validierungsregeln und Beispiele (z.B. ein Formular über fünf WordPress-Seiten mit fixiertem Standort pro Seite) stehen in einem eigenen Artikel:

→ Formular-Prefill: Kaskade, Werte fixieren & versteckte Felder

Fehlerbehebung

Formular wird nicht angezeigt

Öffne die Browser-Konsole und prüfe, ob das Script geladen wird (kein 404 auf widget.js)
Stelle sicher, dass die data-form-id korrekt ist — kopiere sie direkt aus dem Editor
Prüfe, ob das Formular veröffentlicht ist — Entwürfe rendern nicht
Bei React/Next.js: Stelle sicher, dass das Script im Layout-Snippet mit defer geladen wird (nicht async) und dass die useEffect-Cleanup-Funktion handle?.unmount() aufruft

Formular sieht ungestylt aus

Das Stylesheet (Teil 1 des Embed-Codes) fehlt. Ohne widget.css wird nur das nackte HTML gerendert.

Formular ist zu breit

Das Formular passt sich automatisch der Breite des Containers an. Für eine Begrenzung:

<div style="max-width: 600px; margin: 0 auto;">
  <div data-rocketlead-form data-form-id="abc-123-def"></div>
</div>

Absendung schlägt mit CORS-Fehler fehl

Wenn du in den Form-Einstellungen Erlaubte Domains konfiguriert hast, muss die Domain deiner Website auf der Liste stehen — sonst weist die API die Absendung ab. Lass die Liste leer, wenn du das Formular auf beliebigen Domains einbetten möchtest.

Formular auf deiner Website einbetten