How to create these ?

[Tapan]

Hi,

How to create the following ? Sorry I don't know what to call it exactly.

ss.jpg

I want to create a form similar to that. How to achieve that ?

Thanks.

[FizixRichard]

What do you mean exactly?

I'm assuming you mean a multi-part form where the step graphic changes as you move through the form steps without page reload?

If so, the answer is JavaScript, so the form html changes as you move through the steps.


So for example, if you have a form that has 4 steps; you'd code the 4 steps in HTML and use javascript to show step 1 at the start, and as the next button is pressed you show step 2 and so on.

As you move through you would update the step graphic as appropriate.


How you would best achieve that through code would really depend on the form itself, it's purpose and the actual effects you want to have on the form; i.e. if the form slides, or if it just changes when you click next.

[Tapan]

Hi,

I found it, here's the code for anyone else who wants this:

.progressbar { 
	width:500px; 
	height:30px; 
	-webkit-border-radius:6px; 
	-moz-border-radius:6px; 
	border-radius:6px; 
	background-color:#ffffff; 
	text-transform:uppercase;
	padding:0;
	margin:0;
}
.progressbar li {
	list-style-type:none;
	float:left;
	width:125px;
	padding:0;
	margin:0;
	text-align:center;
	font:14px/30px Arial;
}
.progressbar li strong {
	float:left;
	text-align:center;
	margin:0 26px;
}
.progressbar li#p1 {
	-webkit-border-top-left-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-bottomleft:6px;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}
.progressbar li#p4,.progressbar li#p4.current_step span.next_arrow {
	-webkit-border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-topright:6px;
	-moz-border-radius-bottomright:6px;
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;
}
.progressbar li span.next_arrow {
	width:20px;
	height:30px;
	display:block;
	float:right;
}
.progressbar li.completed_step span.next_arrow {
	background:url('../images/progressbar_bg.gif') repeat-x right top
}
.progressbar li.completed_step
{
	background:url('../images/progressbar_bg.gif') repeat-x 0px 0px;
	color:#fff;
}
.progressbar li.current_step span.next_arrow {
	background:url('../images/progressbar_bg.gif') repeat-x right -60px
}
.progressbar li#p4.current_step span.next_arrow {
	background:url('../images/progressbar_bg.gif') repeat-x left -60px
}
.progressbar li.current_step {
	background:url('../images/progressbar_bg.gif') repeat-x 0px -60px;
	color:#fff;
}

HTML Code:

	<ol class="progressbar">
		<li id="p1" class="current_step"><strong>Step 1</strong><span class="next_arrow"></span></li>
		    <li id="p2" class="next_step"><strong>Step 2</strong><span class="next_arrow"></span></li>
		    <li id="p3" class="next_step"><strong>Step 3</strong><span class="next_arrow"></span></li>
		    <li id="p4" class="next_step"><strong>Step 4</strong><span class="next_arrow"></span></li>
	</ol>

1 image is required which is attached. Please download that.
progressbar_bg.gif

Hope this helps!

Thanks.