CMS 130: Create a Web Form is a 1 hour-long course that will cover the creation and design of web forms using the CMS Form Builder. We will also discuss form submission management using KaratEmail. This course is required before you can create web forms on any website you manage. Prior to attending this course, you will need to complete CMS 110: Introduction to the CMS.
The 1 hour session (40 minutes of video) covers:
- How to create a Web Form Asset
- How to create form input elements
- How to group and style your form
- How to handle your form's submissions
- and plenty more
This training is required for content managers who want to create or edit Web Forms within their websites. If you only want to view the submissions to a form, File a Web Support Ticket and we'll get you into our form submission app, KaratEmail, with no extra training.
To take this training, here's what you need to do:
- File a Web Support Ticket requesting username be upgraded to allow access to the Form Builder. We'll set you up within 72 hours.
- Once you have access, login to a CMS website of your choosing and begin watching the video.
- Take the quiz (a little further down)
Once you've done all that, we'll grant you the access you need and off you go!
CMS 130 Training Video
Please find the full transcript at the bottom of this post.
CMS 130: Quiz
Follow this link to take the CMS 130 Quiz
Once you have passed the quiz, you'll be all set to create and edit forms!
A reminder about (not) seeing a new form's submissions in KaratEmail.
Before you will have access to a new form's submissions you will need to
- publish the form asset to a live webpage,
- submit a test submission through the form, and
- if you haven't before, sign into KaratEmail with your NetID and password (it generates your user automatically.)
This will connect your form to the KaratEmail database and then we can easily connect your account to the form's submission database.
Full Video Transcript with Timecode for CMS 110 Training Video
Hello and welcome to CMS 130 Web Forms. Building and managing web forms in the CMS. What are web forms? Like paper forms, web allow you to gather information which can be stored and used later and, unlike paper forms, web forms automatically store the data, your information is already digital. Each form submission is stored in a database in the form of a table and each submission becomes a new row, while columns are the names of the inputs. In the example below, we have inputs of last name, first name, email, comments, and an automatically created submitted date. Then, beneath that, we have four test submissions. What are the parts of a web form? Let's take a look at a live example. We have an example contact form. This form contains two field sets. First is basic information field set containing these three inputs and then we have the additional information field set containing a single multi-line input. Each input has a label. It can be required or not. Some inputs are more specific, such as an email input. This will require a user to input something that looks like an email, and at the very bottom we have a submit button. So, let's build a form. Building and managing web forms in the CMS requires two steps. The first is using the CMS form builder and the second is using KaratEmail to process and manage web form submissions. We'll talk about KaratEmail in a bit. So, step one. Build the web form. Go to a site that you manage. I'm going to start off with the TestAdam site. I'm going to log in using the direct edit button. I'm going to use my credentials.
M00:02:10
And then I'm going to go to assets, new, form. If you do not see the form option, then you need to communicate with our department to get access to the form asset before beginning this training. Let's click on form. Like all assets, we have a vertical set of panels. These panels can be navigated by using the navigation tool here on the left. Let's start off with the asset info panel. Let's enter something nice and sensible. My test form. If I have a list of 25 forms, I will understand that this is the test form. Maybe let's be more specific and say that this is the 2017 test form. Description and tags. Don't worry about it. It is already locked to the site. And then we have to do what we do with all assets. We have to come to the access settings panel and we have to type in the site name. There we go. So, TestAdam. TestAdam. It matches the site name. That means that my group is the one that can edit this asset and the one that can use it. Once we get through this stuff, we get to the fun part, the elements. Over here on the left, we have the different predefined elements that we can use. There are a few more options, which we'll go into in a little bit, but let's play around with this interface. If you click the plus button, it will create a card. You can drag and drop elements if you want to put one card above another. So, here we have the multi-line card now above our single-line text field card. You can drag these cards and you can delete these cards. Clicking the plus button merely appends the card to the end of your card stack. What are these cards? Let's come back and look at our single-line text field. It has a label, the name, helper text, what the default text will be, whether or not it's required, and then an advanced field. Our goal today is to create this form. So, let's start off with the last name input. This is a single-line text field and it is the beginning of our basic information field set. Let's do this. We'll come back here. We'll say last name. When you hit tab or move down to the next input here, the name attribute, this is the column header that the value will be placed in in your Excel spreadsheet. So, it needs to be tight, concise, neat. No spaces, punctuation. I like to have Excel spreadsheets that are not very wide, so I'll even truncate this down to just say L name. Helper text is kind of nice because you might want to further specify that this is the given name as it appears on your birth certificate. You want an additional prompt that does not necessarily need to be part of the label. Default text is handy because you might want to give a prompt for the format of the input. You might say example Doe from John Doe. Our input is required. And when you do that, you're given a failure message that you can customize and the advanced field now for your use. So, field set dash start equal true semicolon field set dash label equal basic information semicolon. Creating field sets is somewhat unintuitive. It's kind of like building a sandwich. This card is beginning the field set sandwich and our advanced options are always key equal value semicolon. The ordering is unimportant; merely the presence of is important. These values are well documented in our help center, so don't worry about trying to memorize right now. And let's confirm that we're doing the right thing here. We're going to come back to our example form. We are starting off the last name input. We are beginning the basic information field set and we are making this thing required. Now we're onto the first name. I'm going to click the plus button, bring the first name up. First name. F name. I'm going to shorten this up. No helper text. No default text necessary. We are going to make this required. Don't need to customize that. I don't feel the need. No advanced options since the field set's already begun. Then we're going to come up and add email. Email. OK. That's nice and short. Email. Don't need to change that. This too is required. However, you will note that email is going to try and make the user enter an email-like thing, not just any old input. How do we do this? How do we specify? Since there is no email form element, you must take the single-line text field and modify it using custom type equal email semicolon and that will magically transform this single-line text field into one that is appropriate for an email. The email input was the last one in the field set, so we will say field set dash end equal true semicolon and that will end this particular field set, kind of like ending a sandwich. It's the last input in. You want to close it off. Then we're going to scroll down here and we're going to begin a multi-line text field. That multi-line text field being our additional comments. It will be the only thing in its field set. So, we're going to say, OK, add multi-line text field. Additional comments. I'm going to clean this up. I don't want a long name, so I'm just going to say comments. No helper text or default text necessary. This too is required because we're looking for comments and we can say, OK, well, field set start equal true semicolon field set label equal additional information and field set end equal true semicolon. So, we're starting the field set off, we're giving it a label, and we're ending it. And, again, the ordering is unimportant, merely the presence of these options. OK. Well, let's go ahead and come back to our example contact form here, verify that that is the end of the form, so we don't need to add any more inputs. Now we need to take a look at email messages. You can ignore this panel. This is already handled by KaratEmail and then allows us to move on over here to form settings. So, let's take a look at what the form is doing when someone is inputting or not inputting anything. If I don't do anything and I hit submit, I get a temporary error up here and all inputs that are not filled in correctly highlight in red and we get some text saying this field is required. Again, you can customize this text. If a user successfully submits-- so, we're just going to say test, test, test@test.com, test, test, test. Then, by default, you get a success message with a customizable piece of text. You can customize that piece of text by modifying this. So, you can say thank you for your submission. Our department will be in contact soon. Or something. This text will directly translate to this text. Well, what if I don't just want this text? What if I don't want to be constrained by that. Maybe you want a thank you page that's really in-depth, much more intensive content-wise than just having a sentence. You can switch to a URL redirect you. You can browse your site and you can find the page where you want the form to go when it is successfully submitted. So, now when I hit the submit button, instead of giving me this, it will literally take me to the gallery test HTML page.
M00:12:01
Failure message is similar to the success message. So, if I bring this back to text, you can say, you know, an error has occurred. Something, something, something. If you want us to handle it, just type in default all lowercase and our system will provide a default sentence that you don't need to worry about. Most people will just leave this as default. Next up, we have save results in database and please, please, please make sure this is checked. If it isn't, someone could spend half an hour filling out your form, you know, obviously a much more complicated than the simple one we're making right now, and if they hit submit, then none of their results get stored in a database. It will just plain off disappear. You also get the option of customizing the submission button text. By default, it says submit. But if you are trying to infer a next step, you might change the button text to something like next. Maybe it redirects to a thank you page with some additional instructions about sending a CV to your department or something like that. So, that's how you can do that. And the advanced field you do not need to worry about. All right. So, we're pretty good here. We're going to hit create for the very first time and it looks like everything, you know, has saved correctly. If I go back in to this form which is already created or another one that's already created, you will notice that the name attributes are now locked on the cards and this is because the system is trying to make sure that each of those name attributes is unique as when you receive a submission you can't have two submission elements trying to go into the same Microsoft Excel column. Can't do it, so it locks it. If you ever need to change one of these name attributes, I would just recommend dragging and dropping a similar card directly above the one that you're about to remove, moving the inputs over by copy-pasting, and then deleting the offending card. Other things to watch out for. Sometimes you can't save. The system is a little buggy sometimes and because of that we highly recommend that you only add one field set at a time and then try saving and publishing, come back in, create another field set. Kind of give yourself a save history. If you do receive an error where it's just not letting you save, one of the first things that I like to do is come in and on the name attributes I like to make sure that every single one of them is unique. That's usually the culprit. So, let's assume that you're able to save. We're now here and let's publish. Like any asset, this asset must be published in order to begin using it on a web page. Same concept across the entire CMS. You can add a version description. It's entirely up to you on the verbosity level of that and you click publish. Now, you'll note that this asset published, but sometimes it takes four to six tries to get the asset to publish, usually that behavior is shown when an asset is already in existence. If you go beyond six publish tries, submit a support ticket, give us this URL from your browser, and we'll help you out. All right. So, we've created our form asset. Now it's time to put it on a page. It's not really a form yet. Right now all we've done is created this XML thing. It's just a chunk of code and we'd like to put it on a page and make it into this web form. So, I'm going to come back to content. We're going to go down to the page that I want to put it on, which in this case is the index file. I've got a nice blank page here that I've set up. We're going to come into main content. You know, maybe you've got some instructions. Bold that. You don't want a whole lot else going on on the webpage because you don't want to confuse readers as to what the purpose of the page is for them. You just want to have the form there. So, let's go ahead and find the asset that we just created. My Test Form 2017. Select. We get our asset stripy box, as one would expect. We're not going to go into assets in general because that is beyond the scope of this presentation, but you can look through our help documentation on those subjects. We'll hit save. And, sure enough, we have ourselves the web form. It's a little shorter because the right sidebar is enabled, but I have my basic information, last name, first name, email, and I have my additional information and additional comments input, and then I have next. You can't do anything with this right now because we want you to publish the page, then try out some test submissions. If you hit edit, the administrative interface shows up. So, here you can click on edit form asset. It'll take you back to your form asset. You can make additional edits. You can publish. You can read our help documentation on it by clicking on the help. We have an extensive form builder manual. This includes everything that you will need to know about the advanced field and other inputs. We have information on how to request access to begin receiving submissions from KaratEmail. You can click on request access, enter your information, and send a request. If you don't do this, KaratEmail will receive submissions, but you will never be notified of the fact. So, please, when you are finished getting the inputs designed correctly, depending on what your boss's or your needs are, submit a request and feel free to say that Joe, Mary, Betty, Susie also need access and we'll set them up. There are a couple of links to KaratEmail. Again, we'll talk about that here in a little bit. Preview will show you how your form will behave upon the success condition, upon the error condition, and what happens if someone doesn't type in an input correctly. So, even before it gets to-- after the form is submitted. This is stopping them if they have incorrectly inputted something. If you want to know more about this, you can click on the help button and we have some documentation on this subject. Emails. So, KaratEmail will automatically handle the email form submission and help-- here's just another link to our help documentation and a link to submitting a support ticket if you have any questions. So, lots and lots of ways to get help. Well, let's hit preview and publish. And if you don't click view in new window, remember that you can scroll down to the bottom right of preview and you get your form. It's live. It's ready to go. So, this is the basics of creating a form. Just a simple comment form. So, now that we have this basic comment field down, we can pay more attention to advanced options like how tall do we want this multi-line text field to be. If we look at our original contact form example, we have an additional comments field that's seven rows tall. Ours is two rows tall. You can do that through the advanced field for this particular form element. Let's try it out. Let's come back to the form. Go back to edit. We'll pull up the administrative interface. Check it out. If we don't check it out, we don't have the option to edit, so we check it out. Edit. And then, if we scroll down to the additional comments card, we can say something like rows equal seven semicolon. And if you save and publish, not only will the asset update, but it will republish the page the form is sitting on. So, I can collapse this. I'm going to go back to the published version of our form and just refresh. And, sure enough, our additional information is now seven rows tall. So, step two, managing the form submissions throw KaratEmail. So, remember web forms allow users to enter data that is stored for processing and each submission becomes a new row in that tabular data set and columns are the names of the inputs. So, we have last name, first name, email, comments, and an automatically supplied submitted. Now, KaratEmail will begin storing submissions, again, even if you haven't been granted access to them yet. Well, let's check it out. KaratEmail can be located at montana.edu/karatemail or, again, if we're looking at the administrative interface, we have a myriad of links that you can click on and go directly to KaratEmail. So, let's do that. Your credentials are, once again, your net ID and net ID password.
M00:22:07
You won't have this many forms. You might have four or five. They are organized right now by their subject title. You can hover your mouse over the users and learn who has access to the form submissions. Equivalently, you can click on show and hide will toggle that. Let's take a look at a form. Let's go in here and click on form. It will reiterate the form details. You can export to spreadsheet, so you can get this into Excel and you can set it to export only unread or all and you can view every single submission. And there's only one in here right now. We have different buttons that are available. You can through Tooltip discover that this one is view the details of this form submission. OK. That's pretty cool. The back button. You can toggle the submission between read and unread, exactly like an email. You can forward a copy of a form submission to yourself that you could then pass off to your boss or whoever. This is helpful if you need to draw attention to a particular form submission. And, finally, you can delete. Now, like any good interface, what you can do to one you can do to many. So, you can check and select all, which is kind of silly right now because we just have one. And you can perform any actions. You can mark as read, mark as unread, or delete. And you can submit and it'll perform those actions. And that's it. Very simple system on the back end. KaratEmail will email you in four-hour increments. So, it breaks the work day into four-hour chunks. If any new submissions are received in one of those four-hour chunks, say in the morning, it will say hi Joe, Mary, Betty, Susie. You have received 13 new submissions for your form blah. Please click here to log in and view those submissions. If that same form receives no new submissions in the next four-hour block, so in the afternoon, none of you will receive an email. It doesn't keep pestering you. So, that's the way that the emails work. So, let's talk a little bit more about the advanced field. We've been doing things like starting and stopping field sets and we even set the row height of a multi-line text field. The advanced field is capable of much more. The advanced field allowed us to turn this single-line text field into an email from an option called custom dash type. The different custom dash types can be found by looking at the administrative interface and its help link, then scrolling down to custom input types in the form builder. This documentation contains elements that you can copy paste into the advanced field of a single-line text field card. For example, custom type color. This will turn a single-line text field into a hexadecimal color picker. Similarly, you can do things with date ranges. Custom type equal date-- and we'll talk about dates here in a little bit. Date is actually a card unto itself. Email, we've already got an example of an email. You can do telephone numbers, you can do fax numbers. You can do things with ignore so that you can put your own HTML into a web form. You can do custom type number and, when you do numbers, there are advanced field options that work in tandem with it, such as max 10, min one, step of 0.05. Maybe you want someone to choose a number between one and 10 in steps of a half. A time picker is now a card, so we'll talk about that here in a little bit. And URLs. So, you can do URLs. You can even do United States zip codes. So, I highly recommend taking a look at this documentation, as it can go into examples that will allow you to create a really rich and diverse form that will protect you against any weird inputs because the form's going to say, OK, if we're looking for United States zip code, I'm not expecting someone to type in a bunch of letters. We also have the idea of custom type groups. Custom type groups allow you to take one single-line text field card and turn it into any number of inputs. For example, we have custom type group equal address. If you paste this into the advance field of that card, it will give you six inputs like this. Sort of a predefined block. You don't have to write six cards, you just have to write one. And when you do this, you can specify in tandem the elements that you want to exclude. So, maybe you don't want the country or the United States zip code or the city or the state. You can choose to exclude them by adding these additional options. We also have custom type group equals signature and you can exclude the date on this one. And signature is kind of cool because people wanted a signature-like set of inputs with a heading, that kind of thing, and they wanted to be able to control this text and you can do that by specifying that text in the default text input field. So, again, custom type groups are a way for you to expand one single-line text field card into a set of many without having to do a lot of overhead. The other inputs. Radio, checkbox, drop-down, multi-select, date and time, et cetera. The form that we've been working with, the basic comments form, only had a certain set of inputs, mainly the multi-line and single-line text fields. We learned how to modify the single-line text field through use of the advanced field, but there are more inputs available to you. Let's take a look at this example form. We have the inputs we're familiar with, the single line text fields, but we're also able to create drop-downs. Maybe of the United States states. Here we have a date/time picker. We can also do things like radio buttons, checkboxes. How do we do this? Let's go back to our form. I'm going to click on edit to go back to the administrative interface. I'm going to click on edit form asset. I'm going to check out that form. I'm going to click on edit and then I'm going to look at our form elements. We have radio buttons, checkboxes, drop-downs, and multi-selects. So, we'll start off with those. Those inputs are all about selecting one or more elements from a list. Let's work through one of these examples. So, I'm just going to move down here a little bit. I'm going to go right beneath first name. I'm going to drag radio buttons right here so it's above email and maybe this is like your favorite color. And we can just say like F color or something short. Don't really need any helper text with this, but you'll notice that any time you're working within radio buttons, checkboxes, drop-downs, and multi-selects, you get this items. This items allows you to add items, so you might say red, green, and blue. You can drag and drop the ordering of these elements, you can remove these elements, and you can, of course, edit, and finally, you can preselect or un-preselect. So, if you wanted this radio button to start off with the value of blue, you would leave it like this. You can make this element required too. So, let's see what happens when we do that. So, we're going to publish-- well, we'll save and we will publish this asset. I'm going to come back to the previous tab here. I'm going to go back to preview. So, now you have your favorite color with radio buttons. Blue preselected. Now, if you recall in the previous section, talking about advanced input, you can do control dash in line equal true and instead of going down, the radio buttons will go across. Let's take a look at some other examples. Let's check it out. Go back and edit. Maybe instead of favorite color, which we are going to delete, I want to have a drop-down above email and maybe this is state of birth. B state. Something nice and short. Come over here, items, maybe it's Montana, Idaho, and Wyoming. Well, great. We're going to get a drop-down of these three states, but what happens if you want all 50 United States states in this drop-down. I personally do not want to have to type all 50 United States states into this drop-down, so I am going to use one of the advanced options called data set and use our predefined set of 50 United States states. So, data set semicolon and then I'm going to delete these manually entered items.
M00:32:21
Well, let's see what happens. Save. Publish. And I'm lazy, so I'm just going to reload this page. So, we're going to refresh. And, sure enough, you get a drop-down of the 50 United States states. Let's take a look at all the different data sets that are available. So, we're going to go back into edit. I'm going to click on help. We're going to go down to elements advanced field. I'm going to control F for find data set. There we go. Close that out. This is just a shortcut for getting down here. And since we have states, state abbreviations, country, year, month, you can also define your own data set by publishing a dot XML file somewhere on your site, preferably in your documents directory. That XML file will have this form of data set, value one, two, three, four, five, et cetera. So, maybe you have 10 programs that are listed on five different forms. Rather than redefining those 10 programs on each one of your forms, you can simply put together this file and then reference it in the data set by writing the file like this and then in the value for data set you can give the published URL. So, maybe something like http montana.edu/web/documents/^*mysupercoolthing.xml. That XML file will be loaded and you will get those options-- we come back to preview-- displayed right here. So, you too have control over the data set. So, that covers elements with choices. Let's come back to our form. I'm going to check it out again. Edit. Let's take a look at the date/time picker. So, I'm going to come back down, remove state of birth. Let's drag the date/time picker up here and maybe this is time of pick up or something. Then we can just say pick up time. There are different formats. You can choose date and time. So, date and time. You can choose date and you can simply choose time. And I'll let you guys explore that, but the date/time picker is just a very simple card. You choose your format, drop it in, and you get your date/time pickers. Let's remove that one. Instructional text. Sometimes-- let's go back to our example form here. I might want to have an instructional bit of text inside the additional information, but above additional comments. Maybe I want a paragraph explaining that the following comments must be provided by one of your references. You can do that by coming back to your form and let's scroll down, so above additional comments, the input, I'm going to drag some instructional text. I am going to move the field set options, so we're going to steal those. I'm going to cut those. Control X. I'm going to paste them into this input card because this is now where I want the field set to start off. And we can give some instructional text. So, you could say like the following comments must be from last year's dinner something, something. Then you can do whatever you want. Some sort of paragraph. You don't need to worry about the name. The name attribute is not really used, it just must be unique. So, you can go ahead and leave that input alone and let's save and publish and see what this one does. So, publish. We are going to come back, we're going to reload. Now you can see that I did something wrong, so I accidentally copied the close field set value from additional comments. This is how you can tell when you accidently mess up the field set. So, now we get to come back in and fix our issue by checking out the form, coming over to edit. We're going to scroll down. So, there we go. And I accidently copied field set end, so I'm going to cut that and put it back under the additional comments input. That's where I want the sandwich to end. I will save. I will publish. We're going to come back to our form. We're going to reload the page. Ah, here we go. So, you can see that you can input sort of instructional text inside of field sets. You don't have to try to break your form up, have two forms with a paragraph in-between it on the webpage. You can bake your instructional text directly into the form as form elements. So, this concludes the section on other inputs. Let's do a little lab here. So, your instructions. Open a site that you manage in the CMS and pull up the assets and then create the form on the next page or the next slide here that redirects to the following upon success. So, write down this URL-- https://www.montana.edu/web/^*adam/outc16/thank-you.html. This is the form I would like you guys to create. So, feel free to pause this video. Work through the documentation and good luck. Additional information. We have lots of help. We have the online form builder help center. I talked about more input types, including what we were going to do on the example. We have building address field sets. Online KaratEmail help center as well. You can submit a support ticket and additionally you can attend an open support session for the CMS. We house those at Culbertson 420. You can come in person and receive some one-on-one aid. Thank you.