La guida definitiva ai moduli interattivi nelle e-mail

Come costruire un modulo interattivo nella posta elettronica

Ma come implementi esattamente un modulo nelle tue campagne email HTML? Analizziamo passo dopo passo il metodo di Mark:

1. Imposta le basi

Iniziamo con un framework davvero semplice:

Al livello più elementare, ci sono due attributi che fanno funzionare un modulo:

• Azione
  Questo definisce la pagina di destinazione o la destinazione a cui vengono inviati i dati del modulo.
• Metodo
  Ci sono due modi per inviare i tuoi dati a quella destinazione: tramite una richiesta GET o POST. GET ha un supporto migliore nell'e-mail, ma c'è una cosa da tenere a mente: se stai inviando dati tramite il metodo GET, stai fondamentalmente allegando quei dati a un URL, quindi i dati del modulo inviato saranno visibili nel campo dell'indirizzo della pagina .

Ad esempio, se invii il tuo nome tramite il modulo, stai creando un URL simile a questo:

 http://example.com?Fname=Mark

2. Imposta i campi del modulo

Successivamente, dovrai pensare a quali informazioni desideri raccogliere dai tuoi abbonati e come tradurle in singoli campi del modulo.

Ogni campo modulo richiede un'etichetta, che è l'informazione che dice al lettore di posta elettronica a cosa serve questo campo modulo. Per un campo modulo che chiede al lettore il proprio nome che assomiglia a questo:

Stai cercando di raccogliere un input di testo per un elemento con l'id = "fname" - e l'etichetta per = "fname" sta collegando questi due. Alcuni client webmail tuttavia alterano il codice e non supportano l'approccio for & id. A loro piace aggiungere prefissi alla tua classe e ai nomi ID, quindi il tuo ID potrebbe essere alterato e il tuo attributo for no. Il risultato: la tua etichetta non corrisponde più al tuo ID e questo interrompe il modulo. Ecco una soluzione semplice per evitarlo: avvolgi l'etichetta attorno al tuo input in questo modo:

Avrai diversi tipi di input di testo tra cui scegliere, tra cui:

 <input type="text">
<input type="email">
<input type="tel">
<input type="number">
<input type="url">
<textarea></textarea>

La selezione del giusto tipo di input per ogni campo del modulo ti aiuta a fare due cose: Quando viene visualizzato su dispositivi mobili, può modificare il layout della tastiera in modo che corrisponda all'input richiesto. Inoltre, dove è supportato, c'è qualche convalida di base.

Per ogni singola informazione che inviamo tramite un modulo, dobbiamo inviare due cose: un nome e un valore.

• Nome:
  Questo è il nome definito dallo sviluppatore di un campo modulo, questo viene passato tramite la stringa dell'URL.
• Valore:
  Valore definito dallo sviluppatore o dall'utente associato al nome nel campo modulo.

Ricordi il nostro esempio di nome sopra? http://example.com?Fname=Mark è l'URL che invia il nome "Mark" (=value) per il campo del modulo First Name (=name).

Aggiungiamo un'area commenti (name=”comment”) al nostro modulo:

L'URL risultante all'invio del modulo sarà simile a questo:

 http://example.com?Fname=Mark&comment=hello

Caselle di controllo e pulsanti di opzione

Sappiamo come impostare gli input di testo, ma cosa succede se volessi aggiungere una casella di controllo o un pulsante di opzione al tuo modulo?

I valori sono facoltativi per le caselle di controllo. Se non definisci un valore per una casella di controllo, verrà inviata come "attivata" o "disattivata". Funziona, ma potresti voler aggiornare il valore con diciture diverse, a seconda di come prevedi di gestire i dati sul lato ricevente.

Ad esempio, ecco una casella di controllo che invia il valore "accetto" se il tuo abbonato seleziona la casella per accettare i tuoi termini e condizioni:

 http://example.com?tc=agree

Per i pulsanti di opzione, tuttavia, sono necessari dei valori e l'elemento del tuo nome è ciò che raggruppa i pulsanti di opzione. In questo esempio, hai due gruppi di pulsanti di opzione, uno per la radio e uno per la TV, e potrai scegliere una stazione in ciascun gruppo.

Hai individuato il segno di spunta su quel primo pulsante di opzione ? È così che contrassegni il pulsante di opzione che desideri visualizzare come opzione preselezionata.

Opzioni di raggruppamento insieme

Quando stai cercando di raggruppare pulsanti di opzione o caselle di controllo insieme, è allora che entrano in gioco fieldset e legende.

• I set di campi raggrupperanno insieme gli elementi correlati
• Le leggende sono fondamentalmente etichette per quegli stessi oggetti

In questo esempio qui, potremo scegliere tra le opzioni rosso e blu in una serie di pulsanti di opzione che riguardano la scelta del tuo colore preferito.

