Formular-Widget (Einbettungscode)

Einführung

Beim Einbettungscode handelt es sich um ein paar Zeilen HTML und Javascript, mit denen Sie ein iform4u-Formular in Ihre eigene Website einbetten können. Dies ist die einfachste Möglichkeit, ein Formular auf Ihrer Website anzuzeigen, und die Methode, die am wenigsten fehleranfällig ist. Außerdem ist eines der wichtigsten Dinge am Formular-Widget, dass jedes Mal, wenn Sie im Formular-Builder eine Änderung an Ihrem Formular vornehmen, das eingebettete Formular automatisch aktualisiert wird.

Das Formular-Widget wurde so konzipiert, dass es auf jeder Webseite funktioniert. Unser Formular-Widget erstellt im Prinzip spontan einen iFrame, in den das Formular geladen wird. Da es dann den iFrame erstellt, kann es auch dessen Größe ändern. Das bedeutet, dass Sie den Code nicht jedes Mal aktualisieren müssen, wenn Sie eine Änderung vornehmen. Wenn Sie ein Formular in einem iFrame behalten, verhindern Sie außerdem, dass es mit vorhandenen JavaScript- oder CSS-Elementen auf Ihrer Seite in Konflikt gerät.

Welchen Formular-Einbettungscode soll ich verwenden?

Derzeit bietet iform4u zwei Optionen zum Veröffentlichen eines Formulars auf Ihrer Website:

1. Mit Design einbetten : Ermöglicht das Veröffentlichen des Formulars mit dem Design, das auf das Formular angewendet wurde.
2. Ohne Design einbetten : Ermöglicht das Veröffentlichen des Formulars ohne Design, selbst wenn Sie eines auf Ihr Formular angewendet haben.

Normalerweise sollten Sie die erste Option verwenden.

So füllen Sie ein Feld mit einer Abfragezeichenfolge

Sie können ein Feld mit URL-Parametern füllen. Stellen Sie einfach sicher, dass Sie die Feld-ID oder den Feldalias als Parameterschlüssel verwenden. Dann wird der diesem Parameter zugewiesene Wert im Feld angezeigt.

Hinweis: Wenn Sie ein mehrstufiges Formular verwenden, können Sie zu einer bestimmten Seite wechseln, indem Sie die Seitenzahl an die URL anhängen. Um beispielsweise zur zweiten Seite zu gelangen, fügen Sie die Abfragezeichenfolge „p=2“ hinzu.

So hören Sie vom Formular-Widget gesendete Post-Nachrichten

Um die vom Formular-Widget gesendeten Nachrichten abhören zu können, müssen Sie Ihrer Webseite lediglich einen Ereignis-Listener hinzufügen. Wenn Sie beispielsweise eine Einreichungs-ID von Ihrer eigenen Webseite benötigen, können Sie diesen Code unter dem eingefügten Einbettungscode hinzufügen:

window.addEventListener("message", receiveMessage, false);function receiveMessage(event) {    if (event.data) {        var data = JSON.parse(event.data);        if (typeof data.action !== "undefined" && data.action === "success") {            console.log("Submission saved with ID", data.data.id);        }    }}

Formular-Widget-Einstellung

Das Formular-Widget (Einbettungscode) besteht aus zwei Teilen:

1. Ein HTML-Code, der den Standardinhalt anzeigt, wenn der Benutzer auf das Formular zugreift, während JavaScript in seinem Browser deaktiviert ist. Standardmäßig wird ein Link zu Ihrem Formular innerhalb eines DIV-Elements angezeigt.
2. Ein Javascript-Code, der für die Anzeige des Formulars und die Initialisierung des Form Trackers verantwortlich ist (sofern Analytics aktiviert ist).

Mit dem Formular-Widget können Sie einige Optionen des Formulars im Handumdrehen festlegen:

