<div class="wrapper">
  <form class="multi-form" action="#" method="POST">
    
    <h1>MultiForm / Stepform</h1>

    <fieldset class="active">
      <legend>First block</legend>
      <input type="text" placeholder="First Name" />      
    </fieldset>

    <fieldset>
      <legend>Second block</legend>
      <input type="text" placeholder="Last Name" />    
    </fieldset>
    
    <fieldset>
      <legend>Third block</legend>
      <input type="text" placeholder="Email" />      
    </fieldset>
    
    <div class="buttons">
      <a class="btn prev">Prev</a>
      <a class="btn next">Next</a>
      <button class="submit">Submit</button>
    </div>

  </form>
</div>
body {
    font-family: sans-serif;
}
.btn, .submit {
    font-size: 20px;
    line-height: 33.2px;
    font-weight: 700;
    color: #000;
    background-color: #a8ffcd;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px;
    transition: all .3s ease-in-out;
    width: 100%;
    max-width: 200px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}
form.multi-form {
  padding: 20px;
}
form.multi-form fieldset:not(.active) {
  display: none;
}
form.multi-form fieldset.active:first-of-type ~ .buttons .prev,
form.multi-form fieldset.active:first-of-type ~ .buttons .submit {
  display: none;
}
form.multi-form fieldset.active:not(:last-of-type) ~ .buttons .submit {
  display: none;
}
form.multi-form fieldset.active:last-of-type ~ .buttons .next {
  display: none;
}
$('form.multi-form a.next').click(function() {
  $('fieldset.active').removeClass('active')
  .next('fieldset').addClass('active');
});

$('form.multi-form a.prev').click(function() {
  $('fieldset.active').removeClass('active')
  .prev('fieldset').addClass('active');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js