3 Create an all-in-one form
Now let’s create an all-in-one form that combines multiple elements into one block. We’ll:
- use the “all-in-one” form block
- add multiple fields (e.g. name, email, feedback) in one place
- edit form field content and display
- understand when to use this layout for a seamless user experience
Transcript:
00:00:04.960 –> 00:00:06.840
Hi there, welcome back. In this video
00:00:06.880 –> 00:00:08.640
we’re going to continue creating our
00:00:09.240 –> 00:00:11.100
all-in-one form. By default in our form
00:00:11.100 –> 00:00:13.600
you can see we’ve got this name and
00:00:13.600 –> 00:00:15.960
email field already here. And now we
00:00:15.960 –> 00:00:17.760
want to add in all the other fields to
00:00:17.760 –> 00:00:20.400
reflect this original here. So
00:00:20.880 –> 00:00:22.880
to add any other form fields, click on
00:00:22.880 –> 00:00:25.360
add form block and select any of these
00:00:25.360 –> 00:00:27.440
options from this list.
00:00:28.160 –> 00:00:30.080
Let’s add them all in. Phone,
00:00:32.400 –> 00:00:33.360
drop down,
00:00:36.880 –> 00:00:37.640
date picker,
00:00:39.440 –> 00:00:40.880
short text,
00:00:42.280 –> 00:00:44.960
another short text, and then
00:00:45.600 –> 00:00:47.920
a checkbox as well.
00:00:48.880 –> 00:00:51.800
Okay, so most of these
00:00:51.800 –> 00:00:53.440
are, let’s have a look in the preview,
00:00:54.960 –> 00:00:56.080
most of these are pretty
00:00:56.080 –> 00:00:58.800
self-explanatory, like name and
00:00:59.120 –> 00:01:01.840
phone number. But let’s add some
00:01:01.840 –> 00:01:04.480
information to these down here so that
00:01:04.480 –> 00:01:07.120
it’s clear what the person should enter
00:01:07.120 –> 00:01:07.440
there.
00:01:09.100 –> 00:01:12.800
For example, for the dropdown, click on
00:01:12.880 –> 00:01:15.800
edit here. And under label, I want to
00:01:17.280 –> 00:01:20.080
tell the person that they should
00:01:20.400 –> 00:01:21.100
select how often they plan on coming to
00:01:21.100 –> 00:01:22.400
the gym.
00:01:26.320 –> 00:01:29.120
Okay and here you can now put
00:01:29.120 –> 00:01:30.960
in the options that they can select from
00:01:30.960 –> 00:01:33.200
that dropdown menu for example.
00:01:39.840 –> 00:01:41.440
So I’ve got all my options there, click
00:01:41.440 –> 00:01:44.240
on save and that’s done.
00:01:44.640 –> 00:01:47.240
For date picker I would like to
00:01:47.520 –> 00:01:50.320
ask them what’s your date of birth?
00:01:53.100 –> 00:01:56.960
And I’d actually like this date of
00:01:56.960 –> 00:01:59.640
birth question to be before the
00:02:00.400 –> 00:02:02.520
how often question. So click on the
00:02:03.040 –> 00:02:05.760
six dots to the left of that icon
00:02:06.080 –> 00:02:08.200
and click, drag, and drop to wherever
00:02:08.200 –> 00:02:10.160
you’d like it. So I want it to be just
00:02:10.160 –> 00:02:12.800
one place up. Okay.
00:02:13.200 –> 00:02:16.080
And for this first short text, I want to
00:02:16.080 –> 00:02:18.560
know their motivation for coming.
00:02:21.760 –> 00:02:23.240
And I don’t want to limit them to the
00:02:23.240 –> 00:02:24.600
options, so that’s why I’ve chosen short
00:02:24.600 –> 00:02:27.160
text fields, so that they can input their
00:02:27.200 –> 00:02:29.040
answers as they wish. I’ll just show you
00:02:29.040 –> 00:02:31.920
in the preview. Um it means I
00:02:31.920 –> 00:02:33.720
can write: to
00:02:34.320 –> 00:02:36.880
feel better and
00:02:37.280 –> 00:02:38.880
healthier, for example.
00:02:40.480 –> 00:02:42.520
Yeah, for
00:02:44.160 –> 00:02:47.120
strength, for fun, whatever
00:02:47.120 –> 00:02:49.920
it is. As you can see, depending on how
00:02:50.160 –> 00:02:52.560
long of an answer you’re expecting, it
00:02:52.560 –> 00:02:54.960
might make sense to turn this short text
00:02:54.960 –> 00:02:57.920
into a long text box. And
00:02:57.920 –> 00:02:59.440
I’ll show you what that would look like.
00:03:00.040 –> 00:03:02.280
And you can even convert one into the
00:03:02.360 –> 00:03:03.680
other so you don’t have to create a new
00:03:03.680 –> 00:03:06.560
one. I can click on the three
00:03:06.560 –> 00:03:08.960
dots on the right here and convert
00:03:09.100 –> 00:03:12.640
to long text. Now it’s exactly the
00:03:12.640 –> 00:03:15.360
same, but in the preview, you
00:03:15.360 –> 00:03:18.160
can now see that
00:03:18.160 –> 00:03:20.840
this turns into a bigger box that
00:03:21.040 –> 00:03:22.960
allows for more text. So
00:03:24.400 –> 00:03:25.360
just to show you, yeah
00:03:27.280 –> 00:03:29.120
you can even go into new lines and so on.
00:03:29.120 –> 00:03:31.760
So that could be what you need here.
00:03:32.640 –> 00:03:35.440
It’s up to you. Now for our other
00:03:35.440 –> 00:03:37.400
short or long text, again, it’s up to
00:03:37.400 –> 00:03:39.120
you. I want to ask,
00:03:40.320 –> 00:03:42.720
do you have any health conditions?
00:03:48.800 –> 00:03:51.100
Again, it could be a short text for some
00:03:51.100 –> 00:03:54.600
or empty or long for others and so
00:03:54.600 –> 00:03:57.480
perhaps it’s worth making
00:03:57.480 –> 00:03:59.680
it into a long text. So again,
00:04:01.200 –> 00:04:02.640
click on the three dots
00:04:05.160 –> 00:04:07.360
and convert to long text.
00:04:10.800 –> 00:04:13.400
Okay, good, and again that turns into
00:04:14.080 –> 00:04:16.960
that other text box there. The checkbox
00:04:16.960 –> 00:04:19.360
at the bottom here is what I
00:04:19.600 –> 00:04:22.600
want for the participants or for the new
00:04:22.640 –> 00:04:25.600
members here to check so
00:04:25.600 –> 00:04:28.280
that they can agree and/or
00:04:28.280 –> 00:04:31.200
read your terms and conditions that you
00:04:31.200 –> 00:04:32.680
have attached to collecting their
00:04:32.680 –> 00:04:34.880
information and
00:04:35.600 –> 00:04:36.560
filling out this form.
00:04:39.040 –> 00:04:40.560
Put that information here.
00:04:44.240 –> 00:04:47.200
And I also want to link the words
00:04:47.200 –> 00:04:50.080
terms and conditions to my website where
00:04:50.080 –> 00:04:52.160
I have these terms and conditions written
00:04:52.160 –> 00:04:54.320
out. Or perhaps you have other
00:04:55.040 –> 00:04:56.800
privacy or compliance
00:04:57.920 –> 00:05:00.240
texts that you want to link to here. So
00:05:00.720 –> 00:05:02.880
highlight the text, click on the
00:05:02.880 –> 00:05:05.200
hyperlink icon, and then here you can put
00:05:05.200 –> 00:05:08.160
in a website where you
00:05:08.160 –> 00:05:10.720
have your T’s and
00:05:10.720 –> 00:05:13.440
C’s. By default, it’ll open in a new tab.
00:05:13.440 –> 00:05:14.100
You could disable that if you wanted to.
00:05:15.760 –> 00:05:17.360
Click on Save, and now that’s
00:05:17.360 –> 00:05:20.200
hyperlinked. OK,
00:05:20.200 –> 00:05:23.040
we have all the elements of our
00:05:23.360 –> 00:05:25.120
form now ready to use.
00:05:26.360 –> 00:05:28.760
So you could leave it as is, but I
00:05:28.760 –> 00:05:30.160
want to make a couple of couple more
00:05:30.160 –> 00:05:32.560
changes and look at the options for these
00:05:32.560 –> 00:05:33.960
different form fields.
00:05:35.100 –> 00:05:37.560
One thing you can see here is we’ve got
00:05:37.560 –> 00:05:39.680
these instructions on the right-hand side
00:05:39.680 –> 00:05:42.160
of that box, and they’re in there by
00:05:42.160 –> 00:05:44.160
default. You could remove them or also
00:05:44.160 –> 00:05:46.240
add them to others, for example,
00:05:46.960 –> 00:05:49.920
perhaps by phone number. The
00:05:49.920 –> 00:05:51.520
way you would do that is, again, click on
00:05:51.520 –> 00:05:53.160
the edit button, and for field
00:05:53.160 –> 00:05:53.760
instructions,
00:05:56.160 –> 00:05:58.880
type your message, in this case your
00:05:58.880 –> 00:05:59.680
instructions,
00:06:03.100 –> 00:06:06.400
for example. So you’ve got that
00:06:06.400 –> 00:06:07.080
in there.