Hi! welcome to JotForm. My name is George,
and today i'm going to show you how to create a multi-step form. So stick around,
and let's jump over to JotForm right now. This is the dashboard for JotForm, and it's super
easy to create a multi-step form, but before we get started i want to show you the templates
that are available. So if we head on over to the templates section, we can view the templates that
are available right here for multi-step forms. If we go down here under all the categories, we have
two form layouts which is a classic one and the card layout. So right now we're viewing the card
layout, and if we click on any of these samples we can view how they actually work, and how
the multi-step form works right here. So this is a product order form template, and if i click
on start we can view how it actually animates moves and the sections that it has if we like
how this one looks, we can use this template but in this case we're going to create one from
scratch. So let's go ahead and click on create a form. We're going to select one from scratch and
we're going to select the card form right here. So, once we click on that, the JotForm Builder
opens up. Now, we can edit the welcome page by clicking right here. We can change the image, the
title, the description, and the number of questions that will be added will be automatically
updated right here, but if you don't want to show that just click on the little X or click
on this button to bring it back, and we can change the colors and all of that in a bit, we'll check
that. We're gonna also edit the Thank You Page which is the ending page right here. And to get
started with the multi-step card form right here we're going to click on add elements
and we're going to add the name we're going to add the address, we're going to
add the phone number. Let's add a drop down menu right here. And we'll just select a little bit
of options right here. So option one, option two option three, just for example. Let's drag
in the email here, all right. So as of now we have five steps right here. Now how does that
view? Let's click on the "Preview Form" right here. All right, and this is how the multi-step form is
going to work. So for example I click on start. We have five questions. Click on "start", and it's gonna
work by steps. For example they fill out the name none of the fields I've set to required,
so we can jump these without any problem, but if they were required they
can't jump to the next step. Go to next, next, and next. Right and when you're
finished you submit. Let's get back to the builder and we can edit any one of these sections by
clicking on the little properties button right here, and we can change what the title says, but
if you want to view a more in-depth video of how to create a contact form, feedback form, any
of those, links will be in the description. But again, you have all the options available
right here; the options, the middle name, prefix the surfix, advanced options for any of the
fields that we select we get different options. For example; let's go into the email right here,
and just to show you a little bit of conditional logic we can go into the "Advanced" right
here. We're going to hide this field, and we can use conditional logic to hide that field unless for
example we're going to say if they select option 3, we can show the email option right there, and
if not we'll add one more step to this. So we'll add a date picker just for fun right here.Two
sections. So if they don't select option three , they're gonna jump over to the date, and if they
select option three, it's gonna ask for the email. I know this is not the best way to create a form
but it's just to show you how conditional logic works. So let's head over to "settings" right
here. "Conditional Logic" and we're going to use the "Show and hide field" for conditional
logic. So for example; we're going to say if the type of question is equal to and we're gonna
select option three, It's going to show the option email. All right, and we'll save that conditional
logic right there. So let's view how this actually works by clicking on "Preview form" okay. So
let's start with our multi-step form right here by clicking next, next again we didn't set
any of these to be required so we can skip them and we're going to select option one. For
example, click on next, and it jumped the email. Did you see that? Let's go back and select
option three and we're gonna go next, and now it shows the email. So it's pretty cool and you
can do a lot of things with conditional logic. Let's go back right here to the builder settings.
And now right here we can change the styling of this. So if we click on the form designer right
here. We can change the styles if you want so. For example if green is not to your liking of
your branding, you can change these if you like. For example if we like that blue we can add an
image right here from one of these themes that are available. So if we click on this it will add
that theme. There's also videos available. So, for example, this one is pretty nice you can see a
little water moving right there. If I click on this one you can see that beach, and if you preview
it it's gonna view that way. So let's show you that, And there we go. That looks really nice right? Really professional looking, multi-step form. So
that is how you create the card form. There's another way that I'm going to show you
right now. So let's go back to JotForm and let's create a brand new form, and
we're going to create one from scratch but in this case we are not going to select the
card form, we're going to use the classic form and we're gonna use page break to create those steps.
So for example, again i'll just drop in a couple of things right here. For example; these phone
number, a date picker oops let me drag this. Bottom, hold on let me grab it over here, okay. There we go.Well as for the signature right there, and there we go. Now on the elements where the basic section
is, if we go all the way down here we have a page break. So for example if we want to break we want
to ask for the name and the address and we'll add page break right here. Okay, we'll ask for that first and
then we have the date and we added two right there but it doesn't matter. Okay, we'll add another page
break right there, and we're going to preview this to show you how that multi-step form works by
the classic form. So let's go into preview form and you can see now we have the name, the address,
and it break, we don't have the complete form right here. So they have to click on the next step, we
have the options for the dates just like you saw before. Next, and we have that and then they
submit. So that's another way that you can create a multi-set form, and when you're finished, and you
like your multi-step form head on over to "Publish" and we can share this by sharing the link,
so they can go straight to the link and use the form and fill it out. We can invite
them by email, we can embed it on our site and yes you can embed it on Wordpress site, or
you can use third-party publishing options. So there's Wordpress, Wigs, Shopify, Tumblr
many options right here that you can use to embed your form on any of one of these
platforms. So there you go, that is how you create a multi-step form on JotForm. Thank you for
watching. My name is George and I'll see you later.
