Guida pratica
Crea un modulo
Usa l’editor dei moduli per aggiungere passaggi, testo, immagini, pulsanti e campi di input, personalizzare lo stile, vedere l’anteprima su ogni dispositivo e pubblicare il modulo quando supera i controlli.
L’editor dei moduli è un editor a schermo intero in cui progetti ciò che vedono i visitatori: uno o più passaggi con il modulo, un passaggio di conferma, ogni blocco al loro interno e gli stili del modulo. Questa pagina illustra ogni parte dell’editor e i controlli che un modulo deve superare prima di poterlo pubblicare.
Prima di iniziare
- I moduli sono in accesso anticipato. Vedi Moduli se non sono disponibili nel tuo workspace.
- Crea il modulo in Email MarketingForms con Create form, indicando Name e Type.
Apri l’editor
Nella pagina del modulo, seleziona Edit form. L’editor si apre sopra il pannello:
- Intestazione: il nome del modulo (selezionalo per rinominarlo), il badge Draft o Live, l’indicatore Unsaved quando ci sono modifiche, Undo e Redo, un pulsante per ogni passaggio, Add step, Publish, Save e il pulsante di chiusura.
- Tela: un’anteprima dal vivo del passaggio selezionato. Passa tra Desktop, Mobile e Both, controlla le dimensioni del modulo, regola lo zoom con Scale e seleziona Reset canvas per centrarlo di nuovo.
- Pannello laterale: le schede Content e Styles, e Alerts & checks in fondo.
Seleziona Save per conservare le modifiche. Salvare un modulo attivo lo aggiorna anche sul sito.
Passaggi
Un nuovo modulo ha due passaggi: Step 1, con il testo «Join our list», un campo Email e un pulsante Subscribe, e un passaggio Success con il testo «Thanks for subscribing!».
- I passaggi con il modulo contengono i campi che i visitatori compilano. Seleziona Add step (il pulsante con il più nell’intestazione) per aggiungere un altro passaggio con il modulo. I nuovi passaggi vengono inseriti prima del passaggio di conferma.
- Il passaggio di conferma viene mostrato dopo che il visitatore ha inviato il modulo. Usalo per ringraziare, inserire un link o offrire un codice sconto.
- Ci si sposta tra i passaggi con i pulsanti. Un pulsante Next step convalida il passaggio corrente e mostra il successivo. Un pulsante Submit convalida il passaggio, invia la risposta e mostra il passaggio di conferma.
Seleziona il pulsante di un passaggio nell’intestazione per modificarlo sulla tela.
Aggiungi i blocchi
Nella scheda Content, seleziona un blocco per aggiungerlo al passaggio corrente. Per inserire un blocco in un punto preciso, passa il puntatore sulla tela tra due blocchi e seleziona il pulsante con il più. Trascina i blocchi per riordinarli e seleziona un blocco per modificarne le impostazioni. Delete si trova in cima alle impostazioni di ogni blocco.
| Gruppo | Blocco | Usalo per |
|---|---|---|
| Elements | Text | Titoli e paragrafi, con grassetto, corsivo, link ed emoji. |
| Button | Inviare, passare al passaggio successivo, chiudere il modulo o aprire un link. | |
| Image | Un logo, la foto di un prodotto o un’immagine banner, con link facoltativo. | |
| Inputs | L’indirizzo email del visitatore. Viene controllato che il formato sia valido. | |
| Text input | Qualsiasi testo breve, come un nome o un’azienda. | |
| Phone | Un numero di telefono. Viene controllato che il formato sia valido. | |
| Radio | Una scelta da un elenco. | |
| Checkbox | Più scelte da un elenco, oppure una singola casella di consenso. | |
| Date | Una data, nel formato che scegli. | |
| Dropdown | Una scelta da un elenco, in un menu compatto. |
Impostazioni dei blocchi
Text
- Il contenuto, modificato direttamente sulla tela.
- Typography: Alignment, Font size, Weight, Color e Link color.
Button
- Label e Action: Submit, Next step, Close o Go to URL. Go to URL richiede anche un URL.
- Button style: Width (automatica o intera), Alignment, Background, Text, Hover e Border radius.
Image
- Image URL, Alt text e un Link URL facoltativo.
- Layout: Width (%), Alignment e Object fit.
Email, Text input, Phone e Date
- Property name: la chiave con cui il valore viene memorizzato in ogni risposta, ad esempio
emailocompany. Deve essere unica nel modulo. - Label, Placeholder (o Date format per le date:
MM/DD/YYYY,DD/MM/YYYYoYYYY-MM-DD) e Help text. - Required, con un Required message facoltativo, e un Invalid message mostrato quando un indirizzo email o un numero di telefono non sembra valido. I numeri di telefono si convalidano più facilmente in formato internazionale, come
+15551234567.
Radio, Checkbox e Dropdown
- Property name, Label e Help text.
- Required, con un Required message facoltativo.
- Layout: verticale o orizzontale.
- Options, una per riga nella forma
label|value, ad esempioWeekly digest|weekly.
Tutti i blocchi
- Spacing: Margin top e Margin bottom.
- Visibility: Show on Desktop & mobile, Desktop only o Mobile only. I blocchi nascosti restano nel modulo e vengono esclusi solo dall’anteprima e dal dispositivo corrispondenti.
Personalizza lo stile del modulo
La scheda Styles controlla l’intero modulo:
| Sezione | Impostazioni |
|---|---|
| Form type | Type. Per gli slide-in, Flyout side (Bottom right, Bottom left o Bottom). Per i banner, Banner position (Top o Bottom). |
| Size | Width (px) e Min height (px). Lascia l’altezza a 0 per un’altezza automatica. |
| Overlay | Overlay color e Opacity dello sfondo dietro popup, slide-in e moduli a pagina intera. |
| Form background | Fill, Border color, Border width, Border radius, Padding e Shadow. |
| Side image | Un’immagine a sinistra (Left) o a destra (Right) del modulo, con Image URL, Alt text e Size. |
| Background image | Un’immagine dietro il modulo, con Image URL e Fit (Cover o Contain). |
| Fonts | Font family (Inter, Georgia, Mono o System), Heading color e Body color. |
| Input field styles | I colori Background, Border, Border radius, Text, Placeholder e Label. |
| Button styles | Fill, Text, Hover, Border radius e Style (Solid o Outline). I singoli pulsanti possono sovrascrivere queste impostazioni. |
| Close icon | Color, Size e Style (X o Circle X) del pulsante di chiusura. Non viene mostrato nei moduli incorporati. |
Anteprima
Usa Desktop, Mobile o Both sopra la tela per controllare il layout su ogni dimensione di schermo, compresi i blocchi che hai nascosto su un dispositivo. Undo e Redo scorrono le modifiche recenti.
Controlla e pubblica
Alerts & checks, in fondo al pannello laterale, elenca i problemi del modulo. Un contatore rosso indica quanti errori ci sono.
| Livello | Controllo |
|---|---|
| Errore | «Add at least one form step before publishing.» |
| Errore | «Add a success step before publishing.» |
| Avviso | Un passaggio con il modulo non ha blocchi di contenuto. |
| Avviso | Più di un campo email. Se possibile, usa un solo campo email. |
| Avviso | Nessun pulsante di invio o di passaggio successivo in nessun passaggio con il modulo. |
| Avviso | Un pulsante Go to URL non ha un URL. |
Gli errori bloccano la pubblicazione. Gli avvisi no, ma correggili perché i visitatori possano completare il modulo.
Quando i controlli sono superati, seleziona Publish nell’intestazione dell’editor. Emailit salva il modulo, lo rende attivo e chiude l’editor. Puoi anche pubblicare o ritirare il modulo dalla sua pagina. Poi, se non l’hai ancora fatto, installa lo script sul sito.