Webform to wizard est un plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset
. Les boutons Back et Next pour passer d’une partie à un autre sont ajoutés sans marquage supplémentaire au niveau de l’intégration.
Les balises HTML attendues sont :
<form id="SignupForm" action=""> <fieldset> <-- input fields --> </fieldset> <fieldset> <-- input fields --> </fieldset> <fieldset> <-- input fields --> </fieldset> </form>
L’appel du script :
$("#SignupForm").formToWizard();
C’est bien tout ca mais il y a pas mal de plugins dont l’intérêt est relatif quand même (comme celui ci).
Quel intérêt de faire ça en jQuery? Privilégier la facilité (relative on peut faire la même chose directement en html) mais alourdir la page.
Mon choix est fait.
C’est le premier commentaire que je laisse. j’aime ce blog j’y suis abonné. Bonne continuation!
@Spir — Les goûts et les couleurs 😉 C’est marrant par que parmi tous les scripts que je présente ici, Webform to wizard fait partie de ceux que j’ai le plus envie d’utiliser.
Je ne vois pas trop comment faire la même chose en html sans alourdir la page (et sans en créer d’autres, ce qui reviendrais à alourdir le site) mais je suis preneur des idées !
Tout dépend du formulaire. Si il est pas super lourd on peut le decouper en plusieur partie et faire un script jQuery (dégradable) pour faire le même effet.
En fait je suis plutot sceptique : qu’est ce qui est mieux faire un formulaire maison avec un petit script pour donner un effect sympa ou faire un formulaire comme ici avec le plugin. Le fait d’utiliser un plugin n’alourdit il pas la page.
Puisqu’un plugin se veut générique par définition il doit y avoir du code en trop, rien ne vaut un script maison optimiser pour le cas concret.
En fait je trouve que faire un plugin pour si peu c’est du gachi ou de la flemmardise. Ceci dit il y a des aspects positifs : la maintenance sans doute + facile a gérer.
@Spir — ce script ne créé pas le formulaire : il faut faire son formulaire normalement en prenant soin de séparer normalement les différentes parties du formulaire avec la balise fieldset et de mettre un identifiant à la balise form.
Une fois le formulaire maison est réalisé en HTML on peut (ou pas) appliquer le script.
Donc, il y a bien une dégradation gracieuse en l’absence de Javascript (enfin au moins aussi gracieuse que l’était le formulaire au départ) 😉
Mouais, ce sont des onglets (même si ici ils ne sont pas stylés en tant que tels).
jQuery UI fait ça depuis longtemps :
tabs
Mais Jquery UI est assez lourd…
Je lui préfère largement jQuery Tools qui propose déjà des onglets, et adapté à un form ça donne la même chose que ce qui est proposé ici :
form wizard
Et jQuery Tools en fait beaucoup plus, en plus la librairie est légère.
Bonjour,
Script intéressant mais le soucis c’est qu’il n’y a pas de gestion de champs obligatoires. S’il y a 3 Steps, on ne peut pas passer au Next que lorsque Name-Email-Password soient tous remplis par exemple!
Bonjour,
Pour moi c’est plutôt pas mal, sauf que l’on ne peut pas utiliser jQuery UI ! Autocomplete ne fonctionne pas, datepicker non plus…
Je ne peux donc pas l’utiliser, c’est vraiment dommage !
Oooops !
Ce que je viens de dire est faux !!
Toutes mes excuses, ça fonctionne très bien.
C’est génial !
Merci