Création de formulaires en plusieurs étapes

J’ai cherché un moyen de créer un formulaire en plusieurs étapes, tel que: http://planner.builtbybuffalo.com/step-1/

Je ne pouvais pas trouver de ressources, juste d’autres exemples, celui que j’essaie de créer sera un processus en 3 parties. Je vais construire cela dans jQuery.

Je peux comprendre comment aller d’une étape à l’autre, d’un fondu enchaîné, etc. Mais avoir un marqueur change et dit quelle étape.

Pensées?

Essayez ce blog de Janko

“Transformez n’importe quel formulaire Web en un puissant assistant avec jQuery (plugin FormToWizard)”

Voici sa démo .

Je n’ai pas utilisé ce plugin de sa part, mais je sais qu’il a de très bons messages que j’ai utilisés par le passé.

J’espère que ça aide.

MODIFIER:

J’ai récemment utilisé ce plugin et cela a très bien fonctionné. C’était simple à utiliser et facile à modifier pour répondre à mes besoins spécifiques.

On dirait que les étapes sur la timeline sont espacées de manière égale. Cela peut être aussi simple que de multiplier le nombre de pas par la largeur et de le diviser par le nombre de pas pour obtenir la distance que le marqueur doit parcourir. Utilisez ensuite jQuery.animate pour animer la position du marqueur.

Sandro

Vous avez ici un exemple simple et complet en trois étapes, sans avoir besoin de jQuery.

Il vous suffit de définir la fonction submit_form() . Les caractères HTML « et » il suffit d’imprimer respectivement «et», ce qui pourrait être intéressant pour les caractères des boutons précédents et suivants.

 function shows_form_part(n){ var i = 1, p = document.getElementById("form_part"+1); while (p !== null){ if (i === n){ p.style.display = ""; } else{ p.style.display = "none"; } i++; p = document.getElementById("form_part"+i); } } function submit_form() { var sum = parseInt(document.getElementById("num1").value) + parseInt(document.getElementById("num2").value) + parseInt(document.getElementById("num3").value); alert("Your result is: " + sum); } 
  
Part 1

Part 2

Part 3