Build a Multi-Step Form Interface Table availability is web design a very important issue. As one of the main input interface to the user, the form is the availability of a good user experience is essential.

Today, we want to establish a multi-part forms, complete validation and animation. We will cover a lot of reasons, so buckle up!
to form a high-level best practices
Availability barriers form the interface design minefiled. Before we begin, let’s talk about some form of best practices.
Do not let your users find it too hard
Generally do not encourage local unique form of interaction. Good form a clear navigation and full transparency. Good form and labeled for easy operation.
Do not be too fancy
It is not too far from the default form of behavior deviate very important. There is the basis for the standard form of the default behavior. Deviation from these standards are likely to negatively impact on the accessibility of the environment, so consider where possible to keep these default styles.
Remember, users do not have to stay
User form does not stay. They chose to stay . Fill out the form is a chore, it can be very easy. ( ! If possible , it ‘s fun ) Do not confuse or from the user’s needs ; on the contrary , the issues surrounding the establishment of the proposed form of a dialogue . Be polite .
When using multi-stage technology
Multi-segment form is certainly a good technology, sometimes . There is not a ” how much input before I should split it take the form of ” an answer. Instead, always consider whether to split the form into the separate parts will help or hinder usability. Next, consider whether it helps or hinders the other aspects of interaction design .
If you have a very different forms part , it may be worth separated into a plurality of portions. Checkout process is a common example . ( Personal information , shipping information , payment information , and confirmation is very obvious , a substantial part of the general . )
Planner Interactive
We’re going to create a signup form with arbitrary fields. We need to know what section we are currently on, so we’ll need an indicator at the top of the form. We want to transition our form sections horizontally, sliding from right to left. To accomplish this, we will set the different sections to have absolute positioning inside a section “window” element. We also want to have two buttons; one is the normal submit button. The other is a “next section” button.

Here’s our form:

<form id="signup" action="somewhere" method="POST">
<ul id="section-tabs">
<li class="current active"><span>1.</span> Creds</li>
<li><span>2.</span> Deets</li>
<li><span>3.</span> Settings</li>
<li><span>4.</span> Last Words</li>
 </ul>
<div id="fieldsets">
<fieldset class="current">
    <label for="email">Email:</label>
    <input name="email" type="email" class="required email" />
    <label name="password" for="password">Password:</label>
    <input type="password" minlength="10" class="required">
  </fieldset>
<fieldset class="next">
    <label for="username">Username:</label>
    <input name="username" type="text">
    <label for="bio">Short Bio:</label>
    <textarea name="bio" class="required"></textarea>
  </fieldset>
<fieldset class="next">
    <label for="interests">Basic Interests:</label>
    <textarea name="bio"></textarea>
Receive newsletter?
      <input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label>
      <input type="radio" name="newsletter" value="no"><label for="newsletter">no</label>
    </fieldset>
<fieldset class="next">
    <label for="referrer">Referred by:</label>
    <input type="text" name="referrer">
    <label for="phone">Daytime Phone:</label>
    <input type="tel" name="phone">
  </fieldset>
<a class="btn" id="next">Next Section ▷</a>
  <input type="submit" class="btn">
  </div>
</form>

The markup is fairly straightforward, but let’s talk about a few pieces of it.

  • Fieldsets: Fieldsets are a semantic element for grouping inputs; this suits our situation perfectly.
  • Classnames: jQuery Validate uses classes to define built-in types. We’ll see how this works in a minute.
  • The fields are arbitrary. We’ve wrapped the radio inputs in a paragraph tag for easier formatting.
  • Submit and next buttons: the anchor tag with a class of button will be used to go to the next section. The submit input will show when appropriate via JavaScript.

This is long, get ready..

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:700);
 
 
body {
  background: url(http://farm5.staticflickr.com/4139/4825532997\_7a7cd3d640\_b.jpg);
  background-size: cover;
  height: 100%;
  font-family: 'Merriweather Sans', sans-serif;
  color: #666;
}
 
#signup {
  width: 600px;
  height: auto;
  padding: 20px;
  background: #fff;
  margin: 80px auto;
  position: relative;
  min-height: 300px;
}
#fieldsets {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea {
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 8px;
  margin-bottom: 8px;
  position: relative;
  &:focus {
    outline: none;
    border: 1px solid darken(#2cbab2,10%);
  }
}
 
