Formulare einbetten

Zuletzt geändert am:

Für klassische Websites und CMS-Integrationen erfolgt die Einbettung über ein Script-Tag und einen Formular-Container.

Voraussetzungen

  1. Die Domain der einbettenden Website muss in Formcentric freigeschaltet sein.
  2. Das Script-Tag sollte mit defer geladen werden.
  3. Der Formular-Container muss ein <div> sein.
  4. data-fc-id muss mit der Formular-ID aus Formcentric übereinstimmen.

Die vollständige Static-Dokumentation finden Sie im Abschnitt Client Static.


Beispiel:

React

Für React sollte die komponentenbasierte Integration über @formcentric/client-react verwendet werden. Die alte, DOM-getriebene SPA-Einbettung über window.formcentric.initFormcentric() ist für neue React-Integrationen nicht mehr der empfohlene Pfad.

Details finden Sie im Abschnitt Client React

Vue

Für Vue sollte die komponentenbasierte Integration über @formcentric/client-vue verwendet werden. Auch hier ist der moderne Wrapper-Pfad dem alten DOM-getriebenen Ansatz vorzuziehen.

Details und ein Beispiel finden Sie im Abschnitt Client Vue Cloud.

Angular

Für Angular gibt es derzeit noch keine offiziell unterstützte Komponente. Der aktuell sinnvolle Weg ist deshalb ein projektspezifischer Wrapper auf Basis des SDK-Mount-Pfads.

Details und ein Beispiel finden Sie im Abschnitt Client Angular.

SDK / Modul-Integration

Für direkte JavaScript- oder TypeScript-Integrationen ohne Framework-Komponente steht der SDK-Pfad über mount() zur Verfügung.

Details finden Sie im Abschnitt Client SDK.

Lokale Entwicklung

Formcentric Cloud-Integrationen benötigen auch in der lokalen Entwicklung eine Domain, die in Formcentric hinterlegt ist. In der Praxis bedeutet das meist:

  1. lokale Entwicklung über HTTPS
  2. Entwicklung unter einer registrierten Dev-Domain
  3. optional Reverse Proxy vor dem eigentlichen Dev-Server

Wenn Ihr Bundler oder Framework direkt unter einer passenden HTTPS-Domain laufen kann, genügt das oft bereits. Andernfalls ist ein Reverse Proxy die einfachste Lösung.

Nutzung von Docker und Caddy

Ein einfacher Weg ist ein lokaler Proxy mit Docker und Caddy.

Beispiel Caddyfile:

Beispiel docker-compose.yml:

Danach kann der Proxy mit docker compose up -d gestartet werden. Ihre Anwendung sollte dann unter https://DOMAIN.TLD erreichbar sein.

Im nächsten Schritt muss ein passender Host-Eintrag in /etc/hosts angelegt werden, damit die gewünschte Dev-Domain lokal auf Ihren Rechner zeigt.

Beispiel:

Anschließend muss die Domain in Ihrem Admin-Account der Formcentric Cloud freigegeben werden. Lesen Sie hierzu den Artikel Domains hinterlegen.

Erst danach kann der Proxy mit docker compose up -d gestartet werden. Ihre Anwendung sollte dann unter https://DOMAIN.TLD erreichbar sein. DOMAIN.TLD ist dabei ein Platzhalter für Ihre gewünschte Dev-Domain.

Bundler- und Framework-Proxy-Konfiguration

Viele Bundler und Frameworks unterstützen Proxy- oder Host-Konfiguration direkt:

  1. Vite
  2. Webpack Dev Server
  3. Angular


Wichtig ist dabei weniger die konkrete Technologie als die Zielbedingung:

  1. der Dev-Server muss unter einer registrierten Domain erreichbar sein
  2. HTTPS sollte korrekt funktionieren
  3. Asset- und Runtime-URLs müssen zum gewählten Host passen

Troubleshooting

Typische allgemeine Fehlerquellen sind:

  1. Falsche embedId
  2. Formular ist noch nicht veröffentlicht
  3. Domain ist in Formcentric nicht freigeschaltet
  4. Falsche srcUrl, dataUrl, formappUrl oder designUrl
  5. Runtime, Theme oder Templates werden nicht geladen
  6. Bei Static fehlt defer
  7. Bei SPA- oder SDK-Integrationen wird ein Reinit erwartet, ohne dass neu gemountet wird
  8. Lokale Entwicklung läuft nicht unter einer passenden Domain oder ohne HTTPS

Feedback

ISO/IEC 27001 Icon
IT-Mittelstand Software Hosted in Germany
IT-Mittelstand Software Made in Germany