1. username and password fields
2. first and last name and email address
3. age, gender and country
4. summary
First thing to do is to create the html structure. We need a box container with four divs, one for each step. The basic HTML code is the following:
2
3
4
5
6
7
Inside each box container we will put the fields and a simple helpfull label. You can see the code inside the first box in the code below:
1
2
3
SIGN UP FOR A FREE WEBEXP18 ACCOUNT
4
5
6
7 At least 4 characters. Uppercase letters, lowercase letters and numbers only.
8
9
10 At least 4 characters. Use a mix of upper and lowercase for a strong password.
11
12
13 If your passwords aren’t equal, you won’t be able to continue with signup.
14
15
16
We have used three input fields: username, password and confirm password and at the end of the box, an input submit for the next step. The other boxes work in the same way.
At the end of the container box you can see a simple progress bar. This is the necessary code:
1
The complete HTML code is the following:
1
2
3
4
5
6
SIGN UP FOR A FREE WEBEXP18 ACCOUNT
7
8
9
10 At least 4 characters. Uppercase letters, lowercase letters and numbers only.
11
12
13 At least 4 characters. Use a mix of upper and lowercase for a strong password.
14
15
16 If your passwords aren’t equal, you won’t be able to continue with signup.
17
18
19
20
21
22
23
SIGN UP FOR A FREE WEBEXP18 ACCOUNT
24
25
26
27 Your First Name.
28
29 Your Last Name.
30
31 Your email address. We send important administration notices to this address
32
33
34
35
36
37
38
SIGN UP FOR A FREE WEBEXP18 ACCOUNT
39
40
41
42 0 - 17
43 18 - 25
44 26 - 40
45 40+
46
47 Your age range.
48
49
50 Male
51 Female
52
53 Your Gender.
54
55
56 United States
57 United Kingdom
58 Canada
59 Serbia
60 Italy
61
62 Your country.
63
64
65
66
67
68
69
70
71
SIGN UP FOR A FREE WEBEXP18 ACCOUNT
72
73
74
Summary
75
76
77
Username
78
Password
79
Email
80
Name
81
Age
82
Gender
83
Country
84
85
86
87
88
89
90
91
As you can see, in the fourth step the table is empty. We fill it with the information entered by the users using jQuery.
Now we need to add the style on the form. First, we use the @fontface rule for using a custom font. I’ve used the Cantarell font. The complete CSS Code is listed below:
1 /* CSS Reset (Eric Meyer) */
2 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
3
4 @font-face {
5 font-family: 'Cantarell';
6 src: url(../fonts/Cantarell-Regular.eot);
7 src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf')format('truetype');
8 }
9
10 body {
11 background-color: #f9f9f9;
12 color: #222;
13 font-family: Cantarell, Verdana, sans-serif;
14 font-size: 12px;
15 }
16
17 input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
18 input[type="submit"]:focus, input[type="button"]:focus { outline : none; }
19
20 .clear { clear: both; }
21
22 #container {
23 background: url('../images/container.png') no-repeat;
24 width: 754px;
25 height: 370px;
26 margin: 20px auto;
27 padding: 50px 0;
28 overflow: hidden;
29 position: relative;
30 }
31 #container #first_step, #second_step, #third_step, #fourth_step { display:none; }
32 #container #first_step { display: block; }
33
34 #container .form { margin: 66px 72px 0 72px; }
35
36 #container h1, #container h2 {
37 font-size: Cantarell, Verdana, sans-serif;
38 text-align: center;
39 font-size: 24px;
40 text-shadow: 1px 1px 2px #222;
41 }
42 #container h1 span { color: #a90329; }
43
44 #container h2 {
45 color: #888;
46 font-size: 20px;
47 text-align: left;
48 text-shadow: none;
49 }
50
51 #container table {
52 margin: 20px 40px;
53 font-size: 14px;
54 font-weight: bold;
55 }
56 #container table td {
57 padding: 5px 10px;
58 }
59 #container table td:nth-child(2) {
60 color: #a90329;
61 }
62
63 #container input, #container select {
64 background: url('../images/input.png') no-repeat;
65 color: #888;
66 border: 1px solid #ccc;
67 font-family: Cantarell, Verdana, sans-serif;
68 font-weight: bold;
69 font-size: 15px;
70 width: 300px;
71 height: 35px;
72 padding: 0 25px;
73 margin: 20px 0;
74 float: left;
75
76 border-radius: 6px;
77 -moz-border-radius: 6px;
78 -webkit-border-radius: 6px;
79 }
80 #container input.submit {
81 background: url('../images/button.png') no-repeat;
82 border: none;
83 cursor: pointer;
84 width: 85px;
85 height: 38px;
86 position: relative;
87 bottom: 2px;
88 left: 655px;
89 }
90 #container input.submit:focus { border: none; }
91
92 #container input.send{ background: url('../images/send.png') no-repeat; }
93
94 #container input.error { border: 1px solid red; }
95 #container input.valid { border: 1px solid #1FFF00; }
96
97 #container input:focus, #container select:focus {
98 border: 1px solid #a90329;
99 color: #a90329;
100 }
101
102 #container select { padding: 5px 0 5px 25px; }
103 #container option { padding: 0 15px; }
104
105 #container label {
106 color: #666;
107 font-size: 12px;
108 font-weight: bold;
109 line-height: 14px;
110 float: right;
111 margin: 23px -25px;
112 width: 270px;
113 }
114
115 #progress_bar {
116 background: url('../images/progress_bar.png') no-repeat;
117 width: 339px;
118 height: 24px;
119 margin: 0 auto;
120 position: relative;
121 }
122
123 #progress {
124 background: url('../images/progress.png') repeat-x;
125 width: 0px;
126 height: 23px;
127
128 border-radius: 20px;
129 -webkit-border-radius: 20px;
130 -moz-border-radius: 20px;
131 }
132 #progress_text {
133 position: relative;
134 line-height: 21px;
135 text-align: center;
136 font-weight: bold;
137 color: white;
138 text-shadow: 1px 1px 2px #222;
139 width: 339px;
140 height: 24px;
141 top: -23px;
142 left: 0;
143 }
We’re going to use jQuery for:
- slide the steps
- check if the data are valid
- change the completion percentage of progress bar
We need load jQuery library inside the page and then to use two plugins:
- jQuery UI, the most famous plugin used to extend the jQuery functionality.
- jQuery inputfocus, my jQuery plugin used to manage focus and blur events of the form.
Our jQuery code is listed below:
1 $(function(){
2 //original field values
3 var field_values = {
4 //id : value
5 'username' : 'username',
6 'password' : 'password',
7 'cpassword' : 'password',
8 'firstname' : 'first name',
9 'lastname' : 'last name',
10 'email' : 'email address'
11 };
12
13 //inputfocus
14 $('input#username').inputfocus({ value: field_values['username'] });
15 $('input#password').inputfocus({ value: field_values['password'] });
16 $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
17 $('input#lastname').inputfocus({ value: field_values['lastname'] });
18 $('input#firstname').inputfocus({ value: field_values['firstname'] });
19 $('input#email').inputfocus({ value: field_values['email'] });
20
21 //reset progress bar
22 $('#progress').css('width','0');
23 $('#progress_text').html('0% Complete');
24
25 //first_step
26 $('form').submit(function(){ return false; });
27 $('#submit_first').click(function(){
28 //remove classes
29 $('#first_step input').removeClass('error').removeClass('valid');
30
31 //ckeck if inputs aren't empty
32 var fields = $('#first_step input[type=text], #first_step input[type=password]');
33 var error = 0;
34 fields.each(function(){
35 var value = $(this).val();
36 if( value.length
37 $(this).addClass('error');
38 $(this).effect("shake", { times:3 }, 50);
39
40 error++;
41 } else {
42 $(this).addClass('valid');
43 }
44 });
45
46 if(!error) {
47 if( $('#password').val() != $('#cpassword').val() ) {
48 $('#first_step input[type=password]').each(function(){
49 $(this).removeClass('valid').addClass('error');
50 $(this).effect("shake", { times:3 }, 50);
51 });
52
53 return false;
54 } else {
55 //update progress bar
56 $('#progress_text').html('33% Complete');
57 $('#progress').css('width','113px');
58
59 //slide steps
60 $('#first_step').slideUp();
61 $('#second_step').slideDown();
62 }
63 } else return false;
64 });
65
66 $('#submit_second').click(function(){
67 //remove classes
68 $('#second_step input').removeClass('error').removeClass('valid');
69
70 var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
71 var fields = $('#second_step input[type=text]');
72 var error = 0;
73 fields.each(function(){
74 var value = $(this).val();
75 if( value.length
76 $(this).addClass('error');
77 $(this).effect("shake", { times:3 }, 50);
78
79 error++;
80 } else {
81 $(this).addClass('valid');
82 }
83 });
84
85 if(!error) {
86 //update progress bar
87 $('#progress_text').html('66% Complete');
88 $('#progress').css('width','226px');
89
90 //slide steps
91 $('#second_step').slideUp();
92 $('#third_step').slideDown();
93 } else return false;
94
95 });
96
97 $('#submit_third').click(function(){
98 //update progress bar
99 $('#progress_text').html('100% Complete');
100 $('#progress').css('width','339px');
101
102 //prepare the fourth step
103 var fields = new Array(
104 $('#username').val(),
105 $('#password').val(),
106 $('#email').val(),
107 $('#firstname').val() + ' ' + $('#lastname').val(),
108 $('#age').val(),
109 $('#gender').val(),
110 $('#country').val()
111 );
112 var tr = $('#fourth_step tr');
113 tr.each(function(){
114 //alert( fields[$(this).index()] )
115 $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
116 });
117
118 //slide steps
119 $('#third_step').slideUp();
120 $('#fourth_step').slideDown();
121 });
122
123 $('#submit_fourth').click(function(){
124 //send information to server
125 alert('Data sent');
126 });
127
128 });
The code from row 3 to 20 activate the inputfocus plugin to each input field. The code from row 27 to 64 check the validity of the data entered by the user (if username and password length is greather than 4 characters, if the password and confirm password fields are equal), then update the progress bar value and then slide to second step.
The code from row 71 to 100 check the data integrity for the second step (if first and last name aren’t empty and if the email address is valid). The rest is similar to the previous code.
We have seen how simple its to create a multistep signup form. This is only an example so I omitted some features as back button, and more others. Anyway the example is ready to use and it needs only to change the form action with the link of your php file used to store data and to edit the jQuery line 125 to: $(‘form’).unbind(‘submit’).submit();. You can also decide to use an AJAX calls to send the informations to server, and again it’s very easy to implement.
To see form in action click on the image below:
