Widget del Modulo (Codice Embed)

Introduzione

I codici embed sono poche righe di HTML e JavaScript che puoi utilizzare per incorporare un modulo iform4u nel tuo sito web. Questo è il modo più semplice per visualizzare un modulo sul tuo sito e il metodo meno soggetto a errori. Inoltre, una delle cose più importanti riguardo al widget del modulo è che ogni volta che apporti una modifica al tuo modulo nel costruttore del modulo, il modulo incorporato si aggiornerà automaticamente.

Il Widget del Modulo è stato progettato per funzionare su qualsiasi pagina web. Il nostro Widget del Modulo crea fondamentalmente un iFrame al volo e il modulo verrà caricato al suo interno. Inoltre, poiché crea l'iFrame, può anche ridimensionarlo, il che significa che non è necessario aggiornare il codice ogni volta che apporti una modifica. Inoltre, quando mantieni un modulo all'interno di un iFrame, previeni anche conflitti con elementi JavaScript o CSS esistenti sulla tua pagina.

Quale Codice Embed del Modulo Dovrei Usare

Attualmente, iform4u offre due opzioni per pubblicare un modulo sul tuo sito web:

1. Embed con Design: Ti permette di pubblicare il modulo con il tema che è stato applicato al modulo.
2. Embed senza Design: Ti permette di pubblicare il modulo senza alcun tema, anche se ne hai applicato uno al tuo modulo.

Di solito, la prima opzione è quella che dovresti usare.

Come Popolare un Campo con una Querystring

Puoi popolare un campo con i parametri dell'URL. Assicurati solo di usare l'ID del Campo o l'Alias del Campo come chiave del parametro, quindi il valore assegnato a questo parametro apparirà nel campo.

Nota: Se stai utilizzando un Modulo a Più Passaggi, puoi andare a una pagina specifica aggiungendo il numero della pagina alla URL, per esempio per andare alla seconda pagina aggiungi la query string "p=2".

Come Ascoltare i postMessages Inviati dal Widget del Modulo

Per poter ascoltare i messaggi inviati dal Widget del Modulo, devi semplicemente aggiungere un listener di eventi alla tua pagina web. Per esempio, se hai bisogno di conoscere un ID di sottomissione dalla tua pagina web, puoi aggiungere questo codice sotto il codice embed incollato:

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("Sottomissione salvata con ID", data.data.id);        }    }}

Impostazione del Widget del Modulo

Il Widget del Modulo (codice embed) ha due parti:

1. Un codice HTML che visualizza il contenuto predefinito se l'utente accede al modulo quando JavaScript è disabilitato nel suo browser. Di default, viene visualizzato un link al tuo modulo all'interno di un elemento DIV.
2. Un codice JavaScript che si occupa di visualizzare il modulo e inizializzare il Form Tracker (se le Analisi sono abilitate).

Il widget del modulo ti permette di impostare alcune opzioni del modulo al volo:

• ID: ID del modulo nell'applicazione. Per esempio: 'id': 132
• Sid: ID di Sottomissione. Usa questa opzione per modificare una sottomissione del modulo precedentemente raccolta. Per trovare l'ID di Sottomissione, vai al Gestore delle Sottomissioni. Per esempio: 'sid': 964
• Container: ID dell'elemento HTML dove verrà inserito l'iFrame del modulo. Di default, punta all'ID del DIV che contiene il link al modulo. Per esempio: 'container': 'c132'
• Larghezza: Specifica la larghezza dell'iFrame del modulo. Per esempio: 'width': '100%'
• Altezza: Specifica l'altezza dell'iFrame del modulo. Di solito, il codice embed viene impostato con un valore in pixel. Questo valore viene calcolato dal Costruttore del Modulo al momento della sua creazione. Per esempio: 'height': '846px'
• Auto Ridimensionamento: Di default, è abilitato. Indica se l'iFrame può ridimensionarsi automaticamente all'altezza reale del modulo. Per esempio, quando vengono mostrati i messaggi di validazione. Se impostato su false, il modulo non si ridimensiona e la sua altezza sarà definita nell'opzione "altezza". Per esempio: 'autoResize': !0
• Tema: Di default, è abilitato. È un valore intero (1 o 0) che ti permette di abilitare o disabilitare un tema al volo. Per esempio: 'theme': 1
• JS Personalizzato: Di default, è abilitato. È un valore intero (1 o 0) che ti permette di abilitare o disabilitare il caricamento di file JavaScript esterni al volo. Per esempio: 'customJS': 1
• Record: Di default, è abilitato. È un valore intero (1 o 0) che ti permette di abilitare o disabilitare il Form Tracker al volo. Per esempio: 'record': 1
• Reset: Di default, è abilitato. È un valore intero (1 o 0) che ti permette di abilitare o disabilitare il reset del modulo quando il modulo viene inviato. Per esempio: 'reset': 0
• Pagina: In un Modulo a Più Passaggi, questa opzione specifica la pagina che vogliamo visualizzare di default. Per esempio, per visualizzare la seconda pagina: 'page': 2
• Modulo: Specifica il percorso all'embed del modulo. Non contiene parametri.
• Aggiungi a OffsetTop: Di default, è 0. Aggiungi o sottrai un numero di pixel a OffsetTop prima di calcolare la posizione del modulo. Questo permette di correggere la posizione del modulo quando elementi HTML sul sito (come un header) hanno la proprietà CSS: "fixed". Per esempio: 'addToOffsetTop': '-60'
• Valori Predefiniti: Se vuoi precompilare i campi del modulo con valori predefiniti, puoi usare questa opzione. I Valori Predefiniti sono un oggetto JSON dove la tua chiave è l'ID del campo del modulo e il suo valore è il contenuto del campo. Per esempio:

