Add and configure webform

[macburgee1]

Because Webform stores forms as config, we should have config_ignore in place before proceeding with adding Webform to the platform.

[macburgee1]

Blocked by #35

[macburgee1]

Let's look at using Webform Config Ignore

[macburgee1]

Given the complexity of Webform, we'll probably need to make multiple iterations of reviews.

Forms

(/admin/structure/webform/config)

Third Party Settings

• Evaluate third-party modules for SPAM reduction
  • Antibot

Elements

(/admin/structure/webform/config/elements)

Element General Settings

• Allowed Tags
  • Use a custom list defined by a custom CKEditor text format/editor

HTML Editor Settings

• Element text format
  • Create a text format/editor for use in CKEditor and set to use here.
  • Built-in editor is too permissive and allows users to directly interact with HTML code.

File Upload Settings

• Default maximum upload size
  • Should be deterimined by #62
• Default allowed file extensions
  • Should be deterimined by #62
• Default allowed audio file extensions
  • Should be deterimined by #62 (if audio files area allowed at all)
• Default allowed document file extensions
  • Should be deterimined by #62
• Default allowed image file extensions
  • Should be deterimined by #62
• Default allowed video file extensions
  • Should be deterimined by #62 (if video files are allowed at all)

Element Types

In general, the number of elements available is overwhelming.

• Address
  • Provides a form element to collect address information (street, city, state, zip).
  • No objection
• Advanced HTML/text
  • Provides an element to render advanced HTML markup and processed text.
  • Pick either this element or Basic HTML element; then restrict editor
• Attachment Token
  • Generates an attachment using tokens.
  • Unlikely to be used; can be added later if needed
• Attachment Twig
  • Generates an attachment using Twig.
  • Unlikely to be used; can be added later if needed
• Attachment URL
  • Generates an attachment using a URL.
  • Unlikely to be used; can be added later if needed
• Audio file
  • Provides a form element for uploading and saving an audio file.
  • Unlikely to be used; can be added later if needed
• Autocomplete
  • Provides a text field element with auto completion.
  • Unlikely to be used; can be added later if needed
• Basic HTML
  • Provides an element to render basic HTML markup.
  • Pick either this element or Basic HTML element; then restrict editor
• Buttons
  • Provides a group of multiple buttons used for selecting a value.
  • No objection
• Buttons other
  • Provides a group of multiple buttons used for selecting a value, with the ability to enter a custom value.
  • No objection
• CAPTCHA
  • Provides a form element that determines whether the user is human.
  • Only provide if CAPTCHA is part of our anti-SPAM strategy
• Checkbox
  • Provides a form element for a single checkbox.
  • No objection
• Checkboxes
  • Provides a form element for a set of checkboxes.
  • No objection
• Checkboxes other
  • Provides a form element for a set of checkboxes, with the ability to enter a custom value.
  • No objection
• CodeMirror
  • Provides a form element for editing code in a number of programming languages and markup.
  • Unlikely to be used; can be added later if needed
• Color
  • Provides a form element for choosing a color.
  • Unlikely to be used; can be added later if needed
• Computed token
  • Provides an item to display computed webform submission values using tokens.
  • Unlikely to be used; can be added later if needed
• Computed Twig
  • Provides an item to display computed webform submission values using Twig.
  • Unlikely to be used; can be added later if needed
• Contact
  • Provides a form element to collect contact information (name, address, phone, email).
  • I honestly don't understand the need for this one.
• Container
  • Provides an element that wraps child elements in a container.
  • Need to confer with DCF maintainer on this one
• Custom composite
  • Provides a form element to create custom composites using a grid/table layout.
  • Unlikely to be used; can be added later if needed
• Date
  • Provides a form element for date selection.
  • No objection
• Date/time
  • Provides a form element for date & time selection.
  • No objection
• Date list
  • Provides a form element for date & time selection using select menus and text fields.
  • No objection
• Details
  • Provides an interactive element that a user can open and close.
  • No objection
• Document file
  • Provides a form element for uploading and saving a document.
  • No objection
• Email
  • Provides a form element for entering an email address.
  • No objection
• Email confirm
  • Provides a form element for double-input of email addresses.
  • No objection
• Email multiple
  • Provides a form element for multiple email addresses.
  • Unlikely to be used; can be added later if needed
