Solved

recommendations for building a multi-step sign up form

Posted on 2016-10-03
7
58 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 400 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 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 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 33

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 55

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 33

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 33

Author Closing Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

828 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