Aggiunta di ulteriori campi alla lightbox di iscrizione Responsys

Importante: questa funzionalità è disponibile solo se è stata abilitata per l'account e se si dispone di Oracle Maxymiser.

Per impostazione predefinita, il modello lightbox di iscrizione e-mail include solo il campo Emailaddress. È possibile aggiungere ulteriori funzionalità, ad esempio nome, cognome o paese, modificando manualmente il codice della lightbox.

Nell'esempio riportato di seguito viene illustrato come aggiungere i campi relativi al nome e al cognome alla lightbox di iscrizione e-mail.

Nello schema di elenco di Responsys, verificare i nomi dei campi che si desidera aggiungere alla lightbox, poiché devono corrispondere ai nomi dei campi della lightbox di Oracle Maxymiser. In questo esempio, i nomi dei campi sono i seguenti:
1. FIRST_NAME;
2. LAST_NAME.

Eseguire la creazione di una lightbox di iscrizione Oracle Responsys.
Fare clic su Editor di codice.

Nota: se si modifica manualmente il codice della lightbox nell'Editor di codice e quindi si torna al pannello Interazioni per apportare modifiche, le modifiche manuali apportate alla funzione formSubmit vengono sovrascritte dal pannello Interazioni.

Nel tag <form>, eseguire le operazioni riportate di seguito.

Cercare il tag <input> per il campo emailaddress:

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-email-input" name="EMAIL_ADDRESS_" type="text" style="display: block; margin: 47px auto 0px; height: 28px; width: 280px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Email address..." title="Enter Email address." required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}">

Dopo il tag indicato precedentemente, aggiungere un nuovo tag <input> per il nome:

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-firstname-input" name="FIRST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="First name..." title="Enter First name." required="" pattern="^[a-zA-Z]+$">

Modificare gli attributi <input> come indicato di seguito.

Id: ID univoco costituito dall'ID lightbox e da nome e tipo del campo di input, ad esempio lightbox1565788422675-lightbox-firstname-input.

Nota: quando si crea una lightbox, viene associata a un ID univoco che può essere trovato come attributo dell'elemento div esterno della lightbox o parte dell'attributo id del campo e-mail sopra descritto.

Name: nome del campo nella tabella Responsys del passo 1.
Placeholder: testo del suggerimento che viene visualizzato quando la casella di testo è vuota.
Pattern: espressione regolare che determina i caratteri che possono essere inseriti nella casella di testo. In questo esempio, sono consentiti i caratteri che rientrano nell'intervallo a-z oppure A-Z, ma è possibile consentire altri caratteri, ad esempio trattini o spazi.

Aggiungere e modificare un altro tag <input> per il cognome:

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-lastname-input" name="LAST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Last name..." title="Enter Last name." required="" pattern="^[a-zA-Z]+$">

Quando viene sottomesso il modulo, assicurarsi che i nuovi campi di input vengano aggiunti all'URL di sottomissione, come indicato di seguito.
1. Individuare la funzione window.onFormSubmit e cercare la seguente riga di codice in essa contenuta:
2. Al di sotto di questa riga, aggiungere le seguenti righe per memorizzare il nome e il cognome nelle variabili:
I valori memorizzati in queste variabili vengono utilizzati per la verifica della presenza di errori e per la sottomissione del modulo.

Il codice di verifica degli errori deve essere aggiornato per la convalida del contenuto dei campi relativi al nome e al cognome.

Per questo esempio, verrà sostituito il codice esistente:

var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;

if (!re.test(emailInput.value)) {

oops.style.display = 'block';

emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");

emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");

return;

Con il seguente codice:

var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
var reName = /^[a-zA-Z]+$/;
emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
 
if (!re.test(emailInput.value) || !reName.test(firstnameInput.value) || !reName.test(lastnameInput.value)) {
	oops.style.display = 'block';
	if (!re.test(emailInput.value)) {
		emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
	if (!reName.test(firstnameInput.value)) {
		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
	if (!reName.test(lastnameInput.value)) {
		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
return;
}

To ensure the new values get submitted when the visitor clicks the Subscribe button, find the following code:

parameters.push(encodeURIComponent('EMAIL_ADDRESS_') + '=' + encodeURIComponent(emailInput.value));

Dopo questo codice, aggiungere le seguenti righe per aggiungere il nome e il cognome all'URL di sottomissione del modulo:

parameters.push(encodeURIComponent('FIRST_NAME') + '=' + encodeURIComponent(firstnameInput.value));

parameters.push(encodeURIComponent('LAST_NAME') + '=' + encodeURIComponent(lastnameInput.value));

Passare al pannello Anteprima per eseguire il test dei campi appena creati nella lightbox.

Argomenti correlati

Impostazione dell'integrazione di Oracle Maxymiser

Lancio di una campagna integrata Maxymiser-Responsys

Creazione di una lightbox di iscrizione con Maxymiser

Integrazione di Oracle Responsys (Centro assistenza Oracle Maxymiser)

integrazione Maxymiser, lightbox, moduli di iscrizione e-mail