How to create multi-stage forms in WordPress using Advanced Forms

Creating forms with multiple stages in WordPress is really easy using our Advanced Forms plugin. Watch this video for a quick look at how you can create your own multi-stage forms.

Video Transcript

Hi, Phil here from Hookturn
and I just wanted to take a few minutes to show you
how easy it is to create multi-stage or multi-page
forms using the Advanced Forms plugin.
Now, just a quick note that this feature is available
in both free and pro versions of the plugin.
So, for the purposes of this demo,
I'm gonna use the free version.
So, what we have in front of us is a page, okay,
called Multi-page form
and I've just got a little to-do note in there
to add a form, so,
what we're gonna do is,
come over to the admin
and we're gonna create a new form called
Multi stage form, so, here we go.
Whoops, Multi stage form.
And at this stage, I'm not gonna do anything else.
I'm just going to hit Publish,
so that that form's available for field assignment
and then I'm gonna come over to Custom Fields.
So, what we're doing now is we're basically setting up
the fields to render inside our form, so,
I've already got a field group here
with some fields already set up.
So, we've got four fields in here, all right?
And down here, I'm gonna select form as
Multi stage form, cool, already set.
So, I'll hit Update.
And, now when I come back over to our page,
or actually, sorry, I'll come back over to Forms, all right?
So, I'm gonna open up our Multi stage form,
and I'm gonna copy this Shortcode right here.
So, copy that.
And then we're gonna edit our page
and we're gonna render the form.
Now, at this stage, we haven't set up any paging
or any stages in our form, so,
we're just gonna get a complete form, so,
let's edit the page.
Just delete this text here,
I'm gonna add Shortcode
and I'm gonna paste our Shortcode in there, like so.
I'm gonna hit Update.
And now, when I view the page,
we'll see our form with our four fields, okay?
Now, what we're gonna do is we're gonna break this down
into two stages, so,
we're gonna have one stage with our name and our age
and we're gonna have a second stage
with our industry and profession.
Now, to do that, we wanna come over to our Field Group
that is loading our forms, okay?
So, we've got Multi step form fields.
And, I'm just gonna add a field called Page, all right?
So, it's down here, down the bottom, under Forms,
it's called Page and we'll just say
Basic Info, all right, close that up, move that to the top.
Now, I'll just duplicate this, 'cause it's just easier
and we'll call this,
Employment, maybe.
All right, and we'll move that above Industry
and Profession, okay?
So, now what we've got is these two fields called
both of type Page and they're just gonna break our form
down into stages, so,
if I hit Update
and I come back over to our form,
we'll see now that our form is broken down
into multiple stages.
Now, if I go and fill in the name
and I fill in the age field
and I hit Next, we can actually start to navigate
back and forth through the stages of our form
and each of those are populated, so,
your users have the ability to go
back and forth through the stages
to make sure that they've got their data correct.
All right, so that's a really quick look
at how you create multi-stage forms in Advanced Forms.

About the author

Phil Kurth is a web developer living in Melbourne, Australia. Phil has a long history of WordPress development and enjoys building tools to empower others in their web design/development practice.

When not working with the web, Phil is usually spending time with his two young sons or is out hiking through the Australian bush.

Good dev stuff, delivered.

Product news, tips, and other cool things we make.

We never share your data. Read our Privacy Policy

© 2016 – 2024 Hookturn Digital. All rights reserved.