webform and drupal 8

Webform and Drupal 8Phil NortonDrupalCamp London 2017

Phil NortonTechnical Lead at Accesswww.accessadvertising.co.uk

Helps run North West Drupal User Group(2nd Tuesday of every month, Manchester)

@philipnorton42

Creator of VladBlogs at !# codewww.hashbangcode.com

Webform and Drupal 8

History

Creating Webforms

Elements/Validation

Multi-step Forms

Webform Settings

Submissions

Advanced

Custom Components

History

• Webform is very popular form creation tool in Drupal 7 (468,218 installs)

• Drupal 8 released in November 2015

• No Drupal 8 version of Webform planned

• The YAML Form project was started December 2015 by Jacob Rockowitz (@jrockowitz)

• December 2016 YAML Form was ported over to become the Drupal 8 version of Webform

• Still maintained by Jacob Rockowitz

• Now at 6,000 installs in Drupal 8

Core Modules

WebformEnables the creation of web forms and questionnaires.

Webform NodeProvides a Webform content type which allows webforms to be integrated into a website as nodes.

Webform UIProvides a user interface for building and maintaining webforms.

Other Modules

Webform DevelProvides development tools for the Webform module.

Webform ExamplesProvides examples of all webform elements and functionality which can used for demonstrating and testing advanced functionality or used as cut-n-paste code snippets for creating new webforms.

Webform TemplatesProvides starter templates that can be used create new webforms.

Webform Admin

Main Webform admin screen can be found at Structure -> Webforms

Creating A Webform

Creating A Webform

Elements

Elements

Click on Add element to add elements to your form.

Elements

Elements

Elements

60 different elements exist in a number of different categories

● Basic Elements● Advanced elements● Composite elements● Options elements● Containers● Date/time elements● Entity reference elements● Markup elements● Other elements

Elements

Elements

Validation

Each element type has it’s own validation

Text field form validation example

Validation

Conditional logic can be applied to all fields.

Conditional Logic

Conditional Logic

Conditional Logic

Input Masks

Easily customise the format of your fields

Multi-step Forms

Multi-step Forms

Click on Add page to add pages to your form.

Multi-step Forms

Multi-step Forms

Elements can then be added into pages

Multi-step Forms

This creates a paged Webform form with a progress bar

Webform Settings

Settings

Webforms have lots of configuration options, some new options include:

● Configure the access rights of a Webform and submissions● Disable autocompletion of fields● Disable client-side validation● Allow users to save a draft of the submission● Allow users to update a submission using a secure token● Restrict the number of submissions to a webform in total● Control the action of the form element● Allow you to add custom CSS classes, styles and JavaScript to the form

Settings

Settings

Handlers

The best way to get a handle on your submissions.

Submissions

Submissions

Webform submissions are entities and contain all the data entered into the Webform

Submissions

Webform submissions contain lots of metadata

Submissions

Submissions can be fully exported in multiple formats

Advanced

Alter A Webform

/** * Implements hook_form_alter(). */function webform_example_form_alter (&$form, &$form_state, $id) { if ($id == 'webform_submission_contact_form' ) { $form['elements']['name']['#title'] = t('Name'); }}

/** * Implements hook_form_form-id_alter(). */function webform_example_form_webform_submission_contact_form_alter (&$form, &$form_state) { $form['elements']['name']['#title'] = t('Name');}

YAML Configuration

CMI Exporting

CMI Exporting

Webforms can now be migrated between sites using CMI!

ContactWebform

Dev Site

Export config

ContactWebform

Prod Site

Git

Import config

Commit Deploy

Custom Components

Creating Custom Elements

All elements are based upon the core Drupal Form API

Basic - Extends the basic Webform fields. Single item. ● Text field● Select list

Composite - Extends WebformCompositeBase. Used as a container for multiple elements.● Address● Credit Card

Creating Custom Elements

Create an Element class at mymodule/src/Element/.

namespace Drupal\webform_example\Element;

use Drupal\Core\Render\Element\Textfield;

