Forms

I moduli offrono ai visitatori del sito web la possibilità di mettersi in contatto con te. In questo articolo ti mostreremo come utilizzarli per inserire moduli sul tuo sito web e come renderli ottimali.

Sommario

• Conoscenza di base
• Aggiungi un modulo
• Impostazioni del modulo
• Elementi della forma
• Moduli di prova
• Webhook

Conoscenza di base

Local Site offre una varietà di potenti preimpostazioni. Con le preimpostazioni dei moduli, puoi aggiungere un modulo di contatto funzionante in pochi secondi. Ulteriori elementi del modulo ti consentono di adattare le preimpostazioni in base alle esigenze individuali dei tuoi clienti. Anche gli elementi “Captcha” fanno parte di ogni modulo preimpostato e garantiscono che il modulo venga compilato da un essere umano e non da un robot.

Per impostazione predefinita, le voci del modulo vengono inviate all’indirizzo e-mail predefinito del cliente definito nei dati di contatto del sito web. È possibile specificare l’indirizzo del destinatario nelle impostazioni del modulo nel campo “Destinatario”. Puoi anche aggiungere più destinatari utilizzando questo formato: email@abc.com; un altro indirizzo e-mail@abc.com; terzo@mia-inbox.io;

Suggerimento: conosci già il portale clienti? Qui è dove puoi organizzare tutte le informazioni sul tuo cliente, come dati di contatto, indirizzo e indirizzo email di accesso. Se non hai inserito un indirizzo email nelle impostazioni del modulo, Local Site invierà automaticamente le voci del modulo all’indirizzo email di accesso del cliente. Non appena viene inviato un modulo di contatto, tutte le informazioni inserite vengono rese disponibili anche come voce del modulo nel portale clienti.

Aggiungi un modulo

Per aggiungere un modulo al tuo sito web, fai clic sulla categoria “Moduli” nella barra laterale di sinistra. Si aprirà il pannello dei contenuti che mostra tutti i moduli predefiniti (contrassegnati in arancione) che sono moduli di contatto completamente funzionali costituiti da diversi elementi del modulo. Sotto le preimpostazioni puoi vedere tutti i singoli elementi del modulo (in blu). Puoi aggiungere più elementi del modulo alle preimpostazioni del modulo per personalizzarli in base alle tue esigenze.

Dopo aver trascinato il preset sul sito web, sarà disponibile un modulo di contatto perfettamente funzionante. Come puoi vedere nel breadcrumb un form preimpostato è composto da tre diversi livelli:

• Il preimpostato
• Il contenitore del modulo
• Gli elementi del modulo

Come sempre, puoi utilizzare il pannello delle impostazioni sul lato sinistro per adattare il modulo alle tue esigenze.

Impostazioni del modulo

Con le impostazioni del modulo, definisci il comportamento del modulo.

Utilizza il campo “Titolo” per inserire un nome significativo. Il vantaggio è che le voci dei moduli nel portale clienti vengono ordinate in base al nome del modulo di contatto. In questo modo tu e il tuo cliente saprete sempre dove hanno inserito i visitatori del sito web.

I campi “Reindirizzamento” e “Webhook” svolgono un ruolo importante dopo l’invio di un modulo: nel campo “Reindirizzamento” inserisci l’URL o lo slug della pagina secondaria a cui desideri inoltrare i visitatori del sito web dopo aver inviato con successo le loro informazioni. Si tratta solitamente di pagine di ringraziamento o simili, che vengono utilizzate ad esempio con l’aiuto di “pixel” per tracciare in modo più accurato il comportamento dei visitatori del sito web. Puoi leggere ulteriori informazioni sui pixel nell’articolo sull’inserimento di codice HTML, CSS e JavaScript personalizzato . Inoltre, l’input può essere inoltrato a strumenti esterni come i sistemi CRM tramite un URL webhook non appena un visitatore del sito web invia il modulo. Per ulteriori informazioni consultare la sezione sui webhook.

