Sommario
- Come funziona?
- Creare un modulo
- Salvare un modello
- Modificare, duplicare o eliminare un modulo
- Integrare il modulo nel tuo sito web
- Integrare il modulo di iscrizione in WordPress
- Visualizzare l'anteprima del modulo
- Visualizzare il codice del modulo
- Modificare un modulo
- Archiviare, eliminare o ripristinare un modulo
- Risoluzione dei problemi
Come funziona?
Il generatore di moduli di Mailjet è composto da un modulo di iscrizione, un'email di conferma e una pagina di conferma. Quando qualcuno si iscrive al tuo sito web riceve un'email di conferma con un link alla pagina di conferma. Una volta confermata l'iscrizione, l'indirizzo email (e qualsiasi altra informazione raccolta tramite il modulo di iscrizione) viene aggiunto al tuo elenco di contatti.
La parte migliore? Tutto ciò che devi fare è progettare e personalizzare il modulo, l'email e la pagina di destinazione nel generatore di moduli. Mailjet genererà il codice per il modulo di iscrizione e si occuperà del flusso di lavoro.
Il tuo sito web è in esecuzione su WordPress?Ti consigliamo di dare un'occhiata al Plugin WordPress di Mailjet , che consente di creare un modulo di iscrizione, gestire i contatti, creare email e visualizzare le statistiche in tempo reale direttamente dal pannello di controllo WordPress.
Creare un modulo
Dal menu, seleziona "Contatti → Generatore di moduli".
Ora clicca sul pulsante "Crea un nuovo modulo" .
La pagina "Crea un nuovo modulo" mostra le diverse sezioni del modulo.
Man mano che completi ogni sezione, il segno di spunta corrispondente diventa verde.
Una volta completate tutte le sezioni, puoi pubblicare il modulo di iscrizione appena creato.
- Titolo: assegna un titolo al modulo per identificarlo nei tuoi rapporti. Si tratta di un nome interno che solo tu puoi vedere.
- Progettazione del modulo: crea il modulo e visualizza un'anteprima.
- Dettagli dell'email: definisci l'oggetto e le informazioni sul mittente.
- Progettazione dell'email: puoi personalizzare l'email (double opt-in) che viene inviata ai nuovi iscritti, chiedendo loro di convalidare l'iscrizione alla newsletter. Questa email includerà un pulsante con il link che indirizza i destinatari alla pagina di conferma.
- Pagina di conferma: quando qualcuno si iscrive al tuo modulo riceverà un'email di conferma con un link per convalidare (confermare) l'iscrizione.Per impostazione predefinita, questo link porta alla Pagina di conferma via Mailjet che è possibile progettare nell'editor dei moduli.Se desideri usare la pagina di conferma sul tuo sito web, clicca su "Usa pagina di conferma esterna" e inserisci l'URL.
- Elenco di contatti: scegli dove memorizzare i dati degli iscritti.
Iniziamo: clicca su "Progetta modulo" per selezionare il modello per il tuo modulo.
Il primo passo è decidere quale tipo di modulo desideri creare:
Preferisci un modulo di registrazione direttamente incorporato nella pagina del tuo sito web, oppure vuoi che il modulo compaia in una nuova finestra quando clicchi su un pulsante o un link?
Modulo incorporato o pop-up
Entrambi i tipi di modulo servono per attrarre l'interesse di potenziali clienti. Tuttavia, hanno modalità di visualizzazione differenti.
Modulo incorporato
Il modulo incorporato si trova solitamente in una pagina specifica di un sito web e l'utente deve visitare quella pagina per potersi iscrivere.
Modulo pop-up
Il modulo pop-up comparirà dopo che l'utente ha cliccato su un pulsante, che può trovarsi in più posizioni all'interno del sito web. Inoltre, può anche comparire in base a condizioni predefinite, attivato tramite un collegamento ipertestuale, un'immagine o qualsiasi elemento HTML in grado di lanciare una funzione Javascript (che devono essere programmate da parte tua), permettendoti di attrarre potenziali clienti a seconda dei loro modelli comportamentali.
Ad esempio, è possibile far comparire un modulo quando l'utente sta navigando in una pagina da un po' di tempo o se sta per uscire dal sito.
Se scegli il modulo pop-up, nella pagina di progettazione del modulo comparirà un pulsante aggiuntivo denominato Trigger che consente di modificare il pulsante di attivazione del modulo a tuo piacimento (testo, colori, ecc.).
Per questo esempio, selezioneremo il modulo "Pop-up".
Strumenti per modificare il layout di un modulo
Questa è la parte iniziale della progettazione, il momento in cui crei la struttura del modulo. In questa fase puoi aggiungere tutte le colonne necessarie dove verranno inseriti i contenuti.
Puoi scegliere di inserire tra una e quattro colonne consecutive e, se lo desideri, modificare le proporzioni dei blocchi cliccando su "Mostra più opzioni".
Il layout può essere modificato anche in un secondo momento usando la barra degli strumenti.
Strumenti di contenuto
Quest'area comprende tutti gli elementi di contenuto che appariranno nel modulo (testo, immagini, pulsanti, condivisione sui social, ecc.).
Aggiungere contenuti è facile: ti basta cliccare sul blocco di contenuto e trascinarlo nell'area desiderata del modulo. Se desideri spostare il blocco, trascinalo semplicemente nella nuova posizione.
Clicca all'interno della cornice per personalizzare l'elemento usando la barra degli strumenti che appare intorno alla cornice.
Testo
La barra degli strumenti di testo consente di formattare e personalizzare facilmente il tuo blocco di testo:
- Regolare l'altezza della linea
- Allineare il testo
- Impostare il colore di sfondo
- Modificare i margini
- Formattare il testo (carattere, grassetto, corsivo, ecc.)
- Selezionare il tipo di consenso (esplicito o implicito)
Immagine
La barra degli strumenti di immagine consente di:
- Impostare il posizionamento orizzontale
- Modificare i margini
- Applicare un bordo (forma) all'immagine
- Adattare l'immagine per dispositivi mobili
- Impostare il colore di sfondo
Per aggiungere un'immagine alla sezione ci sono due modi:
- Caricare la tua immagine o scegliere un'immagine dalla tua galleria
- Collegarti a un'immagine presente online
Per questo esempio, caricheremo un'immagine.
Una volta cliccato sul pulsante di caricamento dell'immagine, puoi trascinare il file immagine nella finestra di dialogo oppure cliccare sul link "Importa un file" per caricare la tua immagine.Puoi anche scegliere di caricare un'immagine da un link esterno.
Puoi scegliere di aggiungere all'immagine un testo alternativo.Nel caso in cui l'immagine non possa essere visualizzata, al suo posto apparirà il testo alternativo.Mantieni il testo alternativo breve e descrittivo, come se fosse un tweet.:)
Una volta scelta l'immagine, puoi usare l'Editor immagine per ritagliare, ridimensionare, ruotare o capovolgere l'immagine.
Questa operazione può essere eseguita anche dopo che l'immagine è stata salvata, cliccando sull'immagine che desideri modificare e poi sul pulsante "Editor immagine".
Divisore
Puoi aggiungere una linea divisoria per separare le sezioni o gli elementi all'interno di una sezione.
La barra degli strumenti consente di:
- Impostare il colore di sfondo
- Modificare i margini
- Formattare la linea (disegno, colore, spessore)
- Regolare la spaziatura orizzontale e verticale
Pulsante
Nella barra degli strumenti sono disponibili numerose opzioni, tra cui:
- Raggio del bordo (per impostare la rotondità degli spigoli del pulsante)
- Colore, spessore e stile del bordo del pulsante (continuo, punteggiato, tratteggiato, ecc.)
- Impostare il posizionamento orizzontale e la spaziatura
- Aggiungere un collegamento ipertestuale
- Allineamento dei font
- Regolare i margini
- Personalizzare il testo usando le proprietà del contatto
- Formattare il font (famiglia di font colore, grassetto, ecc.)
Distanziatore
Aggiungi uno spazio bianco per separare gli elementi o le sezioni del tuo modulo. Con lo strumento "Distanziatore" puoi:
- Impostare l'altezza dello spazio vuoto (in pixel)
- Aggiungere un colore di sfondo (facoltativo)
Condivisione sui social
Aggiungi al modulo le icone dei tuoi social preferiti, come Facebook, Twitter, LinkedIn, Instagram, YouTube, ecc.
Clicca sul pulsante "Configura link" per aprire la finestra modale Configurazione dei social media, dove puoi:
- Selezionare fino a 10 icone di social media
- Modificare il testo dell'etichetta
- Condividere la versione online della tua newsletter di marketing sul tuo account social o impostare il link diretto alla tua pagina social
- Creare la tua icona social cliccando su "Aggiungi icona personalizzata"
Per visualizzare e configurare le etichette di testo, clicca su "Mostra etichette".
Clicca sulle opzioni del blocco (matita) per configurare le dimensioni, le forme e i colori dell'icona, nonché il colore di sfondo e la spaziatura della sezione.
Blocco HTML
Puoi aggiungere un codice HTML direttamente nel tuo modulo. Trascina il blocco HTML nel tuo modulo, quindi clicca sul pulsante nella barra degli strumenti per aprire la finestra dell'editor HTML e digita il codice!
Video
Per aggiungere un video al modulo, trascina lo strumento "Video" nella posizione desiderata. Aggiungi l'URL del video nella finestra modale.
Per i video di YouTube, Vimeo e Dailymotion vengono generate automaticamente le immagini di anteprima.Per tutti gli altri video, clicca su "Scegli un'altra immagine" per aggiungere la tua immagine di anteprima.
Una volta creata la miniatura di anteprima, verrà aggiunto il pulsante di riproduzione predefinito. Puoi scegliere tra diversi design per il pulsante di riproduzione. (Tieni presente che l'immagine del pulsante di riproduzione viene automaticamente ridimensionata rispetto alle dimensioni della miniatura. In particolare, sarà pari alla metà del bordo più piccolo (larghezza o altezza) della miniatura di anteprima).
L'ultimo passaggio consiste nell'aggiungere una semplice descrizione dell'immagine di anteprima nel campo "Testo alternativo dell'immagine" .Questo testo alternativo verrà visualizzato nel caso in cui l'iscritto non possa visualizzare l'immagine.In seguito clicca su "Inserisci video".
Dalla barra degli strumenti, clicca sul pulsante "Video" per modificare il video in qualsiasi momento.
Moduli
Raccogliere informazioni aggiuntive (proprietà) dagli iscritti è facile: ti basta cliccare sul blocco di modulo scelto e trascinarlo nell'area desiderata del modulo. Se desideri spostare il blocco, trascinalo semplicemente nella nuova posizione.
Testo
Il blocco di modulo "Testo" ti consente di aggiungere una proprietà stringa collegata all'email dell'iscritto. La lunghezza massima di questo campo è di 255 caratteri.
Opzioni disponibili:
- Impostare il posizionamento orizzontale e la spaziatura
- Applicare un bordo (forma) all'immagine
- Impostare il colore o l'immagine di sfondo
- Selezionare una proprietà del contatto
- Impostare il campo come obbligatorio
- Aggiungere un testo segnaposto (suggerimenti)
- Regolare il limite massimo di caratteri
Area di testo
Il blocco di modulo "Area di testo" ti consente di aggiungere una proprietà stringa collegata all'email dell'iscritto (come per il blocco "Testo"), ma questa volta la lunghezza massima consentita di questo campo è di 500 caratteri.
Opzioni disponibili:
- Impostare il posizionamento orizzontale e la spaziatura
- Applicare un bordo (forma) all'immagine
- Impostare il colore o l'immagine di sfondo
- Selezionare una proprietà del contatto
- Impostare il campo come obbligatorio
- Aggiungere un testo segnaposto (suggerimenti)
- Regolare il limite massimo di caratteri
Numero
Il blocco di modulo "Numero" ti consente di aggiungere una proprietà intero o decimale collegata all'email dell'iscritto. Puoi aggiungere un intervallo personalizzato e limiti di incremento per questo campo.
Opzioni disponibili:
- Impostare il posizionamento orizzontale e la spaziatura
- Applicare un bordo (forma) all'immagine
- Impostare il colore o l'immagine di sfondo
- Selezionare una proprietà del contatto
- Impostare il campo come obbligatorio
- Aggiungere un testo segnaposto (suggerimenti)
- Impostare un intervallo personalizzato o limiti di incremento
Pulsante di opzione
Il blocco di modulo "Pulsante di opzione" consente all'utente di scegliere una singola opzione da un gruppo predefinito di opzioni che si escludono a vicenda. Quando si seleziona un pulsante di opzione, qualsiasi pulsante selezionato in precedenza nello stesso gruppo viene deselezionato.
Opzioni disponibili:
- Modificare i margini
- Formattare il testo (font, grassetto, corsivo ecc.)
- Impostare lo sfondo e i bordi interni ed esterni dei pulsanti di opzione
- Selezionare il posizionamento (spazio tra icone/testo e opzioni)
- Usare una proprietà del contatto
- Impostare il campo come obbligatorio
- Definire il testo per ciascun pulsante di opzione
Tieni presente che le opzioni di testo cambieranno a seconda del tipo di dati di proprietà scelto (Stringa, Numero intero, Booleano ecc.).
URL web
Il blocco di modulo "URL web" serve per memorizzare gli URL di siti web. Il più delle volte viene utilizzato per memorizzare l'URL del sito web personale del contatto. Il modulo accetterà l'URL solo se correttamente formattato. Se il formato non è corretto, il campo diventerà rosso e verrà visualizzato un errore.
Opzioni disponibili:
- Impostare i bordi e la spaziatura interna
- Impostare il colore o l'immagine di sfondo
- Impostare il campo come obbligatorio
- Aggiungere un testo segnaposto (suggerimenti)
- Regolare il limite massimo di caratteri
Data
Il blocco di modulo "Data" consente di salvare date specifiche tramite un modulo, ad esempio la data di compleanno dell'utente. La maschera di input viene aggiunta automaticamente al campo e mostra all'utente l'ordine corretto per l'immissione della data, che puoi gestire dal pannello delle preferenze.
Opzioni disponibili:
- Impostare i bordi e la spaziatura
- Impostare il colore o l'immagine di sfondo
- Usare una proprietà del contatto
- Impostare il campo come obbligatorio
- Impostare preferenze per il formato della data
Menu a discesa
Il blocco di modulo "Menu a discesa" consente all'utente di scegliere una singola opzione da un menu a discesa con opzioni predefinite, in modo simile al blocco "Pulsante". Quando si seleziona un'opzione dal menu a discesa, qualsiasi opzione selezionata in precedenza viene deselezionata.
L'utilizzo di un menu a discesa in un modulo di iscrizione può rendere il modulo più intuitivo, riducendo la quantità di parole da digitare e fornendo all'utente una serie ben definita di opzioni tra cui scegliere. Inoltre, può contribuire a garantire che gli utenti forniscano informazioni precise e coerenti, il che può essere importante per gestire le iscrizioni.
Opzioni disponibili:
- Impostare i bordi e la spaziatura
- Formattare il testo (font, grassetto, corsivo ecc.)
- Impostare i colori delle icone a freccia
- Impostare il colore o l'immagine di sfondo
- Usare una proprietà del contatto
- Impostare il campo come obbligatorio
- Definire il testo per ciascuna opzione
Sezioni
Duplicare una sezione
Clicca sulla sezione per evidenziarla, quindi clicca sull'icona di duplicazione sul lato destro dello schermo.
Eliminare una sezione
Per rimuovere una sezione dal corpo del modulo, clicca sulla sezione, poi sull'icona del cestino e infine conferma l'eliminazione.
Puoi anche eliminare rapidamente una sezione o un elemento trascinandolo nell'area degli strumenti di contenuto.
Impostazioni di stile globali
Con un paio di clic puoi formattare facilmente gli stili di testo di tutti i paragrafi, le intestazioni e i collegamenti ipertestuali all'interno del modulo.
Per accedere agli stili di testo globali, clicca sull'icona dell'ingranaggio nell'angolo in alto a sinistra (scheda "Impostazioni").
Come suggerisce il nome, l'opzione "Stile globale" permette di impostare la famiglia di font e il colore per tutti gli elementi elencati (intestazioni, paragrafi, link).
Puoi quindi personalizzare ulteriormente lo stile per le intestazioni, i paragrafi e i link.
Infine, se desideri avere uno stile di testo diverso per una certa intestazione o paragrafo del modulo, ti basta creare il testo come al solito con la barra degli strumenti della sezione.
Opzioni logo
Quando si utilizza il nostro generatore di moduli, verrà aggiunto un logo "Powered by Mailjet" al piè di pagina.
Puoi scegliere tra cinque diversi schemi di colore del logo dalla sezione Opzioni logo della scheda "Impostazioni". Tieni presente che il logo non è mobile o ridimensionabile.
Se hai sottoscritto un piano a pagamento, il logo può essere rimosso selezionando l'opzione "Nessun logo".
Modificare i messaggi di operazione completata e di errore
Le persone visualizzano questi messaggi quando il modulo viene inoltrato correttamente o quando si verifica un errore. Per completare l'iscrizione, devono cliccare sul link presente nell'email di conferma.
Non preoccuparti, questi messaggi vengono generati automaticamente per te. Tuttavia, se lo desideri, puoi creare messaggi di operazione completata e di errore personalizzati.
Nella pagina "Progetto del modulo", clicca all'interno della cornice del modulo per visualizzare la barra degli strumenti e seleziona l'icona dei cursori. A questo punto puoi modificare i due messaggi come desideri.
Tipi di consenso e modifica del testo
È possibile scegliere tra due tipi di consenso, esplicito e implicito. Clicca all'interno della cornice del testo del consenso per visualizzare la barra degli strumenti e seleziona l'icona dei cursori. Seleziona un tipo di consenso e, se lo desideri, modifica il testo a tuo piacimento.
Consenso esplicito (consigliato)
Per consenso esplicito si intende la possibilità di scegliere se autorizzare o meno la raccolta di informazioni personali prima che ciò avvenga. È il modo migliore per assicurarti che chi si iscrive accetti di ricevere le tue comunicazioni.
Consenso implicito
Il consenso implicito non richiede agli iscritti di spuntare una casella. Quando invia il modulo, chi si iscrive accetta di ricevere tutti i tipi di comunicazioni che intendi inviare.
Salvare un modello
Creare un modello permette di risparmiare tempo e fatica. Se trasformi un progetto in un modello, potrai riutilizzarlo facilmente per progetti simili senza dover partire da zero ogni volta.
Quando progetti un modulo, puoi scegliere di salvarlo come nuovo modello o di sostituire un modello esistente. Dalla pagina di progettazione del generatore di moduli, clicca sul menu a discesa in alto a destra e seleziona "Salva come modello".
In generale, salvare un progetto come modello permette di risparmiare tempo e fatica nel lungo periodo e allo stesso tempo garantire coerenza, standardizzazione e collaborazione.
Per accedere ai modelli salvati durante la creazione di un modulo, clicca sul pulsante "Progetta un modulo" e scegli uno dei tuoi modelli.
Modificare, duplicare o eliminare un modulo
Per modificare, duplicare o eliminare un modulo, vai alla pagina di gestione dei moduli e clicca sull'icona dell'ingranaggio.
Si aprirà un menu con diverse opzioni e non dovrai fare altro che selezionare quella che preferisci.
Nota: fai sempre attenzione quando elimini i moduli, perché l'azione non può essere annullata.
Integrare il modulo nel tuo sito web
L'ultimo passaggio consiste nell'integrare il codice HTML del modulo di iscrizione: ti basta copiarlo e incollarlo nel tuo sito web!
Questa analisi dettagliata del codice ti permetterà di integrarlo sul tuo sito con semplicità.
Integrare il modulo di iscrizione in WordPress
Puoi aggiungere il codice del modulo di iscrizione direttamente in un articolo o una pagina oppure tramite un widget di WordPress.
In questo primo esempio creeremo una nuova pagina e aggiungeremo il modulo di iscrizione.
Dal menu di WordPress, seleziona Pagine → Aggiungi nuova
Inserisci il titolo della pagina, seleziona il blocco HTML personalizzato e incolla il codice del modulo di iscrizione recuperato dal tuo account Mailjet.
A questo punto devi solo cliccare su Pubblica. Il widget di iscrizione sarà incluso nella nuova pagina.
Il modulo di iscrizione può essere aggiunto al tuo sito anche tramite i widget di WordPress.
Dal menu principale, seleziona Aspetto → Widget
In questa pagina puoi vedere tutti i widget installati. Per aggiungere un widget Modulo, clicca sull'icona "+" nell'angolo in alto a sinistra e trascina il blocco "HTML personalizzato" dal menu.
Incolla il codice del modulo di iscrizione recuperato dal tuo account Mailjet nella sezione Contenuto, quindi clicca su "Aggiorna".
Una volta completata questa procedura, non ti resta che andare sul tuo sito web e visualizzare il widget di iscrizione.
Visualizzare l'anteprima del modulo
Per visualizzare l'anteprima del modulo di iscrizione, accedi alla sezione "Progettazione del modulo" e clicca sull'icona della matita (modifica).
Una volta nella pagina di progettazione del modulo, clicca sul pulsante "Anteprima" nell'angolo in alto a destra dello schermo.
Il modulo può essere visualizzato come anteprima su dispositivi diversi, sia mobili che desktop.
Visualizzare il codice del modulo
Dalla pagina di gestione dei moduli, clicca sull'icona dell'ingranaggio del modulo di cui desideri visualizzare il codice e seleziona "Visualizza il codice".
Questa analisi dettagliata del codice ti permetterà di integrarlo sul tuo sito con semplicità.
Modificare un modulo
Dalla pagina di gestione dei moduli, clicca sull'icona dell'ingranaggio e seleziona "Modifica".
Tieni presente che dopo ogni modifica apportata al modulo di iscrizione, affinché sia presa in considerazione, dovrai ricaricare il codice HTML sul tuo sito web.
Archiviare, eliminare o ripristinare un modulo
Per archiviare un singolo modulo, clicca sull'icona dell'ingranaggio nella pagina di gestione dei moduli e seleziona "Archivia".
Per archiviare più moduli contemporaneamente, seleziona la casella di controllo di ciascun modulo e poi clicca sul pulsante "Archivia".
Se vuoi eliminare in modo permanente un modulo archiviato, vai alla sezione "Archiviati" nella pagina di gestione dei moduli, clicca sull'icona dell'ingranaggio e seleziona "Elimina".
Fai sempre attenzione quando elimini moduli o altri elementi nell'account Mailjet: una volta eliminati, i dati non possono essere recuperati.
Se vuoi ripristinare un modulo archiviato, clicca sull'icona dell'ingranaggio e seleziona "Ripristina".
Risoluzione dei problemi
Se hai implementato un modulo di iscrizione sul tuo sito web e improvvisamente ha smesso di funzionare, controlla che l'elenco di contatti associato al modulo non sia stato modificato o eliminato.