L’Editor moduli è uno strumento di facile utilizzo che consente di creare vari tipi di moduli web per interagire con i visitatori del sito o raccogliere informazioni sugli utenti. Grazie alla sua interfaccia intuitiva, simile all’Editor di testo e immagini ma con opzioni di personalizzazione aggiuntive, puoi progettare e configurare vari tipi di moduli, ad esempio per raccogliere feedback o iscrizioni, far compilare sondaggi e altro ancora.
Aggiunta di un modulo al sito web
1. Passa alla scheda Costruisci dal menu a sinistra e seleziona la categoria Moduli.
2. Trascina l’elemento modulo nella posizione desiderata della pagina. Un segnaposto blu indicherà il punto più vicino dove puoi posizionarlo.
Componenti del modulo
1. Elementi: Configura il contenuto, inclusi campi del modulo, caselle di controllo, pulsanti di opzione e il pulsante di invito all’azione.
2. Impostazioni: Definisci cosa accade quando il modulo viene inviato; ad esempio, l’invio di dati a un’e-mail o a un database.
Elementi del modulo
1. Campo di testo
Il campo di testo consente agli utenti di inserire una breve riga di testo nel modulo.
Tipi di campo
L’impostazione Tipo determina il tipo di dati che gli utenti possono immettere:
- Testo: visualizza l’input esattamente come digitato.
- Password: nasconde i caratteri di input visualizzandoli come *** (ad esempio, per le password).
- Nascosto: memorizza informazioni relative al sistema (ad esempio, dati sulla pagina di provenienza o sul browser) o dati precompilati che gli utenti non devono visualizzare.
- File*: consente ai visitatori di caricare immagini, audio, video o altri file. I file inviati generano un’e-mail con un link cliccabile per il download.
Opzioni di personalizzazione
- Nome: un identificatore univoco per fare riferimento al campo all’interno dell’Editor moduli e nelle e-mail o nei post di blog generati dal modulo.
- Larghezza: consente di regolare la larghezza del campo inserendo un valore o trascinando i punti di ridimensionamento.
- Lunghezza massima: consente di impostare il numero massimo di caratteri che il campo può accettare.
- Convalida come: consente di definire il tipo di contenuto richiesto (ad esempio, un campo e-mail deve contenere un indirizzo e-mail formattato correttamente). Se l’input non è valido, gli utenti vedranno un messaggio che chiederà di correggerlo.
- Suggerimento: mostra testo di aiuto quando gli utenti fanno clic all’interno del campo, fornendo indicazioni o esempi.
- Valore predefinito: precompila il campo con un valore predefinito che gli utenti possono modificare.
Caricamenti di file*
- Per memorizzare i file caricati, il modulo deve essere collegato a un database.
- I file archiviati nel database rimarranno accessibili e verranno considerati ai fini del limite di archiviazione dell’account.
- I link ai file inviati tramite e-mail non utilizzano spazio di archiviazione, ma scadono dopo 30 giorni.
2. Area di testo
Il campo modulo Area di testo è simile al campo di testo, ma consente di inserire testo più lungo su più righe.
Opzioni di personalizzazione
Oltre alle opzioni già previste per il campo di testo (Nome, Etichetta, Larghezza, Suggerimento, Convalida come e Valore predefinito), per l’area di testo sono disponibili le opzioni seguenti:
- Altezza: consente di regolare l’altezza dell’area di testo modificando il numero nel campo dell’altezza o trascinando i punti di ridimensionamento dell’area.
- A capo: Definisce il modo in cui il testo viene visualizzato quando viene inviato nelle e-mail o visualizzato in forum/blog.
- Predefinito: utilizza le impostazioni predefinite di disposizione del testo del browser o del client di posta elettronica.
- Disattiva: disabilita l’opzione di testo a capo, in modo che il testo non vada su una nuova riga durante la digitazione.
- Fisico: visualizza il testo esattamente come disposto nell’area di testo.
- Virtuale: consente al client di posta elettronica di decidere come disporre il testo.
3. Campo Seleziona
Il campo Seleziona consente agli utenti di scegliere un’opzione da un elenco predefinito. Può essere visualizzato come menu a discesa o come elenco, a seconda della configurazione selezionata.
Opzioni di personalizzazione
- Tipo: definisce la modalità di visualizzazione delle opzioni:
- Menu: visualizza un menu a discesa in cui gli utenti possono selezionare un’opzione.
- Elenco: mostra tutte le opzioni disponibili in un elenco verticale.
- Opzioni: rappresenta le scelte selezionabili nel campo.
- Nome opzione: il testo visualizzato nel menu a discesa o nell’elenco.
- Valore opzione: i dati effettivi inviati nelle e-mail quando viene selezionata l’opzione.
- Ordinamento e gestione: usa le frecce su/giù per riorganizzare le opzioni, eliminare quelle indesiderate o impostare una selezione predefinita che viene visualizzata al caricamento del modulo.
4. Caselle di controllo
Le caselle di controllo consentono agli utenti di selezionare più opzioni da un elenco o di attivare o disattivare una singola opzione. Sono utili per presentare selezioni a scelta multipla in cui è possibile scegliere più di un’opzione.
Opzioni di personalizzazione
- Nome: l’identificatore univoco della casella di controllo, utilizzato nell’Editor modelli del modulo, nelle e-mail e nei post del blog. Si tratta in pratica della domanda a cui gli utenti rispondono selezionando o deselezionando le caselle di controllo.
- Valore: rappresenta la risposta selezionata. Ad esempio, se il valore della casella di controllo è impostato su “Sì”, la selezione della casella significa che l’utente ha risposto affermativamente.
- Selezionato per impostazione predefinita: se questa opzione è abilitata, la casella di controllo sarà preselezionata al caricamento del modulo.
- Obbligatorio: richiede che gli utenti selezionino la casella prima di inviare il modulo. È un’opzione utile per le caselle di controllo che richiedono un consenso, ad esempio per richiedere agli utenti di accettare i termini e le condizioni prima dell’invio.
5. Pulsanti di opzione
I pulsanti di opzione sono utilizzati quando vi è una sola opzione selezionabile da un elenco predefinito. A differenza delle caselle di controllo, la selezione di un pulsante di opzione deseleziona automaticamente qualsiasi altra opzione nello stesso gruppo.
Opzioni di personalizzazione
- Nome gruppo: tutti i pulsanti di opzione che rappresentano scelte per una stessa domanda devono appartenere allo stesso gruppo. È possibile selezionare un solo pulsante alla volta per ogni gruppo.
- Valore: rappresenta l’opzione di risposta. Ad esempio, se la domanda è “Ti piace il mio sito?”, il nome del gruppo potrebbe essere “TiPiaceIlMioSito” e le opzioni potrebbero avere i valori Sì, No e Richiede più lavoro. Se un utente seleziona Sì, la risposta inviata apparirà come: TiPiaceIlMioSito: Sì.
- Stato predefinito: consente di preselezionare un pulsante di opzione quando il modulo viene caricato.
- Obbligatorio: richiede all’utente di selezionare un’opzione prima di inviare il modulo.
6. Modulo di feedback
L’Editor moduli include una procedura guidata integrata per i moduli di feedback, che puoi facilmente aggiungere selezionando l’icona F.
Questo modulo viene fornito preconfigurato con tutti i campi necessari per l’invio di feedback, incluso un pulsante di invito all’azione. I campi sono impostati con opzioni predefinite, ma puoi personalizzarli in base alle tue esigenze.
7. Messaggi di esito positivo/errore
Dopo l’invio del modulo, il sistema visualizza un messaggio di esito positivo o di errore. Puoi controllare dove visualizzare questi messaggi specificandone la posizione nell’editor.
Usa l’icona Info per selezionare la posizione in cui visualizzare i messaggi. Nelle Proprietà del modulo, quando sono abilitate le Opzioni avanzate, puoi anche personalizzare il messaggio di esito positivo. Se lasci il campo vuoto, verrà visualizzato il messaggio predefinito. Tuttavia, se preferisci, nelle Proprietà del modulo puoi inserire un messaggio personalizzato che verrà mostrato ai visitatori dopo l’invio corretto del modulo.
8. Pulsante di invito all’azione
Il pulsante di invito all’azione (Call to Action, CTA) è un elemento fondamentale del modulo, perché consente agli utenti di inviare i dati e completare le azioni previste nel modulo. Senza questo pulsante non è possibile inviare il modulo.
Per inserire un pulsante CTA, fai clic sulla relativa icona nella sezione Elementi in linea della barra degli strumenti dell’Editor moduli. Fai quindi clic sul pulsante appena aggiunto per configurarlo come pulsante di invio. Nel menu a discesa Link, seleziona {Invia modulo} per abilitare l’invio del modulo.
Se ti occorre un pulsante di ripristino, puoi crearlo seguendo gli stessi passaggi e selezionando invece {Azzera}. Inoltre, nel pannello di destra è disponibile un campo modificabile dove puoi personalizzare il testo della didascalia del pulsante in base alle esigenze del modulo.
Proprietà e personalizzazione del pulsante di invito all’azione
- Didascalia e sotto-didascalia del pulsante: consente di impostare il testo principale e il testo secondario opzionale visualizzati sul pulsante.
- Dimensioni: consente di scegliere la dimensione piccola, media o grande per il pulsante.
- Larghezza minima: consente di definire la larghezza minima del pulsante per adattarlo al layout.
- Didascalia e sotto-didascalia al passaggio del mouse: consente di specificare il testo alternativo che viene visualizzato quando gli utenti passano il mouse sul pulsante.
- Transizione testo: se è impostata una didascalia al passaggio del mouse, consente di selezionare un effetto di transizione per un cambiamento visivo uniforme.
- Effetto evidenziato: consente di aggiungere un effetto di animazione che si attiva 3 secondi dopo il caricamento della pagina e si ripete ogni 30 secondi.
- Colore: consente di scegliere fra tre colori predefiniti per i pulsanti.
- Allineamento: consente di allineare il pulsante all’interno del contenuto (a sinistra, al centro o a destra).
- Padding: consente di regolare in modo ottimale la spaziatura interna del pulsante in pixel.
- Icona pulsante: è possibile scegliere un’icona dalla Libreria immagini a disposizione o caricare un’immagine personalizzata.
- Icona Passaggio mouse: facoltativamente, è possibile aggiungere un’icona diversa che appare al passaggio del mouse.
- Posizione icona: consente di scegliere se posizionare l’icona prima o dopo la didascalia del pulsante.
Impostazioni modulo
1. Pagina successiva
Puoi specificare la pagina che deve aprirsi dopo l’invio del modulo. Può trattarsi di una pagina di ringraziamento dedicata o di qualsiasi altra pagina pertinente del sito. Per impostazione predefinita, il modulo è impostato in modo che, dopo l’invio corretto, gli utenti rimangano sulla stessa pagina. Puoi modificare questa impostazione scegliendo la pagina desiderata tramite l’opzione Tipo di link.
2. Invia a e-mail
Abilita Invia a e-mail per ricevere i moduli inviati dai visitatori del tuo sito web tramite e-mail. L’abilitazione di questa opzione renderà visibili ulteriori opzioni:
| - A e-mail: inserisci l’indirizzo e-mail a cui devono essere inviati i moduli, ad esempio ordini@contattailsitoweb.com. | |
| - Da e-mail: per garantire la consegna dei moduli inviati, abbiamo disabilitato l’opzione per specificare l’indirizzo e-mail del mittente. | |
| - Oggetto e-mail: definisci l’oggetto dell’e-mail (ad esempio, “Nuova richiesta di informazioni”). Puoi anche utilizzare i caratteri jolly $xxxxx$ per personalizzare l’oggetto in base all’input dell’utente. |
3. Formato e-mail ed Editor modelli
Scegli il formato dell’email:
- Semplice: invia e-mail di solo testo, eliminando qualsiasi formattazione.
- HTML: invia e-mail formattate, a condizione che il client di posta elettronica supporti l’HTML.
Per i layout di e-mail personalizzati, seleziona Usa modello, che apre l’Editor modelli:
- L’Editor modelli funziona come un editor di testo e immagini semplificato.
- Usa il menu a discesa Valore per inserire i segnaposto corrispondenti ai campi del modulo.
- Dopo il salvataggio, ogni invio di modulo genererà un’e-mail basata sulla struttura del modello.
4. Invia e-mail di conferma
Questa funzionalità invia una risposta automatica ai visitatori confermando l’invio del modulo.
- A e-mail: inserisci l’indirizzo e-mail a cui devono essere inviati i moduli, ad esempio ordini@contattailsitoweb.com.
- Da e-mail: per garantire la consegna dei moduli inviati, abbiamo disabilitato l’opzione per specificare l’indirizzo e-mail del mittente.
- Oggetto e-mail: definisci l’oggetto dell’e-mail (ad esempio, “Nuova richiesta di informazioni”).
- Contenuto messaggio: abilita questa opzione da Usa modello > Modifica per aprire l’Editor modelli di testo, dove puoi personalizzare il messaggio di conferma. Usa Unisci etichette per inserire i dati dei campi del modulo (ad esempio, $Email$).
5. Invia a database
Abilita Invia a database per archiviare i dati del modulo inviato in un database ospitato sul sito. Il modulo crea automaticamente un database dedicato con le colonne necessarie corrispondenti ai nomi e ai tipi di dati dei campi del modulo. Puoi anche utilizzare un database importato, ma assicurati che i nomi e i tipi delle colonne corrispondano.
Impostazioni aggiuntive:
- Richiedi conferma: invia un’e-mail con un link di conferma su cui gli utenti devono fare clic per convalidare l’invio.
- Richiedi approvazione: invia una notifica a un moderatore tramite e-mail, richiedendogli di approvare o rifiutare l’invio prima che venga archiviato. Ciò aiuta a evitare spam o invii accidentali.
Per ulteriori dettagli, fai riferimento al tutorial dell’applicazione Database Editor.