advanced�webforms�http://bit.ly/advanced-webforms
This work is licensed under a Creative Commons Attribution 4.0 International License.
Hello!
Hi, my name is Jacob Rockowitz.
there are a �lot of resources available for learning about the basics Of �the webform module
Advanced �presentations �should teach you �a few new things �& inspire you �to learn more
Building advanced�webforms requires leveraging hooks, understanding plugins, building render arrays, �& writing tests
Webform Basics
The Webform �module is a �powerful and flexible �Open Source �form builder & �submission manager �for Drupal 8
It provides all the features expected from an enterprise proprietary form builder...
...combined with the flexibility and openness of Drupal
The use case…
ONCE AGAIN, THE USE CASE…
BUILD
COLLECT
DISTRIBUTE
<demo>
Webform Basics
Overview: /admin/structure/webform
Build: …/webform/manage/contact
Source: …/webform/manage/contact/source
Configure …/webform/manage/contact/settings
Test: /webform/contact/test
Results: …/contact/results/submissions
Download: …/contact/results/download�Submission:…/contact/submission/1�
Additional resources
testing
webforms
Tests confirm �expectations
Webform Tests confirm
testing best practices
BY the way, the WEbform module �Still uses deprecated simpletests…
…you should �only write�PHPUnit tests
<demo>�Testing Webform
Overview: /admin/structure/webform
Settings:…/src/Tests/Settings
Setting: WebformSettingsConfirmationTest
Elements:…/src/Tests/Element
Element: WebformElementEmailTest
Modules: /tests/modules
Additional resources
Webform�entities
Everything in �Drupal 8 is �an entity �(or a plugin)
what is an entity?
Any defined chunk of data in Drupal. This includes things like nodes, users, taxonomy terms, files, etc. Contributed modules can define custom entities. �Each entity type can have multiple bundles. �-- https://dgo.to/937
THis is a�Webform�entity
THis is a�Webform�submission�entity
About webform entities
Entity–attribute–value model
Entity–attribute–value model (EAV) is a data model to encode, in a space-efficient manner, entities where the number of attributes (properties, parameters) that can be used to describe them is potentially vast, but the number that will actually apply to a given entity is relatively modest.�-- https://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model
A simple way
to store
A lot of data
webform_submission
webform_submission_data
Value
ATTRIBUTE
EnTITY
<demo>
Webform Entities
Overview: /devel/entity/info�Export: …/webform/manage/contact/export
API: /webform/contact/api
Additional resources
discovering the �source entity
a SOURCE ENTITY �TRACKS & CREATES �A RELATIONSHIP TO �the Drupal ENTITY �From which A WEBFORM �WAS SUBMITTED
source entity overview
webform_submission
SOURCE ENTITY
THese �are �source entities
THE SOURCE ENTITY CAN BE USED to track...
<demo>
Webform Source Entity
Overview:…/webform/submissions/manage
Node: …/manage/contact/references
Module: webform_node.module
Plugin: RouteParametersWebformSourceEntity
QueryStringWebformSourceEntity
Interface:WebformSourceEntityInterface
Understanding�Form API (FAPI)
Webforms are �render arrays �which contain�elements that �builD, validate, & submit form Values �using Drupal's �Form API (FAPI)
Render arrays �are the basic �building blocks of �Drupal content
Drupal FORM API overview
THis �is a�form
THIS �IS A �RENDER ARRAY�AS YAML
name:
'#title': 'Your Name'
'#type': textfield
email:
'#title': 'Your Email'
'#type': email
subject:
'#title': 'Subject'
'#type': textfield
message:
'#title': 'Message'
'#type': textarea
THIS �IS A �RENDER ARRAY�AS PHP
$form['name'] = [
'#title' => $this->t('Your Name'),
'#type' => 'textfield',
];
$form['email'] = [
'#title' => $this->t('Your Email'),
'#type' => 'email',
];
$form['subject'] = [
'#title' => $this->t('Subject'),
'#type' => 'textfield',
];
$form['message'] = [
'#title' => $this->t('Message'),
'#type' => 'textfield',
];
HOW DRUPAL HANDLES A FORM
BUILD
VALIDATE
SUBMIT
Additional resources
Creating �Form �elEments
A form ELEMENT IS �DEfined using a �RENDER ARRAY, �which is processed by �a render element �Plugin, which�creates an input �ON A FORM
Plugins are
small pieces of functionality that are swappable
Plugins are...
Reusable
Extendable
Standardized
Form elements overview
name:
'#title': 'Your Name'
'#type': textfield� '#attributes': � style:'bg-color:yellow'
class:
- my-custom-class
INPUT NAME (KEY)
PROPERTIES
LABEL
INPUT TYPE
INPUT ATTRIBUTES
<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name">
<label for="edit-name">Your Name</label>
<input style="background-color:yellow"
class="my-custom-class form-text"
data-drupal-selector="edit-name"
type="text"
id="edit-name"
name="name"
value=""
size="60"
maxlength="255">
</div>
FORM ELEMENT
INPUT ATTRIBUTES
INPUT TYPE
LABEL
INPUT NAME (Key)
XHTML MARKUP
Form element PLUGIN Methods
Form element TIPs
<demo>
Form Elements
Overview: /devel/elements
Interface:…/lib/Drupal/Core/Render/Element
Example: …/Render/Element/Textfield
Additional resources
Creating �webform elements
Webform elements are �Wrappers that enhance�drupal form elements
WebForm element plugins overview
webForm element PLUGIN Methods
<demo>
Webform Elements
Overview: …/reports/webform-plugins/elements
Test: …/elements/email
Plugins: …/src/Plugin/WebformElement/�Interface: WebformElementInterface�Modules: webform_example_element.module
webform_example_composite.module
Creating Custom Webform Elements
Implementing�webform handlers
Webform Handler �plugins are used to �route submitted data �to applications �& send email �notifications
THese�are�webform�Handlers
THis �is an�email �Handler
webform handler plugin overview
webForm handler PLUGIN Methods
<demo>
Webform Handlers
Overview: …/reports/webform-plugins/handlers
Test: …/contact/settings/handlers
Plugins: …/src/Plugin/WebformHandler/�Interface: WebformHandlerInterface�Module: webform_example_handler.module
extending�webform exporters
Webform Exporter �plugins are used to �download submissions �into spreadsheets �& other applications
THese are�exporters
webform exporter plugin overview
WebForm exporter PLUGIN Methods
<demo>
Webform Exporters
Overview: …/reports/webform-plugins/exports
Test: …/contact/results/download
Plugins: …/src/Plugin/WebformExporter/�Interface: WebformExporterInterface
implementing�webform �hooks
Hooks are �functions that �define or alter �behaviors
webform & Drupal Hooks overview
PLUGINS & �EVENT SUBSCRIBERS �ARE THE "new" hooks �for Drupal 8
/**
* Implements hook_webform_submission_form_alter().
*/
function CUSTOM_MODULE_webform_submission_form_alter(
array &$form,
\Drupal\Core\Form\FormStateInterface $form_state,
$form_id
) {
// Add .btn-lg to all 'submit' button in $form['actions'].
foreach (Element::children($form['actions']) as $key) {
$button =& $form['actions'][$key];
$button['#attributes']['class'][] = 'btn-lg';
$button['#attributes']['style'] = 'margin-top: 24px';
}
}
Form Alter Hooks (aka functions)
/**
* Implements hook_webform_element_ELEMENT_TYPE_alter().
*/
function CUSTOM_MODULE_webform_element_webform_actions_alter(
array &$element,
\Drupal\Core\Form\FormStateInterface $form_state,
array $context
) {
// Add .btn-lg to all 'submit' button properties in $element.
$buttons = \Drupal\webform\Element\WebformActions::$buttons;� foreach (buttons as $button) {
$element['#' . $button . '__attributes']['class'][] = 'btn-lg';
$element['#' . $button . '__attributes']['style'] = 'margin-top: 24px';
}
}
Element Alter Hooks (aka functions)
FORM hooks
hook_webform_submission_form_alter
element hooks
hook_webform_element_alter
option hooks
hook_webform_options_alter
handler hooks�hook_webform_handler_invoke_alter
entity hooks
hook_webform_submission_insert�hook_webform_submission_load�hook_webform_submission_save�hook_webform_submission_delete�etc…
more hooks…
hook_webform_libraries_info_alter�hook_webform_access_rules_alter
@see webform.api.php
Additional
webform
resources
Connecting with Me
Getting help & support
Thank You!!!
ANY QUESTIONS?
Ralph says...