Webforms

This page documents how to create, edit and maintain the Webforms content structrue on the Drupal site. To access Webforms from the Drupal interace navigate to Structure > Webforms on the top toolbar.

Creating a new Webform

1. Click Add webform on the Forms tab
2. Add a name for the form
3. Add a description (this will be used buy future developers to find the form)
4. Set Status to "Closed" until you are ready to publish
5. Click Save

Editing a webform

To edit a webform, navigate to the Forms tab, find the webform to edit and click the Build button to the far right. This will bring you to the Elements page of the webform.

Adding elements

Elements, or specifically Form elements, are akin to what fields are. A form element can be a text field, a drop-down menu, radio checkbox, image container, ect. For a list of default Drupal elements, refer to the Drupal API form and render elements documentation (opens in a new tab).

When Add Element is clicked, a comprehensive list of all available elements should be appear. Hovering over the ? will display a brief description of the element's intended use and funciton.

Events and chaining conditions

Drupal's webforms can be triggered using events. Elements can be hid or displayed based on user input, styling can be changed or info added. Conditional logic is added to individual elements using preconfigured conditional logic. An in-depth explanation of how to add conditional logic to elements can be found in the Drupal Conditional Form Fields (opens in a new tab) documentation. To add conditions to an element, follow the steps below:

1. Navigate to the Build tab
2. Select the Edit button in the element's row
3. Navigate to the Conditions tab on the element's right-hand sidebar
4. In the Conditional Logic box, conditional statements can be written using the State, Element and Trigger/Value fields

States refers to a certain property on a DOM element, such as "visible" or "checked". They can be applied to an element depending on the state of another element on the page. States depend on HTML attributes and DOM element properties, which change due to user interaction.

Element refers to any other element in the webform, since states depend on user interaction with other elements.

Trigger/Value is the state of the other element.

An implementation of this would be to hide an email field until the user inputs their name in a name field. See the photo below to see an example of this implementation on the email field's "Condition" tab.

List of All Element States

These refer to all state options --some are only available to the state of the trigger/value (i.e. when checking values of other elements):

• enabled
• disabled
• required
• optional
• visible
• invisible
• checked
• unchecked
• expanded
• collapsed

Editing CSS/JS

More advanced editing is possible with Webforms. Most forms do not require custom CSS/JS. Most notably the school vists webforms, as of 2022, had used extensive custom CSS/JS to accomadate for their complex nature.

In order to add or edit the CSS/JS of a form, navigate to the form and then to Settings > CSS / JS on the top toolbar.

Exporting a Webform

Any edits done on the Drupal admin panel will not be presistent. Once new code is pushed to the live site, it will overwrite any updates made on the Drupal admin site.

Webforms source code is a .yml configuration with associated CSS/JS. All changes made to them are reflected in the proper .yml file. While one could edit the .yml file directly instead of using the Drupal GUI, this would likely lead to more mistakes.

Therefore, the yml code must be exported from the Drupal admin site and pushed up using the normal workflow used to push updates. To export the webform yml, follow the steps below:

1. Navigate to Configuration > Development > Configuration synchronization > Export > Single item (see below)

2. Change Configuration type to Webform

3. Select the webform from Configuration name

4. Copy the code under "Here is your configuration"

5. Find the proper webform .yml in your local installation

   Verify that the correct webform is modified by comparing the uuid (the first line in the yml)

6. Paste the code into the file

7. Push as normally would