4 Form field options
Forms can be set up and used in several ways. In this video, we’ll explore the different options. We’ll:
- choose between required and optional fields
- set placeholder text and validation rules
Transcript:
00:00:04.320 –> 00:00:06.160
Let’s look at all the options apart from
00:00:06.160 –> 00:00:07.920
changing text that are available in
00:00:07.920 –> 00:00:10.320
forms. For example,
00:00:10.800 –> 00:00:13.120
required field. This is enabled by
00:00:13.120 –> 00:00:15.120
default for name and email
00:00:16.000 –> 00:00:18.920
and it’s most likely something that you
00:00:18.920 –> 00:00:20.360
do want to collect, but if you don’t
00:00:20.400 –> 00:00:22.880
require it, then you can disable that
00:00:22.880 –> 00:00:24.800
there. If you do have it required, then
00:00:24.800 –> 00:00:26.840
you could also put in a text to remind
00:00:26.840 –> 00:00:28.240
them that they do have to fill it in if
00:00:28.240 –> 00:00:31.240
they don’t fill it in. Another thing here
00:00:31.240 –> 00:00:34.160
is the pre-filled text. That would be if
00:00:34.320 –> 00:00:36.760
you are using the data layer or you want
00:00:36.760 –> 00:00:39.520
to input fields from another block answer
00:00:39.760 –> 00:00:42.400
or from another form field that you
00:00:42.400 –> 00:00:44.880
have in in the Riddle, and then you could
00:00:44.880 –> 00:00:47.400
input that here to to make the
00:00:47.520 –> 00:00:50.280
experience faster and smoother for the
00:00:50.280 –> 00:00:53.280
participant. So in our case,
00:00:53.280 –> 00:00:55.000
we don’t have that, so I’m going to
00:00:55.440 –> 00:00:57.680
disable that again. Then,
00:00:58.480 –> 00:00:59.720
hidden field is something I could
00:00:59.720 –> 00:01:01.720
do too if I wanted to hide this for the
00:01:01.720 –> 00:01:03.960
audience themselves, but for you to be
00:01:03.960 –> 00:01:06.880
able to identify that in the
00:01:06.880 –> 00:01:09.400
background with the,
00:01:10.640 –> 00:01:12.920
for example, with the variable that has
00:01:12.920 –> 00:01:14.800
their name in there already for example.
00:01:15.520 –> 00:01:18.080
So that’s something you can set up.
00:01:18.720 –> 00:01:21.040
Then we’ve got advanced validation
00:01:21.040 –> 00:01:23.760
options and if you have a regex
00:01:23.760 –> 00:01:26.320
key perhaps not for name, but for other
00:01:26.320 –> 00:01:29.200
things, then you can input that
00:01:29.200 –> 00:01:30.920
here and make sure that it’s always the
00:01:30.920 –> 00:01:33.200
right format or you’re limiting entries
00:01:33.440 –> 00:01:35.360
to specific
00:01:37.120 –> 00:01:39.200
sorts of numbers or specific sorts of
00:01:39.280 –> 00:01:41.440
answers, specific sorts of areas, if
00:01:41.440 –> 00:01:42.720
you’ve got a country in there, for
00:01:42.720 –> 00:01:45.640
example. And you
00:01:45.640 –> 00:01:48.560
also have a character limit. So here, for
00:01:48.560 –> 00:01:50.400
example, we’ve got a character limit for
00:01:50.400 –> 00:01:51.920
name, but okay, maybe someone has a
00:01:51.920 –> 00:01:53.400
really long name and then I want to
00:01:53.400 –> 00:01:56.160
increase that to 50, for example.
00:01:56.880 –> 00:01:58.840
The final thing we have here is the
00:01:58.880 –> 00:02:01.520
custom field ID, and this is then the
00:02:01.520 –> 00:02:03.520
ID that would then be sent with the
00:02:03.520 –> 00:02:05.280
webhook. So if you’re connecting this
00:02:05.280 –> 00:02:06.720
form to a webhook, which you don’t have
00:02:06.720 –> 00:02:09.120
to, but if you are, then you can
00:02:09.480 –> 00:02:11.320
enter a custom field ID there that will
00:02:11.320 –> 00:02:14.280
then be represented with
00:02:14.280 –> 00:02:15.760
the connected webhook as well.
00:02:16.720 –> 00:02:19.200
Okay, let’s get rid of that
00:02:19.200 –> 00:02:22.000
again. And yeah, I just want,
00:02:22.240 –> 00:02:23.480
I don’t even need the description to be
00:02:23.480 –> 00:02:25.680
honest, so I’ve just got the label and
00:02:25.680 –> 00:02:27.920
it’s a required field. Press save and
00:02:27.920 –> 00:02:29.760
then they’ve changed to there. It’s
00:02:29.760 –> 00:02:31.800
pretty much the same options for all
00:02:31.800 –> 00:02:34.640
these different form fields,
00:02:34.880 –> 00:02:37.360
but for a couple we have a few more
00:02:37.360 –> 00:02:39.680
things or sometimes fewer things.
00:02:40.000 –> 00:02:41.440
Here it’s the same.
00:02:43.280 –> 00:02:46.000
For date, for example, here we’ve got
00:02:46.000 –> 00:02:48.880
input, but you might want picker, which
00:02:48.880 –> 00:02:51.520
would mean, okay, I do want that format,
00:02:51.880 –> 00:02:54.400
which would mean that
00:02:54.560 –> 00:02:56.400
your audience can pick a date
00:02:57.040 –> 00:02:59.360
from the pop-up
00:03:00.240 –> 00:03:01.360
calendar that comes,
00:03:04.720 –> 00:03:06.600
which sometimes is really useful if it’s
00:03:06.600 –> 00:03:09.080
something more like an event and
00:03:09.080 –> 00:03:12.080
something that’s a bit closer to the
00:03:12.080 –> 00:03:14.520
present. With the date of birth I don’t
00:03:14.520 –> 00:03:16.880
recommend it because it’s usually
00:03:17.760 –> 00:03:19.560
really annoying to have to go back to the
00:03:19.560 –> 00:03:22.000
right year and date so I
00:03:22.000 –> 00:03:24.040
recommend if you’ve got date of birth for
00:03:24.040 –> 00:03:26.680
your date picker then put it back to
00:03:26.680 –> 00:03:29.040
input. Okay
00:03:29.840 –> 00:03:32.480
then for the dropdown menu
00:03:33.920 –> 00:03:35.840
we already filled in those options.
00:03:36.160 –> 00:03:38.800
Same things there and for our
00:03:38.800 –> 00:03:40.400
short or long text
00:03:41.280 –> 00:03:44.000
fields we also have the same options
00:03:44.000 –> 00:03:46.320
there and
00:03:47.680 –> 00:03:50.400
finally our checkbox. Here
00:03:51.040 –> 00:03:53.520
we already put the label text in there
00:03:54.080 –> 00:03:56.960
but it’s, it’s often important
00:03:56.960 –> 00:03:59.840
for you to have that as a required field
00:04:00.240 –> 00:04:03.120
because it might be
00:04:03.440 –> 00:04:05.000
legally binding for you to have
00:04:05.000 –> 00:04:08.000
permission before you save
00:04:08.000 –> 00:04:09.960
someone’s names, email addresses, and
00:04:09.960 –> 00:04:11.360
phone numbers, for example. So just make
00:04:11.360 –> 00:04:13.280
sure that you’re doing the right thing
00:04:13.280 –> 00:04:16.000
there in in line with your company policy
00:04:17.680 –> 00:04:19.280
and then click on the save.
00:04:20.080 –> 00:04:21.100
Okay, I’m going to preview that again.
00:04:23.520 –> 00:04:26.400
All looking how I want it to look.
00:04:26.720 –> 00:04:29.040
And oh, by the way, if you do have
00:04:29.840 –> 00:04:32.240
a maximum number of
00:04:32.240 –> 00:04:34.520
characters, then it will say that here
00:04:34.520 –> 00:04:36.880
and it will go down. So I can see I’ve
00:04:36.960 –> 00:04:39.000
only got 25 characters. I actually want
00:04:39.000 –> 00:04:41.200
to make sure that that’s much longer. So
00:04:41.200 –> 00:04:43.840
let’s go into that health concerns
00:04:43.840 –> 00:04:44.720
field
00:04:47.600 –> 00:04:49.040
and let’s
00:04:50.480 –> 00:04:52.720
change the character limit to
00:04:53.200 –> 00:04:55.120
200 instead.
00:04:56.320 –> 00:04:58.000
Then I can preview that again. Okay, and
00:04:58.000 –> 00:05:00.320
now I’ve got much more room for
00:05:00.320 –> 00:05:02.680
manoeuvre there as a participant and
00:05:02.680 –> 00:05:05.600
don’t feel confined to just a few words.
00:05:06.040 –> 00:05:07.760
Sometimes it can be really annoying in a
00:05:07.760 –> 00:05:09.560
form I think when you’re trying to
00:05:09.680 –> 00:05:11.760
explain something or write a list and
00:05:11.760 –> 00:05:13.400
then you’re cut off and you don’t want
00:05:13.400 –> 00:05:14.880
your members to have to worry about that
00:05:15.600 –> 00:05:17.120
but of course there’s also no minimum so
00:05:17.120 –> 00:05:19.120
they don’t have to fill it out because
00:05:19.120 –> 00:05:21.360
it’s not required. But um
00:05:22.800 –> 00:05:25.760
I do have to click on that to be
00:05:25.760 –> 00:05:27.240
able to submit and continue.
00:05:28.760 –> 00:05:31.120
What you can see, though, is that I could
00:05:31.120 –> 00:05:32.960
skip the whole form, and that is because
00:05:32.960 –> 00:05:35.200
this option relates to this whole block,
00:05:35.200 –> 00:05:37.280
or this form block as a whole, rather
00:05:37.280 –> 00:05:40.120
than each specific form field. So I’ll
00:05:40.160 –> 00:05:41.680
just show you how to get rid of that skip
00:05:41.680 –> 00:05:43.640
button. In this case I really don’t want
00:05:43.640 –> 00:05:46.120
the skip button here because I need the
00:05:46.120 –> 00:05:47.600
members to fill out this form to be
00:05:47.600 –> 00:05:49.760
registered. Otherwise it doesn’t work
00:05:49.840 –> 00:05:52.760
with that flow. So you know sometimes
00:05:52.760 –> 00:05:54.480
people have a skip button in there if the
00:05:54.480 –> 00:05:57.360
form is part of a quiz, part of a poll
00:05:57.360 –> 00:05:59.120
for example, and it’s an optional to add
00:05:59.120 –> 00:06:01.680
in your details. But here it’s not
00:06:01.680 –> 00:06:03.680
optional. So let’s get rid of that skip
00:06:03.680 –> 00:06:06.440
button. Click on the
00:06:06.440 –> 00:06:08.240
options icon and
00:06:10.400 –> 00:06:12.680
disable the skip button. Now when I go on
00:06:12.680 –> 00:06:15.280
the preview you can see the skip button
00:06:15.280 –> 00:06:17.440
has gone and I can fill out all these
00:06:17.480 –> 00:06:19.040
things but I won’t be able to click on
00:06:19.040 –> 00:06:21.640
submit and continue before I fill out the
00:06:21.640 –> 00:06:24.200
required fields namely the name, the
00:06:24.200 –> 00:06:27.040
email and the checkbox at the
00:06:27.040 –> 00:06:29.920
bottom. That’s our all-in-one form, which
00:06:29.920 –> 00:06:32.560
you can use as a standalone form or as
00:06:32.560 –> 00:06:35.280
part of another Riddle. And I’ll show you
00:06:35.280 –> 00:06:37.600
how to do that in another step. For
00:06:37.600 –> 00:06:39.280
now, feel free to play around with that.
00:06:39.280 –> 00:06:40.800
If you have any questions, feel free to
00:06:41.040 –> 00:06:43.360
write to us at academy@riddle.com or on
00:06:43.360 –> 00:06:45.520
our support chat on our website. And I’ll
00:06:45.520 –> 00:06:46.720
see you in the next video.