Fancy Sliding Form with jQuery

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is […]

From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

So let’s start!

The Markup

The HTML will consist of a wrapper container where we will place a form with fieldsets. Each fieldset will be a step in our sliding form:

<h1>Fancy Sliding Form with jQuery</h1>
<div id="wrapper">
	<div id="steps">
		<form id="formElem" name="formElem" action="" method="post">
			<fieldset class="step">
				<legend>Account</legend>
				<p>
					<label for="username">User name</label>
					<input id="username" name="username" />
				</p>
				<p>
					<label for="email">Email</label>
					<input id="email" name="email" type="email" />
				</p>
				<p>
					<label for="password">Password</label>
					<input id="password" name="password" type="password" />
				</p>
			</fieldset>
			<fieldset>
			...
			</fieldset>
		</form>
	</div>
	<div id="navigation" style="display:none;">
		<ul>
			<li class="selected">
				<a href="#">Account</a>
			</li>
			<li>
				<a href="#">Personal Details</a>
			</li>
			<li>
				<a href="#">Payment</a>
			</li>
			<li>
				<a href="#">Settings</a>
			</li>
			<li>
				<a href="#">Confirm</a>
			</li>
		</ul>
	</div>
</div>

The navigation with all the links to the steps will be an unordered list that is initially hidden. We will show it in our JavaScript function.
Let’s look at the style.

The CSS

The main wrapper and the steps container will have the following style:

#wrapper{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    background-color:#f9f9f9;
    width:600px;
    overflow:hidden;
}
#steps{
    width:600px;
    overflow:hidden;
}
.step{
    float:left;
    width:600px;
}

The class step will be given to each fieldset. Let’s style the navigation:

#navigation{
    height:45px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
#navigation ul{
    list-style:none;
	float:left;
	margin-left:22px;
}
#navigation ul li{
	float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
	margin:0px 2px;
}

The single link elements will have a neat CSS3 gradient as background:

#navigation ul li a{
    display:block;
    height:45px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:45px;
    padding:0px 20px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}
#navigation ul li a:hover,
#navigation ul li.selected a{
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

When a step get’s validated, we will either add a span indicating that everything is fine, or a span that shows that something is wrong in the form step:

span.checked{
    background:transparent url(../images/checked.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
span.error{
    background:transparent url(../images/error.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}

The styles for the form elements look as follows:

#steps form fieldset{
    border:none;
    padding-bottom:20px;
}
#steps form legend{
    text-align:left;
    background-color:#f0f0f0;
    color:#666;
    font-size:24px;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    float:left;
    width:590px;
    padding:5px 0px 5px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}
#steps form p{
    float:left;
    clear:both;
    margin:5px 0px;
    background-color:#f4f4f4;
    border:1px solid #fff;
    width:400px;
    padding:10px;
    margin-left:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
    width:160px;
    float:left;
    text-align:right;
    margin-right:15px;
    line-height:26px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    background: #ffffff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
}
#steps form input:focus{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:#FFFEEF;
}
#steps form p.submit{
    background:none;
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
#steps form button {
	border:none;
	outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}
#steps form button:hover {
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

And now, let’s add some JavaScript magic!

The JavaScript

In our function we will first take care of the display of the slider. For that we need to calculate the width of the elements inside. We will also take care of the sliding when we tab through the inputs. When the user hits tab when he is in the last input of a fieldset, we make the next fieldset slide into place and focus on the first field.

The validation of the form is based on all inputs being required fields. If we slide to the next fieldset and did not fill out all the inputs of the previous one, we will mark the missing inputs with a red background and add our little error span to the navigation item. If everything was fine, we will add the span with the check mark so that the user knows, the step was correct. We will not allow the user to submit the form if one of the steps contains errors.

