Window-Objekt

Zuletzt geändert am: 04. Juli 2025

Sie können den Formcentric-Client nicht nur über die Attribute des Formular-Containers konfigurieren, sondern auch über das globale window.formcentric-Objekt. Diese Methode bietet erweiterte Anpassungsmöglichkeiten. Die Konfiguration über das window.formcentric-Objekt ist besonders nützlich für fortgeschrittene Anwendungsfälle, wie zum Beispiel die Integration in Single-Page-Anwendungen oder die Implementierung benutzerdefinierter Authentifizierung.

Struktur

window.formcentric = {
    // Initalisierungsfunktion, kann manuell aufgerufen werden und initialisiert alle gefunden Form-Container
    initFormcentric: function,

    // Alle Formulare entfernen (stoppt alle Formulare und entfernt Form-Container aus DOM)
    unmountAll: function,

    // Alle Formulare stoppen (stoppt alle Formulare, Form-Container bleiben im DOM)
    stoppAll: function,

    // Gibt die Instanz für die angegebene ID zurück
    getInstance: function(id: string),

    // Debug-Modus aktivieren
    debug: boolean,

    // Globaler Pfad zu Datei für das Überschreiben von Lokalisierungen
    localesPath: string,

    // Formcentric App-Konfiguration
    formapp: {
        // Template-Definitionen
        templates: object,

        // Start-Funktion (Startoptionen werden über Konfigurationsattribute definiert)
        start: function(element: HTMLDivElement, option: StartOptions),

        // Instanzen der Formulare (nach Formular-ID)
        instances: {
            'IHRE-FORMULAR-ID': {
                // Einstellungen für diese spezifische Formular-Instanz

                // Initialisierungselement (wird automatisch gefüllt)
                initElement: HTMLElement,

                // Benutzerdefinierte Header für die initiale Anfrage
                initialRequestHeaders: {
                    'Custom-Header': 'Wert'
                },

                // Formular entfernen (entfernt Form-Container von DOM)
                unmount: function() { /* ... */ },

                // Formular stoppen (stoppt das Formular, Form-Container bleibt im DOM)
                stop: function() { /* ... */ }
            }
        }
    }
}

Beispiele

Benutzerdefinierte Request-Header hinzufügen

Sie können benutzerdefinierte Header für die initiale Anfrage konfigurieren:

<script>
    // Formcentric-Objekt initialisieren
    window.formcentric = window.formcentric || {};
    window.formcentric.formapp = window.formcentric.formapp || {};
    window.formcentric.formapp.instances = window.formcentric.formapp.instances || {};
    
    // Konfiguration für ein bestimmtes Formular
    window.formcentric.formapp.instances['IHRE-FORMULAR-ID'] = {
        initialRequestHeaders: {
            'Custom-Header': 'Benutzerdefinierter Wert'
        }
    };
</script>

Manuelle Initialisierung

Sie können die Initialisierung auch manuell steuern:

<script>
    // Formular-Container hinzufügen
    const formContainer = document.createElement('div');
    formContainer.setAttribute('data-fc-id', 'IHRE-FORMULAR-ID');
    formContainer.setAttribute('data-fc-src-url', 'https://form.formcentric.com')
    document.getElementById('form-placeholder').appendChild(formContainer);
    
    // Formcentric manuell initialisieren
    window.formcentric.initFormcentric();
</script>

Formular programmatisch stoppen

<script>
    // Formular beenden und alle Ressourcen freigeben
    function stopForm() {
        window.formcentric.formapp.instances['IHRE-FORMULAR-ID'].stop()
    }

    // Event-Listener für einen Button
    document.querySelector('.button--stop').addEventListener('click', stopForm)
</script>