webform and drupal 8
TRANSCRIPT
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