Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • Last Modified:

recommendations for building a multi-step sign up form

can anyone recommend a good multi-step sign up form I can stick in a (bootstrap if possible) modal pop up? I hate my current sign up form and want something a bit flashier :)
0
Big Monty
Asked:
Big Monty
  • 3
  • 2
  • 2
2 Solutions
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Monty,
I thinks this will suit your needs...

You will get the basic structure here which you can modify it to suit your needs.

Multi Step Bootstrap form
0
 
Julian HansenCommented:
Here is a sample from a PAQ - can't find the link now
HTML
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
		<div class="container">
        <section class="wizard">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">This is section 1</h3>
            </div>
            <div class="panel-body">
              <p>The content for section 1 goes here</p>
            </div>
          </div>
        </section>
        <section class="wizard">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">This is section 2</h3>
            </div>
            <div class="panel-body">
              <p>The content for section 2 goes here</p>
            </div>
          </div>
        </section>
        <section class="wizard">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">This is section 3</h3>
            </div>
            <div class="panel-body">
              <p>The content for section 3 goes here</p>
            </div>
          </div>
        </section>
        <button class="btn btn-warning btn-nav btn-prev" data-action="-1">Previous</button> 
        <button class="btn btn-primary btn-nav btn-next pull-right" data-action="1">Next</button>
        <button class="btn btn-primary btn-nav btn-done pull-right" data-action="0">Finish</button>
      </div>
    </div>

Open in new window

CSS
section.wizard {
  display: none;
}
section.wizard:first-child {
  display: block;
}
.btn-prev, .btn-done {
  display: none;
}

Open in new window

jQuery
$(function() {
  var sections = $('section.wizard').length;
  var next = $('.btn-next');
  var prev = $('.btn-prev');
  var done = $('.btn-done');
  var selected = 0;
  
  $('.btn-nav').click(function(e) {
    var action = $(this).data('action');
    $('section.wizard').hide();
    selected += 1*action;
    selected = selected % sections;
    $('section.wizard:eq(' + selected + ')').show();
    if (selected > 0) {
      prev.show();
      next.show();
      done.hide();
    }
    if (selected == 0) prev.hide();
    if (selected == sections - 1) {
      next.hide();
      done.show();
    }
  });
});

Open in new window

Working sample here
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
thank you both for your suggestions, much appreciated :)

@Prasadh - that has potential, do you know if it'll autosize the container to make sure everything is displayed without scrolling?

Julian - I came across that one last night, and while it's functionally what I want, it's a bit plain for me, I want something to make a good first impression when users sign up for my site.

if you want to see the current signup form I have in place, have a look at the site, and click "Create Profile". if you don't want to actually sign up for the site, simple enter in a fake email account and I'll remove it later.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Julian HansenCommented:
it's a bit plain for me,
Skeleton code only for implementing the mechanics of the wizard.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
Skeleton code only for implementing the mechanics of the wizard.

gotcha. however I'm looking for of a more complete solution (design-wise) as I have very little artistic sense :)
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Big Monty,
well as per the demo link it resizes and is RESPONSIVE... check this demo link

the look & feel can be modified via CSS.

Thanks,
Prasadh
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
ended up going with the first solution, but both are viable options
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now