Solved

recommendations for building a multi-step sign up form

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

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 51

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

708 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

19 Experts available now in Live!

Get 1:1 Help Now