Optimización de Experiencia de Usuario uniendo Formularios en forma de pasos con Web Builder.
En este tutorial te ayudaremos a integrar varios formularios distribuidos en distintos "pasos" para que den la apariencia que es un único formulario.
A continuación aprenderás cómo configurar cada formulario, obtener sus identificadores únicos, y ocultar o mostrarlos según corresponda utilizando código Javascript.
Pasos a seguir
1. Crear cada uno de los formularios que se desea utilizar.
2. Obtener el ID (identificador único) de cada formulario, que luego se utilizará. Esta información se obtiene haciendo click sobre el elemento formulario y presionando "Estilos" en el detalle del elemento a la derecha del editor Web Builder. Este ID se debe anotar para ser utilizado posteriormente.
Se debe configurar para que solo el último formulario tenga una acción luego que los datos se completen, se puede redireccionar a otra página o visualizar un popup. En el caso de los primeros formularios esta opción no debe estar seleccionada.
3. Si se desea que visualmente los formularios se muestren como si fuesen uno solo, se deben encimar uno formulario sobre el otro, para que queden todos juntos en una misma alineación.
Al mover cada elemento de formulario, el Web Builder te ayudará a alinearlos gracias a las guías de alineación, que visualizarás al mover el elemento.
4. Se deben ocultar los formularios que no deben visualizarse inicialmente, utilizando el "Árbol de contenido" se puede acceder a cada formulario y haciendo click en el ícono "ojo" se ocultará el formulario.
5. Se debe incorporar código Javascript para que interactúe con los formularios y visualice u oculte cada formulario luego que los datos se completen.
Para realizar esto, entre otras cosas, utilizaremos una variable general que se encuentre integrada con el Web Builder, y en el caso que esté definida, será ejecutada luego que los datos se envíen con éxito.
dcFncPageFormSubmitCallBack = function(elementId, data) {
...tu código aquí.
}
Para incorporar todas las funciones necesarias para el funcionamiento se debe crear un código javascript en el Web Builder.
Dentro del editor de Javascript se debe incorporar el siguiente código:
En la línea correspondiente "#Definir el orden de los formularios" se debe colocar un array con cada una de las posiciones que indican el orden de visualización de los formularios (0, 1, 2, 3...) y el ID de cada elemento formulario en el orden que deben visualizarse.
<script>
//Definir el orden de los formularios
var formsElement = [];
formsElement[0] = "dc-page-form-6";
formsElement[1] = "dc-page-form-13";
formsElement[2] = "dc-page-form-15";
function showNextForm(currentFormElementId, data) {
var index = formsElement.indexOf(currentFormElementId);
var nextFormElementId = false;
if(index > -1) {
index++;
var nextFormElementId = formsElement[index];
}
if(nextFormElementId) {
document.querySelector("#"+nextFormElementId+" #email").value = data.email;
document.getElementById(currentFormElementId).style.display = "none";
document.querySelector("#"+currentFormElementId+ " button").style.display = "block";
document.getElementById(nextFormElementId).style.display = "block";
document.querySelector("#"+nextFormElementId+ " button").style.display = "block";
document.getElementById(nextFormElementId).scrollIntoView();
}
}
dcFncPageFormSubmitCallBack = function(elementId, data) {
showNextForm(elementId, data);
}
</script>
Luego de pegar el código se debe presionar el botón "Guardar javascript".
6. Listo!, ahora solo te queda publicar tu página y probarla.
NOTAS:
- El campo email es un dato necesario en todos los formularios, por lo que será visualizado en cada formulario que incorpores, el código javascript lo autocompletará para evitar que el contacto debe ingresarlo nuevamente.
Si deseas puedes ocultar el email en los siguientes formularios, pero ten en cuenta que el espacio físico del elemento quedará y tal vez los otros inputs se vean más abajo, por ese motivo tal vez el campo email podría estar como último elemento, debajo de todo.
document.querySelector("#ID-FORMULARIO #container_email").style.display = "none";
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.