1 of 78

Webforms for Everyone

Jacob Rockowitz

2 of 78

3 of 78

Before we Begin ... Let's SAY "Hello!"

  • Where are you from?
  • Have you used the Webform module?
  • What do you want to learn about today?
  • How can I help you?

Prefix your questions with a "Q:"

4 of 78

Webforms for�EveryONe

5 of 78

Hello!

Hi, my name is Jacob Rockowitz.

  • I am known as jrockowitz on the web.
  • I am a Drupal developer and software architect.
  • I built and maintain the Webform module for Drupal 8.

6 of 78

What is the

WEBFORM MODULE?

7 of 78

The Webform �module is a �powerful & flexible �Open Source �form builder & �submission manager �for Drupal 8

8 of 78

Webforms for everyone

Site�Builders

Site�Owners

Drupal�Developers

9 of 78

Webform for everyone

  • Site Owners�Why should you use the Webform module?

  • Site Builders�How do you build awesome webforms?

  • Drupal Developers�What can you do with the Webform module?

10 of 78

my Goal is to answer your questions...

11 of 78

...and show you my favorite webform things

12 of 78

Webform for

Site Owners

13 of 78

Why should you �use the Webform module?

14 of 78

the Webform module �allows you to �build any type of form �or application

15 of 78

The use case…

  • BUILD a form or copy a template
  • PUBLISH the form as a page, node, or block
  • COLLECT form submissions
  • SEND confirmations and notifications
  • REVIEW results online
  • DISTRIBUTE results as CSV or remote post

16 of 78

ONCE AGAIN, THE USE CASE…

BUILD

COLLECT

DISTRIBUTE

17 of 78

<demo>�Webform Basics

18 of 78

The �YAML Source mode�is AWesome!!!

19 of 78

Customizable results�table�with or without �Views

20 of 78

Generate�PDFs from submissions

21 of 78

What are some �of the features �included with the �WEbform module?

22 of 78

The Webform module provides all the features expected from an enterprise proprietary form builder combined with the flexibility & openness of Drupal

23 of 78

  • Submission limits
  • Submission preview
  • Autofill
  • Save draft
  • Auto purge
  • Access controls
  • Confirmation message
  • Confirmation redirects

Webform FORM features

  • Drag-n-drop form builder
  • Multi-column layout
  • Modal dialogs
  • Conditional logic
  • Open/close scheduling
  • Prepopulate
  • Email handling
  • Remote post

24 of 78

Every possible�confirmation message �& page �is supported

25 of 78

  • Select menu enhancement
  • Computed values
  • Tooltips
  • Slideouts
  • Input masks
  • Word/character counter
  • Regex validation
  • Access controls
  • Unique values

Webform Element features

  • Standard HTML inputs
  • Advanced HTML inputs
  • File uploads
  • Signatures
  • Buttons
  • Rating
  • Image selection
  • Addresses
  • Entity references

26 of 78

There is a style-guide �which shows�every available webform element

27 of 78

Elements �Support �titles,�Placeholders, descriptions,�help,�& more

28 of 78

How do you get

support for the webform module?

29 of 78

Getting help

  • Drupal Answers �http://drupal.stackexchange.com

30 of 78

There are Videos �about every �webform�feature

31 of 78

InspirE you to Build awesome webforms

32 of 78

Questions?

What are some other webform features that �you are interested in hearing about?

33 of 78

Webform for�Site builderS

34 of 78

How DO YOU �build Awesome Webforms?

35 of 78

Learn from �examples & demoS

36 of 78

Webform Examples module

  • Style-guide
  • Multi-step wizard
  • Multi-column layout
  • Advanced elements
  • Computed elements
  • Composite elements

37 of 78

computed �twig �elements�are �awesome!!

38 of 78

Composite elements �are multiple elements working together

39 of 78

You can �even build �custom options Elements

40 of 78

The webform module & drupal is one of the �most accessible �form builders & content management applications on the market

41 of 78

What can you �build using the Webform module?

42 of 78

Applications

REGISTRATION

ETC. . .

College Applications

Job Applications

Employee Evaluations

Event Registrations

Meetup Registrations

User Registrations

Online Donations

Appointments

User Profiles

43 of 78

Webform Demos

  • Application EvaluationAn evaluation form attached to applications.

  • Event RegistrationA registration form that tracks which event a user has registered for.

44 of 78

