Moduli

I moduli sono uno dei principali metodi attraverso i quali i visitatori del tuo sito web possono contattarti. Rendono la vita più semplice per i tuoi visitatori, allo stesso tempo nascondendo i tuoi indirizzi email da quei fastidiosi bot di raccolta. Creare moduli in Sitely è davvero semplice e richiede solo di aggiungere gli elementi del modulo alla tua pagina. Ecco gli elementi di modulo standard disponibili in Sitely.

Text Input

Checkbox

Button

Slider

Radio Button

File Attachment

Option Selection

L'elemento di modulo più comunemente usato è l'inserimento testo, o campo testo. Questo è un semplice riquadro che consente agli utenti di inserire informazioni, come nome, indirizzo, email o numero di telefono, ecc. Il riquadro può essere stilizzato proprio come qualsiasi altro elemento in Sitely attraverso il pannello di stile.

L'inserimento testo è dove imposti il contenuto iniziale che desideri venga visualizzato nel campo. Tipicamente, questo sarebbe un testo predefinito che verrà inviato come parte del modulo se gli utenti non sovrascrivono il contenuto.

Il segnaposto è il contenuto che potresti voler visualizzare nel campo per far sapere agli utenti quali informazioni sono attese. Anche se queste informazioni vengono visualizzate, non sono inviate come predefinite e devono essere sovrascritte da quanto inserito dell'utente.

La variabile modulo è semplicemente un nome che identifica questo particolare campo. Questo viene utilizzato quando i risultati del modulo vengono inviati a te. L'email che ricevi conterrà tutti i nomi delle variabili di modulo insieme al contenuto inserito dagli utenti in quei campi. Ad esempio, una variabile di modulo chiamata primo_nome sarebbe tipicamente utilizzata per il campo dove ci si aspetta che un utente inserisca il proprio nome. Quando i risultati del modulo arrivano nella tua casella di posta, conterranno una riga come primo_nome: Federico. Se non aggiungi una variabile di modulo, Sitely ne assegnerà una generica per te.

Una sola riga: questa casella di spunta costringe il testo inserito a essere solo su una riga, come un indirizzo email o un numero di telefono. Deselezionando questa opzione, il campo di inserimento può diventare multi-linea, come una casella per i messaggi.

Campo password: se selezioni questa opzione, l'inserimento sarà mascherato e sostituito da una serie di punti. Anche se l'utente vedrà punti nel campo, il contenuto effettivo verrà inviato come parte dei risultati del modulo. Questa opzione è tipicamente utilizzata per i moduli di login, piuttosto che per i moduli progettati per inviare informazioni via email.

Le prossime opzioni del pannello di stile sono le familiari opzioni di stile di carattere, dimensione, allineamento, ecc.

La sezione Aspetto ti offre alcune opzioni di stile aggiuntive specifiche per i campi di modulo. Quando un elemento del modulo viene selezionato da un utente, diventa una zona di attenzione, comunemente chiamato anello di messa a fuoco. Questo fa sapere all'utente che sta per inserire informazioni in un campo del modulo. Con questa opzione, puoi impostare un colore di sfondo e un colore segnaposto per il campo per renderlo più visibile agli utenti. Inoltre, la maggior parte dei browser evidenzierà un campo di inserimento attivo con un bordo.

Validazione: Qui puoi forzare l'inserimento solo di determinati tipi di informazioni nel campo. Puoi anche rendere il campo obbligatorio prima che il modulo possa essere inviato.

Infine, abbiamo la sezione di formattazione. Qui puoi forzare la maiuscolizzazione del contenuto del campo, far controllare l'ortografia del contenuto o consentire ai browser di completare automaticamente il contenuto dal computer dell'utente.

Casella di spunta

Questo è utilizzato quando desideri dare agli utenti una scelta di opzioni selezionabili, come "Spunta per ricevere la nostra newsletter", o "Inviami offerte speciali di tanto in tanto". Puoi aggiungere quante caselle di spunta necessiti, e gli utenti saranno liberi di selezionare tutte o alcune delle opzioni. Se desideri limitare le scelte degli utenti a un'unica opzione, utilizza il pulsante di opzione.

La casella di spunta campo presenta alcune opzioni aggiuntive nel pannello di stile. Puoi scegliere uno stato predefinito acceso o spento, se è abilitato o meno, e se è un campo obbligatorio, come un accordo ai termini e condizioni. L'aspetto della casella di spunta può essere personalizzato selezionando l'opzione Personalizzata, oppure si può lasciare l'aspetto predefinito del browser dell'utente. Infine, puoi selezionare la dimensione della casella di spunta.

Pulsante di opzione

Utilizzerai questo tipo di campo quando desideri limitare la scelta dell'utente a un'unica opzione tra quelle presentate. Ad esempio, potresti utilizzare un pulsante opzione per consentire agli utenti di selezionare un colore o una taglia per un prodotto ordinato. Per fare ciò, aggiungeresti un certo numero di pulsanti opzione al tuo modulo - uno per ciascuna scelta. Dovresti quindi dare a ciascun pulsante un nome di variabile identico, come "colore". Questo raggrupperà i pulsante opzione in modo che solo una delle scelte possa essere selezionata. Il pannello di stile ti darà anche l'opzione di impostare un predefinito che verrà automaticamente selezionato se gli utenti non scelgono una delle opzioni. Ecco un esempio di selettore di scelta di colore con il verde impostato come predefinito.

