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

    <fieldset class="active">
      <legend>First Section</legend>
      
      <div class="row">
        <div class="small-12 columns">
          <label for="">12 columns</label>
          <input type="text" placeholder="12 columns" />
        </div>
      </div>
      
    </fieldset>

    <fieldset>
      <legend>Second Section</legend>
      
      <div class="row">
        <div class="small-12 medium-6 columns">
          <label for="">6 columns</label>
          <input type="text" placeholder="6 columns" />
        </div>
        <div class="small-12 medium-6 columns">
          <label for="">6 columns</label>
          <input type="text" placeholder="6 columns" />
        </div>
      </div>
      
    </fieldset>
    
    <fieldset>
      <legend>Third Section</legend>
      
      <div class="row">
        <div class="small-12 medium-4 columns">
          <label for="">4 columns</label>
          <input type="text" placeholder="4 columns" />
        </div>
        <div class="small-12 medium-4 columns">
          <label for="">4 columns</label>
          <input type="text" placeholder="4 columns" />
        </div>
        <div class="small-12 medium-4 columns">
          <label for="">4 columns</label>
          <input type="text" placeholder="4 columns" />
        </div>
      </div>
      
    </fieldset>
    
    <div class="buttons">
      <a class="button secondary prev left">Prev</a>
      <a class="button secondary next right">Next</a>
      <button class="submit right">Submit</button>
    </div>

  </form>
</div><!-- /.row -->
.wrapper {
  width: 900px;
  max-width: 100%;
  margin: auto;
}

form.multi-form {
  padding: 20px;
  
  fieldset:not(.active) {
    display: none;
  }
  
  fieldset.active:first-of-type ~ .buttons {
    .prev,
    .submit {
      display: none;
    }
  }
  fieldset.active:not(:last-of-type) ~ .buttons {
    .submit {
      display: none;
    }
  }
  fieldset.active:last-of-type ~ .buttons {
    .next {
      display: none;
    }
  }
}
View Compiled
$('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

  1. //cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css

External JavaScript

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