Formulare flexibel erweitern: eigenes CSS und JavaScript sicher einbinden
Im Tab "Erweitert" hinterlegst du eigenes CSS und JavaScript für ein Formular. Damit passt du das Erscheinungsbild fein an oder bindest Drittanbieter-Skripte (z. B. Tracking, Chat-Widgets) ein — ohne die Kern-Logik des Formulars zu verändern.
Voraussetzungen
- Custom Code ist eine planabhängige Funktion — auf nicht unterstützten Plänen sind die Felder gesperrt.
- JavaScript-Eingaben werden vor dem Speichern validiert; ungültige Skripte werden nicht gespeichert.
Wo finden
Formular-Editor → Setup → Erweitert
Funktionen
- Eigenes CSS — ohne
<style>-Tags, reine CSS-Regeln. - Eigenes JavaScript — vollständige
<script>-Tags inkl. Attributen (async, defer, src). - Automatische Injektion in den
<head>nach dem Laden des Formulars. - Unterstützung externer Skripte (URL plus async/defer).
Schritt-für-Schritt
- Öffne Setup → Erweitert.
- Trage unter Eigenes CSS deine Regeln ein (ohne
<style>). - Trage unter Eigenes JavaScript vollständige
<script>-Blöcke ein. - Speichere — bei ungültigem JS wird die Speicherung verhindert.
- Prüfe das Ergebnis in der Vorschau und auf der Live-Domain.
Wie wird der Code ausgeführt?
In Inline-Embeds, Popups und Widgets läuft dein Code innerhalb eines iFrames mit eingeschränktem Zugriff auf das Eltern-Fenster. Beim Direkt-Link läuft er direkt in unserer Umgebung. CSS und JS werden automatisch in den <head> injiziert, sobald das Formular geladen ist.
Wozu eignet sich Custom CSS?
- Feintuning von Abständen, Farben, Schriftgrößen.
- Spezielle Hover-/Fokus-Effekte oder responsives Verhalten.
Wozu eignet sich Custom JavaScript?
- Tracking-Pixel, Conversion-Snippets, externe Analytics.
- Chat-Widgets und Drittanbieter-Helper.
Best Practices
- Nur vertrauenswürdige Skripte aus seriösen Quellen einbinden.
- async oder defer für externe Skripte nutzen, um die Ladezeit nicht zu blockieren.
- Im iFrame-Kontext (Popup/Widget) auf Funktionen verzichten, die direkten Zugriff auf das Eltern-Fenster erfordern.
Häufige Stolpersteine
- CSS greift nicht:
<style>-Tags entfernt? — Hier nur reine Regeln eintragen. - JS wird nicht gespeichert: die Validierung hat einen Syntaxfehler erkannt.
- Skript blockiert die Seite: async/defer setzen, oder den Script-Tag ans Ende verlagern.
Tipps & Hinweise
Achtung: Du bist für die rechtliche Bewertung externer Skripte selbst verantwortlich (z. B. Cookies, Drittland-Übertragung).
Häufige Fragen
Kann ich CSS- und JS-Dateien per URL einbinden?
Ja — über einen <script src="…">-Tag im JavaScript-Feld.
Funktioniert Custom Code auch im Popup-Embed?
Ja, im iFrame-Kontext mit den dort üblichen Einschränkungen beim Zugriff auf das Eltern-Fenster.
Wird der Code im Direkt-Link anders ausgeführt?
Ja — beim Direkt-Link läuft der Code direkt in unserer Umgebung, nicht im iFrame.