• Entity autocomplete
  • Provides a form element to select an entity reference using an autocompletion.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Entity checkboxes
  • Provides a form element to select multiple entity references using checkboxes.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Entity radios
  • Provides a form element to select a single entity reference using radio buttons.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Entity select
  • Provides a form element to select a single or multiple entity references using a select menu.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Fieldset
  • Provides an element for a group of form elements.
  • No objection
• File
  • Provides a form element for uploading and saving a file.
  • No objection
• Flexbox layout
  • Provides a flex(ible) box container used to layout elements in multiple columns.
  • Need to confer with DCF maintainer on this one
• Hidden
  • Provides a form element for an HTML 'hidden' input element.
  • No objection
• Horizontal rule
  • Provides a horizontal rule element.
  • Editors can't use <HR> anywhere else; it doesn't make sense to make an exception here.
• Image file
  • Provides a form element for uploading and saving an image file.
  • No objection
• Image select
  • Provides a form element for selecting images.
  • Unlikely to be used; can be added later if needed
• Item
  • Provides a display-only form element with an optional title and description.
  • Unlikely to be used; can be added later if needed
• Label
  • Provides an element for displaying the label for a form element.
  • All form elements should already be labeled. I don't understand the necessity of this element.
• Language select
  • Provides a form element for selecting a language.
  • Unlikely to be used; can be added later if needed
• Likert
  • Provides a form element where users can respond to multiple questions using a Likert scale.
  • No objection
• Link
  • Provides a form element to display a link.
  • How is this different from URL? Pick one.
• Location (Algolia Places)
  • Provides a form element to collect valid location information (address, longitude, latitude, geolocation) using Algolia Places.
  • We'd need an API key. Voting no on this one.
• Location (Geocomplete)
  • Deprecated
• Machine name
  • Provides a form element to enter a machine name, which is validated to ensure that the name is unique and does not contain disallowed characters.
  • Unlikely to be used; can be added later if needed
• Mapping
  • Provides a form element where source values can mapped to destination values.
  • Unlikely to be used; can be added later if needed
• Message
  • Provides an element to render custom, dismissible, inline status messages.
  • Unlikely to be used; can be added later if needed
• Name
  • Provides a form element to collect a person's full name.
  • No objection
• Number
  • Provides a form element for numeric input, with special numeric validation.
  • No objection
• Password
  • Provides a form element for entering a password, with hidden text.
  • We're not going to be accepting passwords in submissions.
• Password confirm
  • Provides a form element for double-input of passwords.
  • We're not going to be accepting passwords in submissions.
• Radios
  • Provides a form element for a set of radio buttons.
  • No objection
• Radios other
  • Provides a form element for a set of radio buttons, with the ability to enter a custom value.
  • No objection
• Range
  • Provides a form element for input of a number within a specific range using a slider.
  • No objection
• Rating
  • Provides a form element to rate something using an attractive voting widget.
  • Unlikely to be used; can be added later if needed
• Search
  • Provides form element for entering a search phrase.
  • No idea how this would be useful
• Section
  • Provides an element for a section/group of form elements.
  • Uses <section> element; unlikely to be used; can be added later if needed
• Select
  • Provides a form element for a drop-down menu or scrolling selection box.
  • No objection
• Select other
  • Provides a form element for a drop-down menu or scrolling selection box, with the ability to enter a custom value.
  • No objection
• Signature
  • Provides a form element to collect electronic signatures from users.
  • Unlikely to be used; can be added later if needed
• Submit button(s)
  • Provides an element that contains a Webform's submit, draft, wizard, and/or preview buttons.
  • Unlikely to be used; can be added later if needed
• Table
  • Provides an element to render a table.
  • Tables should only be implemented (if ever) after DCF responsive tables are available.
• Table select
  • Provides a form element for a table with radios or checkboxes in left column.
  • Tables should only be implemented (if ever) after DCF responsive tables are available.
• Tableselect sort
  • Provides a form element for a table with radios or checkboxes in left column that can be sorted.
  • Tables should only be implemented (if ever) after DCF responsive tables are available.
• Table sort
  • Provides a form element for a table of values that can be sorted.
  • Tables should only be implemented (if ever) after DCF responsive tables are available.
• Telephone
  • Provides a * form element for entering a telephone number.
  • No objection
