WebCssDesign

Formwizzard jQuery Plugin

• Accueil
• Ajax
• Formwizzard jQuery Plugin

Besoin de faire des formulaires en plusieurs parties, alors cet plugin Formwizzard vous aidera grandement.

Formwizard est un plugin jquery qui peut convertir votre formulaire standard en un formulaire multi-part et vous permettra d’augmenter votre taux de transformation de saisie de formulaire, car selon les statistiques un formulaire trop long peut être une barrière pour l’utilisateur. Le fait de le convertir en plusieurs étapes permet de réduire cela.

Le formulaire sera donc découpé en plusieurs étapes afin de faciliter son remplissage par l’utilisateur.
Pour cela, il suffit seulement de tags spécifiques tels que: fistStep, secondStep, etc..
Exemple:

<form id="theForm" method="post" action="#">
       <div id="firstStep">
         <h1>step 1 - falls through to step 2 on next</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <div id="secondStep">
         <h1>step 2 - branch step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <select  >
           <option value="" >Choose the step to go to...</option>
           <option value="thirdStep" >Go to Step3</option>
           <option value="fourthStep" >Go to Step4</option>
         </select><br />
       </div>
       <div id="thirdStep">
         <h1>step 3 - submit step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value=""/><br />
       </div>
       <div id="fourthStep">
         <h1>step 4</h1>
         <input  type="text" value="" /><br />
         <input  type="text" name="email" /><br />
       </div>
       <div id="lastStep">
         <h1>step 5 - last step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <input type="reset" value="Reset" />
       <input type="submit" value="Submit" />
     </form>

Configuration:

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>

  <script type="text/javascript" src="js/jquery.form.wizard-2.0.0-RC.js"></script>

  <script type="text/javascript">
    $(function(){
      $("#theForm").formwizard({
        //form wizard settings
        historyEnabled : true,
        formPluginEnabled: true,
        validationEnabled : true},
       {
         //validation settings
       },
       {
         // form plugin settings
       }
      );
    });
  </script>

Associé avec le plugin jQuery Validation et jQuery Form il permet de valider les champs de saisies et apporté un plus à l’utilisateur lors de sa saisie.

Fonctionne avec la plupart des navigateurs web.
Site Web : http://thecodemine.org/