Web Forms

As you may know, a web form is a collection of fields that a user can enter information into and then submit to the website or a third party. In the SOM web system, forms can be added through an item type called a "form folder".

Before You Start

If forms have been enabled for your site, "form folder" should appear as one of the choices in the "add to folder" or "add new" drop-down menus. If the form folder item type is not currently available, contact the OIS Web Team at webhelp@med.unc.edu to have it enabled.

’Add New’ Menu

[top]

Adding a Form Folder (Basic Form Creation)

  1. Navigate to the place on your site where you want the form to live.  A form folder can be added to any folder on your site, including the home or root folder.
  2. Click the "add new" drop-down and select "form folder".  On the Add Form Folder screen, there will be a number of number of customization options, if you wish to change any settings from the defaults.
  3. Fill in the required fields and any desired options, then click "save".

This creates a basic form with minimal elements in it.  The default fields (which can be deleted and replaced if you don't want them) are boxes that ask for "your email address," "subject," and "comments." All three are set to be required of the user.  For an example of what this looks like, see our default form.  Your form will immediately be functional (just be sure to customize the Mailer Adapter), but it will not be visible to users until you publish it.

[top]

Form Folder Contents

If you click the contents tab for the form folder, you'll see the items that are created within it (the same way a normal folder holds things). In a form folder, these things are items specific to a web form, like form fields.  By default, these field items are: Mailer, Your E-mail Address, Subject, Comments, and Thank You. From contents, you can change these items to affect their order, delete them, etc.

[top]

Working With Fields

Field Types

Form Content TypesThe form folder is designed to contain all of the form fields you want to use, each as an individual item that can be customized and reordered to help build the form that's actually visible when you click the "view" tab.  Most fields are purposed to be visible to the user (as long as the form folder is published), while a couple (Mailer Adapter and Save Data Adapter) exist for reporting purposes. Here are all of the available field types you can choose from.

  • String Field string_field.gif
    This is a standard, general purpose text field and is probably the most commonly used field. It gives a single-line text box for gathering information like a name, email, phone number, etc.
  • Text Field text_field.gif
    This item type gives a large text box that allows users to submit large chunks of text. You can specify the number of lines, to make the box as big as you need it to be. This is the item type to use if you wish to add a "comments" section to your form.
  • Selection Field selection_field.gif
    A field that lets a user choose a single value from a list. The list can be shown as selection list, a drop-down menu or as a list of radio buttons. To create one, put a list of options, with one option per line in the designated area when creating it.
  • Multi-Select Field multi-select_field.gif
    This item type allows site visitors to select one or more choices from a list.
  • Checkbox Field checkbox_field.gif
    By default this gives a 1 or 0 as an answer like "checked" or "unchecked," but you can make this whatever you want (eg: yes, no, true, false).
  • Custom Script Adapter custom_script_adapter.gif
    Avoid! Only for School of Medicine programmers.
  • Date/Time Field date_time_field.gif
    This item allows users to choose a date and time, by giving a series of drop-down menus that give the date in this format: "Year-Month-Day-Hour-Minute-AM/PM."
  • Decimal Number Field decimal_number_field.gif
    This item type allows you to specify that the user should add a decimal number here within a certain range. (i.e. 98.6)
  • Fieldset Folder fieldset_folder.gif
    This item type is like a folder within the form; it can hold it’s own elements. It draws a little box around them so you can organize fields into groups. You create it like a subfolder of the main form folder and then place the other item types inside of it.
  • File Field file_field.gif
    This item type allows you to upload files that will be sent to the form creator as an email attachment. It works like many other file uploaders, allowing the user to browse their computer for the file to upload.
  • Image image_within_form_folder.gif
    This item type allows you to add an image to the folder that can later be added to a thank you page or to one of the rich label fields.
  • Label Field label_field.gif
    This item type just allows you to create headings or labels, with no user inputs.
  • Lines Field lines_field.gif
    This item type is just like a textbox, but allows you to specify a required number of lines.
  • Mailer Adapter mailer_adapter.gif
    This item type allows you to specify who receives form submissions via email. It also allows you to add extra info to the message, like text before, text after, or a signature.
  • Page page_within_form_folder.gif
    This item type allows for the construction of a customized "thank you" page that the user will see once the form has sent.
  • Password Field password_field.gif
    This item type is just a text area field where the user sees asterixes instead of letters and numbers (i.e.: *****). This does not encrypt or hide the text at all—it can still be read by the recipient of form submissions, or anyone with access to the form folder! (see note below about the possibility of encryption)
  • Rating-Scale Field rating-scale_field.gif
    This item allows you to add a group of questions with the same set of possible answers.  This field is particularly practical for rating, using answers such as 'Strongly agree,' 'Agree somewhat,' etc.
  • Rich Label Field rich_label_field.gif
    This is also a label field with no input. Like the basic label field, this item type is for adding text to the form. The rich label field allows you to style the text with HTML. It is useful for adding descriptive or styled text to your form.
  • Rich Text Field richtext_field.gif
    This item type allows users to incorporate rich text themselves, with formatting.
  • Save Data Adapter save_data_adapter.gif
    Choose this item to enable the viewing or saving of all form submissions. The save data adapter only captures form submissions when it is enabled, so it must be added to the form folder before the form is put into use (pre-existing submissions will not be included).
    exclamation-trianglesign.png Warning: While on the default view ('download view'), be sure not to accidentally press the "Clear Saved Input" button.  It will instantaneously erase all submissions!
  • Thanks Page thanks_page.gif
    This allows you to make alternate "Thank you" pages that can be chosen for the form. This is like the 'page' item type, but it allows for dynamic functionality such as pre-pended and appended text, and the choice of showing the user what they added to the form, based on some or all of the form items.
  • Whole Number Field whole_number_field.gif
    This item type is like Decimal number, but allows for an integer instead of a decimal field.

[top]

Adding

To add a new form field (while on an existing form folder), do one of the following:

  • Click the "add new" drop-down menu and select the field type you want to add.
  • Click the "quickedit" tab and drag the field type you want to add from the Toolbox on the right.

[top]

Editing, Deleting, and Reordering

To access and edit form fields (while on an existing form folder), do one of the following:

  • Click the "contents" tab.
  • Click the "quickedit" tab. This takes you to an alternative screen for editing and organizing contents, with some unique options, including those to enable and disable data adapters!

    Default Form Contents

[top]

Collecting the Data

There are two built-in mechanisms for collecting form submission data. You can use either method, or both at the same time:

Mailer Adapter

The default Mailer Adapter will send form data to an email address that you specify.

Save Data Adapter

The optional Save Data Adapter will save the data on the website and allow you to either view it on your site in data table form, or download it as a tab-delineated (.tsv) or comma-delineated (.csv) file that can be opened and viewed as a spreadsheet in Excel.

[top]