Back to Webforms: Adding the Radio Element Video
welcome in this video in the webform
series we're going to review how to add
the radial element to your web forms now
the radio element allows you to add
lists of options that users will select
one so you can see here if I hover over
one of these I can select one of these
radio options but only a single option
now the nice thing with these radio
fields is that you can also add things
like help bubbles you can add
descriptive text over each one of the
selections as users hover over them you
can add additional help text at the
bottom of the field and you can even add
these little dropdowns that when users
click on them you can see it opens and
closes and you can utilize things like a
WYSIWYG toolbar to be able to add things
like links and other stuff so let's go
ahead and dig in how to do that to add a
new element you're going to click on
build on your web form and then at the
very top here we're going to click on
add element
now the thing with the elements is that
there's so many back here that you know
it can be kind of hard to like scroll
through and find all the stuff so I like
to use the little search bar up here
I'll just searching for radio and you'll
see there's two different options for
radios there's radios and radios other
the main difference between these two is
that radios other adds this other field
here where you can customize it and add
like an additional text field or text
area or something like that to allow
users to type in their own response if
they select other in this case we're
just going to cover the regular radios
option so I'm going to click on add
element for radios
and the first thing I'm gonna do is give
my radio section a question or title or
something so in this case I'm going to
create a question something like that
and then when I scroll down here I've
got a couple options I can either add my
own custom options which is--what's-- by
default selected here or if you're going
to generate you know kind of like a
generic list of things that users will
typically select from you can click this
little drop down here and it'll have a
bunch of sort of predetermined list that
you can choose from so yes no less days
list it'll list out all the days for you
Sunday through Saturday you can add
things like state names so you don't
have to type out all 50 states you can
just generate a list automatically and
so you can select one of those and I'll
just make it one for you and then
that'll save you a ton of time but you
know if you're going to be generating a
list that doesn't include any of those
things you're gonna have to create your
own custom list so by default we're
gonna leave it on custom options and
this is where I'm going to start typing
in the options for my radio list so I'm
going to just kind of start typing them
in here
and you'll notice as I'm typing that the
option text over here will automatically
fill in generally want these to just
kind of be the same this is what allows
the system to correlate between you know
what answers are these coming from and
which selection did the person check off
so by default just kind of leave these
as is you don't really need to mess
around with those just type in whatever
you want the value to be here now you'll
also notice that there are description
fields that appear under each one of
these and this is what allows you to add
that little pop-up bubble that appears
when someone hovers their cursor over
the radio so you can add that here
and also you'll notice that there's only
three options it's listed here and so if
you want to you can add additional radio
selections by clicking add down here by
default it'll do one at a time
but if you know how many you need to add
you can click that here and click Add
and just as much if you add some extra
fields and you said like hey actually
don't need all of those you can go ahead
and click little minus button here and
the other cool thing is that if if you
want to reorder these you don't have to
keep them the order you started typing
you can drag and drop these in whatever
order you like like so okay so I'll go
ahead and finish this out here now let's
see I need one more than that okay so
some of these I have descriptions some
of my don't that's alright if we scroll
down a little farther you'll see there's
an option to randomize these options
here so that each time someone loads the
webform these options will actually be
scrambled in different orders so that
might be useful depending on what you
need you can also do things like add
multiple columns you can change whether
the help text or description appears
when someone hovers over the little
options there
scrolling down farther there's the
element description so this is the kind
of additional information that appears
below the radio buttons
the little help section here is for that
little help bubble that appears so you
might ask something like
so then this will appear when someone
hovers over one of those little bubbles
just like that works the more one adds
additional information below the element
description and so this really you
probably won't need to use this too
often but if you need to the nice thing
about this is this allows you to use the
WYSIWYG so you can add things like links
and other stuff so
all right when you're all done you can
kind of skip on down there's some
additional form display settings that
you can play around with if you want you
know where do you want the title do you
want to be in line do you want to be
above do you want people low whatever
you can play around with those things if
you'd like I'll show you the default
settings what everything looks though
and so lastly you're going to choose
whether you want the form validation be
required or unique depending what you
need you might need to make it required
or maybe not when you're done go ahead
and click on save
and just kind of one note if you've
added your capture element you might
want to drag that down to the bottom and
because all the new elements will be
added to the very bottom of your list so
I drag the capture to the bottom I'll go
ahead and save that and then now I can
take a look at my form
okay so if we scroll down here you can
see that this is the field that I just
added what movies do you like each one
of these are my various options that I
typed in you'll see only three of those
have the description because I only type
the description into three of them these
ones don't and then the little hop
bubble right here more the element
information that adds to the bottom and
then there's that drop-down where you
can add some more stuff so you know
that's basically it in a nutshell that's
how you add the radial element to your
web forms