Nel pannello Widget (1) scorri fino alla sezione Moduli (2). Trascina il Widget Modulo (3) sulla tua pagina.

Dai al tuo modulo un nome univoco (1) – E’ importante non avere due moduli con lo stesso nome perché ciò potrebbe darti problemi quando registri i dati degli utenti.

Email, link interno ed esterno non sono obbligatori e potrai impostarli dopo.

Per collegare una pagina dallo stesso sito, seleziona una pagina del menu Link Interno (3). Per linkare la pagina verso un sito esterno, digita l’URL completa (includendo http://www) nel campo Link Esterno (4). Per fare in modo che i dati arrivino ad un indirizzo email, digitalo nel campo Email (2)

Clicca sul pulsante Crea Modulo per continuare.

Trascina un widget dal pannello Moduli (Riquadro testo, Area testo, Voto, etc.) dentro il tuo Widget Modulo.

NOTA: Non puoi trascinare un Widget Modulo all’interno di un altro Widget Modulo.

Clicca e digita su (1) per cambiare le etichette
Clicca sul bottone impostazioni (2) per impostare la validazione del modulo e altre opzioni
Usa la maniglia (3) per spostare il widget
Clicca sulla X (4) per eliminare il widget

Cliccando sull impostazioni del modulo (guarda il passo precedente) e seleziona il pannello di Validazione. Scegli il tipo di validazione e imposta un messaggio d’errore.
Per validazione si intende che Cloud Site controllerà se il contenuto inserito è valido per quel campo. Esempio: se selezionate Indirizzo Email come validazione, Cloud Site controllerà se l’informazione inserita ha la forma tipica di un indirizzo email. Se il controllo dovesse essere negativo, verrà mostrato un messaggio d’errore da te impostato.

1. Imposta un titolo per il tuo modulo (soprattutto se vuoi inserire più moduli nel tuo sito web)
2. Imposta una descrizione del tuo modulo
3. Questa è la scritta che etichetterà il tasto per inviare i dati del modulo
4. Se vuoi che il Messaggio venga mostrato dopo che l’utente ha inviato i dati, non dovrai toccare l’opzione Pagina Interna. Se modificherai l’opzione pagina interna, il messaggio non apparirà.
5. Questa è la pagina risultante che l’utente vedrà dopo aver cliccato sul tasto per inviare i dati (opzionale)
6. Inserisci il tuo indirizzo email in questo campo se vuoi che tutti i dati ti vengano inviati via email.
7. Per scaricare tutti i dati inseriti nel form sottoforma di foglio di calcolo, clicca sul pannello Database e poi su Esporta.

Nelle impostazioni del modulo clicca su Database (1).

Il database registra tutti i dati che i tuoi utenti inseriscono nel modulo. Le colonne (2) corrispondono ai nomi dei campi del tuo modulo, mentre ogni riga (3) corrisponde ad un tentativo di inserimento da parte di un utente. Le celle vuote sono quelle che l’utente non ha riempito. Clicca su Esporta Dati (4) per salvare il database come foglio di calcolo.

Clicca sul widget e poi sull’icona a ingranaggio posta all’esterno del widget (1) e poi fai doppio click sull’icona impostazioni del campo (2).

Inserisci un titolo (1) per il menu e una descrizione (facoltativa).

Nella colonna di sinistra (2) inserisci i valori che vuoi vengano salvati nel database del modulo e nella colonna di destra (3) inserisci i valori che vuoi che l’utente veda. Clicca su Aggiungi nuovo valore alla lista (4) per aggiungere valori addizionali.

Infine, clicca OK (5).

Clicca sul pannello Stili (1) e seleziona l’elemento del modulo che vuoi modificare (2).

Se vuoi cambiare l’aspetto del tuo modulo, dovrai aggiungere del codice CSS:

.widget-formarea-button

{ background: url(“#”) darkviolet; /*Puoi l’URL (sostituendo #) per usare un’immagine come sfondo del bottone o mettere un colore*/ height: 25px; /*Questa è l’altezza del bottone*/ width: 100px; /*Questa è la larghezza del bottone*/ margin: 0px; border: 0px; text-align: center; /*L’etichetta del bottone verrà allineata al centro*/ color: white; /*Questo sarà il colore del testo del bottone*/ border-radius: 5px; /*Questo modifica il raggio dei bordi del bottone, li rende tondi*/ } .widget-formarea-button:hover /*Questo è lo stato del bottone quando il puntatore ci passa sopra*/ { background: url(“#”) black; /*Devi impostare qualcosa di differente dallo stato precedente per mostrare una differenza*/ height: 25px; width: 100px; margin: 0px; border: 0px; text-align: center; color: white; border-radius: 5px; }

Se possiedi già l’immagine da usare come pulsante, puoi caricarla nell’editor, prendere l’URL e sostituirla al simbolo # presente nel codice. Fai in modo che le dimensioni dell’immagine siano le stesse di quelle specificate su width e height.

Quando usi i colori, puoi inserire i nomi dei colori o usare un codice esadecimale.