Form Builder

Il Form Builder è un componente chiave di Primeforms. È qui che i moduli vengono creati e aggiornati. Il Form Builder fornisce gli strumenti necessari per aggiungere e rimuovere campi, nonché altri elementi HTML.

Interfaccia Utente #

L’interfaccia del Form Builder è divisa in tre aree:

• Pannello sinistro: Contiene i campi del modulo.
• Pannello destro: Il designer del tema.
• Area centrale: L’anteprima del modulo.

Pannello Sinistro #

Il pannello sinistro ha tre schede:

1. Campi: Mostra tutti i campi e gli elementi che possono essere aggiunti al modulo. Basta trascinarli e rilasciarli nell’area di destra.
2. Impostazioni: Permette di impostare il nome del modulo, il layout (posizione delle etichette) e disabilitare tutti i campi.
3. Codice: Mostra in tempo reale il codice HTML generato dal Form Builder. Da qui puoi riconoscere l’ID di ogni elemento per manipolare il modulo in modo più avanzato. Un pulsante “Copia” ti permette di copiare facilmente l’intero codice sorgente.

Area Centrale #

L’area centrale è l’Anteprima del Modulo, dove puoi manipolare ciascuno dei componenti.

Pannello Destro #

Il pannello destro è il Designer del Tema, dove puoi personalizzare l’aspetto del tuo modulo:

• Sfondi: Cambia lo sfondo di diversi elementi del modulo.
• Tipografia: Scegli il font, lo stile, la dimensione e il colore di tutti gli elementi di testo del modulo.
• Bordi: Imposta lo spessore, lo stile e il colore dei bordi attorno a determinati elementi del modulo.
• Ombre: Aggiungi o rimuovi un’ombra esterna al modulo.
• Pulsanti: Cambia il testo del pulsante di invio.
• E molto altro!

Aggiungere un Campo #

Ci sono due modi per aggiungere un campo:

1. Clicca su un widget nel pannello sinistro. Il componente del modulo apparirà nel tuo modulo, sotto tutti gli altri componenti.
2. Se vuoi aggiungere un campo in una posizione specifica, clicca su un widget nel pannello sinistro e trascinalo nell’area di destra. Una casella indicherà dove verrà posizionato il campo.

Modificare un Campo #

Per modificare un campo:

1. Clicca sul campo da modificare e apparirà un popover con le informazioni del campo.
2. Modifica le informazioni in base alle tue esigenze.
3. Clicca su Salva.

Nota: Premendo ESC si chiuderanno i popover.

Riordinare i Campi #

Per riordinare un campo (componente):

1. Clicca su un componente e tienilo premuto.
2. Trascina il componente verso l’alto o il basso in base alle tue esigenze.
3. Una zona attiva indicherà dove verrà posizionato il componente.
4. Rilascia il componente una volta posizionato nel punto desiderato.

Creare Colonne #

Per creare colonne con un campo (componente):

1. Clicca su un widget nel pannello sinistro e trascinalo nell’area del Form Builder.
2. Trascinalo a sinistra o a destra di un campo esistente.
3. Un bordo indicherà dove verrà posizionato il campo.
4. Rilascia il widget una volta posizionato nel punto desiderato.

All’interno del Form Builder, puoi trascinare i campi esistenti nella “zona di rilascio delle colonne” e il builder ridimensionerà automaticamente tutti i campi per creare colonne di uguale larghezza.

Puoi creare fino a quattro colonne con questo metodo. Tuttavia, puoi progettare moduli con fino a 12 colonne utilizzando la funzione Container CSS Class.

Copiare un Campo #

Per copiare un campo (componente):

1. Clicca su un componente e tienilo premuto.
2. Clicca sul pulsante ‘Copia’ nella finestra del popover.
3. Noterai che il campo copiato apparirà sotto il campo originale.

Eliminare un Campo #

Per eliminare un campo (componente):

1. Clicca su un componente e tienilo premuto.
2. Trascinalo fuori dalla zona attiva.
3. Rilascia.
4. Noterai che il componente è scomparso.

Copiare l’ID del Campo #

Per copiare l’ID del campo, segui questi passaggi:

1. Clicca su un componente e tienilo premuto.
2. Clicca sui 3 puntini verticali (nell’intestazione del popover).
3. Clicca su Copia ID.
4. Ora puoi incollarlo in altri luoghi, come un messaggio email personalizzato o un design CSS.

Impostazioni Base del Modulo #

Cliccando sulla scheda Impostazioni del Form Builder, accederai a una versione molto basilare della configurazione del modulo. Da qui puoi:

