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');
    $(window).scrollTop($(this).closest('form').offset().top);
    if ($lastfs.length <= 0) {
      $(this).remove(); // remove the "continue" button 
    };
  });
  $('fieldset',form).first().siblings('fieldset').hide().last().after($cbtn);
};
pageThroughFieldsets($('#id-of-your-form'));

Leave a Reply

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

*