<demo>�Webform Demo:�Event Registration

45 of 78

How DO YOU �SHARE your

Webforms & applications?

46 of 78

Sharing�Webforms

47 of 78

How DO YOU

Extend the

Webform module?

48 of 78

Install�webform �Add-ons

49 of 78

Extending the webform �module

50 of 78

Questions?

What are some of the challenges that �you are facing when building webforms?

51 of 78

Webform for�developers

52 of 78

What can you �do with the �Webform module?

53 of 78

Every aspect of the �webform module is�extendable & customizableusing plugins & hooks

54 of 78

Plugins are

small pieces of functionality that are swappable

55 of 78

Plugins are...

Reusable

Extendable

Standardized

56 of 78

Webform plugins

ElementsWrappers that enhance Drupal form elements

Variants

Used to create and manage for A/B testing, segmentation, and personalization

Handlers

Used to route submitted data to applications and send email notifications

Exporters

Used to download submissions into spreadsheets and other applications

57 of 78

@see \Drupal\webform_example_composite\Element\WebformExampleComposite

class WebformExampleComposite extends WebformCompositeBase {

public function getInfo() {

return parent::getInfo() + ['#theme' => 'webform_example_composite'];

}

public static function getCompositeElements(array $element) {

$elements = [];

$elements['first_name'] = [

'#type' => 'textfield',

'#title' => t('First name'),

];

$elements['last_name'] = [

'#type' => 'textfield',

'#title' => t('Last name'),

];

return $elements;

}

}

58 of 78

WEBFORM HANDLERS

Email & Scheduled Email

Sends a webform submission via an email

Actions & SettingsTrigger a conditional action or setting on a submission

Remote Post

Posts webform submissions to a URL

DebugDebug webform submission

59 of 78

remote post handlers �allows a webform to �be integrated with any external �API or system

60 of 78

A WEbform variant �is a alternate instance �of a webform That �adjusts Settings, Elements, �or behaviors to �yield a Better result

61 of 78

Webform Variants �make it �easy to do �a/b testing

62 of 78

the results download�page�use a customizable & Extendable exporter plugin

63 of 78

Hooks are

functions that

define or alter

behaviors

64 of 78

FORM hooks

hook_webform_submission_form_alter

element hooks

hook_webform_element_alter

option hooks

hook_webform_options_alter

handler hookshook_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

65 of 78

What are two KEY THINGS DEVELOPERS SHOULD understand About The webform module?

66 of 78

The webform module �extends Drupal's FORM API �& the WEbform module's APIS �are reusable

67 of 78

HOW DOES DRUPAL's FORM API WORK?

BUILD

VALIDATE

SUBMIT

68 of 78

<?php

public function buildForm(array $form, FormStateInterface $form_state) {

$config = $this->config('custom_module');

// Define the element(s).

$form['nodes'] = [

'#type' => 'entity_autocomplete',

'#title' => $this->t('Select favorite articles.'),

'#multiple' => 15,

'#target_type' => 'node',

'#selection_handler' => 'default:node',

'#selection_settings' => [

'target_bundles' => ['article' => 'article'],

'sort' => ['field' => 'title', 'direction' => 'ASC'],

],

'#default_value' => $config->get('nodes'),

];

// Process the element(s).

$this->elementManager->processElement($form['nodes']);

// Attach behaviors. Unsaved: Warn users about unsaved changes.

$form['#attributes']['class'][] = 'js-webform-unsaved';

$form['#attached']['library'][] = 'webform/webform.form.unsaved';

return parent::buildForm($form, $form_state);

}

69 of 78

VOILA!!!�now you have a multiple entity autocomplete element

70 of 78

<demo>�Webform Devel:�Form API Export

71 of 78

Webform APIS & Features that are NOT reusable

  • Multi-step forms
  • Submission display
  • Webform handlers & variants
  • Access controls
  • PDF generation

72 of 78

webform APIs & features That are also reusable

  • Modal dialog support
  • Ajaxified forms (WebformAjaxFormTrait)
  • Utility classes (\Drupal\webform\Utility)
  • Functional testing (WebformBrowserTestTrait)
  • Test files (/tests/files)�

73 of 78

Help improve APIS by contributing �code & ideas

74 of 78

Webform �& Drupal�getting involved

75 of 78

Getting involved in the Webform module

76 of 78

77 of 78

jrockowitz.com

78 of 78

Questions?