• Telephone advanced
  • Provides a form element to display a telephone number with type and extension.
  • No objection
• Term checkboxes
  • Provides a form element to select a single or multiple terms displayed as hierarchical tree or as breadcrumbs using checkboxes.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Term select
  • Provides a form element to select a single or multiple terms displayed as hierarchical tree or as breadcrumbs using a select menu.
  • Unlikely to be used; can be added later if needed; potential security risk of exposing entity lables
• Terms of service
  • Provides a terms of service element.
  • Unlikely to be used; can be added later if needed
• Textarea
  • Provides a form element for input of multiple-line text.
  • No objection
• Text field
  • Provides a form element for input of a single-line text.
  • No objection
• Text format
  • Provides a text format form element.
  • We're not going to be accepting HTML submissions
• Time
  • Provides a form element for time selection.
  • No objection
• Toggle
  • Deprecated
• Toggles
  • Deprecated
• URL
  • Provides a form element for input of a URL.
  • How is this different from Link? Pick one.
• Value
  • Provides a form element for storage of internal information.
  • No objection
• Video file
  • Provides a form element for uploading and saving a video file.
  • Unlikely to be used; can be added later if needed
• Wizard page
  • Provides an element to display multiple form elements as a page in a multi-step form wizard.
  • No objection

Element Formats

Let's revisit once the allowed elements list is finalized.

Options

(/admin/structure/webform/config/options/manage)

These default option lists should be reviewed by someone higher up (e.g. general counsel, HR)

Images

(/admin/structure/webform/config/images/manage)

• Remove 'Cute Kittens'
• I can't imagine we'd ever use this feature

Submissions

(/admin/structure/webform/config/submissions)

No comments

Handlers

Email Settings

• Default to email
  • The default recipient address for emailed webform results.
  • Default: [site:mail]
  • I would make it required but not set a default; we're forced to set a default, so I suppose this works.
• Default from email
  • The default sender address for emailed webform results; often the email address of the maintainer of your forms.
  • Default: [site:mail]
  • Are we ok with 'noreply@unl.edu'?
• Default from name
  • The default sender name which is used along with the default from address.
  • Default: [site:name]
  • This should be changed to something else
• Default reply-to email
  • The default email address that a recipient will see when they are replying to an email. Leave blank to automatically use the 'From email' address. Setting the 'Reply-to' to the 'From email' prevent emails from being flagged as spam.
  • Default: none
  • No objection to default
• Default return path (email)
  • The default email address to which bounce messages are delivered. Leave blank to automatically use the 'From email' address.
  • Default: none
  • No objection to default
• Default sender email -The default sender address for emailed webform results; often the email address of the maintainer of your forms. The person or agent submitting the message to the network, if other than shown by the From header
  • Default: none
  • No objection to default
• Default sender name
  • The default sender name which is used along with the default sender email address.
  • Default: none
  • No objection to default
• Default email body (Plain text)

  
  Submitted on [webform_submission:created]
  Submitted by: [webform_submission:user]

Submitted values are: [webform_submission:values]

  - No objection
- Default email body (HTML)

Submitted on [webform_submission:created]

Submitted by: [webform_submission:user]

Submitted values are:

[webform_submission:values]

  - No objection
### Submission Handlers
- Action
  - Trigger an action on a submission.
  - Unlikely to be used; can be added later if needed
- Debug
  - Debug webform submission.
  - Unlikely to be used; can be added later if needed
- Remote post
  - Posts webform submissions to a URL.
  - Unlikely to be used; can be added later if needed
- Email
  - Sends a webform submission via an email.
  - No objection
- Settings
  - Allows Webform settings to be overridden based on submission data, source entity fields, and conditions.
  - Unlikely to be used; can be added later if needed

## Exporters
(/admin/structure/webform/config/exporters)

The default settings all look fine.

## Libraries
(/admin/structure/webform/config/libraries)

- Algolia Places
  - Algolia Places provides a fast, distributed and easy way to use an address search autocomplete JavaScript library on your website. (Algolia Places is by the location places elements.)
  - Disable
- CKEditor: Autogrow
  - Automatically expand and shrink vertically depending on the amount and size of content entered in its editing area. (Allows CKEditor to automatically expand and shrink vertically.)
  - Disable (we'll be using a custom editor that should be loading from core's CKEditor module)
