Download as PDF, PPTX
![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');
}](https://image.slidesharecdn.com/webformanddrupal81-170306090631/85/Webform-and-Drupal-8-38-320.jpg)
Uploaded byPhilip Norton
Webform and Drupal 8
This document discusses the history and features of the Webform module in Drupal 8. It provides an overview of how to create and manage webforms using the Webform, Webform UI and Webform Node modules. It also covers elements, validation, multi-step forms, settings, submissions, advanced features like custom components and handlers.
More Related Content
![[HKDUG] #20160626 - HKOSCon 2015 - Website DIY with Drupal 8](https://cdn.slidesharecdn.com/ss_thumbnails/hkdug20160626-hkoscon2015-websitediywithdrupal8-150625092111-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Webform and Drupal 8
- 1. Webform and Drupal8 Phil Norton DrupalCamp London 2017
- 2. Phil Norton Technical Leadat Access www.accessadvertising.co.uk Helps run North West Drupal User Group (2nd Tuesday of every month, Manchester) @philipnorton42 Creator of VladBlogs at !# code www.hashbangcode.com
- 3. Webform and Drupal8 History Creating Webforms Elements/Validation Multi-step Forms Webform Settings Submissions Advanced Custom Components
- 4. History • Webform isvery 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
- 5. Core Modules Webform Enables thecreation of web forms and questionnaires. Webform Node Provides a Webform content type which allows webforms to be integrated into a website as nodes. Webform UI Provides a user interface for building and maintaining webforms.
- 6. Other Modules Webform Devel Providesdevelopment tools for the Webform module. Webform Examples Provides 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 Templates Provides starter templates that can be used create new webforms.
- 7. Webform Admin Main Webformadmin screen can be found at Structure -> Webforms
- 8.
- 9.
- 10.
- 11. Elements Click on Addelement to add elements to your form.
- 12.
- 13.
- 14. Elements 60 different elementsexist 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
- 15.
- 16.
- 17. Validation Each element typehas it’s own validation Text field form validation example
- 18.
- 19. Conditional logic canbe applied to all fields. Conditional Logic
- 20.
- 21.
- 22. Input Masks Easily customisethe format of your fields
- 23.
- 24. Multi-step Forms Click onAdd page to add pages to your form.
- 25.
- 26. Multi-step Forms Elements canthen be added into pages
- 27. Multi-step Forms This createsa paged Webform form with a progress bar
- 28.
- 29. Settings Webforms have lotsof 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
- 30.
- 31.
- 32. Handlers The best wayto get a handle on your submissions.
- 33.
- 34. Submissions Webform submissions areentities and contain all the data entered into the Webform
- 35. Submissions Webform submissions contain lotsof metadata
- 36. Submissions Submissions can befully exported in multiple formats
- 37.
- 38. 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'); }
- 39.
- 40.
- 41. CMI Exporting Webforms cannow be migrated between sites using CMI! Contact Webform Dev Site Export config Contact Webform Prod Site Git Import config Commit Deploy
- 42.
- 43. Creating Custom Elements Allelements 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
- 44. Creating Custom Elements Createan Element class at mymodule/src/Element/. namespace Drupalwebform_example Element; use DrupalCoreRenderElementTextfield; /** * Provides a form element for an address element. * * @FormElement("webform_example_element" ) */ class ExampleBasicElement extends Textfield { }
- 45. Creating Custom Elements Createa Webform Element class mymodule/src/Plugin/WebformElement
- 46. Creating Custom Elements namespaceDrupalwebform_example PluginWebformElement ; use DrupalwebformPluginWebformElement TextField; use DrupalwebformWebformSubmissionInterface ; /** * Provides a 'example text' element. * * @WebformElement ( * id = "webform_example_element" , * api = "https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!Element!Textfie ld.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 {
- 47. Custom Handlers Custom handlersallow 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.
- 48. Creating Custom Handlers namespaceDrupalwebform_examplePluginWebformHandler; use DrupalCoreFormFormStateInterface; use DrupalwebformWebformHandlerBase; use DrupalwebformWebformSubmissionInterface; use DrupalwebformWebformInterface; /** * Form submission remote post handler. * * @WebformHandler( * id = "example_handler", * label = @Translation("Example Handler"), * category = @Translation("Example"), * description = @Translation("Example Webform handler."), * cardinality = DrupalwebformWebformHandlerInterface::CARDINALITY_UNLIMITED, * results = DrupalwebformWebformHandlerInterface::RESULTS_PROCESSED, * ) */ class ExampleWebformHandler extends WebformHandlerBase { }
- 49. Creating Custom Handlers Createa 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__); }
- 50. Creating Custom Handlers ●alterElements ● alterForm ● validateForm ● submitForm ● confirmForm ● preCreate ● postCreate ● postLoad ● preSave ● postSave ● preDelete ● postDelete
- 51.
- 52. Conclusions Compatible with theForm API Extensible United tested Robust Powerful tool
- 53. Help Get WebformA 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 Roadmap https://www.drupal.org/node/2843422 Project Page https://www.drupal.org/project/webform
- 54. Alternatives Webform is notthe 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
- 55.
- 56. Phil Norton Technical Leadat Access www.accessadvertising.co.uk Helps run North West Drupal User Group (2nd Tuesday of every month, Manchester) @philipnorton42 Creator of VladBlogs at !# code www.hashbangcode.com