5 Form formatting
Let’s make your form look clean, organized, and user-friendly. We’ll:
- add section headers with rich text editor
- use spacing, dividers, and field arrangement
- format your form for clarity and readability
- add media to a form
Transcript:
00:00:04.240 –> 00:00:06.560
Hi there, welcome back. We’ve looked at
00:00:06.560 –> 00:00:09.200
the content and at the options for each
00:00:09.200 –> 00:00:10.600
form field but let’s look at the the
00:00:10.600 –> 00:00:12.480
format of the whole form
00:00:13.120 –> 00:00:15.920
itself. So right now everything is
00:00:16.680 –> 00:00:19.280
in underneath each other as one
00:00:19.840 –> 00:00:22.560
column but I could add columns so that
00:00:23.040 –> 00:00:26.000
you can put things side by side as well
00:00:26.000 –> 00:00:28.640
as below each other. So for example I
00:00:28.640 –> 00:00:30.480
could create a 50/50
00:00:32.160 –> 00:00:34.880
which I’ve now moved up here and I could
00:00:35.520 –> 00:00:37.840
click on the six dots by name for example
00:00:38.520 –> 00:00:39.960
drag and drop into
00:00:41.280 –> 00:00:44.160
this left column here and now I can do
00:00:44.160 –> 00:00:46.560
the same for the email drag and drop
00:00:46.640 –> 00:00:49.280
into the right-hand column. So
00:00:49.600 –> 00:00:52.080
then in the preview you can see the name
00:00:52.080 –> 00:00:54.040
and email are next to each other. This
00:00:54.040 –> 00:00:56.160
is really nice if, you know, it is just
00:00:56.160 –> 00:00:58.800
input like a name or a short
00:00:58.840 –> 00:01:01.720
answer, and you want the form to be a
00:01:01.720 –> 00:01:03.600
little bit more compact as well. Perhaps
00:01:03.600 –> 00:01:05.080
that works better on your website or on
00:01:05.080 –> 00:01:07.480
your app. And so that’s something you
00:01:07.480 –> 00:01:10.360
can play around with, either 50/50 or
00:01:10.400 –> 00:01:13.200
all these other options down here. And
00:01:13.600 –> 00:01:16.160
then you can always see on the right
00:01:17.120 –> 00:01:18.800
how it would look, even with three
00:01:18.800 –> 00:01:21.120
columns. Okay,
00:01:21.520 –> 00:01:24.480
another quick tip is converting, which we
00:01:24.480 –> 00:01:27.160
did earlier for the short text, turning
00:01:27.160 –> 00:01:29.560
it into a long text field. And that’s
00:01:29.560 –> 00:01:30.800
something you can do for several
00:01:30.800 –> 00:01:33.240
different form fields. So for example,
00:01:33.240 –> 00:01:34.400
next to email, let’s say, oh no, you
00:01:34.400 –> 00:01:35.520
don’t want email, you want it to be
00:01:35.520 –> 00:01:37.520
phone. Click on the three dots and then
00:01:37.520 –> 00:01:39.920
you can convert it to any of these form
00:01:39.920 –> 00:01:42.720
fields. Then what I could also do
00:01:42.720 –> 00:01:44.960
is right now I’ve got the whole form
00:01:45.680 –> 00:01:48.000
as one list running through with all
00:01:48.000 –> 00:01:50.600
these different questions. But maybe I
00:01:50.600 –> 00:01:52.440
want to block it into different sections
00:01:52.440 –> 00:01:54.160
and the way I can do that is
00:01:55.200 –> 00:01:57.960
by adding in a rich
00:01:57.960 –> 00:02:00.720
text field. That means
00:02:00.720 –> 00:02:03.680
that it’s empty right now but
00:02:03.680 –> 00:02:06.000
I could put in headings for each section
00:02:06.160 –> 00:02:08.640
for example so click on edit I could add
00:02:08.640 –> 00:02:11.520
in personal
00:02:11.840 –> 00:02:14.160
details okay
00:02:14.720 –> 00:02:16.560
and I’ll just show you what that looks
00:02:16.560 –> 00:02:19.520
like. I’ve got it down there. I
00:02:19.520 –> 00:02:22.320
want to move it to the top, click
00:02:22.320 –> 00:02:25.240
drag and drop to
00:02:25.280 –> 00:02:25.920
the top.
00:02:27.520 –> 00:02:29.840
Okay now it should be at the top there.
00:02:30.640 –> 00:02:33.600
Good. And I want to do the same for other
00:02:33.600 –> 00:02:36.160
sections as well. Again, rich
00:02:36.160 –> 00:02:36.720
text,
00:02:38.720 –> 00:02:39.200
edit.
00:02:42.960 –> 00:02:45.200
Okay, then we had
00:02:45.600 –> 00:02:46.040
health.
00:02:52.880 –> 00:02:55.680
Okay, and terms and
00:02:55.680 –> 00:02:57.160
conditions. What you could also do
00:02:57.160 –> 00:02:58.920
instead of adding that block each time is
00:02:58.920 –> 00:03:00.720
click on the three dots and click copy.
00:03:01.120 –> 00:03:02.960
Then you have a direct copy and then
00:03:02.960 –> 00:03:04.480
you could just edit it, so whichever way
00:03:04.480 –> 00:03:07.360
is easier for you. When it is useful
00:03:07.360 –> 00:03:09.280
to copy rather than create a new one is
00:03:09.280 –> 00:03:11.080
if you’ve set things up here with the
00:03:11.080 –> 00:03:13.240
rich text editor, which is the beauty of
00:03:13.240 –> 00:03:15.240
this form field, then you don’t have to
00:03:15.240 –> 00:03:17.680
do that again and again, you can just
00:03:17.680 –> 00:03:20.600
keep all those settings and all those
00:03:20.600 –> 00:03:22.480
options that you’ve set up here will be in
00:03:22.480 –> 00:03:23.600
the copied version already.
00:03:33.750 –> 00:03:36.390
So now this is in blue, for
00:03:36.390 –> 00:03:39.310
example, but if I wanted to
00:03:39.990 –> 00:03:42.550
I could also change to a specific RGBA
00:03:42.550 –> 00:03:44.310
color for example and I would go into the
00:03:44.310 –> 00:03:46.990
HTML editor here and here
00:03:47.670 –> 00:03:49.390
I can type in because I want it to be
00:03:49.390 –> 00:03:50.550
this grey color.
00:03:52.550 –> 00:03:55.190
I pre-selected what I want, it can be a
00:03:55.190 –> 00:03:57.990
brand color that you have in mind or
00:03:57.990 –> 00:04:00.800
that you need to follow. and
00:04:01.400 –> 00:04:03.280
click on save and now in the preview you
00:04:03.280 –> 00:04:05.280
can see it that’s in this grey color
00:04:05.280 –> 00:04:08.000
here. If I was to now copy
00:04:08.000 –> 00:04:10.800
this, then it
00:04:10.800 –> 00:04:12.640
creates a copy that is already, that
00:04:12.640 –> 00:04:15.440
already has that HTML code
00:04:15.440 –> 00:04:18.240
in there. So you know,
00:04:18.240 –> 00:04:20.000
that might be easier than now adding the
00:04:20.000 –> 00:04:22.240
code to the others in hindsight.
00:04:22.880 –> 00:04:25.360
So let’s delete them.
00:04:27.880 –> 00:04:29.880
Perhaps with one I can just show you so
00:04:29.880 –> 00:04:32.640
that you get the idea again. So what I
00:04:32.640 –> 00:04:35.240
would do, change the
00:04:35.240 –> 00:04:38.080
color to, change it to this,
00:04:38.440 –> 00:04:40.480
and then when I open the editor I’ve got
00:04:40.480 –> 00:04:42.720
this RGBA code
00:04:44.000 –> 00:04:46.520
in there already and I can add the
00:04:50.240 –> 00:04:52.400
color codes into that.
00:04:56.160 –> 00:04:58.640
Okay, so that’s that way of doing it. I
00:04:58.640 –> 00:04:59.440
want to move it up again
00:05:01.440 –> 00:05:04.280
to here okay but here I’m just
00:05:04.280 –> 00:05:05.960
going to change the text so
00:05:09.800 –> 00:05:12.160
and move them down to the right place,
00:05:14.080 –> 00:05:14.280
good.
00:05:17.200 –> 00:05:20.160
But I want these titles or
00:05:20.160 –> 00:05:22.880
headings to be closer to, to be
00:05:22.880 –> 00:05:24.560
further down so I want to create a space.
00:05:24.560 –> 00:05:26.400
I’m going to put a paragraph in between
00:05:26.400 –> 00:05:29.360
each one so the way to do
00:05:29.360 –> 00:05:32.320
that, again go into edit, go into
00:05:32.320 –> 00:05:35.000
the HTML editor and we’re going to
00:05:35.280 –> 00:05:37.680
add in another paragraph,
00:05:38.240 –> 00:05:40.400
oh got uncaps lock.
00:05:43.840 –> 00:05:46.160
So just put in that each time.
00:05:49.840 –> 00:05:51.720
Let’s have a look, great now I’ve got
00:05:51.720 –> 00:05:53.600
that spacing just how I want it to be
00:05:53.920 –> 00:05:55.920
there, good.
00:05:56.800 –> 00:05:59.600
So that’s our all-in-one
00:05:59.600 –> 00:06:02.080
form done. I’ll see you in the next video
00:06:02.320 –> 00:06:05.200
to look at rebuilding this form but
00:06:05.200 –> 00:06:08.120
as a multi-block form rather
00:06:08.120 –> 00:06:11.000
than an all-in-one form. Oh, you can see
00:06:11.000 –> 00:06:12.480
I haven’t added in a picture, let’s add
00:06:12.480 –> 00:06:15.200
in a picture to this beautiful form.
00:06:16.000 –> 00:06:17.520
Click on add media, I’m going to use
00:06:17.520 –> 00:06:19.200
Pexels, and gym.
00:06:20.640 –> 00:06:21.480
Let’s use this one here.
00:06:24.960 –> 00:06:25.520
Good.
00:06:27.920 –> 00:06:30.840
Okay, and
00:06:30.840 –> 00:06:32.840
maybe let’s center this and put in a
00:06:32.840 –> 00:06:33.600
description.
00:06:36.840 –> 00:06:38.160
I want to center that.
00:06:41.880 –> 00:06:42.960
Fill out the form and
00:06:51.060 –> 00:06:54.020
put some sort of description or message
00:06:54.020 –> 00:06:56.920
in there so that your audience know what
00:06:56.920 –> 00:06:59.880
to do if you think that’s necessary to
00:06:59.920 –> 00:07:01.920
add that in. It is absolutely optional.
00:07:02.960 –> 00:07:03.920
Okay.
00:07:05.920 –> 00:07:08.640
The final thing that will make this form
00:07:08.640 –> 00:07:11.360
look like this one, as you can probably
00:07:11.360 –> 00:07:14.280
see, is the design. So we’ll do that
00:07:14.280 –> 00:07:16.480
in another video because that can apply
00:07:16.480 –> 00:07:19.040
to anything, not just this form.
00:07:20.240 –> 00:07:21.760
So in the next video we’ll look at
00:07:21.760 –> 00:07:24.560
making a multi-block version of the
00:07:24.560 –> 00:07:27.280
same form. If you have any questions feel
00:07:27.280 –> 00:07:29.520
free to write to us at academy@riddle.com
00:07:29.840 –> 00:07:31.560
or in our support chat on our website and
00:07:31.560 –> 00:07:32.560
I’ll see you in the next step.