Widget modulo (codice incorporamento)

Introduzione

Il codice di incorporamento è composto da 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 suscettibile agli errori. Inoltre, una delle cose più importanti del widget del modulo è che ogni volta che apporti una modifica al modulo nel generatore di moduli, il modulo incorporato si aggiornerà automaticamente.

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

Quale codice di incorporamento del modulo dovrei utilizzare

Al momento iform4u offre due opzioni per pubblicare un modulo nel tuo sito web:

1. Incorpora con design : consente di pubblicare il modulo con il tema applicato al modulo.
2. Incorpora senza design : ti consente di pubblicare il modulo senza alcun tema, anche se ne hai applicato uno al modulo.

Di solito, la prima opzione è quella da utilizzare.

Come popolare un campo con una Querystring

Puoi compilare un campo con parametri URL. Assicurati solo di utilizzare l'ID campo o l'alias campo come chiave del parametro, quindi il valore assegnato a questo parametro verrà visualizzato nel campo.

Nota: se utilizzi un modulo in più passaggi, puoi andare a una pagina specifica aggiungendo il numero di pagina all'URL, ad esempio per andare alla seconda pagina aggiungi la stringa di query "p=2".

Come ascoltare i postMessaggi inviati dal widget del modulo

Per poter ascoltare i messaggi inviati dal widget del modulo, devi semplicemente aggiungere un ascoltatore di eventi alla tua pagina web. Ad esempio, se hai bisogno di conoscere un ID di invio dalla tua pagina web, puoi aggiungere questo codice sotto il codice di incorporamento 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("Submission saved with ID", data.data.id);        }    }}

Impostazione del widget del modulo

Il widget del modulo (codice incorporato) è composto da due parti:

1. Un codice HTML che visualizza il contenuto predefinito se l'utente accede al modulo quando JavaScript è disabilitato nel suo browser. Per impostazione predefinita, viene visualizzato un collegamento al modulo all'interno di un elemento DIV.
2. Un codice Javascript responsabile della visualizzazione del modulo e dell'inizializzazione del Tracker modulo (se Analytics è abilitato).

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

• Id : ID del modulo nell'applicazione. Per esempio:'id': 132
• Sid : ID invio. Utilizza questa opzione per modificare l'invio di un modulo precedentemente raccolto. Per trovare l'ID invio, vai a Gestione invio . Per esempio:'sid': 964
• Contenitore : ID dell'elemento HTML in cui verrà inserito l'iframe del modulo. Per impostazione predefinita, punta all'ID DIV che contiene il collegamento 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 da incorporare viene impostato con un valore in pixel. Questo valore viene calcolato dal Form Builder al momento della sua creazione. Per esempio:'height': '846px'
• Ridimensionamento automatico : per impostazione predefinita, è abilitato. Indica se l'iframe può ridimensionarsi automaticamente all'altezza reale del modulo. Ad esempio, quando vengono visualizzati i messaggi di convalida. Se impostato su false, il modulo non si ridimensiona e la sua altezza verrà definita nell'opzione "altezza". Per esempio:'autoResize': !0
• Tema : per impostazione predefinita, è abilitato. È un valore intero (1 o 0) che ti consente di abilitare o disabilitare un tema al volo. Per esempio:'theme': 1
• personalizzato : per impostazione predefinita, è abilitato. È un valore intero (1 o 0) che consente di abilitare o disabilitare al volo il caricamento di file javascript esterni. Per esempio:'customJS': 1
• Registra : per impostazione predefinita, è abilitato. È un valore intero (1 o 0) che consente di abilitare o disabilitare al volo il Tracker modulo. Per esempio:'record': 1
• Ripristina : per impostazione predefinita, è abilitato. È un valore intero (1 o 0) che consente di abilitare o disabilitare la reimpostazione 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 per impostazione predefinita. Ad esempio, per visualizzare la seconda pagina:'page': 2
• Modulo : specifica il percorso per l'incorporamento del modulo. Non contiene parametri.
• addToOffsetTop : per impostazione predefinita, è 0. Aggiungi o sottrai un numero di pixel a OffsetTop prima di calcolare la posizione del modulo. Ciò consente di correggere la posizione del modulo quando gli elementi html sul sito web (come un'intestazione) hanno la proprietà CSS: "fixed". Per esempio:'addToOffsetTop': '-60'
• Valori predefiniti : se desideri precompilare i campi del modulo con valori predefiniti, puoi utilizzare questa opzione. Valori predefiniti è un oggetto JSON in cui la chiave è l'ID del campo modulo e il suo valore è il contenuto del campo. Per esempio:

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

Tieni presente che le caselle di controllo e i pulsanti di opzione verranno selezionati con valori booleani. Per esempio:

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

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 interfaccia utente.

Per impostazione predefinita, è disponibile un oggetto jQuery. Potrai quindi interagire con il Form in modo molto semplice utilizzando le seguenti righe di codice:

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

L'elemento Modulo

L'elemento Form - formEl - è un oggetto jQuery a cui è possibile accedere per ottenere informazioni e/o manipolarle direttamente. Ad esempio, conosceremo il massimo del nostro modulo con le seguenti righe di codice:

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

Ascolto di eventi

Alcuni 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. Ad esempio, compilando un campo di testo o selezionando un pulsante di opzione.
• errore : questo evento verrà attivato quando il server ha generato un errore di convalida.
• success : questo evento verrà attivato quando il modulo è stato inviato correttamente.
• nextStep : questo evento verrà attivato ogni volta che si passa al passaggio successivo in un modulo a più passaggi.
• previousStep : questo evento verrà attivato ogni volta che si torna indietro di un passaggio in un modulo a più passaggi.

Un esempio molto semplice per rilevare quando un modulo non riesce sarebbe:

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

Il motore delle regole attiva inoltre i seguenti eventi quando un campo viene mostrato o nascosto utilizzando le 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 agli ascoltatori di eventi. Per esempio:

$( 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.")  });});

I gestori di eventi: previousStep e nextStep

Oltre agli eventi, iform4u offre due gestori di eventi che ti consentono di andare avanti e indietro in una pagina su un modulo Multi-Step pronto per l'uso utilizzando JavaScript. Adesso, ad esempio, vedremo come inoltrare una pagina senza premere il pulsante "Avanti" sfruttando la funzione di avanzamento automatico.

Avanzamento automatico nei moduli a più passaggi

Per impostazione predefinita, quando crei un modulo in più passaggi, vengono aggiunti automaticamente due pulsanti di navigazione: "Precedente" e "Successivo" nella parte inferiore del modulo. Questi pulsanti ti consentono di navigare nel modulo fino a raggiungere l'ultima pagina dove solitamente è posizionato il pulsante Invia.

Nota: iform4u ti consente di aggiungere più pulsanti di invio su diverse pagine o parti del modulo.

Tuttavia, in alcuni casi d'uso potresti voler avanzare direttamente alla pagina successiva senza premere alcun pulsante. Per questo utilizzeremo il gestore di eventi "nextStep".

Nota: alcuni casi d'uso in cui questa funzionalità è utile sono sondaggi e/o test in cui non è consentito modificare la risposta e consentire di completare il sondaggio il prima possibile.

Ad esempio, con le seguenti righe di codice, diremo al nostro modulo che ogni volta che viene selezionato un pulsante di opzione, il modulo inoltrerà 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;}

Carica più file JavaScript e CSS nel nostro modulo

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

Visualizza un DatePicker dell'interfaccia utente jQuery in un campo Data

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

$( 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();        });    });});

Come potete vedere:

• Stiamo caricando 2 file all'interno della funzione quando() : jquery-ui.css e jquery-ui.min.js .
• Abbiamo inserito una funzione che verrà eseguita quando i due file precedenti verranno caricati nella pagina all'interno della funzione done() .
• La funzione esegue fondamentalmente 3 istruzioni:
  1. Trova tutti i campi di tipo " data " e converti ogni campo " data " in " testo ".
  2. Clona ogni campo Data in un campo Testo che visualizza DatePicker.
  3. Nasconde il campo Data, perché il suo valore verrà stabilito automaticamente dal DatePicker, dagli attributi: altField e altFormat .