input[type=radio]{
  margin: 6px;
  display: inline-block;
}
fieldset {
  border: none;
  position: absolute;
  left: -640px;
  width: 600px;
  padding: 10px 0;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  opacity: 0;
  &.current {
    left: 20px;
    opacity: 1;
  }
  &.next {
    left: 640px;
  }
}
input[type=submit] {
  display: none;
  border: none;
}
#section-tabs {
  font-size: 0.8em;
  height: 50px;
  position: relative;
  margin-top: -50px;
  margin-bottom: 50px;
  padding: 0;
  font-weight: bold;
  list-style: none;
  text-transform: uppercase;
  li {
    color: #a7a7a7;
    span {
      color: #bababa;
    }
    cursor: not-allowed;
    &.active {
      color: #444;
      cursor: pointer;
    }
    border-left: 1px solid #aaa;
    text-decoration: none;
    padding: 0 6px;
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    background: #ddd;
    position: relative;
    &:after {
      content: "";
      display: block;
      margin-left: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
    &.current {
      opacity: 1;
      background: #fff;
      z-index: 999;
      border-left: none;
      &:after {
        border: 15px solid transparent;
        border-left: 15px solid #2cbab2;
      }
    }
  }
}
.error {
  color: #bf2424;
  display: block;
}
input.error, textarea.error {
  border-color: #bf2424;
  &:focus {
    border-color: #bf2424;
  }
}
label.error {
    margin-bottom: 20px;
}
input.valid {
  color: green;
}
label.valid {
  position: absolute;
  right: 20px;
}
input+.valid, textarea+.valid {
  display: none;
}
.valid+.valid {
  display: inline;
  position: absolute;
  right: 10px;
  margin-top: -36px;
  color: green;
}
 
.btn {
  border: none;
  padding: 8px;
  background: #2cbab2;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  &:hover {
     background: darken(#2cbab2, 6%);
  }
  color: #fff;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: 'Merriweather Sans', sans-serif;
}

Let’s walk through the important part of the styles.

Overview
The form itself is set to a specific width, centered margin: 0 auto, then set position: relative. This positioning allows the child with respect to the element that contains the form of absolute positioning absolute place. Having held in the form of three main types of elements: some labels and fields set a “window”, and buttons.

This section tag is placed opposite to the element contained and “pull” a negative top margin. We compensating affect the rest of the layout is equal to the balance on the bottom.

Field set “window” is set to be positioned absolute, relative to the parent in the form of elements. Width and height are set to 100%. The purpose of this window is to accommodate the element, and then hide them, they fell in love with the outer edge of the overflow: hidden. Because we want to keep the label instructions, we can not do that on the form.

Finally, the button element (an anchor tag and a submit input) style is positioned to the bottom right of absolute form from the bottom and right side of the 20 pixel offset. We have also added a simple CSS transition to hover button element dimmed background.

A few notes
Field set is set to position: absolute. We have two classes of two states, and the default status. By default set to pull off the field to the left side of the form; .current class field set in the visible region of the form into the final. Next set of fields close analogy in the form of rights.
The current class has opacity 1; the default value (. And the inherent Next) status is 0 transparency.
Those of us animation class field set with a simple CSS conversion between.
The .error and .valid course will help validate modeling. We use Merriweather III, for free by Font Google web fonts used.

 ad

Our basic strategy : set up some form of validation rules , including the custom function to check the phone number. We want users to be able to navigate back through the completion of the previous section . We want them to be able to use the Enter key to move to the next section ; however , we do not want , until the front part is done , the user effectively advance to the subsequent chapters.

If a user attempts to click on the tab beyond those they have completed one , we want to avoid to navigate to that section.

We should rely on the class ( instead of jQuery animations ) switching between states.

So , these things in mind, here is the final JavaScript. ( Note: If you are not in your jQuery, it might be a little scary, but stick with it anyway , you will learn to dive through the code ) complete script , we’ll catch one at a time, and explain how this is going .

$("#signup").validate({
  success : function(label){
    label.addClass("valid").text("✓");
  },
  error : function(e){
  // do nothing, but register this function
  },
  onsubmit:false,
  rules: {
    phone: {
      required: true,
      phoneUS: true
    }
  }
});
 
$("body").on("keyup", "form", function(e){
  if (e.which == 13){
    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
      e.preventDefault();
      nextSection();
      return false;
    }
  }
});
 
 
$("#next").on("click", function(e){
  console.log(e.target);
  nextSection();
});
 
$("form").on("submit", function(e){
  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){
    e.preventDefault();
  }
});
 
function goToSection(i){
  $("fieldset:gt("+i+")").removeClass("current").addClass("next");
  $("fieldset:lt("+i+")").removeClass("current");
  $("li").eq(i).addClass("current").siblings().removeClass("current");
  setTimeout(function(){
    $("fieldset").eq(i).removeClass("next").addClass("current active");
      if ($("fieldset.current").index() == 3){
        $("#next").hide();
        $("input[type=submit]").show();
      } else {
        $("#next").show();
        $("input[type=submit]").hide();
      }
  }, 80);
 
}
 
