Plugin jQuery : FormToWizard, vos formulaires étapes par étapes

Vous avez un long formulaire. Trop long ?

Alors FormToWizard est le plugin qu’il vous faut !

Celui-ci va séparer votre formulaire en autant de partie qu’il y a d’éléments fieldset et donc permettre un affichage étape par étape de votre formulaire.

Comment ca marche ?

Vous prenez le formulaire suivant :

[html]
<form id="SignupForm" action="">
<fieldset>
<legend>Votre compte</legend>

<p><label for="login">Login</label>
<input id="login" name="login" type="text" /></p>

<p><label for="password">Mot de passe</label>
<input id="password" name="password" type="password" /></p>
</fieldset>
<fieldset>
<legend>Vos informations</legend>

<p><label for="email">Email</label>
<input id="email" name="email" type="text" /></p>

<p><label for="age">Age</label>
<input id="age" name="age" type="text" /></p>
</fieldset>
<div>
<input type="submit" value="Valider" />
</div>
</form>
[/html]

Et le javascript suivant :

[javascript]
<script type="text/javascript>src="formToWizard.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#SignupForm").formToWizard();
});
</script>
[/javascript]

Et vous obtenez visuellement deux formulaires au lieu d’un ! (Aucun enregistrement après l’étape 1 !)

Des boutons Back et Next permettent de naviguer dans les différentes étapes.

Intéressent comme idée non ?

Le téléchargement du plugin ainsi que la démo sur le site officiel.

Lien :

• webform wizard jquery