This document discusses how to build and manage web forms in the CMS. It describes what web forms are, the parts of a web form including fields, fieldsets and elements. It provides a two step process for building a web form using the CMS Form Builder and then using KaratEmail to process and manage submissions. Specific instructions are given on how to create a new form asset, add elements and fieldsets, and configure settings like success and failure messages. Once complete, the form can be published and submissions will be stored and managed in KaratEmail.

1. CMS 130
Web Forms
Building and managing web forms in
the CMS

2. WHAT ARE WEB FORMS?

3. • Like paper forms, web forms allow you to
gather information which can be stored and
used later.
• Unlike paper forms, web forms automatically
store the data. Your information is already
digital!

4. • Each web form submission is stored in a
database in the form of a table
• Each submission becomes a new row, while
columns are the names of the inputs

5. PARTS OF A WEB FORM

6. Example Web Form
This form captures personal information plus additional comments. Each
field is referred to as an input, or element.

7. Fieldsets
• Groups of inputs can be organized by fieldsets.

8. Let’s build a form!
• Building and managing web forms in the CMS
requires two steps.
1. Using the CMS Form Builder
2. Using KaratEmail to process and manage web
form submissions.

9. STEP 1: BUILD THE WEB FORM

10. Let’s build this comment form.

11. Create a new Form Asset
• Choose [ Content ] > [ Assets ].
• Click followed by “Form”.

12. Asset & Settings
Asset Info Asset Settings

13. • What you name the form matters.
• You could be managing a list of forms. Which
one is which?

14. Elements (or inputs)

15. Element Cards
• Elements can be dragged over
cards to add above.
• Cards can be dragged over each
other to change order.
• [ + ] button adds a card below.

16. “Last Name” input
• Begin fieldset here and give it a
label.
• Remember the name will be the
column in the submission.
• Advanced field will always look
like: key=value;

17. “First Name” input

18. “Email” input
• Override Single Line Text Field card
to be email with:
custom-type=email;
• Form won’t submit until the user
input resembles an email.
• Close the fieldset with:
fieldset-end=true;

19. “Additional Comments”
input
• Give users seven rows of height for
the Multi-Line Text Field using:
rows=7;
• Start, label, and stop the fieldset
around this single input.

20. Email Messages
• Ignore
• Already handled by KaratEmail.

21. Success Messages
• How will the form respond if the user
successfully fills in the inputs?

22. Write a success message.

23. The user will see the above.

24. Or put your own thank you page together instead.

25. The user will see the above.

26. Failure Messages
• How will the form respond if the user
successfully fills in the inputs but the form is
unable to store the submissions in KaratEmail?
– Example: Campus system outage.

27. Write a success message.
Enter default to get our standard message. Enter your own if you
wish.

28. The user will see the above.

29. Additional Options
• Make sure the “Save in Results Database” is
checked!
• Change the “Submission Button Text” if you
wish.

30. Create & Publish!
• Click [ Create ].
– If doesn’t work make sure all “Name”s are unique.
• Click [ Publish ].
– Sometimes takes up to 5 times to work. Otherwise
submit a request with the asset URL and we’ll take
a look.
– We recommend adding one fieldset at a time and
publishing (creating a save history).

31. Put the form asset on a page

32. View the web form [ Preview ]

33. Admin interface [ Edit ]

34. • Once the web form is ready for public
consumption click “Request Access” and
publish the page.

35. STEP 2: KARATEMAIL
Manage the web form submissions

36. Remember
• Web forms allow users to enter data that is
stored for processing.
• Each submission becomes a new row in the
tabular data set.
– Columns are the names of the inputs

37. • KaratEmail will begin storing submissions even
if you haven’t been granted access to them
yet.

38. • Log in to view the web forms you can manage.

39. The web form submissions
• Click [ View Form ].
• All buttons have tooltips.

40. • View a submission.
• Mark a submission as read/unread.
• Forward a submission to yourself.
• Delete a submission.
• Export read/all submissions to Excel.

41. • We have created a web form.
• Submissions for the web form are now tracked
through KaratEmail.
We’re done!

42. LAB
Let’s try some of what we have learned.

43. Instructions
1. Open a site you manage in the CMS and pull
up the Assets.
2. Create the form on the next page that
redirects to the following upon success.
• https://www.montana.edu/web/adam/outc16/t
hank-you.html

44. Create this form!

45. ADDITIONAL INFORMATION

46. Help!
• Online form builder Help Center
– More input types
– Building address fieldsets
• Online KaratEmail Help Center
• Submit a Support Ticket
• Attend an Open Support session for the CMS
– Available only at the MSU-Bozeman Campus