• Cambiare il nome del modulo: Il nome del modulo serve per riconoscerlo nelle pagine di amministrazione ed è anche visualizzato come titolo della pagina pubblica del modulo su Primeforms.
• Cambiare il layout del modulo: Il layout del modulo è basato su Bootstrap CSS e viene utilizzato per posizionare le etichette sul modulo.
• Disabilitare gli elementi del modulo: Ti permette di disabilitare tutti i campi del modulo. È un’opzione avanzata che può essere utile se intendi interagire con il modulo da un file JavaScript esterno.

Impostazioni dei Campi #

Ogni campo del modulo ha molte opzioni di configurazione, ad esempio l’etichetta, il valore predefinito, la classe CSS, ecc. Per configurare un campo, vai all’anteprima e clicca su di esso.

Opzioni di Configurazione #

Di seguito sono elencate tutte le opzioni di configurazione in ordine alfabetico. Non tutte sono presenti in tutti i campi, ma se hai qualche problema, usa questa lista come riferimento.

Accettare #

Questa opzione è presente nel campo Caricamento File. Con essa puoi limitare il tipo di file che il campo può accettare. Considera quanto segue:

• Devi aggiungere le estensioni dei file partendo dal punto e separate da virgole.
• Per impostazione predefinita, tutti i file saranno validati e saranno accettati solo file immagine con estensione ‘.gif, .jpg, .png’.
• Ad esempio, per accettare file di testo, puoi cambiare 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 validazione del campo viene eseguita sia lato client (browser) che lato server.

Alias #

L’opzione Alias ti permette di inviare notifiche WebHook utilizzando l’Alias del Campo invece del Nome del Campo. Ad esempio, potremo reinviare i dati POST utilizzando “nome” o “età” invece di “testo_0” o “numero_0”.

Come Pulsante #

L’opzione Come Pulsante ti permette di visualizzare i campi Radio Button e Checkbox come Pulsanti.

Checkbox #

L’opzione Checkbox è disponibile solo nei campi Checkbox e viene utilizzata per aggiungere checkbox al componente.

Ad esempio, inserisci nell’editor di massa le seguenti “Checkbox” e clicca su “Salva”:

L’anteprima del modulo mostrerà un componente Checkbox con 5 checkbox: First Choice, Second Choice, Third Choice, Fourth Choice e Fifth Choice. Le checkbox “Second Choice” e “Fourth Choice” saranno selezionate. Infine, se l’utente invia il modulo senza apportare modifiche, invierà i valori: 2,4.

Verifica DNS #

Questa opzione indica all’applicazione di verificare, durante la validazione del campo Email, che il dominio dell’email esista realmente e abbia record ‘A’ e ‘MX’.

Attenzione! Questa è un’opzione avanzata e dovrebbe essere utilizzata con cautela. La verifica potrebbe fallire a causa di problemi con i server DNS anche quando l’email è valida. Per impostazione predefinita, è disabilitata.

Classe CSS #

Ti permette di aggiungere una o più classi CSS al campo del modulo.

Classe CSS del Contenitore #

Ti permette di aggiungere una o più classi CSS al contenitore dell’intero componente.

Puoi creare moduli multi-colonna definendo la classe col-xs-* (l’asterisco rappresenta il numero di colonne, tra 1 e 12).

Ad esempio:

• Se vuoi posizionare due campi in due colonne, devi fare quanto segue:
• Aggiungi la classe CSS del contenitore al primo campo: col-xs-6
• 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 padding che Bootstrap CSS aggiunge alle colonne. Puoi aggiungerle o meno in base al tuo design. In caso contrario, puoi aggiungere la classe CSS del contenitore col-xs-12 agli altri campi, per mantenere lo stesso padding su ciascun campo.

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

Nota:

• Per impostazione predefinita, tutti i campi tranne il Pulsante, hanno la classe: form-group. Questa classe non può essere modificata.
• Per impostazione predefinita, il campo Pulsante ha la classe: form-action. Questa classe non può essere modificata.

Attributi Personalizzati #

Puoi aggiungere attributi personalizzati a un campo. Questi attributi hanno due parti: il nome dell’attributo e il valore dell’attributo. Questa funzionalità ti permette di creare moduli più accessibili, specialmente perché puoi usarla per aggiungere:

• Attributi Data: Utili per integrare i campi del modulo con librerie JavaScript.
• Attributi Aria: Utili per descrivere meglio i campi del modulo e offrire maggiore accessibilità.

Valore Predefinito #