Nelle impostazioni del modulo definisci anche l’indirizzo email del destinatario, l’indirizzo email del mittente e l’oggetto. Ciò può essere utile, ad esempio, per i filtri automatici della posta elettronica e per ordinare le informazioni del modulo in cartelle specifiche.

Elementi della forma

Come accennato in precedenza, accanto ai moduli predefiniti troverai anche gli elementi del modulo nella categoria “Moduli” nella barra laterale di sinistra. Diamo un’occhiata agli elementi del modulo e alle loro funzioni in modo più dettagliato.

Tutti gli elementi del modulo possono essere contrassegnati come “Obbligatori”. Se un elemento è “Obbligatorio”, il visitatore del sito viene informato che questo campo deve essere compilato se è ancora vuoto quando si tenta di inviare il modulo. Alcuni elementi offrono anche dei “segnaposto”. Questi riempiono il campo di testo con contenuto di esempio finché non viene sovrascritto.

1. Campo di immissione testo

Gli elementi di testo sono utili quando è richiesto l’inserimento di testo semplice. Può essere utilizzato per nomi, titoli, righe di indirizzi, ecc. È possibile assegnare etichette visualizzate sopra o accanto al campo di immissione. Sono possibili anche dei segnaposto.

2. Campo numerico

Un campo numerico è utile quando si prevede che l’input contenga numeri ma non testo. In questo campo è possibile specificare valori minimi e massimi, utili ad esempio per gli ordini.

3. Campo e-mail

Con un campo email, puoi assicurarti che il visitatore del sito web inserisca un indirizzo email formattato correttamente. Il browser rileva voci errate (ad es. formato e-mail non comune, simbolo “@” mancante, ecc.) e avvisa il visitatore del sito web durante l’invio in modo che l’indirizzo e-mail possa essere inserito correttamente.

4. Campo del numero di telefono

Funziona allo stesso modo dei campi di input menzionati sopra. Usalo solo per i numeri di telefono.

5. Campo a input multiplo dell’area di testo

Le aree di testo offrono più spazio per scrivere interi paragrafi. Questo è l’ideale per messaggi o descrizioni dettagliate. Il numero di righe è utile per determinare l’altezza del campo di testo. Questo può essere personalizzato dal visitatore del sito web utilizzando un browser moderno.

6. Caselle di controllo

Le caselle di controllo sono ottime se desideri avere più scelte all’interno del modulo. Aggiungi più di un’opzione se lo desideri. I nomi delle opzioni possono essere modificati in qualsiasi momento. Per ciascuna opzione è possibile specificare che è “Obbligatoria”. Se questo campo è abilitato, il sistema verifica se il visitatore del sito web ha cliccato su questo campo durante l’invio del modulo. In caso contrario, verranno informati di conseguenza.

7. Pulsanti di opzione

I pulsanti di opzione funzionano in modo simile alle caselle di controllo. Tuttavia, è possibile selezionare solo un’opzione alla volta. Dopo aver effettuato una selezione, rimane selezionata esattamente un’opzione. È possibile aggiungere ulteriori opzioni premendo il tasto [Invio] o facendo clic sull’icona del segno di spunta sul lato destro.

8. Elenchi a discesa

Gli elenchi di selezione o gli elenchi a discesa consentono di selezionare un’opzione specifica da un elenco. Se si fa clic sul campo “Multiplo”, è possibile selezionare più opzioni contemporaneamente, in modo simile alle caselle di controllo. Se non si fa clic sul campo, gli elenchi di selezione funzionano in modo simile ai pulsanti di opzione: è possibile selezionare solo un’opzione. È inoltre possibile specificare se è necessaria una selezione. Anche il testo “Scegli” è personalizzabile.

Gli elenchi a discesa possono aiutare a mantenere il modulo semplice e ordinato se sono presenti molte opzioni.

9. Campi data e ora