- CKEditor: CodeMirror
  - Provides syntax highlighting for the CKEditor with the CodeMirror Plugin. (Makes it easier to edit the HTML source.)
  - Disable
- CKEditor: Fake Objects
  - Utility required by CKEditor link plugin. (Allows CKEditor to use basic image and link dialog.)
  - Disable (we'll be using a custom editor that should be loading from core's CKEditor module)
- CKEditor: Image
  - Provides a basic image dialog for CKEditor. (Allows CKEditor to use basic image dialog, which is not included in Drupal core.)
  - Disable (we'll be using a custom editor that should be loading from core's CKEditor module)
- CKEditor: Link
  - Provides a basic link dialog for CKEditor. (Allows CKEditor to use basic link dialog, which is not included in Drupal core.)
  - Disable (we'll be using a custom editor that should be loading from core's CKEditor module)
- Code Mirror
  - Code Mirror is a versatile text editor implemented in JavaScript for the browser. (Code Mirror is used to provide a text editor for YAML, HTML, CSS, and JavaScript configuration settings and messages.)
  - Disable
- jQuery: Chosen
  - A jQuery plugin that makes long, unwieldy select boxes much more user-friendly. (Chosen is used to improve the user experience for select menus. Chosen is an alternative to Select2.)
  - Choose either jQuery: Chosen or Select2; confer with DCF maintainer
- jQuery: Input Mask
  - Input masks ensures a predefined format is entered. This can be useful for dates, numerics, phone numbers, etc…(Input masks are used to ensure predefined and custom formats for text fields.)
  - No objection
- jQuery: International Telephone Input
  - A jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.(International Telephone Input is used by the Telephone element.)
  - No objection
- jQuery: RateIt
  - Rating plugin for jQuery. Fast, progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), unobtrusive JavaScript (using HTML5 data-* attributes), RTL support. The Rating plugin supports as many stars as you'd like, and also any step size. (RateIt is used to provide a customizable rating element.)
  - Disable (we're not enabling the rating element)
- jQuery: Select2
  - Select2 gives you a customizable select box with support for searching and tagging.(Select2 is used to improve the user experience for select menus. Select2 is the recommended select menu enhancement library.)
  - Choose either jQuery: Chosen or Select2; confer with DCF maintainer
- jQuery: Text Counter
  - A jQuery plugin for counting and limiting characters/words on text input, or textarea, elements. (Word or character counting, with server-side validation, is available for text fields and text areas.)
  - No objection
- jQuery: Timepicker
  - A lightweight, customizable javascript timepicker plugin for jQuery, inspired by Google Calendar. (Timepicker is used to provide a polyfill for HTML 5 time elements.)
  - Is the polyfill necessary for our userbase?
- Progress Tracker
  - A flexible SASS component to illustrate the steps in a multi-step process e.g. a multi-step form, a timeline or a quiz. (Progress Tracker is used by multi-step wizard forms.)
  - No objection
- Signature Pad
  - Signature Pad is a JavaScript library for drawing smooth signatures. It is HTML5 canvas based and uses variable width Bézier curve interpolation. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries. (Signature Pad is used to provide a signature element.)
  - Disable (we're not enabling the signature element)
- jQuery: Geocoding and Places Autocomplete Plugin
  - Deprecated
- jQuery: iCheck
  - Deprecated
- jQuery: Toggles
  - Deprecated

Should these libraries continue to be served via CDN or should we serve them ourselves?

## Advanced

### User Interface Settings

This section is somewhat of a catch-all for UI settings.

I recommend checking the following settings:
- Save details open/close state
- Disable promotions
- Disable 'Contribute' section

I want to check with the DCF maintainer re the following setting:
- Display element description as help text (tooltip) (If checked, all element descriptions will be moved to help text (tooltip).)

We need to decide if we want to leave the Help text and videos enabled.

### Requirement Settings

- Check if CDN is being used for external libraries?
  - If we decided we're ok with serving via CDN, then disable
- Check if the Webform Bootstrap Integration module is installed when using the Bootstrap theme
  - Uncheck
- Check if SPAM protection module is installed
  - If we opt to not use any of the suggested anti-SPAM modules, then disable

## Permissions

We should get something committed for #26 so we can assigned permissions here.

[ericras]

We can probably leave this open for the time being and make changes.

Probably want to throw HOneypot in here too

[macburgee1]

Element changes:

• Container
  • I remove the container element because it's simply a <DIV> wrapper with an ID attribute.
• URL vs Link
  • I removed Link because it's compound element consisting of both a label and a URL. It's unlikely the label would ever be needed.
• Basic HTML vs Advanced HTML/text
  • Basic HTML makes use of the 'Webform' text format, so we're going with that one.

[macburgee1]

I removed the following elements:

• Likert
  • Uses non-responsive tables. This can be added back when DCF implements responsive tables.
• Generic Element
  • Unlikely to be used natively by a user. The plugin isn't disabled as it's required by other plugins. We're removing it from the UI as an option for form builders, however.
• Email Confirm
  • Unlikely to be used; can be added later.

[macburgee1]

Re 'Allowed Tags', I believe this setting is disused because we're using our own CKEditor editor.

[macburgee1]

The range element isn't useful. The user has no idea of know the value s/he has selected.

[macburgee1]

Here's the status of this pull request:

Paged Forms

• The pager needs styled.
• There's been discussion about Next/Previous buttons. The default button text includes a carrot (e.g. "NEXT PAGE >", which has not meaning to a screen reader. We have a couple of options:
  1. Hard code the next and previous button text
  2. Still allow users to set the button text, but automatically append and arrow in a screen-reader friendly way. We'd update the default values to remove the carrots.

Select2 vs Chosen

We have the option of offering Select2 or Chosen for select and multi-select lists. The Webform maintainers have expressed a preference for Select2. In my limited testing, they're functionally equivalent - at least in terms how they're being utilized by Webform. If we do offer one, I think we should choose only one.

Antibot vs Honeypot

There are a couple of modules we're looking at for anti-SPAM: Antibot and Honeypot. We're going to stick with Honeypot.

Options

We still need to consider which default options lists should be either 1) modified or 2) removed.

