Best practice for making a multi step form to post adds

Question

I am working on a post your free adds page.

Its a mobile website I am using JQM for the UI design.

My question is what would be the best pra

Answer 1

You can simply create several sections and navigate between them. I have created this for you, using JQuery, CSS and jQM's built-in transitions.

The idea is simply hide/show sections by swiping left and right. You can add validation before showing next section if you want. ⁽¹⁾

First of all, you need to create a "progress bar" on top of sections. I have used CSS3 flex since it is responsive and doesn't require too much code. It is straight-forward.

1. Progress bar

   • HTML

     <div class="ui-content" role="main">
       <div class="progress">
          <p>1</p>
          <div class="line"></div>
          <p>2</p>
          <div class="line"></div>
          <p>3</p>
          <div class="line"></div>
          <p>4</p>
          <div class="line"></div>
          <p>5</p>
        </div>
        <!-- sections here -->
     </div>
     

   • CSS

     .ui-content .progress {
         display: flex;
         display: -webkit-flex;
         flex-flow: row nowrap;
         -webkit-flex-flow: row nowrap;
         justify-content: space-around;
         -webkit-justify-content: space-around;
         width: 100%;
         background: skyblue;
         align-items: center;
         padding: .5em;
     }
     
     .ui-content .progress * {
         margin: 0;
     }
     
     .ui-content .progress p {
         background: lightblue;
         height: 22px;
         width: 22px;
         border-radius: 22px;
         text-align: center;
     }
     
     .ui-content .progress .line {
         border-top: 1px solid black;
         flex-grow: 1;
         -webkit-align-self: center; /* center line on mobile browsers */
         -ms-flex-item-align: center;
         align-self: center;
     }
     

2. Sections and their wrapper

   • HTML

     <div class="steps"> <!-- wrapper -->
       <div class="step">
         <!-- contents 1 -->
       </div>
       <div class="step">
         <!-- contents 2 -->
       </div>
       ...etc
     </div>
     

   • CSS

     .ui-content .steps {
        padding: 1em;
        width: 100%;
        height: 100%;
        overflow: hidden;
     }
     

3. General CSS

   .ui-page .ui-content {
      padding:0;
   }
   
   .ui-content * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   
   /* active step - progress bar */
   .progress .currentStep {
       background: tomato !important;
       font-weight: bold;
   }
   

4. jQuery

   $(document).on("pagecreate", "#wizard", function () {
       $(".step").not(":eq(0)").addClass("ui-screen-hidden");
       $(".step:eq(0)").addClass("active");
       $(".progress p:eq(0)").addClass("currentStep");
       $(".ui-content").on("swipeleft swiperight", function (e) {
           var swipe = e.type,
               nextStep = $(".steps").find(".active").next(".step"),
               prevStep = $(".steps").find(".active").prev(".step");
           switch (true) {
               case (swipe == "swipeleft" && nextStep.length > 0):
                   $(".step.active")
                       .toggleClass("slide out");
                   break;
               case (swipe == "swiperight" && prevStep.length > 0):
                   $(".step.active")
                       .toggleClass("slide out reverse");
                   break;
           }
       });
   }).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".step", function (e) {
       var elm = $(e.target);
       switch (true) {
           case (elm.hasClass("out") && !elm.hasClass("reverse")):
               $(elm).toggleClass("slide out ui-screen-hidden active");
               $(elm).next(".step").toggleClass("slide in active ui-screen-hidden");
               break;
           case (elm.hasClass("out") && elm.hasClass("reverse")):
               $(elm).toggleClass("slide out ui-screen-hidden reverse active");
               $(elm).prev(".step").toggleClass("slide in active reverse ui-screen-hidden");
               break;
           case (elm.hasClass("in") && !elm.hasClass("reverse")):
               elm.toggleClass("slide in");
               break;
           case (elm.hasClass("in") && elm.hasClass("reverse")):
               elm.toggleClass("slide in reverse");
               break;
       }
       var dot = $(".active").index();
       /* highlight all previous numbers */
       $("p:eq(" + dot + ")").prevAll("p").addBack().addClass("currentStep");
       $("p:eq(" + dot + ")").nextAll("p").removeClass("currentStep");
   });
   

5. Explanation

   On pagecreate, all sections will be hidden except for first one by adding ui-screen-hidden which is a built-in class in jQM display: none;. Also, .currentStep class will be added to first element "p" in progress bar.

   On swipeleft or swiperight, the code checks if active section has any sibling section before or after it. If true, it moves to that section, otherwise false.

   Navigating between sections uses jQM built-in transition, the same ones used for page transition. In this demo .slide is used, however, you can use any of jQM transitions. .in, .out and .reverse are also built-in transition classes, .out is added to active section, .in is added to next/prev section and .reverse combines both aforementioned classes in case you navigate to previous section.

   Listening Animation End event(s) animationend is used to remove .in, .out and .reverse, in addition to giving active section a .active class.

   Last block of code is used to update progress bar with the number of active section. ^Updated

Demo ⁽²⁾ - Code

^{(1) This example can be used also as a simple gallery carousel without the need to use plugins.}

^{(2) Tested on iPhone 5 - Safari & Chrome}