Barra de progreso en formulario de contacto 
Autor: LHNET SW
Visitado 256,
Seguidores 1,
Compartilhado 0
Hola, quiero agregar una barra de progreso en mi formulario de contacto.
Mi formulario está dividido en 4 secciones y se puede ver en:
Aquí unas imágenes de ejemplo como quiero que se vea el formulario:
La sección 1:
La sección 2 después de dar clic en siguiente:
La sección 3 después de dar clic en siguiente:
La sección 4, es la última:
Espero que me puedan ayudar.
De antemano muchas gracias
Publicado em
(It > Es) ...si te interesa y quieres usar código EXTRA, con un invento exclusivo mío podrías lograr un resultado similar a esta simulación, en cuyo caso házmelo saber...
.
ciao
.
Hola que tal...
Tu tienes acceso a cada una de las paginas del formulario en caso de que sean prearmadas?
O la separacion de secciones la haces por programacion?
Porque si tienes acceso a cada pagina por separado... simplemente puedes agregar arriba 4 celdas que las puedes pintar con dos colores simulando en cada pagina el avance de seccion (en la primer seccion pintas solo la primer celda de un color y las otras tres quiza de un gris clarito, en la segunda seccion pintas dos celdas, etc)
Saludos colega!
Carlos A.
2.15.1.0
Autor
Hola KolAsim
Sí me interesa tu invento con código extra, por supuesto. Me ayudas?
Gracias
...OK...mi invento relacionado con la página que enlazaste antes es este:
<script>
/** -- barra avanzamento modulo contatti x WSx5 by KolAsim -- **/
$(document).ready(function () {//K>;
setTimeout(function () {//K1>;
const K = $("fieldset.newPage");
kk = K.length+1;
percentuale = 100/kk;
const hrK = `
<div style="position:relative; width:100%; height:20px; background-color:lavender;">
<hr id="hrK" style="position:absolute; left:0; background-color:navy; height:6px; width:${percentuale}%;">
</div>`;
$("#imObjectForm_3_form").prepend(hrK);
$("#imObjectForm_3_form_prev, #imObjectForm_3_form_next").click(function () {//K2>;
setTimeout(verifica,600);
});//K2<<;
//-----------fK-----------------
function verifica() {//K3>;
let foundVisible = false;
K.each(function (i) {//K4>;
if ($(this).css('display') === 'block') {//K5>;
const pageCount = parseInt($(this).attr("pagecount"), 10);
if (!isNaN(pageCount)) {//K6>;
$("#hrK").css("width", (pageCount * percentuale) + "%");
foundVisible = true;
}//K6<<;
}//K5<<;
});//K4<<;
if (!foundVisible || $('#imObjectForm_3_form_prev').is(':hidden')) {//K7>;
$("#hrK").css("width", percentuale + "%");
}//K7<<;
}//K3<<;
},2000);//K1<<;
});//K<<;
</script>
-------------------------------------------------------
.
++
...mi código debe pegarse en el Paso_3 en las Propiedades de esa página, específicamente en esta sección:
>> Paso 3 - Mapa > Ventana 'Propiedades de la página' > Las opciones de la sección Avanzado >
▪Código personalizado: >> Antes del cierre de la etiqueta HEAD
.
ciao
.
Autor
Gracias KolAsim
Lo voy a probar y te aviso el resultado.
De nuevo gracias.
Saludos.
Autor
Hola CARLOS AMARAL
El formulario está hecho con el objeto FORMULARIO DE CONTACTO.
Y la separación de las secciones es porque dentro del formulario agregué un separador(es parte de las opciones del formulario de contacto) y está habilitada la opción de mostrar datos en un nuevo recuadro.
Entonces no puedo agregar las celdas porque solo se vería la primera constantemente.
Muchas gracias.
Saludos.
Autor
Hola KolAsim
Todo 100% bien y funcionando Ok.
Muchas gracias.
... Lo revisé... OK... adiós ... ciao ...
Autor
Algo mas KolAsim
Cómo puedo cambiar los colores de la barra?
el color lavender cambiarlo por el color rgb 172, 190, 220
y el otro color navy cambiarlo por rgb 32, 56, 100
Gracias
... ... sí, ... en las dos cadenas donde ves background-color:XXXXXX; ... puedes usar los valores que prefieras...
.
ciao
.
Autor
Excelente. Gracias KolAsim