Come si crea e pubblica un form
Tempo di lettura: 8 minuti
Difficoltà: Media
Requisiti: Jquery caricato dal tuo sito versione 3.2 o superiori.
Lead plus non è un semplice generatore di form, ti consente infatti un'ampia personalizzazione sia del form che dei suoi comportamenti. Potrai decidere quale tipologia di form utilizzare, i comportamenti di visualizzazione, quante volte mostrarlo e molto altro.
Non servono competenze di programmazione, ma sarà tutto gestibile in tempo reale dalla tua console, basta solo incollare poche linee di codice appena prima del tag </body> sulle pagine del tuo sito web.
In questa guida:
Per creare un Form/Popup vai su "CREA CAMPAGNA" presente nel menu verticale di sinistra, quindi scegli come tipologia campagna "Form e Popup".
In alternativa entra nella sezione "Cresci" > "Form e Popup" del menu verticale di sinistra e clicca su "Nuovo Form".
Inserisci ora il nome del form, seleziona la lista da associare e inserisci il dominio del sito web nel quale vuoi venga mostrato (ad esempio www.ilmiosito.it, non è necessario inserire https://).
Il dominio di un sito può essere privo di "www". Pertanto inserisci ciò che segue https://
È molto importante scegliere un nome che identifichi in maniera univoca il form per poterlo poi riconoscere subito in futuro.
Se devi cambiare la lista associata al form, ti basta duplicare il form e scegliere la nuova lista da associare.
Procediamo con il scegliere la tipologia di form da utilizzare.
|
Embedded | Questo tipo di form potrà essere inserito sopra, sotto o in un punto specifico della tua pagina web. |
|
Top/ Bar | Scegli se mostrare il form sulla parte alta o bassa della tua pagina web. |
|
Pop up | Finestra che si può aprire sullo schermo durante la navigazione di una pagina. |
|
Scroll box | In basso a sinistra o in basso a destra. Il modo migliore per essere coinvolgenti ma discreti. |
La scelta della tipologia del form va affrontata molto attentamente in base agli obiettivi che ti sei posto e al tipo di pagina in cui vuoi inserire la campagna "form e popup". Se vorrai modificare la tipologia in seguito, dovrai cancellare il form e dovrai ricrearlo.
La personalizzazione del Form avviene all'interno dell'editor di Lead Plus attraverso 4 Step.
Step 1 - Pagine e messaggi
In pagine e messaggi tramite la tab "pagine form" è possibile modificare il Titolo del nostro form, la sua descrizione e la CTA di iscrizione.
Dalla tab "Pagine Thankyou" è invece possibile decidere il titolo e la descrizione da mostrare all'utente quando si iscrive correttamente nella nostra lista.
Per passare al secondo step fai click su “Campi” nella barra di avanzamento azzurra in alto.
Step 2 - Campi
Nel secondo step possiamo modificare o aggiungere quelli che saranno i CAMPI che comporranno il form.
- - Aggiungi i campi che vuoi far compilare all’utente o inserisci campi accettazione (2a);
- - Per ogni campo del form puoi decidere il titolo (2b) e se mostrarlo o nasconderlo (2c);
- - Inserisci dei placeholder come esempio(2d), oppure inserisci dei valori di default (2e);
- - Decidi se rendere un campo obbligatorio oppure nasconderlo (2f);
- - Imposta la larghezza dei campi con “Larghezza colonna” (2g);
- - Puoi anche modificare testo e disposizione del campo d’ accettazione (2h).
Utilizzare i placeholder può essere utile per fornire un esempio all'utente di come vuoi che venga compilato il dato richiesto. Nel caso del campo telefono cellulare principale per esempio puoi utilizzare il placeholder per inserire un esempio di formattazione corretta del numero di telefono (+393934331111)
Per passare al secondo step fai click su "Tema e Layout" nella barra di avanzamento azzurra in alto
Ricorda sempre: se nella tua lista sono presenti campi "obbligatori", questi dovranno essere necessariamente presenti anche nel form!
Step 3 - Tema e Layout
Personalizziamo ora in maniera unica il layout del contenitore e del form.
Sono molte le possibilità di personalizzazione che l’editor Lead Plus ti offre, spendi il giusto tempo per trovare il layout migliore ed efficace per la tua campagna.
Contenitore:
- - puoi modificare i colori dei testi, le dimensioni del form e l’immagine di sfondo;
- - puoi intervenire anche sui bordi del form inserendo un ombreggiatura o smussando gli angoli;
- - puoi aggiungere un’animazione di apertura del form.
Area:
- - puoi modificare il colore di sfondo, del testo o di background dei campi del form;
- - puoi insere un’immagine di sfondo;
- - puoi cambiare lo stile dei campi;
- - puoi modifica i bottoni inserendo degli effetti di mouse-over, colori, spessore, larghezza, la smussatura degli angoli e l’allineamento del bottone.
Css:
In questa sezione puoi inserire delle regole CSS custom.
Step 4 - Regole e comportamenti
Una volta definita la struttura e il layout della nostra campagna ci rimane da impostare le REGOLE E COMPORTAMENTI del nostro form per ottimizzare al meglio l’esperienza dell’utente sul sito web e per ottimizzare la nostra strategia.
Visualizzazione:
Puoi definire su quali dispositivi (Device) mostrare il tuo form, specificare una o più pagine nelle quali visualizzare il tuo form (URL Sito Web) e specificare quando e dopo quanto tempo mostrare il tuo form. Potrai inoltre decidere quante volte vuoi che un utente visualizzi il form.
Nota Bene!
Ricorda di compilare correttamente la voce "URL Sito Web" aggiungendo il dominio del tuo sito ed eventualmente ricorda di inserire come sotto regole le pagine web dove vorrai vedere comparire il tuo form. Il formato della url deve essere ad esempio "www.miosito.it" senza https. Per dominio intendiamo tutto quello che sta dopo https://.
Messaggio finale:
Il messaggio finale è molto importate perché consente di dare un feedback positivo dell'avvenuta registrazione al tuo utente e contemporaneamente di fornire preziose informazioni come per esempio l'invio dell'email di conferma double opt-in.
Potrai scegliere se ridirigere l'utente a una specifica url del tuo sito web, oppure alla thank you page da te creata tramite l'editor lead plus.
Hook:
Se hai la necessita di inviare i dati del form ad una o più pagine da te create acquisirli ed elaborarli in una seconda fase, inserisci qui gli url che desideri
Iscrizione:
Oltre alle regole e ai comportamenti post iscrizione che trovi tra le "Impostazioni" della lista puoi decidere in questa sezione se inviare una notifica a uno o più indirizzi email quando un utente compila il form.
Integrazione:
Puoi integrare la tua campagna Lead Plus con Google Analytics
Anti-spam:
Proteggere i tuoi form da bot è molto importante per non "sporcare" le tue liste, per questo motivo la "protezione standard integrata" sarà sempre attiva e potrai decidere se attivare il "Google recaptcha".
Terminato di impostare il layout e le regole della tuo Form fai click sul bottone "Salva e chiudi" in alto a destra.
Per finire ricordati di definire come si deve comportare la piattaforma nel caso un utente già registrato compili il form.
Ora non ti resta che decidere se pubblicare subito il form tramite il pulsante in alto a destra o lasciarlo nelle bozze.
Copiamo il codice che al termine della creazione della campagna ti viene mostrato e spostiamoci sul nostro sito web.
Nei seguenti passaggi mostreremo il procedimento usando Word Press come esempio, ma la procedura è simile anche per altri CMS.
Accediamo alla dashboard WordPress della nostro sito web e spostiamoci su “ Appearance”, quindi selezioniamo l’ultima voce “Editor”.
Dalla colonna “ Templates” di destra selezioniamo THEME FOOTER.
Andiamo adesso sul codice e scrolliamo in basso fino a cerca il tag di chiusura </body>.
Inseriamo il codice copiato nella riga prima del tag (vedi screenshot sotto).
Inserisci il codice d’integrazione prima del tag </body>
Copiato il codice fai click su UPDATE FILE.
Il form è ora collegato al tuo sito web e potrai gestire comodamente tutte le tue campagne dalla piattaforma.
EMBEDDED FORM
Se per gli altri tipi di form basta inserire il codice d’integrazione del form, nel caso dell’embedded questo non basta. Questa tipologia di form infatti consente di farlo apparire in un punto esatto della pagina.
Selezioniamo la voce “Codice d’integrazione” e copiamo il secondo codice che ci viene mostrato:
Il codice di embed viene fornito anche nella schermata di riepilogo del form:
Andiamo ora sul nostro sito web alla pagina in cui vogliamo che appaia la campagna "form e popup" e apriamo l’editor della pagina.
Andiamo in modalità text e incolliamo il codice copiato nella posizione della pagina in cui vogliamo far comparire il form (vedi screenshot sotto).
Inserito il codice non ti resta che pubblicare la pagina!
Il codice di embed è disponibile anche per altri tipi di form, ad esempio pop up, consentendo di inserire il form con precisione nella nostra pagina. Puoi per esempio inserire il codice di embed di un popup dentro un bottone e questo apparirà al click dell’utente.