Selezione Opzioni

Questo è un altro tipo di selettore a scelta multipla per gli utenti. In questo caso, le scelte vengono presentate come un elenco a discesa di opzioni da cui gli utenti possono selezionare. Quando l'elemento di selezione delle opzioni viene aggiunto alla pagina, vedrai alcune opzioni aggiuntive nel pannello di stile. La prima sezione ti consente di creare la tua lista di opzioni: basta fare clic sul pulsante Aggiungi per aggiungere più scelte. Modifichi l'etichetta di ciascuna opzione semplicemente facendo clic sul suo nome nell'elenco. Puoi, facoltativamente, aggiungere un valore per ciascuna opzione. Questo è un valore che verrà inviato come parte dell'invio del modulo. Se non aggiungi un valore, solo l'etichetta dell'opzione viene inviata come parte del risultato del modulo.

C'è anche un pulsante che ti consente di importare un elenco di opzioni. Questo è tipicamente utilizzato dove potresti volere qualcosa come un selettore di Paesi come parte di un invio di indirizzo su un modulo. Chiaramente, con oltre 180 paesi nel mondo, creare l'elenco da zero sarebbe dispendioso in termini di tempo. Tuttavia, puoi scaricare un elenco di paesi in formato testo semplice da molti siti web. Quegli elenchi possono essere importati direttamente in Sitely utilizzando la funzione Importa.

I valori sono impostati nel pannello di stile impostando il valore minimo, il valore massimo, il passo e il valore iniziale del cursore. Diamo anche al cursore un nome di variabile di modulo - in questo esempio utilizziamo la variabile quantità. Quando il modulo viene inviato, l'email mostrerà il nome della variabile, seguito dal valore selezionato dall'utente. Avrà un aspetto simile a quantità: 2.

Per mostrare agli utenti quale quantità è stata selezionata, aggiungeremmo anche un riquadro di testo a destra del cursore per mostrare la quantità selezionata. Questo è ottenuto utilizzando un Campo Intelligente nel riquadro di testo - vedrai l'opzione nel pannello di stile quando il tuo riquadro di testo è selezionato nell'area di lavoro - appare così.

Elemento Cursore

Questo è un semplice cursore che consente agli utenti di selezionare un valore trascinando un cursore. Ha molti usi, ma come esempio, potremmo voler utilizzare il cursore come un modo per ordinare una quantità specifica di un prodotto. Nel nostro esempio qui sotto, il cursore è stato impostato per selezionare una quantità tra 1 e 10 con una quantità predefinita di 2.

Quando inserisci un campo intelligente, ti verrà presentato un pannello di opzioni. In questo caso, l'opzione che vogliamo è Calcolatore. Questo posizionerà un campo intelligente di calcolo nel riquadro di testo - appare così.

Elemento Allegato File

Questo è un semplice elemento di caricamento file dove gli utenti possono cercare un file sul loro computer e allegarlo al modulo.

File

Select…

L'elemento stesso è un gruppo di due elementi, il campo file e il pulsante. Questi possono essere selezionati e stilizzati individualmente. Quando il gruppo è selezionato, hai il pieno controllo su cosa possono caricare gli utenti con i risultati del modulo. Puoi specificare il tipo di file consentito, così come il limite di dimensioni del file.

Fai clic sul campo intelligente calcolatore per impostare il suo valore. Per aiutarti, Sitely esamina la tua pagina e trova tutte le variabili disponibili che puoi utilizzare nel tuo campo calcolato. In questo caso, Sitely ha trovato la nostra variabile quantità associata al cursore. Questo è il valore che dobbiamo visualizzare accanto al cursore, quindi questa è l'opzione scelta. Ora, man mano che il cursore viene spostato, il valore appropriato viene visualizzato all'utente.

Nota: Abbiamo una sezione intera nella documentazione utente per i campi intelligenti e il loro utilizzo. Ci siamo solo deviati sull'argomento qui per mostrare la rilevanza degli elementi intelligenti nel contesto di questo particolare elemento di modulo.

Elemento Pulsante

Questo è l'elemento che controlla l'invio del tuo modulo. Anche se abbiamo un'intera sezione nella documentazione riguardo ai link e alle azioni al clic, affronteremo rapidamente le opzioni disponibili specificamente per l'invio dei dettagli del modulo.

Il metodo più comunemente utilizzato per inviare un modulo è l'opzione Invia il modulo di contatto via email. Questa opzione raccoglie tutti i dati del modulo dalla tua pagina e li invia al tuo server per una successiva consegna a un indirizzo email designato. Tutta l'azione è controllata tramite il pannello di stile quando selezioni questo metodo di invio.

Opzioni di Invio del Modulo