• Id : Formular-ID in der Anwendung. Zum Beispiel:'id': 132
• Sid : Einreichungs-ID. Verwenden Sie diese Option, um eine zuvor gesammelte Formularübermittlung zu bearbeiten. Um die Einreichungs-ID zu finden, gehen Sie zum Einreichungsmanager . Zum Beispiel:'sid': 964
• Container : ID des HTML-Elements, in das der Iframe des Formulars eingefügt wird. Zeigt standardmäßig auf die DIV-ID, die den Link zum Formular enthält. Zum Beispiel:'container': 'c132'
• Breite : Gibt die Breite des Iframes des Formulars an. Zum Beispiel:'width': '100%'
• Höhe : Gibt die Höhe des Iframes des Formulars an. Normalerweise wird der Einbettungscode mit einem Wert in Pixeln geliefert. Dieser Wert wird vom Form Builder zum Zeitpunkt seiner Erstellung berechnet. Zum Beispiel:'height': '846px'
• Automatische Größenänderung : Standardmäßig ist aktiviert. Gibt an, ob die Größe des Iframes automatisch an die tatsächliche Höhe des Formulars angepasst werden kann. Zum Beispiel, wenn Validierungsmeldungen angezeigt werden. Wenn es auf „false“ gesetzt ist, ändert sich die Größe des Formulars nicht und seine Höhe wird in der Option „height“ definiert. Zum Beispiel:'autoResize': !0
• Thema : Standardmäßig ist es aktiviert. Ist ein ganzzahliger Wert (1 oder 0), mit dem Sie ein Design im Handumdrehen aktivieren oder deaktivieren können. Zum Beispiel:'theme': 1
• Benutzerdefiniertes JS: Standardmäßig ist aktiviert. Ist ein ganzzahliger Wert (1 oder 0), mit dem Sie das Laden externer Javascript-Dateien im laufenden Betrieb aktivieren oder deaktivieren können. Zum Beispiel:'customJS': 1
• Aufnahme : Standardmäßig ist aktiviert. Ist ein ganzzahliger Wert (1 oder 0), mit dem Sie den Form Tracker im laufenden Betrieb aktivieren oder deaktivieren können. Zum Beispiel:'record': 1
• Zurücksetzen : Standardmäßig ist aktiviert. Ist ein ganzzahliger Wert (1 oder 0), mit dem Sie das Zurücksetzen des Formulars beim Absenden des Formulars aktivieren oder deaktivieren können. Zum Beispiel:'reset': 0
• Seite : In einem mehrstufigen Formular gibt diese Option die Seite an, die standardmäßig angezeigt werden soll. Um beispielsweise die zweite Seite anzuzeigen:'page': 2
• Formular : Gibt den Pfad zur Einbettung des Formulars an. Es enthält keine Parameter.
• addToOffsetTop : Standardmäßig ist 0. Addieren oder subtrahieren Sie eine Anzahl von Pixeln zu OffsetTop, bevor Sie die Formularposition berechnen. Dies ermöglicht die Korrektur der Formularposition, wenn HTML-Elemente auf der Website (z. B. ein Header) die CSS-Eigenschaft „fixed“ haben. Zum Beispiel:'addToOffsetTop': '-60'
• Standardwerte : Wenn Sie Formularfelder mit Standardwerten vorab ausfüllen möchten, können Sie diese Option verwenden. „Default Values“ ist ein JSON-Objekt, bei dem Ihr Schlüssel die ID des Formularfelds und sein Wert der Inhalt des Felds ist. Zum Beispiel:

'defaultValues': {    'text_0': 'This is my default value'}

Beachten Sie, dass Kontrollkästchen und Optionsfelder mit booleschen Werten ausgewählt werden. Zum Beispiel:

'defaultValues': {    'text_0': 'This is my default value',    'checkbox_0': true}

Das Formular-Widget enthält viele Funktionen und Optionen, die in einer externen JavaScript-Datei konfiguriert werden können.

Hinweis: Um eine JavaScript-Datei zu laden, müssen Sie zu Formulare -> Aktionen -> Einstellungen -> UI-Einstellungen gehen.

Standardmäßig ist ein jQuery-Objekt verfügbar. Sie können also auf sehr einfache Weise mit dem Formular interagieren, indem Sie die folgenden Codezeilen verwenden:

$( document ).ready(function() {  // Here we can interact with the Form});

Das Form-Element

Das Form-Element – ​​formEl – ist ein jQuery-Objekt, auf das Sie zugreifen können, um Informationen abzurufen und/oder diese direkt zu bearbeiten. Zum Beispiel werden wir die Höhe unseres Formulars mit den folgenden Codezeilen ermitteln:

$( document ).ready(function() {  console.log('The form height is', formEl.height());});

Auf Ereignisse lauschen

Bestimmte Ereignisse werden ausgelöst, wenn das Formular etwas tut.

• view : Dieses Ereignis wird ausgelöst, wenn ein Formular angezeigt wurde.
• fill : Dieses Ereignis wird ausgelöst, wenn Sie zum ersten Mal mit dem Formular interagieren. Füllen Sie beispielsweise ein Textfeld aus oder wählen Sie ein Optionsfeld aus.
• Fehler : Dieses Ereignis wird ausgelöst, wenn der Server einen Validierungsfehler ausgegeben hat.
• success : Dieses Ereignis wird ausgelöst, wenn das Formular erfolgreich übermittelt wurde.
• nextStep : Dieses Ereignis wird jedes Mal ausgelöst, wenn Sie in einem mehrstufigen Formular zum nächsten Schritt fortfahren.
• previousStep : Dieses Ereignis wird jedes Mal ausgelöst, wenn Sie in einem mehrstufigen Formular einen Schritt zurückgehen.

Ein sehr einfaches Beispiel für die Erkennung, wenn ein Formular fehlschlägt, wäre:

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Track a server validation error */          /* What happens here would be dependent on your analytics product! */    });});

