Creating a multi-step wizard

Design help General
1

I’m trying to create a 3 page wizard to break up a long form. I’ve created a link block and dropped the form fields into a column.

When I add a button to continue, there’s no way to validate if the user has entered data into the fields, the button just pushes them through to the next step. Also if I use a form button, there’s no option to validate and push users through to another page, just a confirmation.

Is there an option to validate that a response has been entered in a form field and move on, or is a work around required?

2

jQuery should do the work. You could also do a form carousel that slides from one step to another once you press something and validates every step :slight_smile:

1 Like
3

@grandtheftpixel what you can also do is have a link inside the Success, so when they fill out the required fields and they press Submit, the success div will show up with a link to another page with the next form.

1 Like
4

Thanks @thesergiethat is a great idea, I’ll give that shot

Thanks also @bartekkustra! This is really interesting. So basically what would happen is the form would slide across from one step/page to the next, is that correct? How would I set this up?

5

I’d make eg. 3 divs inside one div with specified width and height. At the end of each div I’d make next and previous buttons that will allow me to slide from one page to another. When button is pressed you can simply check if fields stated above are filled with some jQuery function.

$('.awesome-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

I’m sure you’ll find out how to set it up :wink: You can switch from one step to another using simple .fadeIn() and .fadeOut() functions. Imagination is your limit :wink:

1 Like
6

I’ve managed to create something that might use as a basic of what you can do. Question #2. Please check those links:

Troubleshooting link: click me please
Site link: http://forumhelp.webflow.com/#2

jQuery code used here:

$(document).ready(function() {
	$('.q2-step1-next').click(function(e) {
		e.preventDefault();
		$('.step1-input1').removeClass('warning');
		
		if( !$('.step1-input1').val() ) {
			$('.step1-input1').addClass('warning');
		} else {
			$('.step1').fadeOut(function() { $('.step2').fadeIn(); });
		}
	});
	$('.q2-step2-next').click(function(e) {
		e.preventDefault();
		$('.step2-input1').removeClass('warning');
		
		if( !$('.step2-input1').val() ) {
			$('.step2-input1').addClass('warning');
		} else {
			$('.step2').fadeOut(function() { $('.step3').fadeIn(); });
		}
	});
	$('.q2-step3-next').click(function(e) {
		e.preventDefault();
		$('.step3-input1').removeClass('warning');
		
		if( !$('.step3-input1').val() ) {
			$('.step3-input1').addClass('warning');
		} else {
			$('.step3').fadeOut(function() { alert('Awesome, huh?'); $('.step1').fadeIn(); });
		}
	});
});

Enjoy :slight_smile:

7

This topic was automatically closed after 10 days. New replies are no longer allowed.