Menu icon Foundation
Making a multi step form in F6

Hi There, I have searched hard to find out how to make a multi step form using F6, but with no luck. I did find the code to a simple multi step form that was build using F5. I discovered that it doesn't work on F6. Please, what modifications do I need to make to this F5 based code, to allow the form to work properly in F6? Thank you so much for any help! :)  

 

<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 -->

 

Here is the JavaScript that is imbedded in the html file.

<script type="text/javascript">    
$('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');
})    
</script>    

 

Here is the CSS.

.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;
    }
  }
}

 

F6forms

Hi There, I have searched hard to find out how to make a multi step form using F6, but with no luck. I did find the code to a simple multi step form that was build using F5. I discovered that it doesn't work on F6. Please, what modifications do I need to make to this F5 based code, to allow the form to work properly in F6? Thank you so much for any help! :)  

 

<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 -->

 

Here is the JavaScript that is imbedded in the html file.

<script type="text/javascript">    
$('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');
})    
</script>    

 

Here is the CSS.

.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;
    }
  }
}