$(function() {
	/*
	number of fieldsets
	*/
	var fieldsetCount = $('#formElem').children().length;

	/*
	current position of fieldset / navigation link
	*/
	var current 	= 1;

	/*
	sum and save the widths of each one of the fieldsets
	set the final sum as the total width of the steps element
	*/
	var stepsWidth	= 0;
    var widths 		= new Array();
	$('#steps .step').each(function(i){
        var $step 		= $(this);
		widths[i]  		= stepsWidth;
        stepsWidth	 	+= $step.width();
    });
	$('#steps').width(stepsWidth);

	/*
	to avoid problems in IE, focus the first input of the form
	*/
	$('#formElem').children(':first').find(':input:first').focus();	

	/*
	show the navigation bar
	*/
	$('#navigation').show();

	/*
	when clicking on a navigation link
	the form slides to the corresponding fieldset
	*/
    $('#navigation a').bind('click',function(e){
		var $this	= $(this);
		var prev	= current;
		$this.closest('ul').find('li').removeClass('selected');
        $this.parent().addClass('selected');
		/*
		we store the position of the link
		in the current variable
		*/
		current = $this.parent().index() + 1;
		/*
		animate / slide to the next or to the corresponding
		fieldset. The order of the links in the navigation
		is the order of the fieldsets.
		Also, after sliding, we trigger the focus on the first
		input element of the new fieldset
		If we clicked on the last link (confirmation), then we validate
		all the fieldsets, otherwise we validate the previous one
		before the form slided
		*/
        $('#steps').stop().animate({
            marginLeft: '-' + widths[current-1] + 'px'
        },500,function(){
			if(current == fieldsetCount)
				validateSteps();
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
		});
        e.preventDefault();
    });

	/*
	clicking on the tab (on the last input of each fieldset), makes the form
	slide to the next step
	*/
	$('#formElem > fieldset').each(function(){
		var $fieldset = $(this);
		$fieldset.children(':last').find(':input').keydown(function(e){
			if (e.which == 9){
				$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
				/* force the blur for validation */
				$(this).blur();
				e.preventDefault();
			}
		});
	});

	/*
	validates errors on all the fieldsets
	records if the form has errors in $('#formElem').data()
	*/
	function validateSteps(){
		var FormErrors = false;
		for(var i = 1; i < fieldsetCount; ++i){
			var error = validateStep(i);
			if(error == -1)
				FormErrors = true;
		}
		$('#formElem').data('errors',FormErrors);
	}

	/*
	validates one fieldset
	and returns -1 if errors found, or 1 if not
	*/
	function validateStep(step){
		if(step == fieldsetCount) return;

		var error = 1;
		var hasError = false;
		$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
			var $this 		= $(this);
			var valueLength = jQuery.trim($this.val()).length;

			if(valueLength == ''){
				hasError = true;
				$this.css('background-color','#FFEDEF');
			}
			else
				$this.css('background-color','#FFFFFF');
		});
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		$link.parent().find('.error,.checked').remove();

		var valclass = 'checked';
		if(hasError){
			error = -1;
			valclass = 'error';
		}
		$('<span class="'+valclass+'"></span>').insertAfter($link);

		return error;
	}

	/*
	if there are errors don't allow the user to submit
	*/
	$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Please correct the errors in the Form');
			return false;
		}
	});
});

And that’s it! I hope you liked the sliding form idea!

Message from TestkingGet professional testking ccda training to learn about critical web design tools and become expert in web design using testking mcts tutorials and testking mcitp live demos.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 183