function nextSection(){
  var i = $("fieldset.current").index();
  if (i < 3){ $("li").eq(i+1).addClass("active"); goToSection(i+1); } } $("li").on("click", function(e){ var i = $(this).index(); if ($(this).hasClass("active")){ goToSection(i); } else { alert("Please complete previous sections first."); } }); jQuery.validator.addMethod("phoneUS", function(phone_number, element) { phone_number = phone_number.replace(/\s+/g, ""); return this.optional(element) || phone_number.length > 9 &&
    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

So, let’s go piece by piece.

$("#signup").validate({
  success : function(label){
    label.addClass("valid").text("✓");
  },
  error : function(e){
  // do nothing, but register this function
  },
  onsubmit:false,
  rules: {
    phone: {
      required: true,
      phoneUS: true
    }
  }
});

This function jQuery validation setting function. First, we tell the plugin registration form and take it to verify the application . If authentication is successful , we add a class to effective verification element inserted into the card label after the input , and replaced with UTF-8 check ✓ text.

We have also registered an error correction, but we did not actually do anything like this in this function . Unregistered callback function seems to have the same success as a function of the error. We set onsubmit hook is false; this is because the form is submitted automatically by default will trigger authentication to prevent invalid form submission . The default behavior prevents forms submitted does not prevent form validation . As a result , the “next ” field on the screen has been shown validation error , even though the form was never submitted

$("body").on("keyup", "form", function(e){
  if (e.which == 13){
    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
      e.preventDefault();
      nextSection();
    }
  }
});

This feature listens keyUp event triggered form . If you are hit, the key is input ( key code 13 ) , then we make the following checks. If the Next button is still visible , the current section is valid, the Enter key and forms of prevention , which is the default behavior of the form submission pressed .

We then call nextSection (), in the form it proceeds to the next section. If the current section contains any invalid inputs, which are not identified and form forward . If the Next button is not visible , it means that we ( we will look at the follow-up function ) in the last one , we want to allow the occurrence of default behavior ( form submission ) .

$("#next").on("click", function(e){
  nextSection();
});
 
$("form").on("submit", function(e){
  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){
    e.preventDefault();
  }
});

These functions are straightforward. If you press the button with the id of “next”, we want to advance to the next section. Remember the nextSection() function contains all necessary checks for form validation.

On the submit event on the form, we want to avoid form submission if the next button is visible or if the current fieldset isn’t the last one.

function goToSection(i){
  $("fieldset:gt("+i+")").removeClass("current").addClass("next");
  $("fieldset:lt("+i+")").removeClass("current");
  $("li").eq(i).addClass("current").siblings().removeClass("current");
  setTimeout(function(){
    $("fieldset").eq(i).removeClass("next").addClass("current active");
      if ($("fieldset.current").index() == 3){
        $("#next").hide();
        $("input[type=submit]").show();
      } else {
        $("#next").show();
        $("input[type=submit]").hide();
      }
  }, 80);
 
}

The goToSection () function is the main force behind this form of navigation . It takes one parameter – the target navigation index. Index all the fields set greater than the index of the function parameter passing , and delete the current class , and adds the next one. This push element in the form of rights.

Next, all of our fieldsets with index less than the index passed to remove the current class . Next, we select the list item and add a transfer equal to the index of the current class .

Then we remove the current class from all the other brothers and sisters LIS. We set a timeout , after which we will remove the next class , and current and active classes, the index is equal to an argument index added to the set of fields .

Let us know what activity class , the user can navigate to this particular section again. If the index parameter passed is 3 ( the final set of fields ) , we hide under a button , and a submit button. Otherwise , we have to ensure that the next button is visible, the submit button is hidden. This allows us to hide , unless a last set of fields are visible submit button.

function nextSection(){
  var i = $("fieldset.current").index();
  if (i < 3){
    $("li").eq(i+1).addClass("active");
    goToSection(i+1);
  }
}
 
$("li").on("click", function(e){
  var i = $(this).index();
  if ($(this).hasClass("active")){
    goToSection(i);
  } else {
    alert("Please complete previous sections first.");
  }
});

The nextSection() function is basically a wrapper around the goToSection() function. When nextSection is called, a simple check is made to be sure that we are not on the last section. As long as we are not, we go to the section with an index that is equal to the index of the current section, plus one.

We are listening to the click event on the list items. This function checks to make sure the list item has the active class, which it receives once the user initially arrives to that section of the form by completing all previous sections. If the list item does have the class, we call goToSection and pass in the index of that list item. If the user clicks on a list item corresponding to a section they can’t access yet, the browser alerts them to let them know that they have to complete the previous sections before advancing.

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
  return this.optional(element) || phone_number.length > 9 &&
    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

Finally, we add the jQuery validation plugin manually check the input method specified. We will not spend so much time, because the precise function can be found in the verification document.

Essentially, we check to make sure that the user put into the text field of mobile phones regular expression (a long string of numbers and symbols) match. If so, then the input is valid. If not, the message “Please specify a valid phone number” is added after input. You can use this same functionality to check for any type of input (it does not use regular expressions).

Note: Do not use this as a password authentication method. This is very insecure, anyone can view the source code to see.

in conclusion

We use semantic HTML and simple LESS and some minimal JavaScript combined to create a powerful interactive features. This form is used to build, especially in the use of the class name to identify the state, and define the function and animation methods can be used in almost any interactive project. The same function can be used to demonstrate step-through, games, and anything else that depends on the interaction of simple state-based.

What else would you do in this form? Have you found what type of interaction to help users through a cumbersome process more natural flow, such as fill in the form of a long multi-step? To share their opinions!