7 Create a multi-block form
Want to break your form into logical steps or pages? Let’s do that here. We’ll:
- turn each form field into its own block
- organize questions across different steps
- enhance the experience with options for each block
- create a front cover for the form
Transcript:
00:00:04.000 –> 00:00:06.880
Hi there, welcome back. Until now, we’ve
00:00:06.880 –> 00:00:09.120
been creating this all-in-one form here,
00:00:09.120 –> 00:00:10.600
but we now want to create a
00:00:11.280 –> 00:00:13.840
multi-block version of this form.
00:00:14.240 –> 00:00:17.120
So there’s a start button, I now have
00:00:17.120 –> 00:00:19.640
my first question. The next block would
00:00:19.640 –> 00:00:22.440
then be an email block, and so on. So
00:00:22.440 –> 00:00:25.120
we’re splitting every form field up
00:00:25.280 –> 00:00:28.240
into its own page. This
00:00:28.240 –> 00:00:30.560
can make the experience smoother for
00:00:30.560 –> 00:00:32.760
your audience if you want to give them
00:00:32.760 –> 00:00:34.400
the space and the time to think about
00:00:35.200 –> 00:00:37.440
just that one question at a time. This
00:00:37.440 –> 00:00:39.320
might be especially useful for questions
00:00:39.320 –> 00:00:40.880
where they do have to write a bit more,
00:00:40.880 –> 00:00:43.040
whether it’s about the health concerns,
00:00:43.040 –> 00:00:44.480
for example, and they’re not distracted
00:00:44.480 –> 00:00:46.640
by the other blocks on that form field.
00:00:47.120 –> 00:00:50.000
It also means that you can focus options
00:00:50.000 –> 00:00:52.800
or settings to a specific block and
00:00:52.800 –> 00:00:55.080
not have to look at the options for the
00:00:55.080 –> 00:00:56.800
entire form at once.
00:00:58.200 –> 00:01:00.120
On the other hand you may exactly want
00:01:00.120 –> 00:01:02.560
that compact experience and
00:01:03.040 –> 00:01:04.680
just fill out the form and go on to the
00:01:04.680 –> 00:01:06.680
next thing so that it’s hardly even
00:01:06.680 –> 00:01:08.560
noticed. Here it becomes more an
00:01:08.560 –> 00:01:10.800
experience in itself. So
00:01:11.360 –> 00:01:13.200
let’s go into the creator and create this
00:01:13.200 –> 00:01:15.840
version. As with any
00:01:15.840 –> 00:01:18.320
form click on create Riddle and now
00:01:18.520 –> 00:01:21.040
under form click on start from scratch.
00:01:21.960 –> 00:01:23.840
Again we’ve got our
00:01:24.760 –> 00:01:27.600
sign up 2025 but let’s call it
00:01:28.960 –> 00:01:31.800
the multi-block version so
00:01:31.840 –> 00:01:33.760
that we can tell them apart later.
00:01:36.480 –> 00:01:39.040
Okay now, again, by
00:01:39.040 –> 00:01:40.640
default, we have this name and email
00:01:40.640 –> 00:01:42.800
field already in here. And
00:01:43.680 –> 00:01:45.360
yeah, we could also do that. We could
00:01:45.360 –> 00:01:48.080
group a couple of things together so
00:01:48.080 –> 00:01:50.960
that they’re on one page. Perhaps we
00:01:50.960 –> 00:01:52.160
could leave name and email together
00:01:52.160 –> 00:01:54.480
here. And now let’s create separate
00:01:54.480 –> 00:01:57.120
blocks for the other questions. So
00:01:57.520 –> 00:02:00.040
instead of going into the form content
00:02:00.040 –> 00:02:02.560
itself, we are staying up here, top left,
00:02:02.560 –> 00:02:05.040
where it says questions. And click on add
00:02:05.040 –> 00:02:07.320
a block here and now you can select any
00:02:07.320 –> 00:02:10.000
of these blocks here again so I would
00:02:10.000 –> 00:02:12.360
like phone number next yeah
00:02:13.120 –> 00:02:15.240
like we had here but it’s a separate
00:02:15.240 –> 00:02:17.080
block now, date of birth so
00:02:19.240 –> 00:02:22.000
then we go to date picker, date picker,
00:02:22.960 –> 00:02:25.680
okay then we have the next section reason
00:02:25.680 –> 00:02:28.320
for joining our gym so we want
00:02:29.920 –> 00:02:32.720
short text, yeah What you
00:02:32.720 –> 00:02:34.880
could also do is, like we had here, we
00:02:34.880 –> 00:02:37.560
had a couple of form fields on that one
00:02:37.560 –> 00:02:39.360
block. Perhaps you want to do the same
00:02:39.360 –> 00:02:41.760
thing with the sections here. So you
00:02:41.760 –> 00:02:44.400
could have one block
00:02:44.400 –> 00:02:47.360
for the personal information section,
00:02:47.600 –> 00:02:49.320
one block for movement, one block for
00:02:49.320 –> 00:02:50.800
health, and one for terms and conditions.
00:02:51.040 –> 00:02:52.320
That’s something you could also do.
00:02:53.280 –> 00:02:56.160
Perhaps I can put the… two short blocks
00:02:56.160 –> 00:02:58.640
into one to show you so again it would be
00:02:58.640 –> 00:03:01.440
make a form and here
00:03:01.840 –> 00:03:04.480
now instead of name
00:03:06.560 –> 00:03:09.200
and email I want to
00:03:09.200 –> 00:03:11.080
have the
00:03:11.760 –> 00:03:13.880
long text or short text. I
00:03:18.080 –> 00:03:20.640
can get rid of the email one
00:03:21.080 –> 00:03:23.600
ok and now you’ve got these
00:03:24.000 –> 00:03:25.840
two questions that we’re going to turn
00:03:25.840 –> 00:03:27.680
into these questions here
00:03:28.720 –> 00:03:31.600
and then let’s have, let’s move that down
00:03:31.600 –> 00:03:34.400
so we’ve got one for health and the
00:03:34.400 –> 00:03:37.120
health question and then we’ve
00:03:37.120 –> 00:03:39.600
got the privacy question
00:03:39.920 –> 00:03:42.800
but perhaps we should put the checkbox,
00:03:43.120 –> 00:03:45.200
the privacy checkbox with the name and
00:03:45.200 –> 00:03:46.440
email because that’s what it’s about
00:03:46.440 –> 00:03:49.200
here um and then
00:03:49.360 –> 00:03:52.000
I would add that checkbox in
00:03:52.160 –> 00:03:54.000
down here, where is it?
00:03:55.560 –> 00:03:58.400
Checkbox. Okay, so then you’ve
00:03:58.400 –> 00:03:59.760
got that there, and we’ll add the
00:03:59.760 –> 00:04:02.320
information in a moment. Okay, so you can
00:04:02.320 –> 00:04:03.960
really build this just as you need it,
00:04:03.960 –> 00:04:06.800
whether it’s just the form, whether
00:04:06.800 –> 00:04:09.240
it’s a form made up of one question per
00:04:09.240 –> 00:04:11.760
block, whether it’s a mix and match of
00:04:11.760 –> 00:04:13.800
some with several questions, some with
00:04:13.800 –> 00:04:16.320
just one question, play around with that.
00:04:17.040 –> 00:04:18.480
Okay, now we’ve got all our blocks, let’s
00:04:18.480 –> 00:04:21.400
add the information in. So name and
00:04:21.400 –> 00:04:24.160
email, still happy with that. Let’s
00:04:25.360 –> 00:04:27.920
put the checkbox information.
00:04:34.120 –> 00:04:35.920
Let’s put the checkbox information in
00:04:35.920 –> 00:04:36.560
here. Yeah,
00:04:39.120 –> 00:04:41.520
you can connect that or link that
00:04:41.520 –> 00:04:44.000
again via the hyperlink
00:04:44.320 –> 00:04:45.800
icon, put your website in there.
00:04:47.840 –> 00:04:50.600
Okay then for phone number I think
00:04:50.600 –> 00:04:52.560
that’s self-explanatory
00:04:54.480 –> 00:04:57.440
here and
00:04:57.440 –> 00:04:59.360
now instead of putting this question
00:05:00.080 –> 00:05:02.960
into the label for form field I’m putting
00:05:02.960 –> 00:05:05.840
it into the title field here so that then
00:05:06.080 –> 00:05:08.560
that will come up at the top and then
00:05:08.560 –> 00:05:10.440
they can input the information there.
00:05:12.040 –> 00:05:14.240
Okay here I’ve got the two
00:05:16.960 –> 00:05:19.440
I remember it was about their
00:05:19.440 –> 00:05:22.320
movement and their habits. So let’s put
00:05:22.560 –> 00:05:24.080
your movement here. And
00:05:31.680 –> 00:05:32.160
now,
00:05:34.960 –> 00:05:36.240
what’s your reason?
00:05:37.880 –> 00:05:40.600
And here, oh actually no, I want the
00:05:40.600 –> 00:05:43.360
dropdown menu. Not
00:05:44.640 –> 00:05:46.640
the long text because I want to ask them
00:05:46.640 –> 00:05:46.880
umm
00:05:50.400 –> 00:05:51.280
how often.
00:05:56.690 –> 00:05:58.890
Yeah, then my, my three options there.
00:06:07.560 –> 00:06:10.200
Okay. Good. And then I had my question
00:06:10.200 –> 00:06:12.160
about health here.
00:06:13.400 –> 00:06:15.720
And here I don’t have to click on the
00:06:15.720 –> 00:06:18.520
option to get
00:06:18.520 –> 00:06:20.440
into that label. It is already here
00:06:20.440 –> 00:06:23.080
because it’s a block in its own right. So
00:06:23.200 –> 00:06:26.160
I’m going to write in my question
00:06:26.160 –> 00:06:26.520
again.
00:06:29.240 –> 00:06:31.480
for example okay and then you can see
00:06:31.480 –> 00:06:33.600
that there and again they can type the
00:06:33.600 –> 00:06:34.760
answer in here
00:06:36.520 –> 00:06:38.840
okay if I want to change this to a long
00:06:38.840 –> 00:06:40.840
text I can click on the three dots here
00:06:41.480 –> 00:06:44.280
and now convert to long text and that is
00:06:44.280 –> 00:06:47.160
now automatically a long text field or a
00:06:47.160 –> 00:06:49.320
long text block in my form.
00:06:50.360 –> 00:06:52.840
Okay so we’ve got these first
00:06:53.160 –> 00:06:55.680
three, four
00:06:56.200 –> 00:06:58.960
fields here then and
00:06:59.080 –> 00:07:01.240
again I cannot go on because
00:07:01.880 –> 00:07:04.280
these are compulsory to fill out
00:07:05.360 –> 00:07:07.480
and therefore I need to complete them and
00:07:07.480 –> 00:07:09.000
check the box before I can submit and
00:07:09.000 –> 00:07:11.240
continue. Let’s
00:07:12.200 –> 00:07:14.680
look at the other ones so here again you
00:07:14.680 –> 00:07:16.520
can see the skip button is there by
00:07:16.520 –> 00:07:19.320
default on any form block and so if you
00:07:19.320 –> 00:07:22.200
want to get rid of them or for some of
00:07:22.200 –> 00:07:25.160
them this is the ability you now
00:07:25.160 –> 00:07:27.280
have within a
00:07:27.400 –> 00:07:30.040
multi-block form, because I can go to the
00:07:30.040 –> 00:07:32.360
first one, for example, and
00:07:33.240 –> 00:07:35.560
leave the skip button there, but but for
00:07:35.560 –> 00:07:37.200
the second one I could disable the skip
00:07:37.200 –> 00:07:40.120
button, for example. Yeah, wrong
00:07:40.120 –> 00:07:42.560
way around. I want to disable it for
00:07:43.800 –> 00:07:45.840
name and email, but for the phone I want
00:07:45.840 –> 00:07:48.760
to allow it. Okay,
00:07:48.760 –> 00:07:50.680
so now we have the skip button here, but
00:07:50.680 –> 00:07:53.480
for here, we don’t have the skip
00:07:53.800 –> 00:07:56.080
button there. Then here,
00:07:56.280 –> 00:07:59.160
everything’s there. And let’s go through
00:07:59.160 –> 00:08:01.640
the options now that you have for all of
00:08:01.640 –> 00:08:04.400
these form blocks. So we’ve
00:08:04.440 –> 00:08:05.880
talked about the skip button already.
00:08:06.280 –> 00:08:08.120
Then here it would be about the media
00:08:08.120 –> 00:08:10.600
ratio. Let’s add in our picture again.
00:08:10.600 –> 00:08:12.040
I’m going to use Pexels, the same
00:08:12.040 –> 00:08:14.760
picture, of the gym. This is another
00:08:14.760 –> 00:08:17.560
thing that is then enabled by having a
00:08:17.560 –> 00:08:20.040
multi-block form. I can have
00:08:20.200 –> 00:08:22.120
different images for each block. So
00:08:23.080 –> 00:08:25.720
if I want to have a phone
00:08:25.720 –> 00:08:27.960
here, if I spell it correctly,
00:08:30.200 –> 00:08:33.000
I can put that in, for example.
00:08:33.800 –> 00:08:36.600
So we’ve got all our blocks
00:08:36.600 –> 00:08:38.920
here. Oh, I want to change the title.
00:08:39.760 –> 00:08:42.600
Let’s change the title. So I
00:08:42.600 –> 00:08:45.520
want to put it back to our other
00:08:45.800 –> 00:08:48.360
title, the other sort of form.
00:08:48.920 –> 00:08:50.600
Join the movement um
00:08:51.880 –> 00:08:54.040
and let’s center it.
00:08:59.250 –> 00:09:00.850
What I’d actually like to do is create a
00:09:01.130 –> 00:09:03.730
title block here, so you can see here
00:09:03.770 –> 00:09:06.640
too that the
00:09:06.640 –> 00:09:09.480
first page isn’t a form field,
00:09:10.440 –> 00:09:12.640
it is just a start page and that’s
00:09:12.640 –> 00:09:14.240
something you can decide whether you, you
00:09:14.360 –> 00:09:17.240
need or want that, that extra
00:09:17.240 –> 00:09:18.680
step before someone starts filling out
00:09:18.680 –> 00:09:20.920
the form or not. If you do want that,
00:09:21.440 –> 00:09:23.800
what I can do is click on add a block and
00:09:23.800 –> 00:09:26.560
insert text media, drag and drop it
00:09:26.560 –> 00:09:28.680
to the beginning and now join the
00:09:28.680 –> 00:09:31.400
movement is actually what I
00:09:31.640 –> 00:09:32.800
want there.
00:09:34.920 –> 00:09:36.760
So I’m going to center that, that’s the
00:09:36.760 –> 00:09:39.240
image I wanted for the first
00:09:39.240 –> 00:09:39.880
page.
00:09:43.320 –> 00:09:45.320
We had that description here, let’s put
00:09:45.320 –> 00:09:46.280
that in as well.
00:09:48.520 –> 00:09:51.480
Good. Okay, designing
00:09:51.480 –> 00:09:54.000
we’ll do later on. But this is from the
00:09:54.000 –> 00:09:55.880
functionality, that’s how it now works.
00:09:55.880 –> 00:09:57.160
I’ve got this cover page, I can click
00:09:57.160 –> 00:09:59.320
start, and then I’m in my form.
00:10:00.680 –> 00:10:02.600
Now we have all our blocks set up, let’s
00:10:02.640 –> 00:10:04.680
just go through any options you might
00:10:04.680 –> 00:10:07.600
have for each block. So you
00:10:07.600 –> 00:10:10.040
always click on this options cog
00:10:10.160 –> 00:10:12.640
wheel up here. Here we just have the
00:10:12.640 –> 00:10:15.560
media ratio, which you
00:10:15.560 –> 00:10:18.360
can change unless you want it to be
00:10:18.760 –> 00:10:20.840
from the settings that we set up.
00:10:22.000 –> 00:10:23.800
Under settings itself we’ll do that in
00:10:23.800 –> 00:10:25.240
another clip.
00:10:26.800 –> 00:10:29.720
Umm okay, then for make a form the options
00:10:29.720 –> 00:10:31.640
we have here we’ve already discussed with
00:10:31.800 –> 00:10:34.000
the skip button and again the media
00:10:34.000 –> 00:10:36.600
ratio. For phone we
00:10:36.600 –> 00:10:39.480
have all of these options again now with
00:10:39.640 –> 00:10:42.280
the pre-filled text and with
00:10:42.280 –> 00:10:44.600
advanced validation options and custom
00:10:44.600 –> 00:10:47.400
ID. None of
00:10:47.400 –> 00:10:50.160
these are compulsory and if you’re
00:10:50.160 –> 00:10:53.000
working with regex
00:10:53.000 –> 00:10:55.640
keys, with the data layer, um
00:11:00.440 –> 00:11:02.720
yeah, or with webhooks for the
00:11:03.160 –> 00:11:05.080
custom field ID, then these are options
00:11:05.080 –> 00:11:06.920
that you would need for that. If not, you
00:11:06.920 –> 00:11:09.200
can leave all of these as they are.
00:11:10.440 –> 00:11:13.240
Same thing for a date of birth, we’ve got
00:11:13.240 –> 00:11:15.480
the custom field ID option there
00:11:15.960 –> 00:11:18.280
and again the input type, whether it’s a
00:11:18.280 –> 00:11:21.000
picker or the input. Again, I
00:11:21.000 –> 00:11:22.720
recommend for date of birth that you
00:11:22.720 –> 00:11:23.800
leave it as input.
00:11:25.640 –> 00:11:27.440
Okay, and then for the
00:11:28.760 –> 00:11:31.400
long text block here,
00:11:31.960 –> 00:11:34.280
again, we’ve got these options up here,
00:11:34.280 –> 00:11:36.320
which you don’t have to touch unless you
00:11:37.160 –> 00:11:40.040
are using the data
00:11:40.040 –> 00:11:42.600
layer to input information or you are
00:11:42.600 –> 00:11:45.080
using regex keys or
00:11:45.920 –> 00:11:48.760
a custom field ID for a webhook. Our
00:11:48.760 –> 00:11:51.480
multi-block version of our Riddle is
00:11:51.560 –> 00:11:54.480
done. In the next block or in the next
00:11:54.480 –> 00:11:55.600
clip we’re just going to look at the
00:11:55.600 –> 00:11:58.080
result pages for either of
00:11:58.080 –> 00:12:00.280
these and if you have any questions feel
00:12:00.280 –> 00:12:01.880
free to write to us as always and I’ll
00:12:01.880 –> 00:12:02.840
see you in the next clip.