Adicionando mais campos à lightbox de entrada do Responsys

Importante: este recurso só estará disponível se estiver habilitado para a sua conta e você tiver o Oracle Maxymiser.

Por padrão, o modelo Lightbox de Entrada de E-mail só tem o campo Emailaddress. Você pode adicionar mais recursos, como nome, sobrenome ou país, editando manualmente o código da lightbox.

O exemplo a seguir demonstra como adicionar os campos de nome e sobrenome à sua lightbox de entrada de e-mail:

No Esquema de Listas do Responsys, marque os nomes de campos que deseja adicionar à sua lightbox; elas devem corresponder aos nomes de campos na lightbox do Oracle Maxymiser. Neste exemplo, os nomes de campos são os seguintes:
1. FIRST_NAME
2. LAST_NAME

Crie uma lightbox de entrada do Oracle Responsys.
Clique em Editor de Código.

Observação: se você editar manualmente o código da sua lightbox no Editor de Código e depois retornar ao painel Interações para fazer alterações, as alterações manuais feitas na função formSubmit serão sobregravadas pelo painel Interações.

Dentro da tag <form>:

Procure o campo emailaddress na tag <input>:

<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}">

Depois da tag acima, adicione uma nova tag <input> para o 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]+$">

Modifique os atributos <input> da seguinte maneira:

ID: um ID exclusivo composto pelo ID da sua lightbox e o nome e o tipo do campo de entrada. Por exemplo: lightbox1565788422675-lightbox-firstname-input.

Observação: quando você cria uma lightbox, atribuímos a ela um ID exclusivo, que pode ser encontrado como atributo outer div da lightbox ou como parte do atributo de ID do campo de e-mail descrito acima.

Nome: o nome do campo na tabela do Responsys da etapa 1.
Espaço reservado: o texto da dica que aparece quando a caixa de texto está vazia.
Padrão: a expressão regular que determina quais caracteres podem ser inseridos na caixa de texto. Neste exemplo, os caracteres no intervalo de a-z ou A-Z são permitidos, mas você pode permitir outros caracteres, como hifens ou espaços.

Adicione ou modifique outra tag <input> para o sobrenome:

<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 o formulário for enviado, certifique-se de que os novos campos de entrada sejam adicionados ao URL de envio:
1. Localize a função window.onFormSubmit e procure a linha de código a seguir dentro dela:
2. Abaixo desta linha, adicione as linhas a seguir para armazenar o nome e o sobrenome nas variáveis:
Os valores armazenados nessas variáveis são usados durante a verificação de erros e o envio do formulário.

O código de verificação de erros precisa ser atualizado para validar o conteúdo dos campos de nome e sobrenome.

Para este exemplo, substituiremos o 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;

Pelo seguinte código:

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

Depois desse código, insira as linhas a seguir para adicionar o nome e o sobrenome ao URL de envio do formulário:

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

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

Alterne para o painel Visualizar para testar os campos recém-criados na sua lightbox.

Relacionado

Configurando a sua integração com o Oracle Maxymiser

Enviando uma campanha integrada do Maxymiser-Responsys

Criando uma lightbox de entrada usando o Maxymiser

Integração do Oracle Responsys (Central de Ajuda do Oracle Maxymiser)

integração do Maxymiser, lightbox, formulários para entrada de e-mail