Voy a iniciar una nueva sección acerca de code resources porque creo que son una herramienta poco utilizada en SFMC y que esconde muchas cosas poderosas.
Así que pues, entremos al asunto.
El problema
Tienes una cloudpage atada a una promoción para registro de usuarios y necesitas garantizar que el usuario solo se registre una vez.
La “solución”
Lo que harías normalmente sería procesar el formulario y entonces al tratar de procesar el resultado, te darías cuenta de que el usuario ya existe y devolverías el mensaje de “híjole, ya existe el usuario, men”
El problema con la “solución”.
Es una pésima experiencia para el usuario llenar el formulario para darse cuenta de que ya existe y que le dedicó 20 segundos de su tiempo a llenar un formulario. Entonces en realidad esto no está tan padre.
La solución.
Utilizando jQuery, el plugin jQuery Validate y un code resource podremos validar el mensaje al momento de llenar el formulario y mostrar un mensaje de error, además ahorrándonos supermessages!
Bueno vamos al asunto.
Prerequisitos:
- Una cloudpage con un formulario
- agregar jQuery a esta Cloudpage https://jquery.com
- agregar jQuery validate a esta cloudpage https://jqueryvalidation.org
- Agregar un ID al formulario
- para el ejemplo usaremos id=”myForm”
- Un code resource JSON
- Básicamente lo usaremos para hacer un LookUpRows a la DE y devolver TRUE o FALSE si ya existe el email la DE.
- Habilidad media en html, js y ampscript.
- No dejes que tu síndrome del impostor te convenza de que no puedes hacer este ejemplo, pero si te atoras: pídele ayuda a tu FED de confianza.
Procedimiento
Primero tomemos nuestra cloudpage e incluyamos jQuery y el plugin jQuery validator en el header.
<!doctype html>
<html lang="es">
<head>
<title>Ejemplo Formulario</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="jquery-3.7.1.min.js"
/>
<script
src="1.19.5/jquery.validate.js"
/>
</head>tomemos nuestro formulario en la cloudpage.
<form action="https://cloud.my.domain.com/thankyou-page" id="myForm">
<input type="text" name="firstName" id="firstName" placeholder="Nombre">
<input type="text" name="email" id="email" placeholder="Email" required>
<input type="submit" value="Enviar">
</form>Después de la etiqueta </form> incluiremos la validación del formulario
$( "#myForm" ).validate({
rules: {
firstName: {
required: true
}
email: {
required: true,
email: true,
remote: {
url: https://cloud.my.domain.com/email-validator.json",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
}
}
});Y ahora en nuestro code resource email-validator.json incluimos nuestra búsqueda de ampscript.
%%[
SET @RecordsDE = "RegistrosPromo"
SET @email = RequestParameter("Email")
SET @Rows = LookUpRows(@RecordsDE, "email", @email)
SET @RowCount = RowCount(@Rows)
IF @RowCount > 0 THEN
SET @new = 'FALSE'
ELSE
SET @new = 'TRUE'
ENDIF
OUTPUT(@exists)
]%%Y voilá! Con eso tendremos una validación de forma que si el correo ya está registrado aparecerá un mensaje de error y no permitirá continuar con el envío del formulario.
Extendiendo la funcionalidad
Hay muchas formas de extender la funcionalidad de este sencillo código.
- Puedes tener un code Resource JSON genérico para todas tus cloudpages y DEs, agregando un parámetro a la solicitud post que incluya el nombre de la DE en la que quieres validar los registros y utilizando ese parámetro en la función de AMPscript
- Puedes agregar mensajes de error personalizado para los casos en los que el registro ya exista e invitar al usuario a tomar acciones específicas si ya está registrado
- Puedes agregar más detalles a verificar con una situación similar, por ejemplo si es un registro con invitación, agregar el código de invitación en un campo y validar que el campo exista en tu registro de invitaciones (otra DE) para que solo los usuarios con un código de invitación válido se puedan registrar.
- Y muchos más!
Cuéntame si tienes ganas de saber más en los comentarios 🙂
