Este tutorial utiliza ChronoForms, una extensión muy popular para Joomla!, para explicar cómo puedes integrar nuestra Consent Database con tus formularios de Joomla!. Si estás utilizando otra extensión, este tutorial también puede serte útil, ya que la forma de implementación es generalmente la misma.
Para utilizar la Consent Database con ChronoForms, tendrás que usar el método de implementación de JavaScript.
En resumen, tienes que:
id necesarias; yPara empezar, copia el código que encontrarás en Consent Database > Integrar > JavaScript.
A continuación, pega este código dentro del head de todas tus páginas. Puedes hacerlo a través de uno de los siguientes métodos:
head entrando en Extensions > Plugins > System – Headtag > Menu Item Tags y pega el script de la Consent Database.
Una vez que hayas añadido el código de la Consent Database en el head de tu web, accede a tu dashboard de Joomla! y crea un formulario (por ejemplo, “contacto”) usando la extensión ChronoForms.
Si ya estás utilizando ChronoForms en tu web, simplemente entra en tu página de resumen de formularios (Components > ChronoForms6) y haz clic en el formulario que te gustaría integrar con la Consent Database.
Aquí tienes el formulario de contacto que vamos a utilizar en nuestro ejemplo de implementación (nombre, dirección de correo electrónico, mensaje y suscripción a la newsletter):
En ChronoForms, tendrá este aspecto:
Una vez que hayas definido el área de tu formulario, tendrás que personalizar el formulario para mapear sus diversas entradas de forma que la Consent Database pueda identificar y extraer la información proporcionada por tus usuarios en los distintos puntos de entrada.
Para hacer el mapeo, puedes utilizar la función load (o submit) con el objeto map. Para que la función load/submit funcione, necesitarás:
id para el elemento form;subject y preferences;id para el elemento submit;a. Haz clic en el icono de ajustes al lado del área de formulario y añade un id a tu formulario:
b. De forma similar al “Form ID”, añade un id a los campos de texto (en nuestro ejemplo, nombre, email y mensaje):
Y a las casillas de verificación (en nuestro caso, “generic” y “newsletter”):
Para una casilla de verificación obligatoria como la “generic” anterior, asegúrate de:
#contact-submit, tal y como se indica en la configuración general del botón de envío): 
c. Por último, añade también un id al botón de envío:
Puede que también quieras añadir un mensaje de confirmación para que se muestre a tus usuarios una vez que hayan completado el formulario (submit > Actions):
Guarda los cambios y asegúrate de que tu formulario se publique.
Si estás modificando un formulario ya existente de tu sitio web, salta a la siguiente sección, de lo contrario (si acabas de crear el formulario), copia el código generado por ChronoForms:
{chronoforms6}contact{/chronoforms6}Y pégalo en una página de tu web (por ejemplo, “Ponte en contacto con nosotros”).
Ahora que tu formulario está preparado, debes asegurarte de que envía la información a la Consent Database cuando el usuario lo rellena y lo envía. Hay dos maneras de hacerlo:
load te permite enviar los datos de la Consent Database a las API de iubenda asincrónicamente;submit te permite enviar los datos de la Consent Database a las API de iubenda sincrónicamente.La función load te permite vincular campos del objeto consent a los campos de entrada de tu <form> y registrar automáticamente el consentimiento, ya sea configurando una función de activación en submitElement: o mediante programación a través de un activador dedicado.
De forma predeterminada, este método escribe en localStorage para protegerte de cualquier pérdida de datos en caso de que se cargue una nueva página antes de que JavaScript haya terminado de ejecutarse.
La función load tan solo se debe invocar después de la declaración del objeto form (tal y como se puede ver en el ejemplo a continuación).
Aquí está la función load con el objeto map:
<script>
_iub.cons_instructions.push(["load", {
submitElement: document.getElementById("contact-submit"),
form: {
selector: document.getElementById("contact-form"),
map: {
subject: {
first_name: "name",
email: "email"
},
preferences: {
generic: "generic",
newsletter: "newsletter"
}
}
},
consent: {
legal_notices: [{
identifier: "privacy_policy",
},
{
identifier: "cookie_policy",
}
],
}
}])
</script>Ten en cuenta lo siguiente en relación con el código anterior:
contact-submit y contact-form;first_name y email subject mapeo (recuerda que tienes cuatro opciones no editables disponibles: first_name, last_name, full_name y email);generic y newsletter);legal_notices, que son en gran medida automáticos si sincronizas tus documentos legales de iubenda con la Consent Database (simplemente usa los identificadores estándar privacy_policy y cookie_policy).Asegúrate de incluir el método load después del formulario (por ejemplo, dentro del pie de página de tu página de contacto), ¡y listo!
Una vez que hayas recopilado tus consentimientos, podrás ordenar y analizar tus datos en el dashboard de la Consent Database.
Consulta la documentación de JS para obtener más información sobre el método load.
El método submit te permite enviar los datos de la Consent Database a las API de iubenda sincrónicamente.
Ten en cuenta que este método no funcionará si hay una redirección después de enviar el formulario.
<script>
document.getElementById("contact-submit").onclick = function() {
sendToConsentSolution()
};
function sendToConsentSolution() {
var inputName = document.getElementById("name").value;
var inputEmail = document.getElementById("email").value;
var inputMessage = document.getElementById("message").value;
var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-'); //optional
_iub.cons_instructions.push(["submit", {
form: {
selector: document.getElementById("contact-form"),
map: {
subject: {
first_name: "name",
email: "email"
},
preferences: {
generic: "generic",
newsletter: "newsletter"
}
}
},
consent: {
subject: {
id: subjectId
},
legal_notices: [{
identifier: "privacy_policy"
},
{
identifier: "cookie_policy"
}
]
}
}])
}
</script>Ten en cuenta lo siguiente en relación con el código anterior:
contact-submit y contact-form;first_name y email subject mapeo (recuerda que tienes cuatro opciones no editables disponibles: first_name, last_name, full_name y email);generic y newsletter);legal_notices, que son en gran medida automáticos si sincronizas tus documentos legales de iubenda con la Consent Database (simplemente usa los identificadores estándar privacy_policy y cookie_policy);subjectId con la dirección de correo electrónico, por ejemplo, del asunto, todo en minúsculas y con el símbolo “-” en lugar de “.” y “@” (de esta manera para john.doe@iubenda.com el subjectId se convertiría en john-doe-iubenda-com).Asegúrate de incluir el submit método después del formulario (por ejemplo, dentro del pie de página de tu página de contacto), ¡y listo!
Una vez que hayas recopilado tus consentimientos, podrás ordenar y analizar tus datos en el dashboard de la Consent Database.
Consulta la documentación de JS para obtener más información sobre el método submit.