/** * Provides a form element for an address element. * * @FormElement("webform_example_element" ) */class ExampleBasicElement extends Textfield{

}

Creating Custom Elements

Create a Webform Element class mymodule/src/Plugin/WebformElement

Creating Custom Elements

namespace Drupal\webform_example\Plugin\WebformElement;

use Drupal\webform\Plugin\WebformElement\TextField;use Drupal\webform\WebformSubmissionInterface ;

/** * Provides a 'example text' element. * * @WebformElement( * id = "webform_example_element" , * api = "https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!Element!Textfield.php/class/Textfield" , * label = @Translation("Example field"), * description = @Translation("Provides an example form element for input of a single-line text." ), * category = @Translation("Example elements" ), * ) */class WebformExampleBasicElement extends TextField {

/** * {@inheritdoc} */ public function getDefaultProperties() { return parent::getDefaultProperties() + [ 'multiple' => FALSE, 'multiple__header_label' => '', // Form display. 'input_mask' => '', // Form validation. 'counter_type' => '', 'counter_maximum' => '', 'counter_message' => '', ]; }

/** * {@inheritdoc} */ public function prepare(array &$element, WebformSubmissionInterface $webform_submission) { $element['#maxlength'] = (!isset($element['#maxlength'])) ? 255 : $element['#maxlength']; parent::prepare($element, $webform_submission); }

}

Custom Handlers

Custom handlers allow you to create classes that hook into Webform actions

Take a look at the handlers in the Webform module to see how things are put together.

BrokenWebformHandler - A class used by Webform to allow a graceful fallback when a handler is broken.

DebugWebformHandler - Prints out a message when the Webform is submitted.

EmailWebformHandler - Sends an email after the Webform submission has saved.

RemotePostWebformHandler - Sends a web request to a specified resource after the Webform submission has been saved.

Creating Custom Handlers

namespace Drupal\webform_example\Plugin\WebformHandler;

use Drupal\Core\Form\FormStateInterface;use Drupal\webform\WebformHandlerBase;use Drupal\webform\WebformSubmissionInterface;use Drupal\webform\WebformInterface;

/** * Form submission remote post handler. * * @WebformHandler( * id = "example_handler", * label = @Translation("Example Handler"), * category = @Translation("Example"), * description = @Translation("Example Webform handler."), * cardinality = \Drupal\webform\WebformHandlerInterface::CARDINALITY_UNLIMITED, * results = \Drupal\webform\WebformHandlerInterface::RESULTS_PROCESSED, * ) */class ExampleWebformHandler extends WebformHandlerBase { }

Creating Custom Handlers

Create a hook function to tie in with what you need your handler to do.Look at WebformHandlerBase for a list of all of the hook functions

/** * {@inheritdoc} */public function postSave(WebformSubmissionInterface $webform_submission, $update = TRUE){ drupal_set_message (__CLASS__ . '::' . __FUNCTION__);}

Creating Custom Handlers

● alterElements● alterForm● validateForm● submitForm● confirmForm● preCreate● postCreate● postLoad● preSave● postSave● preDelete● postDelete

Conclusions

Conclusions

Compatible with the Form API

Extensible

United tested

Robust

Powerful tool

Help Get Webform A Full Release!

Webform is currently at version 5.0-beta7

Only a few bugs left, but still plenty to help out with

Apply within!

Webform Roadmaphttps://www.drupal.org/node/2843422

Project Pagehttps://www.drupal.org/project/webform

Alternatives

Webform is not the only solution to creating contact forms in Drupal 8

Contact Storage - https://www.drupal.org/project/contact_storage- Enhances the Core Drupal 8 module Contact

EForm - https://www.drupal.org/project/eform- Generates entities- Uses pure Drupal 8 concepts

Thanks!

Phil NortonTechnical Lead at Accesswww.accessadvertising.co.uk

Helps run North West Drupal User Group(2nd Tuesday of every month, Manchester)

@philipnorton42

Creator of VladBlogs at !# codewww.hashbangcode.com