File Upload Settings

• Need a max upload file size
• Are the allowed extensions in the whitelist acceptable?
  • File: gif jpg png bmp eps tif pict psd txt rtf html odf pdf doc docx ppt pptx xls xlsx xml avi mov mp3 ogg wav bz2 dmg gz jar rar sit svg tar zip
  • Document: txt rtf pdf doc docx odt ppt pptx odp xls xlsx ods
  • Image: gif jpg png

Email Settings

• Default from email: noreply@unl.edu (are we good with this?)
• Default from name: defaults to [site:name] (should change this)

Permissions

When we get roles committed to the codebase, we'll want to circle back around for Webform permissions.

[macburgee1]

I added a UNL Webform Test module that will install a pre-configured form with the various elements and configurations we've been testing against. Honey pot is installed and enabled.

When testing, be sure to use the issue-8-forms-webform branch of unl_five.

I'm going to give Ryan another pass on Monday before assigned to Eric.

[macburgee1]

We need to merge in master now that the Editor role is defined and then assign Webform permissions to Editor.

[ericras]

Once the “reference”: “master” issue is resolved for the libraries, I think this can be merged. Some small things will inevitably come up later. (For instance, maybe add "jpeg" as a default image type?)

[macburgee1]

Merged master branch into issue-9-webform

Paged Forms

Pager is styled. Next/Previous button issue is deferred

Select2 vs Chosen

The choice of Select2 vs jQuery Chosen is deferred. Both have been removed for now.

Options

Several of the options lists have been removed. The countries lists are unchanged. If these lists becomes an issue for the University down the road, then we can address them then.

File Upload Settings

Max upload limit per element has been set to 20 MB. JPEG has been whitelisted

Email Settings

In the absence of feedback, we're leaving the aforementioned settings for now.

Permissions

Permissions have been added to the Editor role. I needed to override a few routes provided by Webform to deny access to routes (effectively remove them) where permissions either 1) didn't exist for the route or 2) were too permissive.

[ericras]

The Access tab is scary and removing it at this time is ok. Ideally, someone with permission to edit the form would have access to the "Create submissions->Roles" portion of that page. People frequently use that option in D7 to limit submissions to people with a UNL login (authenticated users).

[macburgee1]

Re the access tab, I've created a follow-up issue: #79