Hola colega!

No has probado de pasar el link del formulario a ChatGPT y pedirle "que codigo debo agregar a mi web para que debajo de la barra de progreso se muestre para cada paso un numero blanco sobre un circulo naranja de XX pixeles de diametro, y necesito agregar el codigo mediante WebSite X5"

Yo he probado cosas asi y el codigo que devuelve ChatGPT me ha funcionado perfectamente.

Te comento esto, ya que es mucho mas rapido que esperar una respuesta por aqui si tienes urgencia por la solucion. (yo no te puedo ayudar mucho ya que tampoco se de desarrollo web jejee).

Prueba y nos comentas como te ha ido!

Saludos!

Carlos A.

Hola CARLOS AMARAL

Nunca he utilizado ChatGPT ni otra ia, pero lo intentaré y si resulta, aquí lo publico.

Mientras tanto a ver si  ‪ KolAsim

o alguien más me puede ayudar.

Gracias por tu sugerencia.

Hola, lo que puedo hacer sin tener que rediseñar todo es simplemente agregar números simples debajo de la barra agregando este código:

<script>
$(document).ready(function () {//K>;
setTimeout(function () {//K1>;
const KX = $("fieldset.newPage");
kkX = KX.length+1;
percentualeK = 100/kkX;
for(var i = 0, TotK = KX.length; i < TotK+1; i++){//K2>;
$("hr").parent().append( '<div class = "divK" style = "position:absolute;top:20px;left:' + percentualeK * (i+1) +'%;margin-left:-20px"> ('+(i+1)+') </div>' ) ;
};//K2<<;
},3000);//K1<<;
});//K<<;
<script>

,

ciao

...............................

...cuando tenga tiempo le echaré un vistazo más de cerca y te lo haré saber...

.

...tómalo a ciegas, ¡te parezca bien o no!
...reemplaza el código anterior de tu página por este:
<script>
/** -- barra avanzamento modulo contatti bis x WSx5 by KolAsim -- **/
$(document).ready(function () {
objectFormK = "#imObjectForm_3_form";
/**K**/const styleK = '<style>' + '.divK{background:#ddd;color:#000;transition:all .3s ease;}' + '.divK.active{background:red !important;color:#fff !important;}' + '.divK.done{background:green !important;color:#fff !important;}' + '</style>'; $("head").append(styleK); setTimeout(function () { const K = $("fieldset.newPage"); const totStepK = K.length + 1; const percentualeK = 100 / totStepK; /**K**/ const hrK = ` <div style="position:relative;width:100%;height:20px;background:lavender;"> <hr id="hrK" style="position:absolute;left:0;height:6px;background:navy;width:${percentualeK}%;"> </div>`; $(objectFormK).prepend(hrK); /**K**/ for (let i = 0; i < totStepK; i++) { $("hr").parent().append( '<div class="divK" data-index="' + i + '" ' + 'style="position:absolute;top:20px;left:' + (percentualeK * (i + 1)) + '%;margin-left:-20px;width:30px;height:30px;line-height:30px;' + 'text-align:center;border-radius:50%;">' + (i + 1) + '</div>' ); } /**K**/ function verificaK() { let currentIndex = 0; K.each(function (i) { if ($(this).css('display') === 'block') { const pageCount = parseInt($(this).attr("pagecount"), 10); if (!isNaN(pageCount)) { $("#hrK").css("width", (pageCount * percentualeK) + "%"); currentIndex = i; } } }); /**K**/ $(".divK").removeClass("active done"); $(".divK").each(function () { const idx = parseInt($(this).data("index"), 10); if (idx < currentIndex) { $(this).addClass("done"); } }); $('.divK[data-index="' + currentIndex + '"]').addClass("active"); if ($(objectFormK+'_prev').is(':hidden')) { $("#hrK").css("width", percentualeK + "%"); $('.divK').removeClass("active done"); $('.divK[data-index="0"]').addClass("active"); } } /**K**/ $(`${objectFormK}_prev, ${objectFormK}_next`).on("click", () => setTimeout(verificaK, 600)); verificaK(); }, 2000); let invioConsentito = false; document.addEventListener("click", function (e) { const btn = document.querySelector(objectFormK + '_submit'); if (e.target === btn && !invioConsentito) { e.preventDefault(); e.stopImmediatePropagation(); $('.divK').addClass("done"); btn.disabled = true; setTimeout(function () { invioConsentito = true; btn.disabled = false; btn.click(); }, 1000); } }, true);/*K*/});
</script>