I fieldset sono utili se stai cercando di raggruppare diverse informazioni come un indirizzo: via, codice postale, stato e paese.

Lo stile predefinito per i pulsanti di opzione e le caselle di controllo non è eccezionale. Entrambi sono visualizzati piuttosto piccoli, il che li rende inaccessibili a molti lettori. Ecco perché sopra stiamo aggiungendo una classe div che ci permetterà di sostituire lo stile del pulsante di opzione predefinito con stili di nostra scelta.

Sovrascrivere lo stile del pulsante di opzione predefinito

La sovrascrittura degli stili predefiniti per i pulsanti di opzione richiede alcuni passaggi. Analizziamoli uno per uno.

Prima di tutto vorrai nascondere il pulsante di opzione predefinito usando questi stili:

Ora che abbiamo nascosto gli input predefiniti, dobbiamo sostituire lo stato dell'input focus con i nostri stili, aggiungendo punti salienti o un contorno all'elemento su cui il lettore si sta concentrando:

E infine, stiamo modellando i nostri bottoni proprio come li modelli normalmente. Se stai usando effetti al passaggio del mouse per modellare i tuoi pulsanti e incoraggiare i clic, puoi farlo anche qui. Inoltre, ti consigliamo di aggiungere stili allo stato "selezionato" dei pulsanti di opzione in modo che sia facile distinguere un pulsante di opzione selezionato da uno non selezionato.

3. Passare informazioni nascoste

È probabile che ci siano alcune informazioni che desideri passare attraverso il modulo senza che l'utente debba inserirle manualmente nel modulo. Possono essere elementi come nomi, ID utente o indirizzi e-mail, ad esempio. Puoi passare informazioni nascoste dietro le quinte utilizzando il tipo di input "nascosto": questa azione non può essere vista o modificata dall'utente:

Ad esempio, questo bit di codice passerà un ID utente come questo:

 http://example.com?user-id=U12345

4. Invio del modulo

Bene, il tuo modulo è stato creato. Ora, abbiamo bisogno di un modo per il lettore di inviarlo . Ci sono due modi per farlo: il tipo di input "invia" e un tipo di pulsante "invia":

Entrambi funzionano in modo molto simile, ma la differenza è dove metti il ​​testo. Se segui il percorso del tipo di input, ti consigliamo di impostare il testo come valore. Se stai utilizzando il pulsante, la tua copia di invio andrà subito prima del tag di chiusura del pulsante.

Strategie di fallback per moduli interattivi nella posta elettronica

Per ogni e-mail interattiva è fondamentale disporre di fallback. I fallback assicurano che in tutti i client di posta elettronica in cui i moduli non funzionano perfettamente, lo nascondiamo e mostriamo invece un fallback. Poiché il supporto mobile per i moduli è ancora discontinuo, scegliamo di nascondere i nostri moduli sul cellulare per tutte le e-mail di tornasole e di indirizzare l'esperienza interattiva completa ai nostri client di posta elettronica più popolari che supportano la funzionalità dei moduli interattivi. In altre parole, abbiamo implementato un codice che...

• Mostra il modulo interattivo in
  • Posta Apple
  • Gmail (Web desktop)
  • Yahoo (Web desktop)
• Mostra il fallback in:
  • Tutto Outlook e Windows Mail
  • Tutti i dispositivi mobili

Ecco come appare nel codice:

CSS

HTML

Esempi: vedere i moduli interattivi nell'e-mail in azione

Curiosi di vedere tutto in azione?

In questa email, abbiamo aggiunto un modulo per rendere più facile per i lettori entrare in contatto con uno dei nostri esperti di tornasole:

Gli Indiana Pacers chiedono ai loro fan un feedback, proprio all'interno dell'e-mail:

Ma cosa succede se non riesco a codificare?

L'interattività e soprattutto gli elementi avanzati come i moduli interattivi richiedono un po' di abilità di codifica. Se sei uno sviluppatore di email già a tuo agio con il codice email, speriamo che questa guida passo passo ti aiuti a implementare i moduli nella tua prossima campagna.

Tuttavia, per molti marketer e sviluppatori di posta elettronica nelle prime fasi della loro carriera, l'implementazione di elementi interattivi come i moduli può sembrare un compito impossibile. Ma ci sono alcune buone notizie per te, almeno se stai creando la tua email in Salesforce Marketing Cloud. Mark e il suo team di Salesforce hanno recentemente aggiunto Moduli a Content Builder di Salesforce, consentendo ai professionisti del marketing di aggiungere moduli alle proprie e-mail e personalizzarli in base alle proprie esigenze, senza bisogno di competenze di codifica. Se sei un cliente Salesforce, ti invitiamo a dare un'occhiata!

Più provider di servizi di posta elettronica renderanno più semplice per i marketer implementare elementi interattivi nelle loro campagne? Il lancio dei blocchi di moduli dinamici di Salesforce potrebbe essere un primo passo in quella direzione.