Adición de campos adicionales al lightbox de registro de Responsys

Importante: esta característica solo está disponible si está activada para su cuenta y si dispone de Oracle Maxymiser.

Por defecto, la plantilla de lightbox de registro de correo electrónico solo tiene el campo Emailaddress. Puede agregar funciones adicionales, como nombre, apellido o país, editando manualmente el código del lightbox.

El siguiente ejemplo muestra cómo agregar los campos de nombre y apellido a su lightbox de registro de correo electrónico:

En el esquema de lista de Responsys, verifique los nombres de los campos que desea agregar al lightbox, ya que deben coincidir con los nombres de campo del lightbox de Oracle Maxymiser. En este ejemplo, los nombres de campo son los siguientes:
1. FIRST_NAME
2. LAST_NAME

Crear un lightbox de registro de Oracle Responsys.
Haga clic en Editor de código.

Nota: si edita manualmente el código de su lightbox en el editor de código y posteriormente vuelve al panel Interacciones para realizar cambios, este panel sobrescribe los cambios manuales realizados en la función formSubmit.

Dentro de la etiqueta <form>:

Busque la etiqueta <input> para el 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}">

Tras la etiqueta anterior, agregue una nueva etiqueta <input> para el nombre:

<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]+$">

Modifique los atributos de <input> del modo siguiente:

ID: un identificador único compuesto por el ID del lightbox y el nombre y tipo del campo de entrada. Por ejemplo: lightbox1565788422675-lightbox-firstname-input.

Nota: cuando se crea un lightbox, se le asigna un identificador único que se puede encontrar como atributo del div externo del lightbox o como parte del atributo de identificación para el campo de correo electrónico descrito anteriormente.

Nombre: nombre del campo en la tabla de Responsys del paso 1.
Marcador de posición: texto del consejo que aparece cuando el cuadro de texto está vacío.
Patrón: expresión regular que determina qué caracteres se pueden introducir en el cuadro de texto. En este ejemplo, se permiten caracteres en el rango a-z o A-Z, pero pueden permitirse otros caracteres como guiones o espacios.

Agregue y modifique otra etiqueta <input> para el apellido:

<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]+$">

Cuando se envíe el formulario, asegúrese de agregar los nuevos campos de entrada a la URL de envío:
1. Localice la función window.onFormSubmit y busque la siguiente línea de código dentro de ella:
2. Debajo de esta línea, agregue las siguientes líneas para almacenar el nombre y apellido en las variables:
Los valores almacenados en estas variables se utilizan al verificar errores y al enviar el formulario.

El código de verificación de errores debe actualizarse para validar el contenido de los campos de nombre y apellido.

Para este ejemplo, sustituiremos el código existente:

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;

Por el código siguiente:

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));

Después de este código, agregue las siguientes líneas para agregar el nombre y el apellido a la URL de envío del formulario:

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

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

Cambie al panel Vista previa para probar los campos recién creados en su lightbox.

Temas relacionados

Configuración de la integración de Oracle Maxymiser

Lanzamiento de una campaña Maxymiser-Responsys integrada

Creación de un lightbox de registro con Maxymiser

Integración de Oracle Responsys (centro de ayuda de Oracle Maxymiser)

integración de Maxymiser, lightbox, formularios de registro de correo electrónico