...................................

ciao

.

Ok  ‪ KolAsim ‪

Lo reemplazo el código y te comentaré.

Gracias. -

Hola ‪ KolAsim ‪

Casi está bien.

En el paso-1 que es la primera parte, el número 1 en color rojo, Ok.

En el paso-2, después de dar clic en el botón SIGUIENTE, el número 1 debe de estar ya en color verde y el número 2 en debe estar ya en color rojo.

En el paso-3, después de dar clic en el botón SIGUIENTE, el número 1 debe de estar ya en color verde Ok, y el número 2 también en color verde. Y el número 3 ya debe estar en color rojo.

En el paso-4 que es la última sección antes de dar clic en el botón ENVIAR, el número 1 debe de estar ya en color verde Ok, y el número 2 también en color verde Ok. Entonces el número 3 ya debe estar también en color verde y el número 4 ya debe de estar en color rojo. Después se da clic en el botón ENVIAR y se direcciona a la página de inicio.

¿Me puedes ayudar pór favor?

Ojalá que sí. Muchas gracias.

Saludos.

ciao, ...Quizás olvidé una función...
...Lo rediseñé directamente en tu página web...
...Pruébalo y, si no funciona, vuelve al código anterior...
...Para probarlo, borra el código anterior y aplica este nuevo:

-----------------------------------------------
<script>
/** -- barra avanzamento modulo contatti ter x WSx5 by KolAsim -- **/
$(document).ready(function() {
const formK = "#imObjectForm_3_form"; /** <<<<<<<< **/
/**========K========**/
const $formK = $(formK); const $primaschedaK = $("fieldset.first"); const $secondeschedeK = $("fieldset.newPage"); const $TutteSchedeK = $primaschedaK.add($secondeschedeK); const TotSchedeK = $TutteSchedeK.length; const percentualeK = 100 / TotSchedeK; if(TotSchedeK === 0) return; const $BarraHRK = $(` <div style="position:relative; width:100%; height:20px; background-color:lavender; margin-bottom:10px;"> <hr id="hrK" style="position:absolute; left:0; top:0px; background-color:navy; height:6px; width:${percentualeK}%;"> </div> `); $formK.prepend($BarraHRK); /**K**/ $TutteSchedeK.each(function(i) { const PercRelativaK = percentualeK * (i + 1); const $circleK = $(` <div class="stepCircleK" style=" position:absolute; top:-5px; margin-left:-16px; left:${PercRelativaK}%; transform: translateX(-50%); width:30px; height:30px; border-radius:50%; background-color:yellow; border: 2px solid navy; display:flex; align-items:center; justify-content:center; font-weight:bold; transition: background-color 0.3s, color 0.3s; "> ${i + 1} </div> `); $BarraHRK.append($circleK); }); /**K**/ function getCurrentIndex() { let $schedaK = $TutteSchedeK.filter(".current"); if($schedaK.length === 0) $schedaK = $TutteSchedeK.filter(":visible").first(); return $TutteSchedeK.index($schedaK); } /**K**/ function controlloK() { let currentIndex = getCurrentIndex(); if(currentIndex === -1) currentIndex = 0; /**K**/ $("#hrK").css("width", percentualeK * (currentIndex + 1) + "%"); $(".stepCircleK").css({ "background-color": "yellow", "color": "red" }); $(".stepCircleK").eq(currentIndex).css({ "background-color": "red", "color": "white" }); } /**K**/ controlloK(); /**K**/ $(formK + "_prev, " + formK + "_next").click(function() { setTimeout(controlloK, 150); }); /**K**/ const observerK = new MutationObserver(controlloK); $TutteSchedeK.each(function() { observerK.observe(this, { attributes: true, attributeFilter: ['class', 'style'] }); }); /*K*/});
</script>

..............................

ciao

.

es2_274732

Hola  ‪ KolAsim ‪ ‪

Borré el código anterior y apliqué el nuevo. ¡FUNCIONA MUY BIEN!

Muchas gracias.

Saludos.

... en linea veo que el anterior sigue ahi, en fin si te funciono pues ok... chao, ciao