Topics Map > University of Chicago > IT Services > Services & Support > Web Development/Hosting/Resources > UChicago Sites

UChicago Sites - Content - Creating Webforms

This article explains how to create a form on your UChicago Site.

Create a New Webform

Webforms give site owners and content editors the ability to create a form to capture information from users visiting your website. For example, forms can be used to capture and store information about students who are registering for a particular event. That information can be emailed to any address, viewed online, or downloaded to an Excel spreadsheet.

To add a webform to your site, do the following:

  1. Once you have logged in to your site, click on the Add Content link in your toolbar.
  2. You will see a list of all of the different types of content you can create. Click on Webform near the bottom of the page.
  3. Enter a title and body (optional) for your webform.
  4. Publish or save as draft.

Adding New Components

Forms are made up of different components, or fields, into which users enter their information. Examples of components include textfields, select options (e.g radio buttons and check boxes), file uploads, email addresses, etc.

To add a component, navigate to the form you have just created. Click on the Webform tab.
Webform Tab

You will arrive at the Webform page where you are able to create, edit, and delete form components. To create a component, provide a component name under the "LABEL" tab. Next, choose the component type you would like to create under "TYPE". Finally, click Add. You will be able to choose various options based on the type of component you selected.

Example: Creating a 'Textfield' Component

To add a textfield component to your form:

  1. In the Webform page under "LABEL", make sure you provide a name for your component.
  2. Make sure that "Textfield" is selected under the "TYPE" tab.
  3. Click Add under the "OPERATIONS" tab.
    Webform Type & Add

On the next page, you are now able to set options for your textfield. Some options include:

  • Description (optional) - Provide a brief description of the field used as help for the user when he/she uses the form.
  • Validation (optional)
    • Mandatory - Set the textfield to be mandatory. This will display an error if the user leaves this field blank.
    • Maxlength - Set the maximum number of characters the user is able to input.
  • Display (optional)
    • Width - Size of the textbox
    • Label display - Determines the placement of the component's label.

Click Save Component once you have finished. You will see your newly created component on the Webform's page. You may also edit or delete any components from here. Click the View tab to view your form.
New Component

Example: Creating a 'Select Options' Component

The select options component is used when you need to supply a predefined list of options to the user. Select options can be typically presented to the user in three formats:

  • Radio buttons - Can only choose one of the predefined set of options
  • Check box - Allows user to select multiple selections
  • Drop down list - Can be set to allow both single and multiple selections.

To add a select options component:

  • On the Webform page, provide a label name and choose Select options under the "TYPE" tab. Click Add.
    Selected Options

On the next page, you are now able to set options for your component.

  • Multiple - Check this option if the user should be allowed to choose multiple values.
    • Radio buttons - Displayed as radio buttons to the user if 'Multiple' is unchecked.
    • Check boxes - Displayed as check boxes to the user if 'Multiple' is selected.
  • Options (required) - The list of options that will be displayed to the user. Note that this field requires you to enter a key-value pair.
    • Key-value pairs MUST be specified as "safe_key|Some readable option".
    • Key-values must be separated by a pipe "|".
    • Keys - Use of only alphanumeric characters and underscores only (no spaces).
  • Pre-built option list - Use a pre-built list of options rather than entering options manually. Options will not be editable if using pre-built list.
    • Note that this will clear any data that you have manually entered under 'Options'.
  • Display
    • Listbox - Check this option if you want the select options component to be displayed as a select list box instead of radio buttons or checkboxes.

Click Save Component once you have finished. Click the View tab to view your form.

Options with multiple
Options with listbox

Example: Creating a 'File' Component

The file component is used when you want the user to be able to upload a file from their local machine.

To add a file component to your form:

  • On the Webform page, provide a label name and select File under the "TYPE" tab. Click Add.

On the next page, you are now able to set options for your component.

  • Upload directory (optional) - Directory where uploaded file will be stored.
    Upload directory
  • Validation
    • Max upload size (100Mb Max) - Maximum file size a user may upload such as 2 MB or 800 KB.
    • Allowed file extensions (required) - File extensions that are allowed to be uploaded.
      File extension

Click Save Component once you have finished. Click the View tab to view your form.
File upload

Setting Up Email Notifications

You can setup email notifications whenever a form is submitted.

To add email notifications:

  • On the 'Webform' page, click on E-mails near the top right corner.
  • Enter the email address where notifications will be sent to. Click Add.
    • Note: Any email, select, or hidden form component may be selected as the recipient address.

On the next page, you are now able to edit and set email notification preferences.

  • E-mail header preferences
    • E-mail subject - Select what to display under the subject line.
    • E-mail from address - Address where reply emails may be sent to.
    • E-mail from name - Select name from the sender
      Header details
  • E-mail template - Select the information that will be sent along with the email.
    • Included e-mail values - Select components that will be included in the email.
    • The selected components will be included in the %email_values token.
      Email template

Click Save e-mail settings once you have finished.
Email notification

Updating Confirmation Messages

A confirmation message will be displayed once a user submits their form.

To personalize your confirmation message:

  • On the 'Webform' page, click on Form settings near the top right corner.
    Form settings

On the next page, you are now able to edit and set the confirmation message preferences.

  • Submissions settings
    • Confirmation message - Message that will be displayed after user submits a form.
    • Redirect location - Choose where to redirect the user upon successful submission.
      • Confirmation page - Page that displays the confirmation message.
      • Custom URL - Redirect the user to a different page (or website).
      • No redirect (reload current page)
        Submission settings

Click Save configuration once you have finished.

Limit Access to Authenticated Users

You can restrict access to a Webform to users logged in with their CNetIDs.

To restrict access:

  • On the 'Webform' page, click on Access Control near the top right corner.
    access control tab
  • On the Access Control page, uncheck "Anonymous visitors (not logged-in)" and check "Logged-in users (anyone with a valid CNET ID/password)". Then click the Submit button.
    access control form

See Also:

Keywords:template website drupal forms component   Doc ID:31495
Owner:Nana O.Group:University of Chicago
Created:2013-07-09 10:55 CDTUpdated:2016-12-28 08:54 CDT
Sites:University of Chicago, University of Chicago - Sandbox
Feedback:  0   0