Webforms: Live Help Session
Webforms are one way to engage site visitors. Common types of forms include contact forms, feedback forms and sign up forms.
Toggle between list and paragraph view.
- [00:00:02.190][Keith McGuffey] And go ahead and get started. So, uh,
- [00:00:04.290]today we're going to be
talking about web forms.
- [00:00:06.120]Let me go ahead and share my screen.
- [00:00:14.360]All right.
- [00:00:14.690]So web forms are a way in the UNL
CMS to collect data from users.
- [00:00:19.790]Um, setting one up is very similar
to setting up a basic page. Uh,
- [00:00:23.990]so we're going to go to the add
content option up here in the gray
- [00:00:27.980]administration menu.
- [00:00:30.140]And you might be familiar with adding
basic pages or some sort of, uh, uh,
- [00:00:33.950]news item here. We're going to go down
to the bottom and add this web form
- [00:00:38.150]instead. Now on this page,
- [00:00:41.770]this is very similar
to adding a basic page.
- [00:00:45.260]We'll give it a title and a body.
- [00:00:48.140]I'm just gonna put some
dummy text in here for now.
- [00:00:51.020]So the body is actually going to go, when we view the
- [00:00:55.160]final form, the body will
go above the form itself.
- [00:00:59.060]So this is a good spot to put, like,
you know, information about your,
- [00:01:02.990]your event or information that might be
necessary before the person fills out
- [00:01:07.490]the form. Uh, this is
a good place for that.
- [00:01:11.270]You have all the same options down here
that we do on the basic page.
- [00:01:13.580]I'm going to go ahead and just save this,
- [00:01:17.540]and for web forms, instead
of going to, to view the,
- [00:01:22.460]uh, the page itself after you save, you're
actually going to come to a new tab.
- [00:01:26.990]So if you're in the top left, you
can see, we have the, the view tab
- [00:01:29.330]like we normally do, the edit
tab like we normally do, and
- [00:01:31.440]now we have this new 'web form' tab,
- [00:01:34.100]and this is where anything dealing with
the fields of the form will be, uh,
- [00:01:38.840]configured. So under that we have
a couple options here. We're,
- [00:01:42.220]we're currently on the form builder.
There's also a form components,
- [00:01:45.470]conditionals, emails, and form settings.
- [00:01:47.870]And we'll kind of go through all of
these. Form builder and form component
- [00:01:52.100]are how you add fields to the form. Um,
- [00:01:56.720]I can show you the form components.
- [00:01:58.100]I don't work a lot in this because I
find it kind of hard to play around with,
- [00:02:01.520]but basically you put in what you want
the title of the field to be, what type of
- [00:02:06.350]field you want, whether or not you want
it and hit add. I like the form builder,
- [00:02:10.790]cause it's, it's more of a drag
and drop interface. You can see,
- [00:02:14.270]we have a form preview here that lets
you kind of see what it's going to look
- [00:02:17.450]like when it's done and
off to the right here,
- [00:02:20.630]you can add a field. And it really is
truly just like a drag and drop thing.
- [00:02:24.810]I'm going to drag and drop this
text field under the start
- [00:02:29.450]area here, you see, we
have a new text field.
- [00:02:32.390]This is something that someone
can go ahead and type, you know,
- [00:02:34.640]if we're looking for a name or whatever,
we can, they can type it in there.
- [00:02:38.900]And like I said, drag and drop it.
- [00:02:40.100]So I'm going to ask for
an email address as well.
- [00:02:42.650]And there's a lot of options here.
- [00:02:44.510]I'm going to go with these radio buttons
that lets someone pick one of a couple
- [00:02:48.830]of options, right? So I have these,
- [00:02:52.550]I have these fields kind of ready to go,
- [00:02:55.220]but I want to change the title and
maybe the options with these. To do that,
- [00:03:00.190]while you're, while I'm
hovering over these,
- [00:03:01.690]you might see that dotted outline going
around the field and there's this little
- [00:03:05.710]pencil button to the
top right of the field.
- [00:03:09.250]That's kind of the edit
button for the field itself.
- [00:03:12.760]And that will give you some options
here, uh, to play around with,
- [00:03:16.560]with the field, to give
it a different title. Uh,
- [00:03:18.880]so 'New Radios' doesn't mean a whole
lot to anybody, but if I put in, like,
- [00:03:23.260]'How did you hear about us?', now they
know what they're looking for. Uh,
- [00:03:27.100]the description, will actually go
below the, the options itself.
- [00:03:31.690]So if you need to give a description
of maybe a way to lead your,
- [00:03:36.510]your user on to what they should
be putting into this field. Uh,
- [00:03:40.130]there's some display options.
For instance, we can make the,
- [00:03:43.030]the options in line with the
label instead of under it.
- [00:03:46.750]I usually just kind of leave these
alone and go with the default
- [00:03:49.510]display. I'm going to the skip options for a second. Uh,
- [00:03:53.170]depending on what kind of field you
have, you might have different tabs here.
- [00:03:56.830]Options is kind of specific to ones like
radio buttons or the select list where
- [00:04:01.150]you define the options.
Um, but under validation,
- [00:04:04.600]this is where you can make a field
required. If I select that you can see this
- [00:04:08.230]little red asterisk comes
up beside the label.
- [00:04:11.920]That means a person has to fill out that
field before the form can be submitted.
- [00:04:17.910]Back to these options. This is where I
define what these radio buttons say for,
- [00:04:22.420]for folks to, to give
their answer. So I said,
- [00:04:26.890]'How do you hear about us?' I'm going to
say, 'TV' is an option. 'Radio' is an option.
- [00:04:31.480]And I'll say 'Other' for the third one.
- [00:04:34.420]You can kind of see here at the end, there's
plus and minus buttons.
- [00:04:38.860]This lets you add or remove
options from the radio button list.
- [00:04:43.000]So you can have more than three options.
You can have two, whatever you need.
- [00:04:48.480]Like I said, this is all drag and drop.
- [00:04:51.400]So if I want to move this text field down,
- [00:04:54.250]I can actually just click on it and
drag it down below these radio buttons.
- [00:05:00.040]And I can click into any of these,
uh, update the information of a field.
- [00:05:04.570]So instead of saying 'new email',
- [00:05:06.550]I'll just say 'email' asking for the email
address. And here on this radio button,
- [00:05:11.140]I have an 'other' option. I'm going
to make this text field 'other'.
- [00:05:16.030]So folks can define what, what
'other' means. If they saw it,
- [00:05:20.710]if they learn about us from
a billboard or a newspaper,
- [00:05:24.820]something like that. All right.
- [00:05:28.180]So I'm going to save this and
again, it's not going to take me to...
- [00:05:32.410]that's gonna ask me to login, apparently...
It's not going to take me to the, uh,
- [00:05:35.680]the preview of the page.
- [00:05:37.060]It's actually just going to
keep me in this form builder.
- [00:05:39.010]I can see here changes to the form have
been saved and to view the form itself,
- [00:05:43.780]I'll use this view tab up
in the top left corner.
- [00:05:47.590]You can see here's that
title I put in earlier.
- [00:05:50.920]Here's that body text
above the form itself.
- [00:05:54.190]I have a little progress bar here
for folks working in the form.
- [00:05:58.340]There's my email field, my radio
buttons and my 'other' field,
- [00:06:02.240]and finally a submit button for the user.
- [00:06:06.140]So any questions about that? Just, uh,
- [00:06:08.600]just sending up a web form
and adding fields to it.
- [00:06:12.680]I'm going to take a drink of water while
people muster the courage to ask
- [00:06:16.970]questions or drop them in the chat.
- [00:06:23.510][Amy Kunce] Uh, I saw under the radio
- [00:06:25.610]there's also a thing that said
'manual entry'. What does that do?
- [00:06:32.510][Keith McGuffey] that lets you,
- [00:06:35.600]it's just another way of entering
the, the options here. So I could add,
- [00:06:40.670]you know, four would be, um,
- [00:06:45.770]'billboard'. That's what that does.
- [00:06:50.420]Just another way of entering
those, uh, those options.
- [00:06:53.480]So like if you have 20 or 30 options,
- [00:06:56.300]it might be more convenient
to format them this way,
- [00:06:59.480]copy them and paste them into here
instead of going line by line with each
- [00:07:17.710]Other on the bottom.
- [00:07:27.190]Hearing and seeing no other questions
I'm going to... Where's my chat box?
- [00:07:32.320]Okay... Going to press onwards.
- [00:07:35.560]So a question I get asked a lot
is now that we have this 'other'
- [00:07:40.210]option here, we don't always want
to show this 'other' field, right?
- [00:07:43.660]Like we don't want someone filling
out 'TV' and writing in 'newspaper'.
- [00:07:48.130]So how do we,
- [00:07:49.420]how do we hide this field until someone
selects 'other', and that's done with what's
- [00:07:53.020]called 'conditionals'. So we can
go back to my web form tab.
- [00:07:57.640]This is the next option
- [00:08:00.190]Basically what this does is it
allows you to say, all right, if,
- [00:08:03.600]if this is selected show or
hide this, is what it does.
- [00:08:07.990]So there's no conditionals right now,
- [00:08:10.420]but we can add a conditional with this
little plus button. And I want to say, if
- [00:08:14.890]'how do you hear about us' is set
to 'other', then the 'other' field is
- [00:08:19.690]shown. So if it's not 'other',
we shouldn't see 'other'.
- [00:08:24.610]I'll save that. I get some message
that my conditionals have been saved.
- [00:08:29.380]I want to go back to view. You'll
notice we have only the email and the,
- [00:08:33.670]'how did you hear about us', uh,
- [00:08:36.370]fields. Selecting any of
these three does not change
- [00:08:41.920]but 'other' will display the 'other' field
below for folks to field fill out.
- [00:08:48.670]I'm also, I'm asking
you for an email here.
- [00:08:51.370]I can use this to send confirmation emails
to the folks that are filling out the
- [00:08:55.890]forms so they know that their
information has been received.
- [00:08:59.470]I go back to my web form tab.
- [00:09:00.990]This is the next option under
the web form tabs is 'emails'.
- [00:09:06.840]Now this will fire any time
someone hits the submit button.
- [00:09:11.100]Anytime someone submits their
results, submits their answers.
- [00:09:15.420]This email will be sent out so
I can set this to be sent to me
- [00:09:20.220]every single time. I could set it to be
sent to another professor every single
- [00:09:24.000]time. I could,
- [00:09:24.780]I could use the value of the email
to send the confirmation email.
- [00:09:29.850]And you can send multiple emails
every time the form is sent.
- [00:09:33.930]So I could receive an email,
the person filling out the
- [00:09:37.820]the form could receive an email, and
if a professor needs to know about it,
- [00:09:41.370]they could send, they could
receive an email as well.
- [00:09:43.920]You would just add multiple email
addresses. So for this example,
- [00:09:48.330]I'll just use the value of that
email field that I set up earlier.
- [00:09:52.410]And I'll hit the add button
over here on this page.
- [00:09:56.640]There's a lot of options for
configuring the email. Um,
- [00:09:59.670]you can change the subject
and change the, the address
- [00:10:03.540]the email is from the name
of the person on the email.
- [00:10:06.570]I'm just going to keep
all of this, uh, uh,
- [00:10:08.910]default for now. Under that is the
actual email template. And by default,
- [00:10:13.560]it's just kind of a generic 'here is
when it was submitted, here is who
- [00:10:18.210]submitted it, here is
what you submitted'. Um,
- [00:10:21.290]I'm going to update this for this example
to say something less bland than that.
- [00:10:25.800]Just say, "Thank you for your submission.
- [00:10:30.330]We will be in touch.
- [00:10:36.440]Love, Keith."
- [00:10:38.810]Go ahead and save that
email. And I can see here,
- [00:10:42.440]I'm sending emails to whatever
is in that email address
- [00:10:47.210]field. We'll have this subject
and be from this email address.
- [00:10:52.640]So let me go ahead and fill this out.
- [00:10:55.520]My email is firstname.lastname@example.org.
- [00:10:57.980]And remember that because if you ever
have a question on the web forms,
- [00:11:00.320]you can shoot me an email and I'll
help you out as best as I can.
- [00:11:04.490]I'm going to say other, and I
will say 'newspaper' and submit.
- [00:11:11.360]Now when I submit the form I'm
taken to this confirmation page, uh,
- [00:11:15.380]you'll notice the progress bar
is filled in green all the way now.
- [00:11:18.440]And I have this kind
of generic, "Thank you.
- [00:11:20.030]Your submission has been received,"
and option to go back to the form.
- [00:11:25.010]I should also have an email coming to me.
- [00:11:30.080]Let me see here. There we go.
- [00:11:34.340]There there's that confirmation
email it's even got my,
- [00:11:37.250]my love letter to myself in it.
So it, it worked appropriately.
- [00:11:41.420]It sent the email to
me when I filled out the form.
- [00:11:47.690]Um, another thing I get asked a lot is
- [00:11:50.990]now that someone who has
submitted information to the
form, where is that kept?
- [00:11:56.470]And you don't have to keep track of all
these emails or pull information from
- [00:12:01.090]them or anything like
that. All the information,
- [00:12:03.490]all the submissions are
kept with the web form, uh,
- [00:12:07.300]in this results tab in
the top right here. Uh,
- [00:12:10.820]this is unique to web forms, just like
the web form tab. Clicking on that,
- [00:12:15.580]we again have a few options like we do
under the web form tab and we can see
- [00:12:20.530]kind of a table here of our
results. We can view those results.
- [00:12:25.240]There's the submission that I made. Um,
- [00:12:28.240]there's an option to edit
someone's submission. So if,
- [00:12:32.890]if they give you more information about
how they heard about you or want to
- [00:12:36.610]change your email or whatever, you
can come in here and edit it. Um,
- [00:12:40.600]there's an analysis tab which will
show you kind of what options are being
- [00:12:44.410]selected the most. This isn't
very useful for us right now,
- [00:12:47.440]obviously, because there's only
the one submission. Table
- [00:12:51.460]will show you in one row, each
submission and, uh, the values of,
- [00:12:56.470]of each field. And download
- [00:12:58.990]lets you download all of the results.
Um, there's a lot of options here.
- [00:13:03.400]You can actually select like a range.
If you want to do after a certain date,
- [00:13:06.850]I can choose to not include certain
fields, and things like that.
- [00:13:09.550]What I usually do is just
select Microsoft Excel and, uh,
- [00:13:13.720]hit the download button.
It takes a second,
- [00:13:18.040]but it spits out the results
of the form. You can see here,
- [00:13:22.720]it gives some, some information
about the submission itself.
- [00:13:26.770]And here are those three fields that I've
set up. The email, how'd you hear about
- [00:13:29.890]us, and other and the results
of, of that submission.
- [00:13:36.480]So any questions about that,
uh, setting up conditionals,
- [00:13:39.600]sending out emails and viewing results?
- [00:13:49.370]Grab another drink of water here
while y'all think it over. Okay.
- [00:13:59.640]All right. Last thing I
want to talk about. Um,
- [00:14:04.620]we view this form again, as we have this,
- [00:14:08.220]a progress bar,
- [00:14:10.770]we have a submission button and then we
have our confirmation page and all of
- [00:14:15.660]these things can be modified,
uh, in the web form.
- [00:14:18.990]And that is under the web form tab.
And then this last option here,
- [00:14:23.160]form settings here, we can see,
- [00:14:26.880]this is where you can modify what
displays on this page by default,
- [00:14:31.020]which is kind of this generic,
your submission has been received.
- [00:14:34.440]But if you need to give other
information after the submission,
- [00:14:37.530]this is a good place to put it.
- [00:14:39.270]You also send someone to a custom
URL or just reload the current form
- [00:14:43.050]if that makes sense for
what you're asking for.
- [00:14:45.810]You can limit the number of
submissions. So like in the past,
- [00:14:48.630]I've used web forms for course waitlists.
- [00:14:50.580]If 30 people are allowed to be on
the wait list, you can set this to 30.
- [00:14:55.910]We also close the form
entirely. So this way a user
- [00:14:59.600]will just get a message that says
the uh, submissions are closed,
- [00:15:03.410]that they're not able to
submit any information.
- [00:15:07.010]The body that we edited
earlier will still show,
- [00:15:10.100]but they won't have access to any
of the fields associated with it.
- [00:15:14.180]Below that, we have options
for the progress bar, or
we can hide that entirely.
- [00:15:17.600]Uh, we can also set up a preview page.
- [00:15:19.550]So folks have to review their answers
before they hit the submit button.
- [00:15:24.050]There's some advanced settings too,
- [00:15:25.190]and this is where we can update
the label on the submit button.
- [00:15:28.850]If it makes more sense
for your button to say,
- [00:15:30.920]like 'register' or some other, uh,
- [00:15:35.030]some other word or phrase, key
phrase that you want it to say.
- [00:15:41.090]Um, that's a lot of information.
I know web forms are,
- [00:15:44.850]are pretty broad. Uh,
there's lots of discuss.
- [00:15:47.720]I want to make sure we
have time for questions.
- [00:15:50.060]That's really all I have as
far as prepared statements. Um,
- [00:15:53.690]are there any specific questions or
things that can clarify and open up
- [00:15:58.610]the floor now?
[Amy Kunce] Can you attach files to the form? PDF, a word doc?
- [00:16:05.780][Keith McGuffey] Yes. Yep. It's this, uh,
- [00:16:09.980]this file option here.
- [00:16:14.000]I believe in the options
for that. You can even, um,
- [00:16:19.210]even select what type of a file it
can be. So if it has to be a PDF,
- [00:16:23.990]um, yeah, there we go. Uncheck the others.
- [00:16:32.090][Amy Kunce] So then how does it show up or would
- [00:16:35.630]the organizer of the form
click download or...
- [00:16:39.740][Keith McGuffey] When you view the results,
there would be a link to the,
- [00:16:45.830]to the file there.
- [00:16:51.230]I should say to for security reasons, uh,
- [00:16:53.450]the results can only be viewed by
either the person who made the form -
- [00:16:57.530]the author of the form -
or a site admin. So,
- [00:17:02.570]um, it's,
- [00:17:04.600]it's kind of restricted in who can view
and download the results. But like,
- [00:17:08.930]for example, when I,
- [00:17:09.860]when I talk about a professor
needing a course waitlist,
- [00:17:14.360]I can come in here and
change this authored by to
the professor's information.
- [00:17:18.680]And then since they're now
the author of the form,
- [00:17:20.780]they can download the results.
Otherwise they couldn't.
- [00:17:41.510]A few other kind of minor
details about web forms, um,
- [00:17:45.530]they're not great for anything where
need to collect a registration fee. Uh,
- [00:17:50.160]they just don't have, like, you
know, if you look at the fields here,
- [00:17:53.970]there's not like a credit
card field or anything.
- [00:17:56.460]If you have an event or a
reason to collect a fee,
- [00:17:59.400]it's actually better to go through
the UNL marketplace. I think, uh,
- [00:18:03.300]just email@example.com is
a generic email that you can,
- [00:18:07.710]you can send an ask for,
uh, a form there. Um,
- [00:18:12.060]there's certain security certificates
that these web forms don't have to handle
- [00:18:16.920]credit card information.
- [00:18:18.570]So it's better to go through them and
they can also set up so that your,
- [00:18:21.870]your funds you're gathering are
linked to a cost object number.
- [00:18:25.560]So it's a little easier on
the administrative side too.
- [00:18:51.930][Amy Kunce] I don't want to hog the
question time. I'm sorry. Um,
- [00:18:56.930]I'm thinking primarily again of
this one grant application we do
- [00:19:01.970]annually. So can you set up
conditionals, like, okay, if you have a,
- [00:19:06.790]uh, a dropdown list and
they pick a department, say,
- [00:19:11.270]can you have other fields automatically
fill out, uh, depending on,
- [00:19:16.160]you know, um, like if they
pick agronomy and horticulture,
- [00:19:20.750]then the admin,
- [00:19:22.220]the office admin floor in front of me and
holler horticulture automatically gets
- [00:19:26.720]a copy of the email, uh, or a copy
of the form or something like that.
- [00:19:32.900]That makes sense?
- [00:19:34.160][Keith McGuffey] Yes. Ah, here we go.
- [00:19:38.180]So in this conditionals, right,
- [00:19:41.360]I had it if it was other than other
as shown, but I think I can say, uh,
- [00:19:46.040]for instance, if it's
TV, the other is set to,
- [00:19:50.630]I can put in a value here
and this should, well,
- [00:19:55.130]fingers crossed,
- [00:20:00.110]there. When I, when I selected
'TV' it filled in 'KETV'.
- [00:20:04.310]So I think you could use that
to say, like, if it's agronomy,
- [00:20:06.860]then this other field should be XYZ.
- [00:20:11.360]This is you're using the
- [00:20:14.360]conditional is and set to,
- [00:20:21.350]does that answer your question?
- [00:20:25.310][Amy Kunce] We, we, yeah, well just, um,
- [00:20:28.610]I don't have to worry
about it for another year,
- [00:20:30.410]cause we just finished this
round, but yeah. I mean,
- [00:20:34.070]there's things like departmental
signatures and blah, blah, blah,
- [00:20:37.310]but this can help a lot with other
things right now I'm using Smartsheet and
- [00:20:42.290]it's just not that friendly.
So this would be better.
- [00:20:50.910][Keith McGuffey] I'll say to you, you kind of want to work
backwards with your conditionals. So,
- [00:20:56.940]You want 'other' shown, um,
- [00:20:58.940]and there's multiple conditions to
work with that, you don't want to make
- [00:21:01.530]multiple ones that say
'then other as shown'.
- [00:21:04.380]You just want one that says
'other' is shown and you can use.
- [00:21:08.310]Um, the 'or' option here. So I can say 'if
- [00:21:14.160]TV or radio' then 'other' is shown, um,
- [00:21:16.500]but you don't want to make two
separate ones. One that's if it's TV,
- [00:21:19.800]other is shown and a separate one
that's if it's a radio, other issue.
- [00:21:23.610]So in my mind, that's working backwards.
That might make more sense to you, uh,
- [00:21:27.930]depending on how your brain works,
but that's how it works for me.
- [00:21:47.310]Um, any examples I can run through or,
- [00:21:50.070]or forms you've been working
on that I can help with.
- [00:22:14.160]All right. Well, I, it looks like
we're actually done a little early, uh,
- [00:22:18.060]3:25. So I'll go ahead and stop, uh,
- [00:22:21.450]stop sharing my screen and
cut off this recording.
- [00:22:24.690]Thank you all for stopping
by. Um, and we'll see you.
- [00:22:28.530]I don't know the exact date of our next
one. It is June 22nd.
- [00:22:33.180]It looks like June 22nd
at 3:00 PM for our next
- [00:22:36.390]help session. So thank you all.
Log in to post comments