Solved

recommendations for building a multi-step sign up form

Posted on 2016-10-03
7
51 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 9

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 52

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 32

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

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 32

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 9

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 32

Author Closing Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript waiting 14 66
Table changes size when I click edit 7 24
Syntax Error 2 42
I am Updating mysql where id =something ...Not working  Jquery/PHP 4 34
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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 …

929 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now