Webforms

Webforms allow you to create a form or questionnaire to be completed by anonymous users. Results can be e-mailed to you as they are submitted. The results are stored in the site where authorized editors can access/download them when needed. 

You can manage your forms by going to Manage > Structure > Webforms 

On this page:

 

CAPTCHA 

IMPORTANT: A CAPTCHA is a challenge-response test most often placed within web forms to determine whether the user is human. Captcha fields are now required to be added on a per form basis. 

When building out forms, add a captcha element and set the challenge type to reCaptcha as the last element before submit. 

The captcha challenge will only show in public facing pages. It will not show up on the form if you are logged in. To verify that the captcha element is properly added, log out and view the page or visit the page from an incognito window. 

 

Creating Webforms

  1. Go to Manage > Structure > Webforms 
  2. Click Add Webform
    • Provide a form Title
    • Set a Status
      • Open means open for submissions and visitors will be able to fill and submit the form
      • Closed means closed for submission and visitors will not be able to fill and submit the form
    • Optional: Provide an Administrative Description (This only shows up for editors, not the public)
    • Optional: Provide a Category (This is for organizational purposes for the editor)
  3. Build your webform 
    • Click Add Element to add fields and elements to your form
    • Repeat for all the desired form fields/elements  
    • A Submit button will be automatically added so long as the form contains a single field.
  4. Add CAPTCHA element. It is highly recommended to add a captcha element to every form you create!
  5. Configure options such as Confirmation message or email handling 
  6. Save

 

Elements

The D9 Webform Module comes with a wide variety of elements hat can be used to create your webforms. Each element can have its own set of configurations and settings.

However, not everything needs to be used or should be used.

We highly recommend simplifying your webforms. Stick to the basic elements and only set what is required. Leave the settings to the general default unless necessary.

 

Recommended Elements

  • CAPTCHA
    • Provides a form element that determines whether the user is human.
  • Checkbox
    • Provides a form element for a single checkbox.
  • Checkboxes
    • Provides a form element for a set of checkboxes.
  • Date
    • Provides a form element for date selection.
  • Email
    • Provides a form input element for entering an email address.
  • Number
    • Provides a form element for numeric input, with special numeric validation.
  • Radios
    • Provides a form element for a set of radio buttons.
  • Select
    • Provides a form element for a drop-down menu or scrolling selection box.
  • Telephone
    • Provides a form element for entering a telephone number.
  • Textareas
    • Provides a form element for input of multiple-line text.
  • Textfield
    • Provides a one-line text field form element.
  • URL
    • Provides a form element for input of a URL, with built in validation for URL formatting.
  • Markup Elements. These are non-form elements to help organize your forms and add additional basic content such as text to provide more context.
    • Horizontal Rule
      • Provides a horizontal rule
    • Basic HTML
      • Provides an element to render basic HTML Markup

 

Submissions

Submissions can be found in the Results tab of the form. It is highly recommended to regularly download submission results and clearing it from your sites.

It is best practice to limit the amount of personal information you request in your forms and keep on your site.

 

Emails

If you would like to setup email actions, you can do so in the Settings tab of the form management screen when you are creating or editing a form.

To add an email handler:

  1. Manage the form you wish to add an email handler to
    • If creating a new form:
      • Go to the Settings tab
    • If adding to existing form:
      • From the webform overview screen, search for the form you wish to edit. Use the filter to find it easier
      • In the Operations column of the form you wish to edit, click the arrow down button next to edit and click Settings
  2. Click Emails / Handles in the second set of tabs
  3. Click Add Email
  4. Provide a Title
  5. Provide a Send To Email. There are only two recommended options for this.
    • To send to yourself / specific email address:
      • In the drop down select Custom To email address
        • Provide a valid email address to sent the email to
    • To send to the user
      • If you have an email address element in your form, it will show up as an available option in the drop down. Select the element you wish to act as the send to email
  6. Optional: Provide Send From Email
    • Warning: It is recommended to leave this as [site:mail]. This will use the site's title as the name and <no-reply@utoronto.ca>.
    • If you wish for your emails to appear from a specific name and email:
      • For Form Email: In the dropdown, select Custom To email address and provide a valid email address
      • For Form Name: In the dropdown, select Custom Form name and provide a name
  7. Provide a Message
    • Default: By default, the subject of the message is Webform submission from: [Title of Webform]​ and the body of the message contains the values submitted in the form.
      • You can choose which elements/fields to include by clicking on Included email values/markup and checking / unchecking the elements you want to include / exclude.
    • Custom: You can completely customize the message.
      • In the body field dropdown, select Custom body
        •  You can set any message and compose the message however you want. Tokens are available.
  8. Save
  9. Save Handlers

 

Important Note

It is important to ensure the destination you wish to send an email to and the information you are sending.

You can add multiple email handlers. The typical scenario for emails when a form is submitted would be:

  1. An email is sent to the editor / department group to notify of a new submission
  2. An email is sent to the user (if an email is field provided) to confirm that their submission has been received.

 

Common scenarios for email handling and how to set it up

  • Sending yourself or your group a notification with a copy of the submit values ( With Data)
    • Set the Send To field to Custom To email address and provide your / your group's email address
    • Leave the body of the message to default
  • Sending yourself or your group a notification with a generic message (Without Data)
    • Set the Send To field to Custom To email address and provide your / your group's email address
    • Set the body of the message to custom body and provide a generic message such as "There is a new submission for this form. Manage the submissions on the site... etc"
  • Sending a user a confirmation email with a copy of their submit values (With Data)
    • Set the Send To field to the Form Element (email) that would contain the email address of the user filling and submitting the form.
    • Leave the body of the message to default
  • Sending a user a confirmation email with a generic message (Without Data)
    • Set the Send To field to the Form Element (email) that would contain the email address of the user filling and submitting the form.
    • Set the body of the message to custom body and provide a generic message such as "Thank you for your submission. Here are the next steps... etc"

 

Views & Blocks

All webforms that are created can be viewed and visited as a page. The default path follows this pattern:

/subsite-name/form/title-of-form

Clicking on the View tab when managing forms takes you to the public view of the form and the URL in your address bar can be shared.

Example: If I&ITS had a form titled "Event Sign Up", that form is accessible through https://www.utm.utoronto.ca/iits/form/event-sign-up

 

Blocks

All webforms that are created also automatically generates a block. Think of it as a block version of the form's page. It can be placed on basic pages like any other block.

When adding a block in the basic page layout, any created forms will appear on the list under webforms.

Example: You can create a page titled "My Event" in the I&ITS site with a bunch of content related to the event. In that page, you can add a block and "Event Sign Up" will be in the list of available blocks.

The form will appear in the "My Event" page which you will be able to share as normal.

 

Best Practices 

  • Always include a captcha challenge in your forms to reduce spam submission
  • Use the correct type for specific type of data. For example, use the email field for email addresses instead of a normal text field.
  • It is generally recommended that you limit the amount of personal information you request in your forms 
  • Clear webform results where personal information is captured once the information is taken offline