Zuletzt geändert am:
Dieser Artikel beschreibt, wie Sie Formcentric-Formulare in Ihre Website einbetten.
Damit Formcentric-Formulare auf einer Website angezeigt und genutzt werden können, müssen sie korrekt eingebettet werden.
Die Einbettung erfolgt in wenigen Schritten. Zunächst müssen Sie im Admin-Center im Bereich „Erlaubte Domains für Formular-Einbettung“ unter „Sicherheit“ die erforderlichen Domain-Einstellungen vornehmen. Dort fügen Sie die Domains und/oder Subdomains der Websites hinzu, auf denen die Formulare eingebettet werden sollen. Siehe Artikel Domains hinterlegen.
Anschließend können Sie den Einbettungscode kopieren und in das HTML-Markup der Website einfügen, auf der das Formular angezeigt werden soll.
Script-Tag einfügen
Fügen Sie das Script-Tag im <head> oder am Ende des <body> Ihrer Website ein:
Formular-Container einfügen
Fügen Sie den Formular-Container an der Stelle ein, an der das Formular angezeigt werden soll:
Nach dem Einfügen des Einbettungscodes wird das Formular automatisch geladen und angezeigt.
Beispiel:
Wenn Theme-Ressourcen nicht von Formcentric ausgeliefert, sondern lokal von Ihrer Website bereitgestellt werden sollen, können deren Pfade direkt am Formular-Container konfiguriert werden.
Dafür stehen zwei Varianten zur Verfügung.
Variante 1: Theme über Theme-Verzeichnis und Theme-Namen
Variante 2: Theme-Dateien explizit konfigurieren
Im Static-Modus werden beim Laden des Scripts alle vorhandenen Formular-Container initialisiert. Wenn Container erst später ins DOM eingefügt werden, stehen dafür drei Mechanismen zur Verfügung.
window.formcentric.initFormcentric()Dies initialisiert alle aktuell vorhandenen <div data-fc-id> Container erneut.
data-fc-dynamic-init="true" am Script-TagDamit beobachtet der Client das DOM und initialisiert neu hinzugefügte Formular-Container automatisch.
data-fc-watch="true" am Formular-ContainerDamit beobachtet der Client Attributänderungen am Formular-Container. Wenn sich ein Attributwert tatsächlich ändert, wird die laufende Instanz gestoppt und mit den neuen Attributen erneut initialisiert.
Im Static-Modus steht kein komponentenbasiertes Fehler-Callback zur Verfügung. Für die Entwicklung wird daher das Debugging über data-fc-debug am Container, über data-fc-debug am Script-Tag oder über window.formcentric.debug verwendet.
Beispiel am Formular-Container:
