Generatore di moduli

Introduzione

Form Builder è un elemento chiave di iform4u. È qui che i moduli vengono creati e aggiornati. Il generatore di moduli fornisce gli strumenti necessari per aggiungere e rimuovere campi come altri elementi HTML.

Interfaccia utente

L'interfaccia del Form Builder è divisa in tre aree: a sinistra i campi del modulo, a destra il designer del tema e al centro l'anteprima del modulo.

Il pannello di sinistra ha tre schede:

• La scheda Campi visualizza tutti i campi e gli elementi che possono essere aggiunti al modulo. Basta trascinarli e rilasciarli nell'area giusta.
• La scheda Impostazioni consente di impostare il nome del modulo, il layout del modulo (posizione delle etichette) e la disabilitazione di tutti i campi.
• La scheda Codice permette di vedere in tempo reale il codice HTML che viene generato con il Form Builder. Da qui puoi riconoscere ogni ID elemento per manipolare il Form in modo più avanzato. Un pulsante "Copia" ti consente di copiare facilmente l'intero codice sorgente.

L'area centrale è l'anteprima del modulo da cui è possibile manipolare ciascuno dei componenti.

Il pannello di destra è il Designer tema da cui puoi personalizzare l'aspetto del tuo modulo:

• Sfondi: modifica lo sfondo di diversi elementi nel modulo.
• Tipografia: scegli il carattere, lo stile, la dimensione e il colore di tutti gli elementi di testo nel modulo.
• Bordi: imposta lo spessore, lo stile e il colore dei bordi attorno a determinati elementi del modulo.
• Ombre: aggiungi o rimuovi un'ombra attorno al tuo modulo.
• Pulsanti: modifica il testo del pulsante Invia.
• E molto altro ancora!

- Aggiungi un campo

Esistono due modi per aggiungere un campo:

1. Facendo clic su un widget nel pannello di sinistra. Questo è tutto! Il componente del modulo verrà visualizzato nel modulo, sotto tutti gli altri componenti.
2. Oppure, se desideri aggiungere un campo in un posizionamento specifico.
   • Fare clic su un widget nel pannello di sinistra e trascinarlo nell'area di destra.
   • Nel momento in cui si entra nell'area attiva del Form Builder, una casella indicherà dove verrà posizionato il Campo.
   • Dopo averlo posizionato dove ti serve, rilascia il pulsante.

- Modifica un campo

Per modificare un campo:

1. Fare clic sul campo da modificare e verrà visualizzato un popover con le informazioni sul campo
2. Modifica le informazioni in base alle tue esigenze.
3. Fare clic su Salva.

Nota: premendo ESC si chiuderanno i popover.

- Riordinare i campi

Per riordinare un campo (componente):

1. Fare clic su un componente e tenere premuto
2. Trascina il componente verso l'alto o verso il basso in base alle tue esigenze.
3. A seconda di dove trascini il componente, apparirà una zona attiva in cui verrà posizionato il componente.
4. Una volta posizionato nella posizione richiesta, rilasciare il componente.

- Trascina i campi per creare colonne

Per creare colonne con un campo (componente):

1. Fai clic su un widget nel pannello di sinistra e trascinalo nell'area di disegno del generatore di moduli.
2. Trascinalo a sinistra o a destra di un campo esistente.
3. Un bordo indicherà dove verrà posizionato il campo.
4. Dopo averlo posizionato dove ti serve, rilascia il widget.

All'interno del generatore di moduli, puoi trascinare i campi esistenti nella "zona di rilascio delle colonne": il generatore ridimensionerà quindi automaticamente tutti i campi all'interno della zona di rilascio per creare colonne di uguale larghezza.

Puoi creare fino a quattro colonne con questo metodo. Tuttavia, puoi progettare moduli con/fino a 12 colonne che si adattino perfettamente allo spazio disponibile sul tuo sito web utilizzando la Container Css Class .

- Copia un campo

Per copiare un campo (componente):

1. Fare clic su un componente e tenere premuto.
2. Fare clic sul pulsante "Copia" nella finestra Popover

Noterai che il campo copiato apparirà sotto il campo originale.

- Elimina un campo

Per eliminare un campo (componente):

1. Fare clic su un componente e tenere premuto.
2. Trascinalo fuori dalla zona attiva.
3. Pubblicazione.

Noterai che il componente è scomparso.

- Copia ID campo

Per copiare l'ID campo attenersi alla seguente procedura:

