Modificare il design di un modulo di contatto

Dopo aver aggiunto un modulo di contatto, puoi personalizzarne l’aspetto. Questa guida ti mostrerà come modificare lo stile, i colori e il layout dei moduli del tuo sito web.

Il blocco Modulo include diversi stili di design per i moduli tra cui scegliere:

1. Seleziona la Visualizzazione in modalità elenco nell’angolo in alto a sinistra dell’editor. Si tratta dell’icona avente tre linee orizzontali una sopra l’altra.
2. In questa sezione, individua il blocco Modulo e fai clic su di esso:

3. Nelle impostazioni del blocco nella barra laterale destra, fai clic sulla scheda Stili (rappresentata dall’icona di un cerchio bianco e nero):

4. Scegli uno stile:
   • Predefinito: mostra i nomi dei campi al di fuori dei campi di inserimento senza animazione.
   • Animato: mostra i nomi dei campi all’interno dei campi di inserimento, una breve animazione ed evidenzia anche il campo su cui i visitatori fanno clic.
   • Delineato: mostra i nomi dei campi all’interno dei campi di inserimento, una breve animazione e un contorno fisso che circonda le impostazioni del blocco Modulo.
5. Fai clic sul pulsante “Salva” nella parte superiore dello schermo.

Il testo segnaposto è un testo di esempio che può essere visualizzato in un campo del modulo prima che i visitatori facciano clic su di esso. Quando le persone inizieranno a digitare, il testo segnaposto scomparirà. Mostrare ai visitatori un esempio del tipo di contenuto da digitare nel modulo può essere loro di aiuto.

Per aggiungere testo segnaposto a un modulo di contatto:

1. Fai clic su un campo qualsiasi del modulo.
2. Apri le impostazioni del blocco nella barra laterale.
3. Scorri verso il basso fino all’impostazione “Testo segnaposto“.
4. Nella casella fornita, digita il tuo testo segnaposto, che verrà in seguito visualizzato nel campo del modulo.
5. Fai clic sul pulsante “Salva” nella parte superiore dello schermo.

Per impostazione predefinita, i campi di un modulo riempiranno la larghezza del contenitore del modulo stesso. È possibile modificare la larghezza dei singoli campi seguendo questi passaggi:

1. Fai clic su un campo qualsiasi del modulo.
2. Apri le impostazioni del blocco nella barra laterale.
3. Scorri verso il basso fino all’impostazione Larghezza e seleziona il valore che preferisci (25%, 50%, 75% o 100%).
   • Se desideri mostrare due campi affiancati, imposta la larghezza di ognuno su 50%. Se lo spazio è sufficiente, è possibile visualizzare più campi su un’unica riga.
4. Fai clic sul pulsante “Salva” nella parte superiore dello schermo.

È possibile scegliere di modificare l’aspetto del colore e del testo di ogni singolo campo del modulo oppure fare in modo che tutti i campi utilizzino le stesse impostazioni di colore e testo.

Quando fai clic su un singolo campo del modulo, le impostazioni del blocco includeranno il pulsante di attivazione/disattivazione “Sincronizza lo stile dei campi“. Se l’opzione è attivata, le modifiche apportate a questo campo si rifletteranno anche su tutti gli altri campi. Disattivala se desideri modificare le impostazioni solo per un determinato campo:

È possibile sincronizzare le seguenti modifiche per tutti i campi e garantire che l’intero modulo sia visivamente coerente:

• Colore: imposta i colori dei seguenti elementi:
  • Testo etichetta: il testo visualizzato sopra il campo del modulo.
  • Testo del campo: il testo segnaposto (opzionale) e il testo inserito in un campo.
  • Sfondo del campo: lo sfondo della sezione di inserimento di un campo del modulo.
  • Bordo: il bordo intorno al campo del modulo.
• Stili del campo di inserimento: imposta la dimensione del testo, l’altezza della riga e gli stili del bordo per il campo.
• Stili etichetta: imposta la dimensione del testo e l’altezza della riga per le etichette dei campi.

Per modificare i colori del modulo, segui questi passaggi:

1. Apri la Visualizzazione in modalità elenco e individua il blocco Modulo e i singoli campi al suo interno:

2. Dopo aver selezionato il blocco Modulo generale, apri le impostazioni del blocco nella barra laterale e fai clic sulla scheda Stili (l’icona del cerchio bianco e nero).
3. Tramite le impostazioni del colore è possibile controllare il colore del testo, dello sfondo e dei link del modulo:

4. Quindi, fai clic su un singolo campo del modulo e apri nuovamente le impostazioni del blocco.
5. Da qui è possibile controllare i colori dei seguenti elementi per ogni singolo campo del modulo:
   • Testo etichetta: il testo visualizzato sopra il campo del modulo.
   • Testo del campo: il testo segnaposto (opzionale) e il testo inserito in un campo.
   • Sfondo del campo: lo sfondo della sezione di inserimento di un campo del modulo.
   • Bordo: il bordo intorno al campo del modulo.
6. Attiva l’opzione “Sincronizza lo stile dei campi“ per applicare a tutti i campi le modifiche che hai apportato o disattivala per controllare ogni campo singolarmente.
7. Fai clic sul pulsante “Salva” nella parte superiore dello schermo.