'defaultValues': {    'text_0': 'Questo è il mio valore predefinito'}

Nota che le checkbox e i radio button saranno selezionati con valori booleani. Per esempio:

'defaultValues': {    'text_0': 'Questo è il mio valore predefinito',    'checkbox_0': true}

Interagire con il Modulo tramite JavaScript

Il Widget del Modulo contiene molte funzionalità e opzioni che possono essere configurate all'interno di un file JavaScript esterno.

Nota: Per caricare un file JavaScript devi andare su Moduli -> Azioni -> Impostazioni -> Impostazioni UI.

Di default, è disponibile un oggetto jQuery. Quindi puoi interagire con il Modulo in modo molto semplice utilizzando le seguenti righe di codice:

$( document ).ready(function() {  // Qui possiamo interagire con il Modulo});

L'elemento del Modulo

L'elemento del Modulo - formEl - è un oggetto jQuery al quale puoi accedere per ottenere informazioni e/o manipolarlo direttamente. Per esempio, possiamo conoscere l'altezza del nostro modulo con le seguenti righe di codice:

$( document ).ready(function() {  console.log('L\'altezza del modulo è', formEl.height());});

Ascoltare gli Eventi

Certi eventi vengono attivati quando il Modulo fa qualcosa.

• view: Questo evento verrà attivato quando un modulo è stato visualizzato.
• fill: Questo evento verrà attivato la prima volta che interagisci con il modulo. Per esempio, compilando un campo di testo o selezionando un radio button.
• error: Questo evento verrà attivato quando il Server genera un errore di validazione.
• success: Questo evento verrà attivato quando il Modulo è stato inviato con successo.
• nextStep: Questo evento verrà attivato ogni volta che avanzi alla prossima fase in un modulo a più passaggi.
• previousStep: Questo evento verrà attivato ogni volta che torni indietro di una fase in un modulo a più passaggi.

Un esempio molto basilare per rilevare quando un modulo fallisce sarebbe:

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Traccia un errore di validazione del server */          /* Ciò che accade qui dipenderebbe dal tuo prodotto di analisi! */    });});

Il Motore delle Regole attiva anche i seguenti eventi quando un campo viene mostrato o nascosto utilizzando regole condizionali:

Per implementare questa funzionalità, il motore delle regole attiverà i seguenti eventi:

• ef.shown: Questo evento verrà attivato quando un campo è stato mostrato.
• ef.hidden: Questo evento verrà attivato quando un campo è stato nascosto.

Quindi, per interagire con questi eventi basta scrivere i listener di eventi. Per esempio:

$( document ).ready(function() {  $('#text_1').on('ef.shown', function(e) {    console.log("Questo campo di testo è stato mostrato.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("Questo campo di testo è stato nascosto.")  });});

I Gestori degli Eventi: previousStep e nextStep

Oltre agli eventi, iform4u offre due gestori di eventi che ti permettono di tornare indietro e avanzare di una pagina in un Modulo a Più Passaggi pronti all'uso utilizzando JavaScript. Per esempio, ora vedremo come avanzare a una pagina senza premere il pulsante "Avanti" usando la funzione di avanzamento automatico.

Avanzamento Automatico nei Moduli a Più Passaggi

Di default, quando crei un Modulo a Più Passaggi, vengono aggiunti automaticamente due pulsanti di navigazione: "Precedente" e "Avanti" in fondo al modulo. Questi pulsanti ti permettono di navigare attraverso il modulo fino a raggiungere l'ultima pagina dove di solito è posizionato il pulsante Invia.

Nota: iform4u ti permette di aggiungere più pulsanti Invia in diverse pagine o parti del modulo.

Tuttavia, in certi casi potresti voler avanzare direttamente alla pagina successiva senza premere alcun pulsante. Per questo useremo il gestore di eventi "nextStep".

Nota: Alcuni casi d'uso in cui questa funzionalità è utile sono sondaggi e/o test in cui non è permesso cambiare risposta e si vuole completare il sondaggio il più rapidamente possibile.

Per esempio, con le seguenti righe di codice, diremo al nostro Modulo che ogni volta che viene selezionato un radio button, il modulo avanzerà alla pagina successiva:

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

Infine, se vuoi nascondere i pulsanti di navigazione puoi aggiungere le seguenti righe nel Tema CSS assegnato al tuo modulo:

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

Caricare Molteplici File JavaScript e CSS nel Nostro Modulo

Avendo l'oggetto jQuery, possiamo fare uso di jQuery.when().done() per caricare più oggetti JavaScript e usarli una volta che sono pronti. Vediamo il seguente esempio.

Visualizzare un DatePicker di jQuery UI in un Campo Data

Per esempio, con le seguenti righe di codice mostreremo un DatePicker di jQuery UI nei campi Data del modulo:

$( 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 per mostrare il datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Formato coerente con il picker HTML5                        dateFormat: 'mm/dd/yy',                        changeMonth: true,                        changeYear: true,                        altField: this,                        altFormat: "yy-mm-dd"                    })            )            .hide();        });    });});

Come puoi vedere:

• Stiamo caricando 2 file all'interno della funzione when(): jquery-ui.css e jquery-ui.min.js.
• Abbiamo inserito una funzione che verrà eseguita quando i due file precedenti sono stati caricati sulla pagina all'interno della funzione done().
• La funzione esegue fondamentalmente 3 istruzioni:
  1. Trova tutti i campi di tipo "data" e converte ciascun campo "data" in "text".
  2. Clona ciascun campo Data in un campo Testo che visualizza il DatePicker.
  3. Nasconde il campo Data, perché il suo valore sarà impostato automaticamente dal DatePicker, tramite gli attributi: altField e altFormat.