I campi data e ora sono utili per impostare una possibile data e solitamente devono essere creati con Javascript. In Local Site è sufficiente aggiungere questo elemento e personalizzarlo secondo i tuoi desideri. Local Site offre molte impostazioni a questo scopo.

Nella sezione “Generale” puoi assegnare come di consueto un’etichetta e un testo segnaposto e specificare se è richiesta la selezione della data.

Nella sezione “Data e ora” puoi specificare se devono essere selezionabili la data, l’ora o entrambe. Selezionare il formato di data e ora desiderato e, se necessario, limitare l’ora del giorno con i campi dell’ora minima e massima. Ad esempio, puoi effettuare prenotazioni durante gli orari di apertura di un ristorante. È anche possibile modificare gli intervalli di tempo tra i quali il visitatore del sito web può scegliere. Ad esempio, l’impostazione predefinita “60 minuti” consente solo la selezione di 12:00, 13:00, 14:00, ecc., mentre “15 minuti” consente la selezione di 12:00, 12:15, 12:30, ecc. I numeri delle settimane possono essere visualizzati in dissolvenza per una migliore chiarezza. “Incorpora” visualizza l’intero calendario invece di un campo di input. Se la vista del calendario non è incorporata, il calendario viene visualizzato come popup quando si fa clic.

Le immagini mostrano la differenza tra un elemento “non incorporato” (prima immagine) ed un elemento “incorporato” (seconda immagine).

Nella sezione “Giorni della settimana” vengono specificati i giorni della settimana selezionabili.

Se desideri specificare la prima e l’ultima data possibile, inseriscila nelle sezioni “Data minima” e “Data massima”. “Senza” qui significa che non ci sono restrizioni. “Fix” definisce un determinato giorno. “Dinamico” consente di impostare una data futura in base al giorno corrente. Pertanto, con l’impostazione predefinita “5 giorni da “oggi” per la “data minima”, ad esempio, i visitatori del sito web possono selezionare solo date che si trovano almeno 5 giorni nel futuro. Ciò dà a te o al tuo cliente abbastanza tempo per rispondere a una richiesta. Se vuoi pianificare solo un massimo di 2 mesi per il futuro, procedi come segue:

1. Inserisci il numero “2” accanto a “Data massima”
2. Clicca su “Giorni da oggi”
3. Scegli “Mesi da oggi”

10. Pulsante Modulo

È necessario almeno un pulsante affinché i visitatori del sito web possano inviare un modulo. L’elemento pulsante del modulo può avere un totale di tre funzioni:

1. Reimpostazione del modulo ed eliminazione di tutti i dati inseriti
2. Invio del modulo
3. Nessuna azione (adatta, ad esempio, per eseguire il proprio javascript)

Inoltre, puoi specificare design specifici indipendentemente dagli altri pulsanti.

11. Elemento di caricamento file

