7 Create a multi-block form

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.