Attraverso i comandi di questa sezione si definiscono alcune impostazioni grafiche relative all'aspetto del Modulo di Contatto che si sta creando.
Innanzi tutto occorre selezionare l'Elemento del Modulo su cui si intende lavorare: è possibile farlo attraverso il menu a discesa dell'omonima opzione oppure cliccando direttamente sull'elemento nella finestra di Anteprima disponibile.
Gli elementi su cui è possibile agire sono:
|
Etichette di testo: è il testo di descrizione del Campo e serve per specificare l'informazione richiesta o immettere il testo della domanda che si vuole porre. |
|
Campi: è il riquadro all'interno del quale il Visitatore potrà digitare l'informazione richiesta. |
|
Pulsante di 'Invio' : sono i pulsanti inseriti automaticamente al termine del Modulo di Contatto. Servono, rispettivamente, per inviare tutti i dati immessi nei Campi e per svuotare i Campi dei valori eventualmente presenti. |
|
Descrizione e Validazione dei campi: si tratta dei messaggi visualizzati per dare informazioni aggiuntive su come compilare i Campi, per invitare a correggere un dato immesso o per esortare a completare un Campo Obbligatorio lasciato vuoto. |
In base all'elemento del Modulo selezionato è possibile agire su diverse opzioni presentate nella sezione Stile.
Per l'elemento Etichette di testo le opzioni disponibili sono:
| ▪ | Tipo di Font: specifica il Tipo di carattere, le dimensioni e lo Stile del testo. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. |
| ▪ | Colore: specifica il colore che deve essere utilizzato per il testo. |
| ▪ | Disposizione: definisce dove deve essere posizionata l'Etichetta rispetto al Campo. È possibile scegliere fra tre opzioni: Mostra Etichette sopra ai Campi, Mostra Etichette dentro i Campi e Mostra Etichette alla sinistra dei Campi. Se si sceglie di posizionare le Etichette a sinistra dei Campi è possibile definire la Larghezza (%), ovvero la percentuale dello spazio della riga che dovrà essere occupato dall'Etichetta stessa, e Allineamento del testo dell'Etichetta. |
Per l'elemento Campi, invece, le opzioni disponibili sono:
| ▪ | Bordo: specifica lo spessore dei bordi e il fattore di smusso degli angoli, anche singolarmente. |
| ▪ | Margine: imposta i valori in pixel dei margini interni applicati al testo dei campi della form. |
| ▪ | Ombra interna: applica un'ombra all'interno dei campi in modo da dare un senso di profondità. |
| ▪ | Colori: definito lo stato su cui si vuole lavorare (Campo, Campo su selezione, Campo su errore), imposta i colori da utilizzare per Sfondo, Testo e Bordo. |
Per l'elemento Pulsante di 'Invio' le opzioni disponibili sono:
| ▪ | Contenuto: specifica il testo che deve essere visualizzato nel Pulsante di Invio, al posto della dicitura prevista di default. |
| ▪ | Tipo di Font: specifica il Tipo di carattere, le dimensioni e lo Stile del testo. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. |
| ▪ | Colore Testo / Colore Sfondo: specificano i colori che devono essere utilizzati per il testo e per lo sfondo del testo dei pulsanti. |
| ▪ | Bordo: specifica il colore e lo spessore dei bordi oltre che il fattore di smusso degli angoli del pulsanti. |
| ▪ | Margine: imposta i valori in pixel dei margini interni applicati al testo dei pulsanti. |
| ▪ | Immagine di sfondo: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. |
| ▪ | Allineamento: specifica l'allineamento dei pulsanti inseriti, scegliendo tra Sinistra, Centro e Destra. |
Infine, per l'elemento Descrizione e Validazione dei campi le opzioni disponibili sono:
| ▪ | File icona per Descrizione Campo: importa un file grafico (formato .JPG, .GIF e .PNG) da utilizzare come icona da affiancare al Campo per indicare la disponibilità di maggiori informazioni. |
| ▪ | Visualizza la Descrizione su selezione del Campo: attivando questa opzione il messaggio con le informazioni aggiuntive viene automaticamente visualizzato non appena si clicca all'interno del Campo. |
| ▪ | In presenza di errori durante la validazione dei dati: definisce come deve essere visualizzato il messaggio previsto nel caso in cui un Campo non sia stato compilato correttamente o, se impostato come Obbligatorio, sia stato lasciato vuoto. È possibile scegliere fra una delle seguenti opzioni: Mostra finestra di dialogo del Browser, Mostra finestra di popup interna o Mostra Tip a fianco del Campo non valido. |
Best practice:
