5 Form formatting

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.