Webforms: Live Help Session

Keith McGuffey Author

05/18/2021 Added

17 Plays

Description

Webforms are one way to engage site visitors. Common types of forms include contact forms, feedback forms and sign up forms.

Searchable Transcript

Search:

[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 button options
[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:02.780]option.
[00:07:17.710]Other on the bottom.
[00:07:24.640]Okay.
[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 here. 'Conditionals'.
[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.530]anything,
[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 kmcguffey2@unl.edu.
[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 marketplace@unl.edu 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.790]if
[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.

The screen size you are trying to search captions on is too small!

You can always jump over to MediaHub and check it out there.

Comments

0 Comments

Webforms: Live Help Session

Description

Searchable Transcript

Comments icon comment

Related Channels

Comments