# Design e layout

> Titolo, logo e cinque colori del tuo modulo, i suoi due layout, il link alla privacy e l’anteprima in tempo reale, più ciò che resta uguale in ogni modulo.

Il tuo modulo porta il tuo nome, il tuo logo e i tuoi colori dalla prima schermata all’ultima. Li imposti nell’editor, e l’anteprima lì accanto mostra il risultato.

## Titolo e descrizione

In **Form Details** (dettagli del modulo):

- **Form Title** (titolo del modulo) è l’intestazione del modulo, fino a 100 caratteri. Serve anche a una bozza. Nell’ultima schermata è anche il nome della chat che chi risponde sta per aprire.
- **Description** (descrizione) è facoltativa: fino a 240 caratteri sotto il titolo, per dire a cosa serve il modulo.

## Logo

In **Logo**, seleziona **Upload image** (carica immagine) e scegli un file PNG, JPEG, WEBP, GIF o SVG fino a 20 MB. Lo ritagli in un quadrato, e viene salvato a 512 × 512 pixel, con la trasparenza conservata. Viene caricato quando salvi il modulo.

Il logo compare sopra il titolo e nell’ultima schermata. Senza logo, il modulo mostra le iniziali delle prime due parole del titolo (Dental Sol diventa DS) sul colore del tuo pulsante.

## Cinque colori

La scheda **Design** ha cinque colori, e ognuno accetta qualsiasi valore esadecimale.

| Colore           | Cosa colora                                            | Predefinito |
| ---------------- | ------------------------------------------------------ | ----------- |
| **Title**        | Il titolo del modulo e le domande                      | `#1a1a1a`   |
| **Text**         | La descrizione, il testo di aiuto e il resto del testo | `#6b6560`   |
| **Background**   | La pagina dietro il modulo                             | `#ffffff`   |
| **Progress Bar** | La barra in alto e il contatore delle domande          | `#075e54`   |
| **Button**       | I pulsanti, la risposta selezionata e le iniziali      | `#075e54`   |

Tutto il resto deriva da questi cinque. Bordi, sfondi dei campi e testo più chiaro si ottengono mescolando i tuoi colori col tuo sfondo, quindi uno sfondo scuro funziona bene quanto uno chiaro. Il testo dei tuoi pulsanti viene scelto per te: bianco quando si legge bene sul colore del pulsante, scuro quando non si legge. Non c’è un sesto colore da scegliere.

## Due layout

Scegline uno in **Layout**, e cambialo quando vuoi.

|                                         | **Step-by-step** (passo dopo passo)                       | **All at once** (tutte insieme)               |
| --------------------------------------- | --------------------------------------------------------- | --------------------------------------------- |
| Cosa vede chi risponde                  | Una schermata di benvenuto, poi una domanda per schermata | Il titolo, poi tutte le domande in una pagina |
| Come si va avanti                       | **Start**, **Continue** o **Skip**, **Finish**            | Si scorre, poi si tocca **Finish**            |
| Copertura per domanda nelle statistiche | Sì                                                        | No                                            |

Step-by-step è il layout predefinito. La sua schermata di benvenuto mostra il tuo logo, il titolo e la descrizione, il numero di domande e una stima del tempo, come `5 questions · about 50s`.

Entrambi i layout finiscono con la stessa schermata: il messaggio che chi risponde sta per inviare, con **Open WhatsApp** ed **Edit my answers**. Le risposte in corso restano nel browser di chi risponde per tutta la sessione, quindi non si perdono ricaricando la pagina o passando un attimo a un’altra app.

## Link alla privacy

In **Settings** (impostazioni), attiva **Privacy policy URL** e incolla l’indirizzo della tua informativa. Deve iniziare con `https://` o `http://`. Il modulo mostra allora un link **Privacy policy** in fondo a ogni schermata.

Funziona sia che tu salvi le risposte sia che non le salvi. Se le salvi, collegare un’informativa è una buona pratica, e potrebbe essere obbligatorio dove operi.

## Anteprima in tempo reale

La **Form preview** (anteprima del modulo) accanto all’editor (sotto, sul telefono) è il modulo vero, disegnato dalla stessa pagina che riceve chi risponde. Si aggiorna quando completi ogni modifica: quando esci da un campo di testo, o quando scegli un’opzione.

Puoi compilarla come farebbe chi risponde. **Finish** mostra il messaggio esatto, e **Open WhatsApp** apre l’account scelto dalle tue regole. L’anteprima non salva nulla e non viene mai contata nelle statistiche.

## Cosa resta uguale in ogni modulo

Queste parti sono le stesse in ogni modulo e non si possono cambiare:

- I testi propri del modulo sono in inglese: **Start**, **Continue**, **Skip**, **Finish**, **Open WhatsApp**, **Edit my answers**, l’etichetta **Optional** e i messaggi di errore.
- La riga “You'll finish the conversation on WhatsApp.” sotto **Start** o **Finish**, e “We'll only use your details to reply on WhatsApp.” nell’ultima schermata.
- Il pulsante **Open WhatsApp** in verde WhatsApp e il rosso usato per gli errori.
- Il numero di domande e la stima del tempo.
- Il link **Powered by Walink** in fondo.

Non ci sono font personalizzati, CSS personalizzato né immagine di copertina. Dopo l’ultima domanda non c’è una pagina di ringraziamento né un reindirizzamento: il modulo finisce su WhatsApp.