Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

recommendations for building a multi-step sign up form

Posted on 2016-10-03
7
Medium Priority
?
77 Views
Last Modified: 2016-10-07
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
Comment
Question by:Big Monty
  • 3
  • 2
  • 2
7 Comments
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 1600 total points
ID: 41827574
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
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 total points
ID: 41827581
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
 
LVL 34

Author Comment

by:Big Monty
ID: 41828229
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41828267
it's a bit plain for me,
Skeleton code only for implementing the mechanics of the wizard.
0
 
LVL 34

Author Comment

by:Big Monty
ID: 41828287
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
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41828317
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
 
LVL 34

Author Closing Comment

by:Big Monty
ID: 41834000
ended up going with the first solution, but both are viable options
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question