La prima cosa è dare al tuo pulsante un'etichetta. Questo sarà solitamente la parola Invia, ma può essere qualsiasi cosa appropriata per il tuo modulo.

L'azione al clic sarà Invia il modulo di contatto via email. L'intestazione dell'email può essere qualsiasi cosa che ti aiuti a identificare l'email quando arriva nella tua casella di posta. L'indirizzo email da cui inviare dovrebbe essere un indirizzo email sul tuo server. Nel nostro esempio, è un indirizzo email noreply, ma può essere un indirizzo email reale che usi ogni giorno se preferisci. È abbastanza importante aggiungere un indirizzo email specifico del dominio perché alcune aziende di hosting web potrebbero non elaborare email che sembrano provenire da un altro server - come gmail.

L'indirizzo email a cui desideri ricevere le tue risposte dovrebbe idealmente essere un indirizzo email associato al tuo dominio per evitare problemi di consegna causati da filtri antispam o politiche del tuo provider di hosting. L'oggetto sarà le informazioni che desideri appaiano nella linea dell'oggetto delle risposte che ricevi.

Successivamente, hai due opzioni. La prima, Email tramite server web, l'altra è Usa server SMTP personalizzato. Nella maggior parte dei casi, la prima opzione funzionerà perfettamente. Questo lascia alla funzione sendmail del tuo fornitore di hosting il compito di elaborare l'email e inoltrarla a te. Tuttavia, ci sono un numero crescente di fornitore di hosting che preferiscono che tu faccia elaborare i tuoi moduli tramite un'email correttamente configurata che possiedi e controlli. Fondamentalmente, questo è come inviare un'email tramite il tuo normale account email. Se il tuo fornitore di hosting insiste per l'utilizzo di questa opzione, puoi aggiungere i dettagli di accesso all'email nel pannello di stile dopo aver selezionato l'opzione SMTP.

Elementi del Modulo Raccolti
Questa sezione del pannello di stile elencherà tutti gli elementi di modulo che Sitely trova sulla tua pagina, e ti darà l'opzione di inviarli come parte di questo pulsante di invio, oppure, magari lasciare che alcuni di essi vengano inviati da un altro pulsante. Qualunque sia la tua scelta, dovrai semplicemente controllare le caselle contro tutti gli elementi di modulo che desideri inviare. Questa è una funzione davvero utile di Sitely poiché consente una grande flessibilità nel modo in cui costruisci le pagine per la raccolta di informazioni.

Nella maggior parte delle applicazioni di sviluppo web, i moduli vengono costruiti come elementi separati in cui devono essere contenuti tutti i campi del modulo. Questo dà origine allo stile normale della maggior parte dei moduli web come un riquadro contenente campi e un pulsante di invio. Anche se questo è come la maggior parte delle persone progetta i moduli, ci sono scenari d'uso in cui questo potrebbe non essere la soluzione ideale. Ad esempio, un educatore potrebbe impostare esami online o corsi per studenti. In questa situazione, l'educatore potrebbe voler presentare il materiale del corso in un modo simile al coursework stampato. Potrebbe iniziare con una panoramica dell'argomento, alcuni esempi lavorati, seguiti da alcuni esercizi che lo studente deve completare. In questo scenario, lo studente lavorerebbe attraverso la pagina online, rispondendo a domande e completando gli esercizi man mano che progredisce. Quando raggiunge la fine della pagina, può aggiungere il proprio nome e altri dettagli e inviare il proprio lavoro con un semplice pulsante.

Poiché Sitely esamina l'intera pagina cercando tutti gli elementi di modulo che gli studenti possono completare nel loro percorso, tutti possono essere raccolti e inviati come email di risultati all'educatore. Questo approccio familiare al materiale didattico è spesso difficile da ottenere in altri costruttori web senza avere pagine appositamente codificate, ma in Sitely, è un gioco da ragazzi.

Pagina di Ringraziamento

Questo è l'ultimo pezzo di informazioni di cui Sitely ha bisogno per inviare con successo il tuo modulo. Il tuo modulo non può essere inviato a meno che tu non abbia una pagina di ringraziamento. Questa sarà la pagina a cui gli utenti verranno indirizzati dopo aver inviato un modulo. Non solo rassicura gli utenti che le loro informazioni sono state inviate, ma ti dà anche l'opportunità di fornire link aggiuntivi ad altre pagine di rilevanza nel tuo sito web dopo l'invio.

Invio di Moduli Avanzato

Ci sono alcune situazioni in cui potresti voler utilizzare un processore di moduli di terze parti, o magari utilizzare uno script di modulo personalizzato sul tuo server. Per queste situazioni, puoi utilizzare l'opzione di Invio di Moduli Avanzato. Questo ti consente di inserire l'URL del servizio di elaborazione dei moduli o dello script e impostare un metodo di invio (Get o Post). Queste opzioni ti saranno fornite dal fornitore del servizio o dallo sviluppatore dello script. Basta inserire le informazioni in questa sezione e scegliere gli elementi di modulo che desideri inviare.

Gestione delle pagine

Mappe