webform and drupal 8
TRANSCRIPT
![Page 1: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/1.jpg)
Webform and Drupal 8Phil NortonDrupalCamp London 2017
![Page 2: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/2.jpg)
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
![Page 3: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/3.jpg)
Webform and Drupal 8
History
Creating Webforms
Elements/Validation
Multi-step Forms
Webform Settings
Submissions
Advanced
Custom Components
![Page 4: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/4.jpg)
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
![Page 5: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/5.jpg)
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.
![Page 6: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/6.jpg)
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.
![Page 7: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/7.jpg)
Webform Admin
Main Webform admin screen can be found at Structure -> Webforms
![Page 8: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/8.jpg)
Creating A Webform
![Page 9: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/9.jpg)
Creating A Webform
![Page 10: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/10.jpg)
Elements
![Page 11: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/11.jpg)
Elements
Click on Add element to add elements to your form.
![Page 12: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/12.jpg)
Elements
![Page 13: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/13.jpg)
Elements
![Page 14: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/14.jpg)
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
![Page 15: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/15.jpg)
Elements
![Page 16: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/16.jpg)
Elements
![Page 17: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/17.jpg)
Validation
Each element type has it’s own validation
Text field form validation example
![Page 18: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/18.jpg)
Validation
![Page 19: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/19.jpg)
Conditional logic can be applied to all fields.
Conditional Logic
![Page 20: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/20.jpg)
Conditional Logic
![Page 21: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/21.jpg)
Conditional Logic
![Page 22: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/22.jpg)
Input Masks
Easily customise the format of your fields
![Page 23: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/23.jpg)
Multi-step Forms
![Page 24: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/24.jpg)
Multi-step Forms
Click on Add page to add pages to your form.
![Page 25: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/25.jpg)
Multi-step Forms
![Page 26: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/26.jpg)
Multi-step Forms
Elements can then be added into pages
![Page 27: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/27.jpg)
Multi-step Forms
This creates a paged Webform form with a progress bar
![Page 28: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/28.jpg)
Webform Settings
![Page 29: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/29.jpg)
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
![Page 30: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/30.jpg)
Settings
![Page 31: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/31.jpg)
Settings
![Page 32: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/32.jpg)
Handlers
The best way to get a handle on your submissions.
![Page 33: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/33.jpg)
Submissions
![Page 34: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/34.jpg)
Submissions
Webform submissions are entities and contain all the data entered into the Webform
![Page 35: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/35.jpg)
Submissions
Webform submissions contain lots of metadata
![Page 36: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/36.jpg)
Submissions
Submissions can be fully exported in multiple formats
![Page 37: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/37.jpg)
Advanced
![Page 38: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/38.jpg)
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');}
![Page 39: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/39.jpg)
YAML Configuration
![Page 40: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/40.jpg)
CMI Exporting
![Page 41: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/41.jpg)
CMI Exporting
Webforms can now be migrated between sites using CMI!
ContactWebform
Dev Site
Export config
ContactWebform
Prod Site
Git
Import config
Commit Deploy
![Page 42: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/42.jpg)
Custom Components
![Page 43: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/43.jpg)
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
![Page 44: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/44.jpg)
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{
}
![Page 45: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/45.jpg)
Creating Custom Elements
Create a Webform Element class mymodule/src/Plugin/WebformElement
![Page 46: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/46.jpg)
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); }
}
![Page 47: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/47.jpg)
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.
![Page 48: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/48.jpg)
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 { }
![Page 49: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/49.jpg)
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__);}
![Page 50: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/50.jpg)
Creating Custom Handlers
● alterElements● alterForm● validateForm● submitForm● confirmForm● preCreate● postCreate● postLoad● preSave● postSave● preDelete● postDelete
![Page 51: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/51.jpg)
Conclusions
![Page 52: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/52.jpg)
Conclusions
Compatible with the Form API
Extensible
United tested
Robust
Powerful tool
![Page 53: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/53.jpg)
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
![Page 54: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/54.jpg)
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
![Page 55: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/55.jpg)
Thanks!
![Page 56: Webform and Drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052217/58d159c31a28ab41128b689f/html5/thumbnails/56.jpg)
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