1. Fare clic su un componente e tenere premuto.
2. Fai clic sui 3 punti verticali (nell'intestazione Popover)
3. Fare clic su Copia ID.

Ora puoi incollarlo in un altro posto come un messaggio email personalizzato o un design CSS.

Impostazioni del modulo di base

Facendo clic sulla scheda Impostazioni del generatore di moduli, accederai a una versione molto semplice della configurazione del modulo. Da qui puoi:

1. Modificare il nome del modulo : il nome del modulo serve a riconoscere il modulo nelle pagine di amministrazione e viene anche visualizzato come titolo della pagina pubblica del modulo su iform4u.
2. Modificare il layout del modulo: il layout del modulo è basato su Bootstrap CSS e viene utilizzato per individuare la posizione delle etichette sul modulo.
   • Il layout verticale mostra le etichette dei campi sopra,
   • Il layout orizzontale visualizza le etichette sul lato sinistro del campo e
   • Il layout In linea nasconde le etichette e visualizza i campi uno accanto all'altro. Ad esempio, puoi usarlo su un modulo di registrazione della posta, per posizionare un campo Email e un pulsante a lato.
3. Disabilita elementi del modulo : consente di disabilitare tutti i campi del modulo. È un'opzione avanzata che può essere utile se prevedi di interagire con il modulo da un file javascript esterno.

Queste opzioni di base sono intimamente correlate al generatore di moduli. Tuttavia, sono disponibili altre opzioni di configurazione molto più avanzate a cui è possibile accedere da Gestione moduli .

Impostazioni del campo

Ogni campo del modulo ha molte opzioni di impostazione, ad esempio l'etichetta, il valore predefinito, la classe CSS, ecc. Per impostare un campo, vai all'anteprima e fai clic su di esso.

Opzioni di configurazione

Successivamente, tutte le opzioni di configurazione vengono visualizzate in ordine alfabetico. Non tutti sono presenti in tutti i campi, ma in caso di problemi utilizzare questo elenco come riferimento.

- Accetta:

Questa opzione si trova nel campo Caricamento file. Con esso puoi limitare il tipo di file che il campo può accettare. Dovresti considerare quanto segue

• È necessario aggiungere le estensioni dei file iniziando dal punto e separate da virgole.
• Per impostazione predefinita, tutti i file verranno convalidati e saranno accettati solo file immagine con estensione '.gif, .jpg, .png'.
• Ad esempio, per accettare file di testo, puoi modificare questa opzione in: '.doc, .docx, .txt'.
• Se vuoi accettare tutti i tipi di file, devi lasciare questo campo vuoto.
• Questa opzione abilita l'attributo 'accept' dello standard HTML5, quindi la convalida del campo viene eseguita sia sul lato client (browser) che sul lato server.

- Alias:

L'opzione Alias ​​ti consente di inviare notifiche WebHook utilizzando l'alias del campo anziché il nome del campo. Ad esempio, saremo in grado di inviare nuovamente i dati POST utilizzando "nome" o "età" anziché "testo_0" o "numero_0".

- Caselle di controllo:

L'opzione Caselle di controllo è disponibile solo nei campi Casella di controllo e viene utilizzata per aggiungere caselle di controllo al componente.

Ad esempio, inserisci l'editor di massa e aggiungi le seguenti "caselle di controllo" e fai clic su "Salva":

First Choice|1
Second Choice|2|selected
Third Choice|3
Fourth Choice|4|selected
Fifth Choice|5

L'anteprima del modulo mostrerà un componente Checkbox con 5 caselle di controllo: Prima Scelta, Seconda Scelta, Terza Scelta, Quarta Scelta e Quinta Scelta. Verranno selezionate le caselle di controllo "Seconda scelta" e "Quarta scelta". E infine, se l'utente invia il modulo senza apportare modifiche, invierà i valori: 2,4.

- Controlla i DNS:

Questa opzione indica all'applicazione che nel processo di convalida del campo e-mail verifica che il dominio e-mail esista realmente e abbia record "A" e "MX".

Attenzione! Questa è un'opzione avanzata e deve essere utilizzata con cautela. La verifica potrebbe fallire a causa di un problema con i server DNS anche quando l'e-mail è valida. Per impostazione predefinita, è disabilitato.

- Classe CSS:

Consentono di aggiungere una o più classi CSS al campo modulo.

- Classe CSS contenitore:

Consentono di aggiungere una o più classi CSS al contenitore dell'intero componente.

È possibile creare moduli a più colonne definendo la classecol-xs-* (l'asterisco rappresenta il numero di colonne, compreso tra 1 e 12).

Per esempio:

Se vuoi posizionare due campi in due colonne devi fare quanto segue:

1. Aggiungi la classe CSS del contenitore al primo campo: `col-xs-6
2. Aggiungi la classe CSS del contenitore al secondo campo: `col-xs-6

In questo esempio, stiamo utilizzando le classi CSS predefinite "no-padding" per rimuovere il riempimento che Bootstrap CSS aggiunge alle colonne. Puoi aggiungerli o meno in base al tuo design. In caso contrario, puoi aggiungere la classe CSS contenitore col-xs-12 al resto dei campi, per preservare lo stesso riempimento su ciascun campo.

Importante! Puoi consultare la documentazione CSS di Bootstrap per ulteriori informazioni.

Nota:

• Per impostazione predefinita, tutti i campi tranne Button vengono forniti con la classe:form-group . Questa classe non può essere modificata.
• Per impostazione predefinita, il campo Button viene fornito con la classe:form-action . Questa classe non può essere modificata.

- Attributi personalizzati:

Puoi aggiungere attributi personalizzati a un campo. Questi attributi sono composti da due parti: il nome dell'attributo e il valore dell'attributo. Questa funzionalità ti consente di creare moduli più accessibili, soprattutto perché puoi utilizzarla per aggiungere:

• Attributi dei dati : utili per integrare i campi del modulo con le librerie javascript
• Attributi Aria : utili per descrivere i campi del modulo in modo migliore e offrire maggiore accessibilità.

- Valore predefinito:

È possibile aggiungere un valore predefinito a un campo. Questo valore viene visualizzato per impostazione predefinita, ma l'utente può modificarlo. Se l'utente invia il modulo senza aver modificato il valore predefinito, questo valore verrà raccolto per elaborare l'invio.

- Disabilitato:

Puoi disabilitare un campo se desideri che venga visualizzato all'utente, ma non modificato. (Nota che puoi anche disabilitare un campo nascosto). A differenza dell'opzione Sola lettura, un campo disabilitato non viene inviato al server. Cioè, le informazioni memorizzate in un campo disabilitato non vengono ricevute e quindi non appaiono nel Gestore invii.

- Dimensione del campo:

Un campo Area di testo ne consente la configurazione delle dimensioni. La dimensione deve essere un numero intero e indica il numero di righe visualizzate o, in altre parole, l'altezza del campo. Per impostazione predefinita è 3.

- Testo di aiuto:

Il testo digitato qui apparirà sotto il campo e viene spesso utilizzato per fornire istruzioni agli utenti su cosa inserirvi.

- Posizionamento del testo di aiuto:

Questo menu a discesa ti consente di spostare il testo della guida sopra o sotto il campo del modulo.

- In linea:

L'opzione In linea si trova nei campi Casella di controllo e Pulsanti di opzione e viene utilizzata per modificare la posizione verticale delle caselle di controllo o dei pulsanti di opzione per una posizione orizzontale.

- Tipo di ingresso:

Molti campi ti consentono di modificare il tipo di input per specificare il tipo di dati che riceverai. Ad esempio, un campo di testo può avere un tipo di input "URL", per garantire che il testo digitato qui sia un URL assoluto che inizia con le lettere "http".

- Solo numeri interi:

Puoi attivare questa opzione se desideri che il valore di questo campo sia solo un numero intero. Se l'utente inserisce un numero in virgola mobile, il modulo non verrà elaborato e verrà invece visualizzato un errore di convalida.

- Modello intero:

È un'opzione avanzata del Campo numero che consente di personalizzare l'espressione regolare che accetta solo numeri interi (0-9) e verrà utilizzata nel processo di convalida del modulo. L'espressione regolare utilizzata per impostazione predefinita è '/^\s[+-]?\d+\s$/';

- Etichetta

È il modo più comune per comunicare all'utente il valore che deve inserire nel campo. Generalmente viene mostrato nella parte superiore del campo, ma è possibile modificare questa posizione modificando il layout del modulo.

- Classe CSS etichetta:

Consentono di aggiungere una o più classi CSS all'etichetta. Tieni presente che se desideri nascondere un'etichetta, puoi aggiungere la classe css Bootstrap 3 'sr-only'.

Nota: per impostazione predefinita tutti i campi vengono forniti con la classe CSS: control-label. Si consiglia di non rimuoverlo.

- Data minima:

È possibile definire una data come data minima da prendere in considerazione nel processo di convalida del campo. Se l'utente inserisce una data precedente, il modulo non verrà inviato e verrà invece visualizzato un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

La data deve mantenere il seguente formato: aaaa-mm-gg (formato standard HTML5) per le date statiche. Inoltre, puoi utilizzare i tag per convalidare le date relative:

• {today} : Oggi è la data minima.
• {today:+1} : Domani è la data minima.
• {today:-1} : Ieri è la data minima.

- Data massima:

È possibile definire una data come data massima da prendere in considerazione nel processo di convalida del campo. Se l'utente inserisce una data successiva, il modulo non verrà inviato e verrà invece visualizzato un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

La data deve mantenere il seguente formato: aaaa-mm-gg (formato standard HTML5) per le date statiche. Inoltre, puoi utilizzare i tag per convalidare le date relative:

• {today} : Oggi è la data massima.
• {today:+1} : Domani è la data massima.
• {today:-1 }: Ieri è la data massima.

- Numero minimo:

È possibile definire un numero intero o a virgola mobile come numero minimo da prendere in considerazione nel processo di convalida del campo. Se l'utente inserisce un numero inferiore, il modulo non verrà inviato e verrà visualizzato invece un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

- Numero massimo:

È possibile definire un numero intero o a virgola mobile come numero massimo da prendere in considerazione nel processo di convalida del campo. Se l'utente inserisce un numero maggiore, il modulo non verrà inviato e verrà invece visualizzato un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

- Dimensione minima:

È possibile definire un numero intero come dimensione minima da prendere in considerazione nel processo di validazione del campo. Se l'utente carica un file di dimensione inferiore a quella definita, il modulo non verrà inviato e, invece, verrà visualizzato un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

Il numero intero rappresenta il numero di byte consentiti. Ad esempio, Dimensione minima: 10311680 (risultante dalla moltiplicazione di 1024 x 1024 x 5), la dimensione minima del file dovrebbe essere 5 MB.

- Dimensione massima:

È possibile definire un numero intero come dimensione massima che verrà presa in considerazione nel processo di validazione del campo. Se l'utente carica un file con una dimensione maggiore di quella definita, il modulo non verrà inviato e verrà invece visualizzato un errore di convalida. Se questa opzione non è definita, questa limitazione non esisterà.

Il numero intero rappresenta il numero di byte consentiti. Ad esempio, Dimensione massima: 10311680 (risultante dalla moltiplicazione di 1024 x 1024 x 5), la dimensione massima del file dovrebbe essere 5 MB.

- Lunghezza minima:

È possibile definire un numero intero come lunghezza minima della stringa di input. Se non impostato, non significa alcun limite di lunghezza minima.

- Lunghezza massima:

È possibile definire un numero intero come lunghezza massima della stringa di input. Se non impostato, non significa alcun limite di lunghezza massima.

- File minimi:

È possibile definire un numero intero come il numero minimo di file che l'utente finale deve caricare per superare la convalida.

- File massimi:

È possibile definire un numero intero come il numero massimo di file che l'utente finale deve caricare per superare la convalida. Utilizza questa funzionalità per consentire caricamenti multipli con lo stesso campo File .

- Lunghezza massima:

È possibile definire un numero intero come il numero massimo di file che l'utente finale deve caricare per superare la convalida.

- Multiplo:

Questa opzione indica che l'utente può inserire più valori. Puoi trovare questa opzione nei campi Email e Seleziona elenco:

• Se l'opzione Multipla è stata abilitata in un campo E-mail, è possibile aggiungere diversi indirizzi e-mail validi separati da virgole. Per esempio: ','.
• Se l'opzione Multipla è stata abilitata in un campo Seleziona elenco, è possibile selezionare diverse opzioni. Le informazioni raccolte avranno un formato separato da virgole. Ad esempio: "Opzione uno, opzione due".

- Modello numerico:

È un'opzione avanzata del Campo numero che consente di personalizzare l'espressione regolare che accetta qualsiasi numero e verrà utilizzata nel processo di convalida del modulo. L'espressione regolare utilizzata per impostazione predefinita corrisponde a un numero in virgola mobile e facoltativamente a una parte esponente (ad esempio -1.23e-10): '/^\s[-+]?[0-9].?[0-9]+( [eE][-+]?[0-9]+)?\s*$/'.

- Opzioni:

L'opzione Opzioni è presente solo nei campi Elenco di selezione e viene utilizzata per aggiungere opzioni di selezione al componente.

Ad esempio, se inserisci nel campo Opzioni del modulo pop-up:

One|1
Two|2|select
Three|3
Four|4
Five|5

L'anteprima del modulo mostrerà una casella con il testo "Due". E se l'utente invia il modulo senza apportare modifiche, invierà il valore: 2.

- Modello

È un'opzione avanzata e consente di aggiungere un'espressione regolare al campo da utilizzare nel processo di convalida del modulo. Se il valore inviato dall'utente non corrisponde a questo modello, il modulo non verrà elaborato e verrà invece visualizzato un errore di convalida.

-Segnaposto

È il modo alternativo di descrivere il valore che l'utente deve inserire nel campo. Per impostazione predefinita, il segnaposto viene visualizzato nel campo finché l'utente non inizia a inserire i dati.

- Radio:

L'opzione Radio è disponibile nei componenti Pulsante di opzione e viene utilizzata per aggiungere pulsanti di opzione al modulo.

Ad esempio, se fai clic su Bulk Editor e inserisci le seguenti radio:

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'anteprima del modulo mostrerà cinque pulsanti di opzione con le parole: Uno, Due, Tre, Quattro e Cinque. Verrà selezionata l'opzione Due. Quindi, se l'utente invia il modulo senza apportare modifiche, invierà il valore: 2

- Sola lettura:

Quando abiliti questa opzione, il campo verrà visualizzato all'utente ma non potrà modificarlo. Le informazioni in un campo di sola lettura vengono ricevute e convalidate dal server quando viene inviato il modulo. Verranno inoltre raccolti dal responsabile della presentazione.

- Necessario

Questa proprietà consente di garantire che l'utente completi un campo specifico prima di inviare il modulo. Se l'utente invia il modulo con un campo obbligatorio vuoto, il modulo non viene elaborato e viene invece visualizzato un messaggio di errore. Per impostazione predefinita, le etichette dei campi obbligatori hanno un asterisco rosso sulla destra.

- Numero del passo:

Con questa opzione puoi impostare l'attributo HTML5 'step' dei campi Numero e Data. L'attributo 'step' specifica il numero valido da utilizzare come intervallo quando si modificano i valori di questo campo utilizzando i controller del browser. I browser moderni riconoscono questo attributo.

Importante! Se nel campo Numero è abilitata l'opzione "Solo numeri interi", si consiglia di impostare il "Numero passaggio" su 1.

- Unico:

Questa opzione ti consente di verificare che le informazioni inserite in questo campo siano univoche e non siano state inviate in precedenza. Utile per mailing list e moduli di registrazione, dove spesso è necessario impedire agli utenti di inserire le stesse informazioni più di una volta.

Tipi di campo

- Intestazione

Le intestazioni vengono utilizzate per contrassegnare le sezioni del modulo, anche per dargli un titolo. Ad esempio, quando accedi al Form Builder per crearne uno, vedrai un'intestazione (h3) con il testo "Modulo senza titolo". Per modificare questo testo, basta cliccarci sopra. Subito apparirà un modulo con tutte le opzioni per personalizzarlo.

- Paragrafo

I paragrafi sono componenti utilizzati per arricchire un modulo. Ad esempio, puoi usarli per invitare i tuoi utenti a compilare il modulo o a dare indicazioni stradali. Quando accedi al Generatore di moduli per crearne uno, vedrai un paragrafo con il testo "Questo è il mio modulo. Per favore compilalo. Grazie!" Per modificare questo testo è sufficiente cliccarci sopra. Subito apparirà un modulo con tutte le opzioni per personalizzarlo.

- Campo testo

Un campo di testo è un componente che consente di scrivere solo una riga di testo. I browser Web considerano il campo di testo come campo predefinito standard rispetto ad altri più specializzati come URL o colore. Il campo di testo può avere cinque diversi tipi di input, ognuno dei quali viene utilizzato per convalidare i dati in modo diverso. I cinque tipi sono:

• Testo : questo è il tipo predefinito per questo componente. Ed è quello comunemente utilizzato nei moduli, perché non offre alcuna convalida e accetta tutti i dati inviati dall'utente. Se il browser non riconosce nessun altro tipo, verrà visualizzato invece tale campo.
• Url : questo tipo è stato introdotto da HTML5 e ora i browser moderni lo accettano. Utilizza il tipo URL se desideri raccogliere URL assoluti che iniziano con "http".
• Colore : questo tipo è stato introdotto da HTML5 e dai browser moderni che lo accettano, visualizza automaticamente una tavolozza di colori quando si fa clic su di essa. Utilizza il tipo Colore se desideri che i dati raccolti siano il valore esadecimale di un colore, iniziando con un segno '#'. Ad esempio, "#FFFFFF".
• Tel : questo tipo è stato introdotto da HTML5 e ora i browser moderni lo accettano. Utilizza questa tipologia se il dato da raccogliere è un numero di telefono.
• Password : tutti i browser riconoscono questo tipo di immissione. Utilizzare questo tipo di immissione se si desidera che l'utente inserisca dati non visualizzati sullo schermo. Tieni presente che iform4u non è pensato per memorizzare le password, principalmente perché i dati vengono archiviati come testo semplice. Se necessario, utilizzare questo tipo di input con cautela.

- Campo numerico

Un campo numerico è un componente utilizzato per raccogliere numeri come contenuto. Secondo lo standard HTML5, questo componente può essere di 2 tipi:

• Numero : questo è il tipo da utilizzare quando si desidera che l'utente digiti il ​​numero. Ad esempio, potresti chiedere: "Quanti anni hai?" Se l'utente inserisce 'Cinque anni', gli viene comunicato che deve scrivere solo numeri: 5, in questo caso.
• Intervallo : questo tipo di inserimento viene utilizzato anche per raccogliere dati numerici, ma a differenza di Number, i browser moderni visualizzano uno slider che l'utente può utilizzare per inserire i propri dati. Ad esempio, puoi chiedere "Da 1 a 10, quanto sei bravo in matematica?" A seconda di come trascini il cursore, il valore sarà più alto o più basso.

A differenza dei componenti Testo, i componenti Numero offrono molte opzioni di convalida diverse. Ad esempio, Integer Only indica che il campo deve raccogliere solo dati numerici interi: i decimali non sono accettati! Puoi anche impostare il numero minimo e massimo da inserire e altro ancora. Tutte queste opzioni seguono lo standard HTML5 e sono validate anche sul server.

- Campo data

Un campo data è un componente utilizzato per raccogliere date valide. I campi data sono stati introdotti da HTML5 e i browser moderni che li riconoscono visualizzano un calendario facendo clic sul campo. Questo componente può avere 5 diversi tipi di input:

• Data : il tipo di input da utilizzare se si desidera raccogliere le date. È necessario avere il formato: aaaa-mm-gg.
• DateTime-Local : il tipo di input da utilizzare se si desidera raccogliere date e ore. I dati raccolti avranno il formato standard ISO: aaaa-mm-ggThh:mm:ss.
• Ora : il tipo di input da utilizzare se si desidera raccogliere gli orari nel formato: hh:mm:ss.
• Mese : questo tipo di voce è supportato dai browser moderni e deve essere utilizzato se si desidera che l'utente selezioni il mese o il mese e l'anno. Il formato di input è aaaa-mm.
• Settimana : questo tipo di immissione è supportata dai browser moderni e deve essere utilizzata se si desidera che l'utente selezioni la settimana dell'anno in formato numerico.

Nota: in effetti alcuni browser moderni non mostrano ancora il Datepicker quando il campo è una data. Ma in futuro andranno bene tutti. Per ora i browser che non lo supportano sono Safari, Firefox e le versioni precedenti di IE. Per questi casi, possiamo utilizzare un widget jQuery UI Datepicker come fallback.

- Campo e-mail

Un campo e-mail viene utilizzato per raccogliere e-mail valide. Per impostazione predefinita verifica che il testo contenga '@' e '.' più due o più caratteri per il dominio di posta elettronica. Inoltre, è necessario utilizzare questo campo per inviare notifiche che abbiano i messaggi degli utenti come mittenti (Rispondi a).

Un'opzione avanzata di questo campo è la possibilità di verificare i DNS di posta per confermare che il dominio esiste realmente e ha un record A e MX. Bisogna fare attenzione che questa convalida possa fallire a causa di problemi con i server DNS anche quando la posta è valida. Per impostazione predefinita, questa opzione è disabilitata.

- Area di testo

Un'area di testo è un componente che consente di raccogliere più righe di testo, con più paragrafi. È un campo adatto se desideri che gli utenti redigano un testo completo. Inoltre, puoi modificare alcune impostazioni. Ad esempio, puoi modificare l'altezza dell'area di testo per mostrare più spazio ai tuoi utenti. Per fare ciò, clicca sull'area di testo e modifica la dimensione del campo che per impostazione predefinita è 3.

- Casella di controllo

Il componente Checkbox aggiunge caselle di controllo al modulo. Questo componente fornisce un elenco di opzioni con una casella di controllo accanto, in modo che gli utenti possano selezionarle tutte, alcune o nessuna. Puoi usarlo se vuoi ottenere più risposte, ad esempio: Quale dei seguenti sono frutti?

Per aggiungere, modificare ed eliminare le caselle di controllo, è necessario fare clic sul componente. Quindi viene visualizzato un modulo con il campo "Caselle di controllo". Tieni presente che ogni riga di questo campo rappresenta una scelta diversa. Ogni scelta può essere composta da tre parti: Etichetta, Valore e Immagine. Inoltre, puoi controllarli.

Inoltre, puoi scegliere lo strumento Editor di massa per inserire scelte separate da una barra verticale o da una tubazione. Il formato dovrebbe essere il seguente: Etichetta|Valore|selezionato. La seconda e la terza parte di questo formato sono facoltative.

Ad esempio, fai clic su Editor di massa e aggiungi le seguenti "caselle di controllo":

One|1
Two|2|selected
Three|3
Four|4|selected
Five|5

L'anteprima del modulo mostrerà 5 caselle di controllo con le parole Uno, Due, Tre, Quattro e Cinque. Verranno selezionate le opzioni "Due" e "Quattro". E, se l'utente invia il modulo senza apportare modifiche, invierà i valori: 2,4.

Inoltre, puoi aggiungere immagini o icone alle caselle di controllo per dare un tocco più dinamico ai tuoi moduli.

Per inserire un'immagine sull'etichetta di una casella di controllo è necessario aggiungere l'URL dell'immagine come terzo parametro di impostazione della casella di controllo. Ad esempio, se impostiamo il nostro componente come:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Creeremo cinque caselle di controllo:

• One : Crea una casella di controllo con il valore: 'Uno' e l'etichetta: 'Uno'
• Two|2 : Crea una casella di controllo con il valore: '2' e l'etichetta: 'Due'
• Three|3|selected : Crea una casella di controllo con il valore: '3', l'etichetta: 'Tre' e sarà selezionata per impostazione predefinita.
• Four|4|http://example.com/image-4.jpg : Crea una casella di controllo con il valore: '4', l'etichetta: 'Quattro' e l'immagine apparirà accanto alla casella di controllo.
• Five|5|http://example.com/image-5.jpg|selected : Crea una casella di controllo con il valore: '5', l'etichetta: 'Cinque' e l'immagine apparirà accanto alla casella di controllo e sarà selezionata per impostazione predefinita.

Per aggiungere icone invece di immagini, dovresti solo sostituire gli URL delle immagini con le classi CSS delle icone. Ad esempio:glyphicon glyphicon-user , verrà visualizzata l'icona dell'utente. Tieni presente che per impostazione predefinita l'applicazione ha il set di icone Glyphicons Pro; tuttavia, puoi utilizzare altre icone come Font Awesome o DevIcons. Per questo, devi solo aggiungere i caratteri al tema CSS del tuo modulo.

Importante: per aggiungere un'immagine o un'icona all'impostazione della casella di controllo, è necessario disporre dei primi due parametri, anche se sono uguali.

Nota: ricorda che puoi visualizzare le caselle di controllo orizzontalmente attivando l'attributo 'inline'.

- Pulsante di opzione

Il pulsante di opzione è un componente che ti consente di aggiungere un gruppo di pulsanti di opzione al modulo. Questo componente fornisce agli utenti un elenco di scelte, ma devono selezionarne solo una. Ad esempio: qual è il tuo colore preferito?

Per aggiungere, modificare ed eliminare opzioni, è necessario fare clic sul componente. Quindi appare un modulo con il campo "Radio". Tieni presente che ciascuna riga di questo campo rappresenta un'opzione diversa. E ogni linea può essere composta da tre parti, separate da una barra verticale o da una tubazione. Il formato dovrebbe essere il seguente: Etichetta|Valore|seleziona. La seconda e la terza parte di questo formato sono facoltative.

Ad esempio, se inserisci nel campo "Radio" del pop-up Form:

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'anteprima del modulo mostrerà 5 caselle di controllo con le parole Uno, Due, Tre, Quattro e Cinque. Verrà selezionata l'opzione "Due". E se l'utente invia il modulo senza apportare modifiche, invierà il valore: 2.

Inoltre, dalla versione 1.3 puoi aggiungere immagini o icone ai pulsanti di opzione per dare un tocco più dinamico ai tuoi moduli.

Per inserire un'immagine sull'etichetta di un pulsante di opzione è necessario aggiungere l'URL dell'immagine come terzo parametro di impostazione del pulsante di opzione. Ad esempio, se impostiamo il nostro componente come:

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Creeremo cinque pulsanti di opzione:

• One : Crea un pulsante di opzione con il valore: "Uno" e l'etichetta: "Uno"
• Two|2 : Crea un pulsante di opzione con il valore: '2' e l'etichetta: 'Due'
• Three|3|selected : Crea un pulsante di opzione con il valore: '3', l'etichetta: 'Tre' e sarà selezionato per impostazione predefinita.
• Four|4|http://example.com/image-4.jpg : Crea un pulsante di opzione con il valore: '4', l'etichetta: 'Quattro' e l'immagine apparirà accanto al pulsante di opzione.
• Five|5|http://example.com/image-5.jpg|selected : Crea un pulsante di opzione con il valore: '5', l'etichetta: 'Cinque' e l'immagine apparirà accanto al pulsante di opzione e sarà selezionata per impostazione predefinita.

Per aggiungere icone invece di immagini, dovresti solo sostituire gli URL delle immagini con le classi CSS delle icone. Ad esempio:glyphicon glyphicon-user , verrà visualizzata l'icona dell'utente. Tieni presente che per impostazione predefinita l'applicazione ha il set di icone Glyphicons Pro; tuttavia, puoi utilizzare altre icone come Font Awesome o DevIcons. Per questo, devi solo aggiungere i caratteri al tema CSS del tuo modulo.

Importante: per aggiungere un'immagine o un'icona alla configurazione del pulsante di opzione, è necessario disporre dei primi due parametri, anche se sono uguali.

Nota: ricorda che puoi visualizzare il pulsante di opzione in orizzontale attivando l'attributo 'inline'.

- Seleziona Elenco

Un elenco di selezione è un menu a discesa che consente all'utente di selezionare una o più opzioni, a seconda della configurazione scelta. La differenza principale con il componente Pulsante di opzione è che puoi aggiungere molte opzioni senza modificarne le dimensioni. Quindi il suo utilizzo è consigliato quando ci sono molte opzioni, ad esempio: Seleziona il tuo paese di origine?

Per aggiungere, modificare ed eliminare opzioni, è necessario fare clic sul componente. Quindi viene visualizzato un modulo con il campo "Opzioni". Tieni presente che ciascuna riga di questo campo rappresenta un'opzione diversa. E ogni linea può essere composta da tre parti, separate da una barra verticale o da una tubazione. Il formato dovrebbe essere il seguente: Etichetta|Valore|selezionato. La seconda e la terza parte di questo formato sono facoltative.

Ad esempio, aggiungi le seguenti "Opzioni":

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'anteprima del modulo mostrerà una casella con il testo "Due" e se l'utente invia il modulo senza apportare modifiche, invierà il valore 2.

Seleziona Elenco con gruppi di opzioni ¶

Per creare un gruppo di opzioni<optgroup> , racchiudere il testo tra doppie parentesi quadre, ad esempio:

[[Swedish Cars]]
Volvo
Saab
[[German Cars]]
Mercedes
Audi

- Campo nascosto

Aggiungendo un campo nascosto al modulo, questo non verrà mostrato nel modulo. Tuttavia, i campi nascosti sono utili per calcoli matematici o per inviare valori predefiniti senza modificare l'interfaccia del modulo.

Nota: puoi aggiungere un'etichetta a un campo nascosto per lavorare in modo più comodo nell'amministrazione del modulo, ad esempio per creare regole condizionali utilizzando questo campo.

- Caricamento file

Il campo Caricamento file è un componente che consente agli utenti di allegare file all'invio del modulo. Una volta inviati, i file verranno visualizzati nelle informazioni dettagliate di invio. Ci sono due dettagli di cui bisogna tenere conto:

• Tipi di file consentiti : puoi limitare i tipi di file che possono essere caricati in ciascun campo file. Per impostazione predefinita, i tipi di file consentiti per le immagini sono: ".gif, .jpg, .png". Per modificare il tipo di file consentito, è necessario fare clic sul componente e nel campo del modulo 'Accetta' visualizzato, modificare le estensioni dei file consentite, ad esempio '.doc, . pdf , .txt' per accettare file di testo.
• Limitazioni di dimensione : è possibile limitare la dimensione del file definendo una dimensione minima o massima per ciascun campo. Per modificare la dimensione del file consentita, fare clic sul componente, quindi espandere il modulo popup facendo clic sul collegamento "Altro". Individua quindi i campi Dimensione minima e Dimensione massima e inserisci la cifra che rappresenta il numero di byte consentiti. Ad esempio, Dimensione massima: 10311680 (risultante dalla moltiplicazione di 1024 x 1024 x 5 = 5 MB).

- Frammento

Il campo Snippet HTML è un componente di uso avanzato che ti consente di aggiungere codice HTML ai tuoi moduli. Verrà visualizzato un editor Wysiwyg in grado di riconoscere le scorciatoie da tastiera per definire rapidamente lo stile del tuo codice HTML.

Fare attenzione a inserire un codice HTML valido, altrimenti il ​​Form Builder non salverà il modulo e visualizzerà un messaggio di errore indicando la riga di codice in cui è stato commesso l'errore. Ad esempio, un errore comune è aggiungere più elementi HTML con lo stesso ID.

Per aggiungere una tabella HTML, inserire un collegamento o visualizzare un'immagine, dovrai prima fare clic sul pulsante Schermo intero. Questo aprirà l'editor Wysiwyg sul Form Builder, così avrai più spazio per inserire tutto il contenuto necessario. Inoltre, puoi fare clic sul pulsante Codice per visualizzare il contenuto come codice HTML.

Nota: sebbene sia possibile aggiungere codice CSS e JavaScript in un modulo. Non è consigliabile farlo, in questi casi è possibile creare un tema CSS e/o caricare un file javascript esterno. Ricorda che il modulo che hai creato viene visualizzato anche nel Submission Manager e il suo codice potrebbe essere incompatibile.

- reCaptcha ¶

Il campo reCaptcha è un componente avanzato che consente di utilizzare la tecnologia Google per verificare che gli utenti non siano bot e/o spammer. Puoi modificare la configurazione di reCAPTCHA, ad esempio cambiando il colore del tema, il tipo di captcha e la dimensione. Un dettaglio da tenere presente è che puoi aggiungere solo un componente reCaptcha per modulo.

Importante! Prima di aggiungere il componente reCAPTCHA al modulo, devi prima aggiungere le chiavi reCAPTCHA nella configurazione del sito. In caso contrario, reCAPTCHA non funzionerà. Se hai creato il modulo prima di aggiungere le chiavi, devi aggiornare il modulo.

- Interruzione di pagina

Il campo Interruzione di pagina è un componente avanzato che consente di creare moduli a più passaggi o a più pagine. Per ogni interruzione di pagina creata aggiungerai una nuova pagina. Inoltre, verrà visualizzata un'intestazione sopra il modulo per far sapere agli utenti in quale passaggio si trovano e quanti passaggi devono seguire per inviare il modulo. Ci sono due dettagli di cui bisogna tener conto:

1. Il componente Interruzione di pagina aggiunge due pulsanti per consentire la navigazione nel modulo. È possibile personalizzare il testo sul pulsante "Avanti" o "Precedente" facendo clic sul componente.
2. Passaggi del modulo: vengono visualizzati sopra il modulo. Impostazioni:
   • Fare clic su Passaggi modulo per verificarne le impostazioni. Puoi modificare i titoli di ogni passaggio nel campo Passaggi modulo. Ogni riga corrisponde a un titolo.
   • È possibile specificare di visualizzare solo i titoli o i passaggi (numeri).
   • È possibile modificare i numeri dei passaggi tramite le icone dei glifi. Per utilizzare i Glyphicons in più fasi, dovresti aggiungere a ciascuna riga dei campi Steps, una barra verticale o una linea tubolare seguita da 'icona-[nome dell'icona]'. Ad esempio, se voglio sostituire il numero 1, lo scrivo nella prima riga di Steps: 'Untitled Step|icon-user'. Vai su Glyphicons per visualizzare il nome delle icone che puoi utilizzare.
   • È possibile modificare la struttura dei passaggi inserendo una barra di avanzamento che indica la percentuale raggiunta.
   • Infine, puoi nascondere i passaggi del modulo selezionando l'opzione "Nessun passaggio del modulo".

Nota: 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".

- Distanziatore

Il componente Spaziatore ti consente di aggiungere una spaziatura verticale precisa tra i campi sui moduli. Basta trascinare e rilasciare uno spaziatore tra i campi e impostare il numero di pixel tra di essi.

Opzioni:

• Altezza : è lo spazio definito dal numero di pixel.

- Firma

Il componente Firma consente agli utenti finali di firmare il modulo, con il mouse o con il dito su un iPad/smartphone, con il proprio John Hancock direttamente sul modulo. Pertanto, puoi acquisire in modo sicuro firme per contratti, documenti legali e altri moduli in cui è necessario un autografo fisico.

Ci sono due dettagli di cui bisogna tenere conto:

1. Il componente Signature aggiunge due pulsanti per consentire le interazioni Canvas. Puoi personalizzare il testo sui pulsanti "Pulisci" e "Annulla" facendo clic sul componente.
2. Impostazioni campo: il campo Firma presenta le seguenti opzioni speciali:
   • Cancella : attiva/disattiva il pulsante "Cancella". Quando un utente finale fa clic sul pulsante "Cancella", la firma verrà rimossa. E la tela sarà pulita per ricominciare.
   • Annulla : attiva/disattiva il pulsante "Annulla". Quando un utente finale fa clic sul pulsante "Annulla", l'ultimo tratto della sua firma verrà rimosso. Può continuare a premere questo pulsante per annullare la sua firma passo dopo passo.
   • Inoltre, puoi definire la larghezza e l'altezza della tela, il colore della matita, nonché modificare il testo dei pulsanti tra altre impostazioni comuni.

- Campo matrice

Il campo Matrice è un componente avanzato, consente di raggruppare più controlli del modulo con lo stesso tipo di input all'interno di una tabella. È possibile creare un campo matrice con i seguenti tipi di input:

• Pulsante di opzione (per impostazione predefinita)
• Casella di controllo
• Seleziona Elenco
• Testo
• Area di testo
• Numero
• Intervallo (cursore)
• E-mail
• Tel (telefono)
• URL
• Colore
• Password
• Data
• DateTime-Locale
• Tempo
• Mese
• Settimana

Tutti i controlli del modulo sono completamente personalizzabili e in base alla sua tipologia verrà applicata la corretta validazione dell'input.

Un campo Matrice può avere un numero qualsiasi di domande (righe) e risposte (colonne), quindi è possibile impostare valori diversi per ciascuna risposta.

Un tipo di input speciale per la matrice è Seleziona elenco, perché è necessario aggiungere diversi valori (opzioni), per fare ciò basta selezionare "Valori" e in ciascun campo "Valore" inserire valori separati da barre ("/"). Se desideri abilitare un'opzione vuota predefinita, devi utilizzare l'impostazione Segnaposto.

Puoi anche creare domande aperte, con la variante di immissione testo, ogni riga contiene una serie di caselle di immissione testo. Questa variazione appare e si comporta in modo simile al campo di testo. Lo stesso vale per altri campi di input basati su testo, come un'area di testo o campi numerici.

Una caratteristica speciale del campo Matrix è la possibilità di nascondere le domande. Basta selezionare l'opzione "In linea" e le domande scompariranno. Puoi utilizzare questa funzione se desideri fare solo una singola domanda in formato tabellare.

Nota : quando una tabella è molto grande, dovremo aggiungere la classe "table-responsive" all'interno dell'impostazione "Container CSS Class".

- Punteggio netto del promotore (NPS)

L'NPS è probabilmente la metrica di soddisfazione e fedeltà del cliente più importante da monitorare e ora è disponibile in iform4u.

iform4u NPS ti aiuta a raccogliere feedback autentici dei clienti, così puoi capire veramente come sta funzionando la tua organizzazione. È un modo per registrare ciò che pensano i tuoi clienti, il loro livello di soddisfazione e se ti consiglierebbero.

Chiedi loro cose come:

"Su una scala da 1 a 10, quanto è probabile che ci consiglieresti ai tuoi amici?"

Questo ti dà una visione qualitativa del "perché" i tuoi clienti si sentono in quel modo, che tende a funzionare meglio di quei generici sondaggi annuali sulla soddisfazione dei clienti.

Questo componente ti consente di personalizzare la domanda, mostrare etichette, testo di aiuto e altro ancora. Inoltre, può essere visualizzato come pulsanti o come pulsanti di opzione. Per impostazione predefinita, il design mostra i pulsanti. Basta rimuovere la classe CSS: hidden e sostituire la classe Css del pulsante con: btn btn-label btn-nps.

- Pulsante

Il campo pulsante è un componente che permette di inviare i moduli. Sebbene sia normale aggiungere un pulsante per modulo, nulla impedisce di aggiungerne altri, ad esempio all'inizio e alla fine del modulo. Questo componente può essere di 3 tipi:

• Invia : per inviare il modulo. È selezionato per impostazione predefinita.
• Reimposta : per ripristinare il modulo ai valori predefiniti.
• Immagine : visualizza un'immagine sul pulsante e come Invia viene utilizzato per inviare il modulo. Se utilizzi questo tipo di pulsante devi aggiungere l'URL dell'immagine e rimuovere anche la classe CSS.
• Pulsante : Questa tipologia non invia il form, ma può essere utilizzata per interagire con i campi tramite javascript.

È possibile aggiungere un'icona ai pulsanti di tipo 'Invia', 'Reimposta' e 'Pulsante', scrivendo nell'attributo 'Testo Pulsante' l'etichetta dell'icona. Per esempio:

<span class="glyphicon glyphicon-shopping-cart"></span> Buy Now!

Mostrerà il tuo pulsante con una bella icona all'inizio:

Nota: la classe CSS: 'btn btn-primary' aggiunge il design predefinito al pulsante. Vai a Bootstrap CSS per ulteriori informazioni.

Convalida del campo

Un punto molto importante da considerare è la convalida del campo che viene eseguita quando gli utenti inviano un modulo.

La convalida sul campo è il processo mediante il quale viene verificato che i dati inviati dagli utenti soddisfano determinati requisiti. Ad esempio, un campo Data richiede che il valore inviato al server abbia il seguente formato aaaa-mm-gg. La convalida garantisce che ciò accada.

Tieni presente che iform4u funziona con campi HTML5 standard, quindi puoi sempre consultare la documentazione HTML5 per ulteriori informazioni. Oltre alla convalida per tipo, i campi possono avere altri requisiti, come "Obbligatorio" e "Unico".

Molti di questi requisiti vengono convalidati sul client, dal browser; ma sono tutti convalidati sul server, da iform4u.