Webforms: Adding the Radio Element Video Transcript

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