# 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](/it/docs/forms/) se non sono disponibili nel tuo workspace.
- Crea il modulo in **Email Marketing → Forms** 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** | **Email** | 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 `email` o `company`. Deve essere unica nel modulo.
- **Label**, **Placeholder** (o **Date format** per le date: `MM/DD/YYYY`, `DD/MM/YYYY` o `YYYY-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 esempio `Weekly 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](/it/docs/forms/install/) sul sito.

## Vedi anche

  - [Installa i moduli sul tuo sito](/it/docs/forms/install/): Mostra i moduli attivi sul tuo sito.
  - [Panoramica dei moduli](/it/docs/forms/): Tipi di modulo, stati e risposte.

---
Fonte: https://emailit.com/it/docs/forms/build/