Entwicklung

Im Folgenden finden Sie eine kurze Erklärung wichtiger Begriffe.

Der Formcentric-Client ist eine moderne, modulare JavaScript-Anwendung auf Basis von Preact. Er dient der dynamischen Einbettung und Darstellung von Formcentric-Formularen in modernen Webanwendungen und CMS-Systemen. Die Anwendung besteht aus zwei Hauptmodulen:

Damit Formcentric-Formulare auf einer Website angezeigt und genutzt werden können, müssen sie korrekt eingebettet werden. Die Einbettung sorgt dafür, dass das Formular korrekt geladen und im gewünschten Design dargestellt wird. Wie Sie Formcentric in klassische Websites einbetten, erfahren Sie im Artikel Allgemeine Einbettung. Für Framework-spezifische Umsetzungen stehen Ihnen die Artikel zu React, Vue und Angular zur Verfügung. Hinweise zur lokalen Entwicklung – etwa zur Einrichtung eines Proxy-Servers mithilfe von Docker und Caddy – finden Sie im Artikel Lokale Entwicklung.

Die Konfiguration der Anwendung können Sie über Attribute am Formular-Container und Ändern von Werten am Formcentric window-Objekt entsprechend anpassen und erweitern. Beachten Sie dabei, dass Attribute im Markup immer als String definiert werden, auch wenn ihr eigentlicher Typ ein anderer ist. Die folgenden Konfigurationsmöglichkeiten stehen zur Verfügung: Attribute : Konfiguration über HTML-Attribute am Formular-Container Window-Objekt : Erweiterte Anpassung über das globale window.formcentric -Objekt Höhen und Breiten : Steuerung der Größe und des responsiven Verhaltens Parent URL : Verwendung der data-fc-parent-url für SPAs und Double-Opt-in Captcha Provider : Auswahl und Konfiguration eines Captcha-Dienstes Formulare mit dynamischen Werten vorbelegen : Platzhalter zur Vorbelegung von Formularfeldern Eigene Übersetzungen einbinden: Anpassung der Standard-Übersetzungen durch eigene Lokalisierungsdateien

Formcentric-Formulare bieten Ihnen integrierte Debugging-Optionen, mit denen Sie die Fehlersuche während der Entwicklung oder im Live-Betrieb durchführen können. Sie haben zwei Möglichkeiten, das Debugging gezielt zu aktivieren: lokal über ein Attribut oder global über das Window-Objekt.

Formularelemente verfügen über das Feld Anzeigevariante. Für bestimmte Elemente stehen hier bereits vordefinierte Anzeigevarianten zur Auswahl, z. B. alternative Layouts. Darüber hinaus haben Sie die Möglichkeit, hier eigene CSS-Klassen einzutragen. So können Sie individuelle visuelle Anpassungen direkt über das Stylesheet Ihrer eingebetteten Website vornehmen – ideal für projektspezifische Designs und Layouts.

Eigene Themes können Sie mit dem Formcentric Theme-Customisation-Workspace gestalten. Dieser wurde speziell für die Anpassung von Formcentric-Themes entwickelt. Hier können Sie bestehende Formcentric-Themes modifizieren oder ein eigenes Theme erstellen. Mit Funktionen wie der Anpassung von Theme-Variablen, SCSS-Partials und JavaScript-Templates können Sie das Design, das Markup und das Styling der Formulare nach Ihren Vorstellungen gestalten. Zudem haben Sie die Möglichkeit, eigene Custom-Themes zu erstellen, Fonts und Bilder hinzuzufügen und Ihre Anpassungen für verschiedene Zielumgebungen zu exportieren. Weitere Informationen finden Sie im Artikel Workspace einrichten sowie bei Dokumentation.

Mit der Formcentric Event API können Sie sehen, wann bestimmte Aktionen in Ihren Formularen stattfinden – zum Beispiel ein Absenden oder ein Fehler. Diese Ereignisse können automatisch an Tracking-Dienste wie Matomo, Google Analytics oder andere Analyse-Tools weitergeleitet werden. Die API bietet eine einheitliche Schnittstelle, über die Sie relevante Ereignisse abonnieren und in Ihren eigenen Tracking-Lösungen verwenden können.