Utilizza questo elemento se desideri che i visitatori del sito web siano in grado di caricare i file da soli. Nel campo “Formati file”, inserisci tutti i formati o tipi di file che possono essere caricati. Ad esempio, puoi inserire “.jpg, .png” per consentire file JPG e PNG. Puoi anche specificare “images/*” come tipo di file per consentire tutti i tipi di file immagine contemporaneamente.

Questo campo può anche essere contrassegnato come “Obbligatorio”.

Quando si invia il modulo, questo file verrà allegato all’indirizzo e-mail del destinatario. Sulla Piattaforma non potrai vedere tali file. Pertanto il limite di caricamento delle dimensioni del file si basa sulla dimensione massima del file consentita per la ricezione dal fornitore del servizio di posta elettronica.

12. Captcha

Un captcha garantisce che il modulo di contatto non venga utilizzato in modo improprio per e-mail di spam. Se disattivi l’opzione “Invia email” nelle impostazioni del modulo, puoi anche rimuovere il campo captcha dal modulo. In questo caso le voci del modulo verranno elencate nel portale clienti. Se lasci attivata l’opzione “Invia mail”, il captcha è obbligatorio a meno che non venga utilizzata una delle due alternative seguenti:

1. Utilizza un indirizzo e-mail gestito da Sitejet e creato con un dominio registrato tramite Sitejet come destinatario delle voci del modulo
2. Utilizza moduli di terze parti inserendo il codice di incorporamento di terze parti nel progetto del tuo sito web, ad esempio con un elemento HTML

Senza queste alternative non è possibile salvare il progetto senza un elemento captcha.

È possibile assegnare al captcha anche etichette e/o segnaposto. Inoltre, hai la possibilità di impostare i colori del testo e dello sfondo per l’immagine captcha. Uno sfondo trasparente può essere utile se nel contenitore del modulo viene utilizzato uno sfondo immagine o una trama di sfondo. Tieni presente che la leggibilità del captcha viene preservata.

13. Elementi normali

All’interno del contenitore del modulo possono essere utilizzati non solo gli elementi del modulo ma anche gli elementi normali. È anche possibile utilizzare interi preset. Ad esempio, combina colonna, fisarmonica o altre preimpostazioni con il contenitore del modulo per creare il design del modulo desiderato.

Moduli di prova

Puoi già verificare se il modulo funziona sul sito web in anteprima. Il sito web non deve essere ancora pubblicato. Utilizza semplicemente il modulo come visitatore del sito web e verifica se tu o il tuo cliente avete ricevuto la notifica via email o se le voci del modulo vengono visualizzate nel portale clienti, nel caso in cui non hai abilitato la notifica via email. Di solito, la notifica dovrebbe arrivare entro 5-10 minuti.

Se provi il modulo più volte di seguito, il tuo IP potrebbe essere bloccato automaticamente per 24 ore e ti potrebbe essere impedito di inviare ulteriori voci del modulo. Con questo meccanismo proteggiamo te e i tuoi clienti dallo spam. Per utilizzare nuovamente il modulo prima della scadenza delle 24 ore, potete semplicemente cancellare le vostre ultime registrazioni nel portale clienti alla voce “Voci modulo” per il rispettivo modulo che avete testato. Successivamente sarà possibile inviare nuovamente le voci del modulo sul sito web.

Webhook

Un webhook spinge le informazioni da un sito web a un altro server. In Local Site, i webhook possono essere utilizzati per inviare voci di moduli a un altro server. Ogni volta che un visitatore del sito web invia il modulo, i dati verranno inviati all’URL specificato.

Per cosa possono essere utilizzati i webhook

Per impostazione predefinita, ogni voce del modulo viene inviata al cliente tramite e-mail e resa disponibile sul portale clienti. È frequente che i dati dei moduli vengano elaborati anche tramite altri servizi.

I possibili casi d’uso sono:

• • Creare un lead in un CRM (ad esempio, Salesforce, Pipedrive)
  • Prenotare uno spazio in un calendario (ad esempio Google Calendar)
  • Trasferire i dati su una piattaforma di messaggistica istantanea (es. Slack)
  • Altro ancora

Configura un webhook

Se non lo hai già fatto, aggiungi un modulo sul sito web. Il funzionamento è già stato spiegato nella sezione “Aggiungi modulo” ,quindi passa alle impostazioni del modulo facendo doppio clic su “Modulo” nel breadcrumb.

In alternativa è possibile fare clic su “Mostra impostazioni modulo” nell’elemento del modulo attualmente selezionato (qui utilizzando come esempio il campo di immissione).

Nella finestra delle impostazioni, ora vedrai il campo “Webhook” nella sezione “Messaggi”.

A seconda del servizio che vuoi associare al tuo modulo, l’URL da inserire qui varierà. Puoi scoprire quale URL inserire nella documentazione del servizio selezionato. Non appena avete inserito l’URL confermatelo con il tasto [Invio] e poi salvate il progetto.

Richiedi carico utile

Ogni volta che il modulo viene compilato con informazioni e inviato, i seguenti dati verranno inviati all’URL che hai inserito.