Die Regel-Engine löst außerdem die folgenden Ereignisse aus, wenn ein Feld mithilfe bedingter Regeln angezeigt oder ausgeblendet wird:

Um diese Funktion zu implementieren, löst die Regel-Engine die folgenden Ereignisse aus:

• ef.shown : Dieses Ereignis wird ausgelöst, wenn ein Feld angezeigt wurde.
• ef.hidden : Dieses Ereignis wird ausgelöst, wenn ein Feld ausgeblendet wurde.

Um dann mit diesen Ereignissen zu interagieren, schreiben Sie einfach die Ereignis-Listener. Zum Beispiel:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("This text field has been shown.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("This text field has been hidden.")  });});

Die Event-Handler: previousStep und nextStep

Zusätzlich zu den Ereignissen bietet iform4u zwei Ereignishandler, mit denen Sie eine Seite in einem Multi-Step-Formular vor- und zurückblättern können, das mit JavaScript verwendet werden kann. Jetzt sehen wir uns zum Beispiel an, wie man mithilfe der automatischen Weiterleitungsfunktion eine Seite weiterleitet, ohne auf die Schaltfläche „Weiter“ zu klicken.

Automatisches Vorrücken in mehrstufigen Formularen

Wenn Sie ein mehrstufiges Formular erstellen, werden standardmäßig automatisch zwei Navigationsschaltflächen hinzugefügt: „Zurück“ und „Weiter“ am unteren Rand des Formulars. Mit diesen Schaltflächen können Sie durch das Formular navigieren, bis Sie die letzte Seite erreichen, auf der sich normalerweise die Schaltfläche „Senden“ befindet.

Hinweis: Mit iform4u können Sie mehrere Senden-Schaltflächen auf verschiedenen Seiten oder Teilen des Formulars hinzufügen.

In bestimmten Anwendungsfällen möchten Sie jedoch möglicherweise direkt zur nächsten Seite wechseln, ohne eine Taste zu drücken. Hierzu nutzen wir den Event-Handler „nextStep“.

Hinweis: Einige Anwendungsfälle, in denen diese Funktion nützlich ist, sind Umfragen und/oder Tests, bei denen die Antwort nicht geändert werden darf und die Umfrage so schnell wie möglich abgeschlossen werden kann.

Mit den folgenden Codezeilen teilen wir unserem Formular beispielsweise mit, dass das Formular jedes Mal, wenn ein Optionsfeld ausgewählt wird, zur nächsten Seite weiterleitet:

$( document ).ready(function() {    $('input[type=radio]').on('change', nextStep);});

Wenn Sie schließlich die Navigationsschaltflächen ausblenden möchten, können Sie dem Ihrem Formular zugewiesenen CSS-Design die folgenden Zeilen hinzufügen:

.previous, .next {    display: none !important;}

Laden Sie mehrere JavaScript- und CSS-Dateien in unser Formular hoch

Durch das jQuery-Objekt können wir jQuery.when().done() nutzen, um mehrere Javascript-Objekte zu laden und sie zu nutzen, sobald sie einsatzbereit sind. Sehen wir uns das folgende Beispiel an.

Zeigen Sie einen jQuery-UI-DatePicker in einem Datumsfeld an

Mit den folgenden Codezeilen zeigen wir beispielsweise einen jQuery UI DatePicker in den Datumsfeldern des Formulars an:

$( document ).ready(function() {    $.when(        $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),        $.getScript( "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ),        $.Deferred(function( deferred ){            $( deferred.resolve );        })    ).done(function(){        $('body').css('padding-bottom', '200px'); // Padding for show the datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Consistent format with the HTML5 picker                        dateFormat: 'mm/dd/yy',                        changeMonth: true,                        changeYear: true,                        altField: this,                        altFormat: "yy-mm-dd"                    })            )            .hide();        });    });});

Wie Sie sehen können:

• Wir laden zwei Dateien innerhalb der Funktion when() : jquery-ui.css und jquery-ui.min.js .
• Wir haben in der Funktion done() .
• Die Funktion führt grundsätzlich 3 Anweisungen aus:
  1. Suchen Sie alle Felder vom Typ „ Datum “ und konvertieren Sie jedes Feld „ Datum “ in „ Text “.
  2. Klonen Sie jedes Datumsfeld in ein Textfeld, das den DatePicker anzeigt.
  3. Versteckt das Datumsfeld, da sein Wert automatisch vom DatePicker durch die Attribute altField und altFormat .