Break up a long form and show only one section at a time

Got a long form for users to fill out and want to make it a bit less intimidating? Here’s a quick jQuery function that will look for individual fieldset elements in your form and show them one at a time, adding a “continue” button to the bottom of the form to proceed to the next fieldset. Users with JavaScript disabled will get the entire form without any loss of functionality.

function pageThroughFieldsets(form) {
  var $cbtn = $('<button>Continue</button>').on('click',function(e) {
    e.preventDefault(); // don't submit the form 
    var $lastfs = $(this).closest('form').find('fieldset:visible').hide().next('fieldset').show().next('fieldset');
    if ($lastfs.length <= 0) {
      $(this).remove(); // remove the "continue" button 

Leave a Reply

Your email address will not be published. Required fields are marked *