Comments are closed.
  1. How can I add a next link on one step of the form so users do not have to click on the step name at the bottom and can instead just press next?

  2. This is dead sexy. Haven’t yet attempted to implement it and look forward to so doing.

  3. Excellent form. I also required a “Next” button. I achieved this by putting a button in with ID of “next”, and then putting some extra javascript in the .js file.
    $(‘#next’).bind(‘click’,function(e){
    var $this = $(this);
    $(‘#navigation li:nth-child(‘ + (parseInt(current)+1) + ‘) a’).click();
    /* force the blur for validation */
    $(this).blur();
    e.preventDefault();
    });

    This is probably not the ideal approach however since it means you have to create multiple next buttons each with a different id, and then creating a new function in the .js for both. But it works all the same, but there is probably a better approach.

  4. When you add

    at end of form to fix IE7 issues, it now breaks the “registerButton” validation.

  5. How do we convert this html code to aspx code, tried to convert into aspx but layout and styling changes.

    Looked into msdn about converting html to webforms but of no use.

    Any idea on how to convert html page with JQuery to aspx page.

  6. First of all, thanks for sharing. Second, has anyone managed to validate the form in a better way? I need it to point the user to the missing field and not just tell them that they’ve missed one.

    I’m a Javascript Newbie.

    Thanks in advance for any help.

  7. This is sweet. I’ve tried other tutorials but haven’t yet succeeded at this. I’ll give it a go and see how it works. I’ll let ya know.-oh yeah and thanks!

  8. To validate a checkbox try this…
    Look for the following lines:
    if(valueLength == ”){
    hasError = true;
    $this.css(‘background-color’,’#FFEDEF’);
    }
    else
    $this.css(‘background-color’,’#FFFFFF’);

    Add this directly below it:
    if(document.idOfYourForm.idOfYorCheckbox.checked == false){
    hasError = true;
    }

    This logic can be applied to any other type of validation as well

  9. Hello to all!

    I have a question.,
    How to solve the IE problem?

    Any suggestions?
    Thanks.

  10. Hi All, I have used it in my project.it works well in Firefox,Opera,IE(navigation Text are in separate lines one below other rather than in a single line) ,but in chrome no sliding is happens????? Just static wit first Field set????

    Any help is appreciated…..Thanks in advance….

  11. thx for sharing this useful form.
    how can i make the form validate the checkboxes and radios ? thx

  12. You are all my heroes!! Bill Winder- special thanks for the next button solution. I modified this line: (parseInt(current)+1) to (parseInt(current)-1) to add a “back” button as well. Can’t wait for these changes to go live on my site. Thanks again!!!

  13. Can we add few tags as well as tags in the ‘Personal Details’ or ‘Payments’ li tag.

  14. Anyone know how to make this script work in no conflict? I’m working in a CMS that requires mootools. I have other jquery items on the site and this doesn’t seem to want to work with them.

  15. Hi,I come from China.
    Do not run in IE6?
    Waiting for your good msg.
    Thank you.

  16. Hi every body,
    I face a problem while I was trying this wonderful app, when I tried IE the step buttons bacame to the 100% width nav area, to fix this I just added a static width to the buttons on the css, I now it’s not the best way but at least that worked for me.

    Now I’m facing a new problem, I need to place a “next” button, I saw that Bill Winder did that, but I can’t make his code work, any sugestion?

  17. thanks for the great tutorial! a way to validate your email is:
    after “var valueLength = jQuery.trim($this.val()).length;” add var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    and replace if(valueLength == ”) with
    if(valueLength == ” || $(this).attr(‘id’)==’email’ && !emailPattern.test($this.val()) )
    hope that helps!

  18. Thanks for this slider ! Is it possible to have the same slide form but instead of inputs trigger off the slide, I would like a next and a previous inputs ?

    I explain…

    When I click on NEXT, there is a checking :
    If it’s OK => slide to the next form.
    If it’s not OK => don’t slide and show errors.

  19. Hy, what is the license of your plugin? Can I use in my work, comercially??

  20. Hi, Thanks ML for this awesome form.

    RADIO VALIDATION!!! AND NO-REQUIRED FIELDS!!!

    search this lines:
    114… if(valueLength == ”){ …

    OK my modifications =]

    if(valueLength == ”){
    /* NoRequired */
    if(this.id == “field1_ID” || this.id == “field2_ID”){
    alert(this.id + “\n=D Isn’t Required oowww =D”);
    /* NoRequired End*/
    } else {
    hasError = true;
    $this.css(‘background-color’,’#FFEDEF’);
    }
    } else {
    $this.css(‘background-color’,’#FFFFFF’);
    /* Radio */
    if(this.type == “radio”){
    function validateRadios() {
    function chek(f, g) {
    var vale = false;
    for (var i = 0, grupo = f[g], total = grupo.length; i < total; i ++)
    vale = (vale || grupo[i].checked);
    return vale;
    }
    var vale = true;
    ar = validateRadios.arguments;
    for (i = 1, formu = ar[0]; grup = ar[i], i < ar.length; i ++)
    vale = (vale && chek(formu, grup));
    if(vale==false){
    hasError=true; /* Validation Result */
    }
    }
    validateRadios(formElem, this.name); /* formElem = formID */
    }
    /* Radio End */
    }

    I hope you find it helpful, your comments are welcome
    Excuse my English
    XD Saludos!!!

  21. i solved my problem, just change the value of the line “.find(‘:input:not(button)’).each(function(){” t o “.find(‘.required’).each(function(){” and add this class in the field that you want validate. =)

  22. Hi šŸ™‚
    Im looking for a way to make the form start on a different tab.

    All i need is some javascript which goes ‘on form load tab=7’ but clearly that isnt the right code, and im not sure what is.

    I can get a button which goes to tab 7 based on the prev/next examples above, but i am unsure how to make the form do it on load.

    Thanks
    john

  23. hi, can someone plz tell us clearly how can we make the form VALIDATE RADIO BUTTONS ??? btw i tried what Wolfcolumbia suggested. its not working.

  24. WILLIAM Thanks.
    But with your code, all fields are no longer required and I need only 1. You know how I can fix it?.
    And I can do to put a message after pressing the ‘submit’ button?. I get only blank.

  25. Hello I’m having a problem with the slider. The slider is currently positioned at the bottom of my site and on site load it jumps down the the selected first field of the form. Anyone know how I can keep this from happening?

  26. how we can do other validation like phone number, checkbox, email and more others.

    Thanks

  27. Hello every one,

    In IE 7 last tab content is coming randomly on one of the previous tab content. How to fix it please help me.

    Thanks in advance.

  28. Hello Iā€™m having a problem with the slider. The slider is currently positioned at the bottom of my site and on site load it jumps down the the selected first field of the form. Anyone know how I can keep this from happening?

  29. Just wanted to give everyone a warning that if you have a select or anchor as the last tabbable item on a tab, then this code will move the div but then the browser will move it back, really screwing up the position of the #steps. I couldn’t figure out any way to avoid this besides making sure there aren’t any tabbable elements after each fieldset’s last input.

  30. Actually, I was thinking it might be possible to use http://api.jquery.com/focusin/ to make sure the focus is going to an element on the active tab, if not putting focus on maybe the first element on the current tab, but that might be a weird user experience and could require giving each tabbable element a class that specifies what tab it is on.

  31. Hello, I have integrated this form and I put a submit/save in every content of the tab. When I submit/save than it doesnt stay in the content/tab it goes back to the first. How can i fix it?
    Collin

  32. Great form slider! It has helped in reduce my long form into easy steps. One question: Has anyone figured out how to change the height of the container based on the height of the current fieldset? I have been trying to implement this, but have had no success yet. Thanks for any assistance!

  33. Hello
    Very nice script
    Just a question, for tab, don’t understand the way that identify last field. Morehover what mean the $fieldset.children(‘:last’).find(‘:input’).keydown(function(e){
    if (e.which == 9)
    e.which == 9 ? its the count of field? i have put 2 more input on my tab and the autoslide system lauch before my two last fields (one input one textarea) anyway to define id of input that is the last ?
    Thanks

  34. For anyone interested in the IE7 problem, if you look at it you will notice that IE7 is putting more white space (first and last slide) around the area. This is the problem, it is causing the float:left of the fieldset piece to wrap around. A quick fix that will work (I’ve tested it) is adding the class “.confirm” to your last fieldset. Then add into the styles…

    #steps form fieldset.confirm{*margin:0 -20px;*float:right;}

    If you feel the * IE hack is no good, then make an IE7 only stylesheet, either way, by floating this right and using the negative margin, the problem will be taken care of.

    (or my friend’s suggestion, user a browser sniffer that tells them they need a “real browser” and cant use your site until then)

  35. The register button is not centered with Chrome but left aligned. How can I fixed it? THX!

  36. This is a great jquery form. I have just one question….

    I would like to add a captcha field, is there a way to do this so the form does not submit until the code is valid…