Puoi aggiungere un valore predefinito a un campo. Questo valore appare di default, 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 vuoi che venga visualizzato dall’utente, ma non modificabile. (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 appariranno nel Gestore degli Invii.

Dimensione del Campo #

Un campo Text Area permette la configurazione della sua dimensione. 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 che digiti qui apparirà sotto il campo e viene spesso utilizzato per dare agli utenti istruzioni su cosa inserire.

Posizione del Testo di Aiuto #

Questo menu a tendina ti permette di spostare il Testo di Aiuto sopra o sotto il campo del modulo.

Inline #

L’opzione Inline è presente nei campi Checkbox e Radio Button e viene utilizzata per cambiare la posizione verticale delle checkbox o dei radio button in una posizione orizzontale.

Tipo di Input #

Molti campi ti permettono di cambiare 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 assicurarti che il testo digitato sia un URL assoluto che inizia con le lettere ‘http’.

Solo Interi #

Puoi attivare questa opzione se desideri che il valore di questo campo sia solo un numero intero. Se l’utente inserisce un numero decimale, il modulo non verrà elaborato e verrà visualizzato un errore di validazione.

Pattern per Interi #

È un’opzione avanzata del campo Numero che ti permette di personalizzare l’espressione regolare che accetta solo numeri interi (0-9) e verrà utilizzata nel processo di validazione del modulo. L’espressione regolare utilizzata di default è /^\s[+-]?\d+\s$/.

Etichetta #

È il modo più comune per informare l’utente sul valore che deve inserire nel campo. Generalmente viene mostrata nella parte superiore del campo, ma puoi modificare questa posizione cambiando il layout del modulo.

Classe CSS dell’Etichetta #

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

Nota: Per impostazione predefinita, tutti i campi hanno la classe CSS: control-label. Si consiglia di non rimuoverla.

Data Minima #

Puoi definire una data come data minima da considerare nel processo di validazione del campo. Se l’utente inserisce una data precedente, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

La data deve seguire il formato: yyyy-mm-dd (formato standard HTML5) per le date statiche. Inoltre, puoi utilizzare tag per validare date relative:

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

Data Massima #

Puoi definire una data come data massima da considerare nel processo di validazione del campo. Se l’utente inserisce una data successiva, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

La data deve seguire il formato: yyyy-mm-dd (formato standard HTML5) per le date statiche. Inoltre, puoi utilizzare tag per validare date relative:

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

Numero Minimo #

Puoi definire un numero intero o decimale come numero minimo da considerare nel processo di validazione del campo. Se l’utente inserisce un numero inferiore, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

Numero Massimo #

Puoi definire un numero intero o decimale come numero massimo da considerare nel processo di validazione del campo. Se l’utente inserisce un numero superiore, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

Dimensione Minima #

Puoi definire un numero intero come dimensione minima da considerare nel processo di validazione del campo. Se l’utente carica un file con una dimensione inferiore a quella definita, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

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 5MB.

Dimensione Massima #

Puoi definire un numero intero come dimensione massima da considerare nel processo di validazione del campo. Se l’utente carica un file con una dimensione superiore a quella definita, il modulo non verrà inviato e verrà visualizzato un errore di validazione. Se questa opzione non è definita, non ci sarà alcuna limitazione.

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 5MB.

Lunghezza Minima #

Puoi definire un numero intero come lunghezza minima della stringa di input. Se non è impostato, non ci sarà alcun limite di lunghezza minima.

Lunghezza Massima #

Puoi definire un numero intero come lunghezza massima della stringa di input. Se non è impostato, non ci sarà alcun limite di lunghezza massima.

Numero Minimo di File #

Puoi definire un numero intero come numero minimo di file che l’utente finale deve caricare per superare la validazione.

Numero Massimo di File #

Puoi definire un numero intero come numero massimo di file che l’utente finale deve caricare per superare la validazione. Utilizza questa funzione per consentire più caricamenti con lo stesso campo File.

Multiplo #

Questa opzione indica che l’utente può inserire più valori. Puoi trovare questa opzione nei campi Email e Select List:

• Se l’opzione Multiplo è abilitata in un campo Email, puoi aggiungere più indirizzi email validi separati da virgole. Ad esempio: [email protected],[email protected].
• Se l’opzione Multiplo è abilitata in un campo Select List, puoi selezionare più opzioni. Le informazioni raccolte avranno un formato separato da virgole. Ad esempio: Opzione Uno, Opzione Due.

Pattern per Numeri #

È un’opzione avanzata del campo Numero che ti permette di personalizzare l’espressione regolare che accetta qualsiasi numero e verrà utilizzata nel processo di validazione del modulo. L’espressione regolare utilizzata di default corrisponde a un numero decimale e opzionalmente a una parte esponenziale (es. -1.23e-10): /^\s[-+]?[0-9].?[0-9]+([eE][-+]?[0-9]+)?\s*$/.

Opzioni #

L’opzione Opzioni è disponibile solo nei campi Select List e viene utilizzata per aggiungere opzioni di selezione al componente.

Ad esempio, se inserisci nel campo Opzioni del modulo:

L’anteprima del modulo mostrerà una casella con il testo “Two”. E se l’utente invia il modulo senza apportare modifiche, invierà il valore: 2.

Pattern #

È un’opzione avanzata che ti permette di aggiungere un’espressione regolare al campo da utilizzare nel processo di validazione del modulo. Se il valore inviato dall’utente non corrisponde a questo pattern, il modulo non verrà elaborato e verrà visualizzato un errore di validazione.

Placeholder #

È un modo alternativo per descrivere il valore che l’utente deve inserire nel campo. Di default, il placeholder appare nel campo fino a quando l’utente inizia a inserire i dati.

Radio Button #

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

Ad esempio, se clicchi su Bulk Editor e inserisci i seguenti pulsanti di opzione:

L’anteprima del modulo mostrerà cinque pulsanti di opzione con le parole: Uno, Due, Tre, Quattro e Cinque. L’opzione Due sarà selezionata. 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à essere modificato. Le informazioni in un campo Sola Lettura vengono ricevute e validate dal server quando il modulo viene inviato. Verranno anche raccolte dal Gestore degli Invii.

Obbligatorio #

Questa proprietà ti permette di assicurarti 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 verrà elaborato e verrà visualizzato un messaggio di errore. Di default, le etichette dei campi obbligatori hanno un asterisco rosso sulla destra.

<img src=”primeforms-form-builder-required.jpg” alt=”Primeforms – Form Builder – Campo Obbligatorio”>

Passo Numero #

Con questa opzione, puoi impostare l’attributo HTML5 step per i campi Numero e Data. L’attributo step specifica l’intervallo numerico valido da utilizzare quando si modificano i valori di questo campo utilizzando i controlli del browser. I browser moderni riconoscono questo attributo.

Importante! Se il campo Numero ha l’opzione Solo Interi abilitata, si consiglia di impostare il Passo Numero su 1.

Unico #

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

<img src=”primeforms-form-builder-unique.jpg” alt=”Primeforms – Form Builder – Campo Unico”>

Tipi di Campo #

Intestazione #

Le intestazioni vengono utilizzate per contrassegnare le sezioni del modulo e per dare 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. Immediatamente 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 gli utenti a compilare il modulo o per fornire indicazioni. Quando accedi al Form Builder per crearne uno, vedrai un paragrafo con il testo “Questo è il mio modulo. Per favore, compilalo. Grazie!”. Per modificare questo testo, basta cliccarci sopra. Immediatamente apparirà un modulo con tutte le opzioni per personalizzarlo.

Campo di Testo #

Un campo di testo è un componente che ti permette di scrivere una sola riga di testo. I browser web considerano il campo di testo come il 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 validare i dati in modo diverso. I cinque tipi sono:

• Testo: Questo è il tipo predefinito per questo componente. È quello comunemente utilizzato nei moduli, poiché non offre alcuna validazione e accetta tutti i dati inviati dall’utente. Se il browser non riconosce alcun altro tipo, verrà visualizzato questo campo.
• URL: Questo tipo è stato introdotto da HTML5 e ora i browser moderni lo accettano. Usa il tipo URL se vuoi raccogliere URL assoluti che iniziano con ‘http’.
• Colore: Questo tipo è stato introdotto da HTML5 e i browser moderni che lo accettano mostrano una palette di colori automaticamente quando ci clicchi. Usa il tipo Colore se vuoi che i dati raccolti siano il valore esadecimale di un colore, che inizia con il segno ‘#’. Ad esempio, ‘#FFFFFF’.
• Telefono: Questo tipo è stato introdotto da HTML5 e ora i browser moderni lo accettano. Usa questo tipo se i dati da raccogliere sono un numero di telefono.
• Password: Tutti i browser riconoscono questo tipo di input. Usa questo tipo di input se vuoi che l’utente inserisca dati non visualizzati sullo schermo. Nota che Primeforms non è pensato per memorizzare password, principalmente perché i dati vengono memorizzati come testo semplice. Se necessario, usa questo tipo di input con cautela.

Campo Numero #

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

• Numero: Questo è il tipo che dovresti usare quando vuoi che l’utente digiti il numero. Ad esempio, potresti chiedere: “Quanti anni hai?” Se l’utente inserisce “Cinque anni”, verrà notificato che deve scrivere solo numeri: 5, in questo caso.
• Intervallo: Questo tipo di input è anche utilizzato per raccogliere dati numerici, ma a differenza di Numero, i browser moderni mostrano un cursore che l’utente può utilizzare per inserire i suoi dati. Ad esempio, potresti 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 validazione diverse. Ad esempio, Solo Interi 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 vengono 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 mostrano un calendario quando ci clicchi. Questo componente può avere 5 diversi tipi di input:

• Data: Il tipo di input da utilizzare se vuoi raccogliere date. Devi utilizzare il formato: yyyy-mm-dd.
• Data e Ora Locale: Il tipo di input da utilizzare se vuoi raccogliere date e orari. I dati raccolti avranno il formato ISO standard: yyyy-mm-ddThh:mm:ss.
• Ora: Il tipo di input da utilizzare se vuoi raccogliere orari nel formato: hh:mm:ss.
• Mese: Questo tipo di input è supportato dai browser moderni e dovrebbe essere utilizzato se vuoi che l’utente selezioni il mese o il mese e l’anno. Il formato di input è yyyy-mm.
• Settimana: Questo tipo di input è supportato dai browser moderni e dovrebbe essere utilizzato se vuoi che l’utente selezioni la settimana dell’anno in formato numerico.

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

Campo Email #

Un campo email viene utilizzato per raccogliere email valide. Di default, valida che il testo contenga un ‘@’ e un ‘.’ più due o più caratteri per il dominio dell’email. Inoltre, devi utilizzare questo campo per inviare notifiche che hanno le email dei tuoi utenti come mittenti (Reply-To).

Un’opzione avanzata di questo campo è la possibilità di verificare il DNS dell’email per confermare che il dominio esista realmente e abbia un record A e MX. Attenzione: questa validazione potrebbe fallire a causa di problemi con i server DNS anche quando l’email è valida. Di default, questa opzione è disabilitata.

Area di Testo #

Un’area di testo è un componente che ti permette di raccogliere più righe di testo, con più paragrafi. È un campo adatto se vuoi che gli utenti scrivano un testo completo. Inoltre, puoi cambiare alcune impostazioni. Ad esempio, puoi cambiare l’altezza dell’area di testo per mostrare più spazio ai tuoi utenti. Per fare ciò, clicca sull’area di testo e cambia la dimensione del campo che di default è 3.

Checkbox #

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 i tuoi utenti possano selezionare tutte, alcune o nessuna. Puoi usarlo se vuoi ottenere più risposte, ad esempio: “Quali dei seguenti sono frutti?”

Per aggiungere, modificare o eliminare caselle di controllo, devi cliccare sul componente. Quindi apparirà un modulo con il campo Checkbox. Nota che ogni riga di questo campo rappresenta una scelta diversa. Ogni scelta può essere composta da tre parti: Etichetta, Valore e Immagine. Inoltre, puoi selezionarle.

#

Puoi anche utilizzare lo strumento Bulk Editor per inserire scelte separate da una barra verticale o pipe. Il formato dovrebbe essere il seguente: Etichetta|Valore|selezionato. La seconda e la terza parte di questo formato sono opzionali.

Ad esempio, clicca su Bulk Editor e aggiungi le seguenti “Checkbox”:

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

L’anteprima del modulo mostrerà 5 caselle di controllo con le parole: One, Two, Three, Four e Five. Le opzioni “Two” e “Four” saranno selezionate. 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 nell’etichetta di una casella di controllo, devi aggiungere l’URL dell’immagine come terzo parametro di configurazione della casella di controllo. Ad esempio, se configuriamo 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: One e l’etichetta: One.
• Two|2: Crea una casella di controllo con il valore: 2 e l’etichetta: Two.
• Three|3|selected: Crea una casella di controllo con il valore: 3, l’etichetta: Three e sarà selezionata di default.
• Four|4|http://example.com/image-4.jpg: Crea una casella di controllo con il valore: 4, l’etichetta: Four 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: Five e l’immagine apparirà accanto alla casella di controllo e sarà selezionata di default.

Per aggiungere icone invece di immagini, devi solo sostituire gli URL delle immagini con le classi CSS delle icone. Ad esempio: glyphicon glyphicon-user mostrerà l’icona dell’utente. Tieni presente che, di default, l’applicazione ha il set di icone Glyphicons Pro; tuttavia, puoi usare altre icone come Font Awesome o DevIcons. Per farlo, devi solo aggiungere i font al tema CSS del tuo modulo.

Importante: Per aggiungere un’immagine o un’icona alla configurazione della casella di controllo, devi avere i primi due parametri, anche se sono uguali.

Nota: Ricorda che puoi visualizzare le tue caselle di controllo orizzontalmente attivando l’attributo inline.

Radio Button #

Il componente Radio Button ti permette di aggiungere un gruppo di pulsanti di opzione al modulo. Questo componente offre agli utenti un elenco di scelte, ma devono selezionarne solo una. Ad esempio: “Qual è il tuo colore preferito?”

Per aggiungere, modificare o eliminare opzioni, devi cliccare sul componente. Quindi apparirà un modulo con il campo Radio. Nota che ogni riga di questo campo rappresenta un’opzione diversa. Ogni riga può essere composta da tre parti, separate da una barra verticale o pipe. Il formato dovrebbe essere il seguente: Etichetta|Valore|selezionato. La seconda e la terza parte di questo formato sono opzionali.

Ad esempio, se inserisci nel campo “Radio” del modulo:

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

L’anteprima del modulo mostrerà 5 pulsanti di opzione con le parole: One, Two, Three, Four e Five. L’opzione “Two” sarà selezionata. 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 nell’etichetta di un pulsante di opzione, devi aggiungere l’URL dell’immagine come terzo parametro di configurazione del pulsante di opzione. Ad esempio, se configuriamo 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: One e l’etichetta: One.
• Two|2: Crea un pulsante di opzione con il valore: 2 e l’etichetta: Two.
• Three|3|selected: Crea un pulsante di opzione con il valore: 3, l’etichetta: Three e sarà selezionato di default.
• Four|4|http://example.com/image-4.jpg: Crea un pulsante di opzione con il valore: 4, l’etichetta: Four 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: Five e l’immagine apparirà accanto al pulsante di opzione e sarà selezionato di default.

Per aggiungere icone invece di immagini, devi solo sostituire gli URL delle immagini con le classi CSS delle icone. Ad esempio: glyphicon glyphicon-user mostrerà l’icona dell’utente. Tieni presente che, di default, l’applicazione ha il set di icone Glyphicons Pro; tuttavia, puoi usare altre icone come Font Awesome o DevIcons. Per farlo, devi solo aggiungere i font al tema CSS del tuo modulo.

Importante: Per aggiungere un’immagine o un’icona alla configurazione del pulsante di opzione, devi avere i primi due parametri, anche se sono uguali.

Nota: Ricorda che puoi visualizzare i tuoi pulsanti di opzione orizzontalmente attivando l’attributo inline.

Select List #

Un Select List è un menu a tendina che permette all’utente di selezionare una o più opzioni, a seconda della configurazione scelta. La principale differenza rispetto al componente Radio Button è che puoi aggiungere molte opzioni senza cambiarne le dimensioni. Quindi, il suo utilizzo è consigliato quando ci sono molte opzioni, ad esempio: “Seleziona il tuo paese di origine?”

Per aggiungere, modificare o eliminare opzioni, devi cliccare sul componente. Quindi apparirà un modulo con il campo Opzioni. Nota che ogni riga di questo campo rappresenta un’opzione diversa. Ogni riga può essere composta da tre parti, separate da una barra verticale o pipe. Il formato dovrebbe essere il seguente: Etichetta|Valore|selezionato. La seconda e la terza parte di questo formato sono opzionali.

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 “Two” e, se l’utente invia il modulo senza apportare modifiche, invierà il valore: 2.

Select List con Gruppi di Opzioni #

Per creare un gruppo di opzioni <optgroup>, racchiudi 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à visualizzato 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 permette agli utenti di allegare file durante l’invio del modulo. Una volta inviati, i file appariranno nelle informazioni dettagliate dell’invio. Ci sono due dettagli da considerare:

1. Tipi di file consentiti: Puoi limitare i tipi di file che possono essere caricati in ciascun campo file. Di default, i tipi di file consentiti per le immagini sono: .gif, .jpg, .png. Per modificare i tipi di file consentiti, devi cliccare sul componente e nel campo Accetta che appare, cambiare le estensioni dei file consentite, ad esempio: .doc, .pdf, .txt per accettare file di testo.
2. Limitazioni di dimensione: Puoi limitare la dimensione del file definendo una dimensione minima o massima per ciascun campo. Per modificare la dimensione consentita, clicca sul componente e poi espandi il modulo pop-up cliccando sul link Altro. Quindi, individua i campi Dimensione Minima e Dimensione Massima e inserisci il numero che rappresenta il numero di byte consentiti. Ad esempio, Dimensione Massima: 10311680 (risultante dalla moltiplicazione di 1024 x 1024 x 5 = 5MB).

Snippet HTML #

Il campo Snippet HTML è un componente avanzato che ti permette di aggiungere codice HTML ai tuoi moduli. Mostrerà un editor WYSIWYG in grado di riconoscere scorciatoie da tastiera per formattare rapidamente il tuo codice HTML.

Attenzione: Inserisci un codice HTML valido, altrimenti il Form Builder non salverà il modulo e mostrerà un messaggio di errore indicando la riga di codice in cui è stato fatto l’errore. Ad esempio, un errore comune è aggiungere più di un elemento HTML con lo stesso ID.

<img src=”primeforms-form-builder-snippet.jpg” alt=”Primeforms – Form Builder – Snippet HTML”> #

Per aggiungere una tabella HTML, inserire un link o visualizzare un’immagine, prima devi cliccare sul pulsante Schermo Intero. Questo aprirà l’editor WYSIWYG sopra il Form Builder, in modo da avere più spazio per inserire tutto il contenuto necessario. Inoltre, puoi cliccare sul pulsante Codice per visualizzare il contenuto come codice HTML.

<img src=”primeforms-form-builder-snippet-table.jpg” alt=”Primeforms – Form Builder – Snippet HTML con Tabella”> #

Nota: Anche se puoi aggiungere codice CSS e JavaScript in un modulo, non è consigliato farlo. In questi casi, puoi creare un Tema CSS e/o caricare un file JavaScript esterno. Ricorda che il modulo che hai creato viene visualizzato anche nel Gestore degli Invii e il suo codice potrebbe essere incompatibile.

reCAPTCHA #

Il campo reCAPTCHA è un componente avanzato che ti permette di utilizzare la tecnologia di Google per verificare che gli utenti non siano bot o spammer. Puoi modificare la configurazione di reCAPTCHA, come cambiare il colore del tema, il tipo di captcha e la dimensione. Un dettaglio da tenere a mente è che puoi aggiungere solo un componente reCAPTCHA per modulo.

<img src=”primeforms-form-builder-recaptcha.jpg” alt=”Primeforms – Form Builder – reCAPTCHA”> #

Importante! Prima di aggiungere il componente reCAPTCHA al tuo modulo, devi prima aggiungere le chiavi reCAPTCHA nella configurazione del sito. Altrimenti, 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 ti permette di creare moduli multi-step o multi-pagina. Per ogni interruzione di pagina creata, aggiungerai una nuova pagina. Inoltre, un’intestazione verrà visualizzata 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 da considerare:

1. Pulsanti di Navigazione: Il componente Interruzione di Pagina aggiunge due pulsanti per consentire la navigazione nel modulo. Puoi personalizzare il testo sui pulsanti Avanti o Indietro cliccando sul componente.
2. Passaggi del Modulo: Appaiono sopra il modulo. Impostazioni:
   • Clicca su Passaggi del Modulo per controllare le sue impostazioni. Puoi cambiare i titoli di ciascun passaggio nel campo Passaggi del Modulo. Ogni riga corrisponde a un titolo.
   • Puoi specificare di visualizzare solo i titoli o i passaggi (numeri).
   • Puoi cambiare i numeri dei passaggi con icone Glyphicons. Per usare Glyphicons nei passaggi, devi aggiungere a ciascuna riga del campo Passaggi, una barra verticale o pipe seguita da icon-[nome dell'icona]. Ad esempio, se voglio sostituire il numero 1, lo scrivo nella prima riga di Passaggi: Passaggio Senza Titolo|icon-user. Vai su Glyphicons per vedere il nome delle icone che puoi usare.
   • Puoi cambiare il design dei passaggi per 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 della pagina all’URL, ad esempio per andare alla seconda pagina aggiungi la stringa di query p=2.

Spaziatore #

Il componente Spaziatore ti permette di aggiungere una spaziatura verticale precisa tra i campi del tuo modulo. Basta trascinare e rilasciare uno Spaziatore tra i tuoi campi e impostare il numero di pixel tra di essi.

Opzioni:

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

Firma #

Il componente Firma permette agli utenti finali di firmare il tuo modulo, sia con il mouse che con il dito su un iPad o smartphone, direttamente sul modulo. Quindi, puoi acquisire in modo sicuro firme per contratti, documenti legali e altri moduli in cui hai bisogno di un’autografo fisico.

Ci sono due dettagli da considerare:

1. Pulsanti di Interazione: Il componente Firma aggiunge due pulsanti per consentire interazioni con la tela. Puoi personalizzare il testo sui pulsanti Pulisci e Annulla cliccando sul componente.
2. Impostazioni del Campo Firma: Il campo Firma ha le seguenti opzioni speciali:
   • Pulisci: Abilita/Disabilita il pulsante “Pulisci”. Quando un utente finale clicca sul pulsante “Pulisci”, la firma verrà rimossa e la tela sarà pulita per ricominciare.
   • Annulla: Abilita/Disabilita il pulsante “Annulla”. Quando un utente finale clicca sul pulsante “Annulla”, l’ultimo tratto della firma verrà rimosso. Puoi continuare a premere questo pulsante per annullare la firma passo dopo passo.
   • Inoltre, puoi definire la larghezza e l’altezza della tela, il colore della penna e cambiare il testo dei pulsanti tra altre impostazioni comuni.

Campo Matrice #

Il campo Matrice è un componente avanzato che ti permette di raggruppare più controlli del modulo con lo stesso tipo di input all’interno di una tabella. Puoi creare un campo matrice con i seguenti tipi di input:

• Radio Button (Predefinito)
• Checkbox
• Select List
• Testo
• Area di Testo
• Numero
• Intervallo (Slider)
• Email
• Telefono
• URL
• Colore
• Password
• Data
• Data e Ora Locale
• Ora
• Mese
• Settimana

Tutti i controlli del modulo sono completamente personalizzabili e, in base al loro tipo, verrà applicata la corretta validazione dell’input.

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

Un tipo di input speciale per la Matrice è Select List, perché devi aggiungere valori diversi (opzioni). Per fare ciò, basta selezionare “Valori” e in ciascun campo “Valore” inserire valori separati da una barra (“/”). Se vuoi abilitare un’opzione vuota predefinita, devi utilizzare l’impostazione Placeholder.

<img src=”primeforms-form-builder-matrix-field-with-select-list.jpg” alt=”Primeforms – Form Builder – Campo Matrice con Select List”>

Puoi anche creare domande aperte, con la variazione Input Testo, dove ogni riga contiene una serie di caselle di inserimento testo. Questa variazione è simile al campo Testo. Lo stesso vale per altri campi di input basati su testo, come un’area di testo o campi numerici.

<img src=”primeforms-form-builder-matrix-field-with-text-inputs.jpg” alt=”Primeforms – Form Builder – Campo Matrice con Input Testo”>

Una funzionalità speciale nel campo Matrice è la possibilità di nascondere le domande. Basta selezionare l’opzione Inline e le domande scompariranno. Puoi usare questa funzionalità se vuoi fare una singola domanda in formato tabellare.

Nota: Quando una tabella è molto grande, dovrai aggiungere la classe table-responsive all’interno dell’impostazione Classe CSS del Contenitore.

Net Promoter Score (NPS) #

L’NPS è probabilmente la metrica più importante per tracciare la soddisfazione e la fedeltà dei clienti, e ora è disponibile in Primeforms.

Primeforms NPS ti aiuta a raccogliere feedback autentici dai clienti, in modo da capire veramente come sta performando la tua organizzazione. È un modo per registrare cosa pensano i tuoi clienti, i loro livelli 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à un’idea qualitativa del “perché” i tuoi clienti si sentono in un certo modo, che tende a funzionare meglio rispetto ai tradizionali sondaggi annuali di soddisfazione del cliente.

Questo componente ti permette di personalizzare la domanda, mostrare etichette, testo di aiuto e altro. Inoltre, può essere visualizzato come pulsanti o come pulsanti di opzione. Di default, il design mostra 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 ti permette di inviare i moduli. Anche se è normale aggiungere un pulsante per modulo, nulla ti impedisce di aggiungerne di più, ad esempio all’inizio e alla fine del modulo. Questo componente può essere di 3 tipi:

• Invia: Per inviare il modulo. È selezionato di default.
• Reset: Per ripristinare il modulo ai valori predefiniti.
• Immagine: Mostra un’immagine sul pulsante e, come Invia, viene utilizzato per inviare il modulo. Se usi questo tipo di pulsante, devi aggiungere l’URL dell’immagine e rimuovere la classe CSS.
• Pulsante: Questo tipo non invia il modulo, ma può essere utilizzato per interagire con i campi tramite JavaScript.

Puoi aggiungere un’icona ai pulsanti di tipo Invia, Reset e Pulsante, scrivendo nell’attributo Testo del Pulsante l’etichetta dell’icona. Ad esempio:

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

Nota: La classe CSS: btn btn-primary aggiunge il design predefinito al pulsante. Vai alla documentazione di Bootstrap CSS per ulteriori informazioni.

Validazione dei Campi #

Un punto molto importante da considerare è la validazione dei campi che viene eseguita quando gli utenti inviano un modulo.

La validazione dei campi è il processo mediante il quale si verifica che i dati inviati dagli utenti soddisfino determinati requisiti. Ad esempio, un campo Data richiede che il valore inviato al server abbia il formato yyyy-mm-dd. La validazione assicura che ciò accada.

Dovresti notare che Primeforms funziona con campi HTML5 standard, quindi puoi sempre consultare la documentazione HTML5 per ulteriori informazioni. Oltre alla validazione per tipo, i campi possono avere altri requisiti, come Obbligatorio e Unico.

Molti di questi requisiti sono validati lato client, dal browser; ma sono tutti validati anche lato server, da Primeforms.

Conclusione #

Il Form Builder di Primeforms è uno strumento potente e flessibile che ti permette di creare moduli complessi e altamente personalizzabili. Con una vasta gamma di opzioni di configurazione e tipi di campo, puoi progettare moduli che si adattano perfettamente alle tue esigenze, garantendo al contempo un’esperienza utente ottimale.

Se hai domande o hai bisogno di ulteriori chiarimenti, non esitare a consultare la documentazione ufficiale o a contattare il supporto di Primeforms. Buona creazione di moduli!