Webforms for Everyone

>> SPEAKER:  Okay.  Hi, everyone.  Yeah, it's great that everyone made it out.  It's, you know, challenging times.  I'm in New York, which is a crazy place to be right now.  Um, going to start off presentations, Webform or Webforms for everyone, the module is called Webforms, so I'm going to stick with that title.  Hi.  My name is Jacob Rockowitz.  I'm a Drupal developer and software architect, and I built and maintain the Webform module for Drupal 8, and the key question to start off with is what is the Webform module?  Well, the Webform module is a powerful and flexible, open source, form builder and submission manager for Drupal 8, and this presentation is kind of trying to target three different groups, starting with site owners, site builders, and Drupal developers, and for site owners, it's that question, why should you use the Webform module?  What does it offer you, when you're building a site, and how can you use it?  And site builders, it really goes into how can you build awesome Webforms?  What can you build with a Webform module?  And finally, with developers, this is a Drupal thing, it's like what can you do with it, how can you customize it, how far can you take it, and my goal with, I've done a lot of these presentations, it's to answer your questions, that's the number one reason I do these presentations and I go to conferences and I'm online now, is at the end, you can ask your questions, and I hope to answer them, and I'm also available to answer them, and I also have added something to this presentation, which is just talking about my favorite Webform things, because I always get excited about certain features, and I think you'll learn new things when I walk through certain enhancements or behaviors that have been added to the Webform module, and for site owners, you know, why should you use the Webform module?  Well, it allows you to build any type of form or application.  

So, the use case is you build a form or copy a template, you publish that form as a page, node, or block, that form then collect form submissions, send out confirmation and notification e‑mails, you review those results online, then you might distribute those, and I like to break it down to these three steps of just build, collect, and distribute.  So, you're building a form, you're collecting data, and then you're distributing the data.  With that in mind, I kind of want to walk through just the basics of the Webform module, and I'm going to switch over to simple install, and I like to just show, there's a default contact form that's installed automatically, people have seen this type of form before, and for this demo, I'm just going to add a company to this form.  I'm going to go into the builder and click add element, I'm going to select a text field and I'm going to enter company, and we'll get into all these settings as we go through the presentation, but for now, I'm just entering company, and I'm going to hit save, it gets added to the bottom, and I can view it.  I kind of made a mistake, and I really want to move it up here under your name and make it required, and it probably should say your company, so I'm going to go back to the builder, but instead of doing the drag and drop and editing, I'm going to go to the source mode, and this is more of a developer and site builder‑centric feature, but it's nice to show it to people, because what it shows you is how well‑organized your elements are in the sense that it's just markup, it's a render that you can cut and paste.  

I'm going to go into your company, change the label and change require.  We'll talk about this more as we go on, but now, made that change, I'm going to hit save, so I'm going to go to the test tab.  Same thing as the view tab, but it populates the form.  This form, it's nice and filled in five fields, but what's great is if you have a form with 200 elements, it will populate them automatically for you.  It makes it easy for us to switch, because we built a form, and when I hit send message, we've kind of switched gears to collecting data.  Very simple process for displaying a confirmation message.  So, we've collected that data, and we can review that data online, where I can click results and go through and look at an individual submission, I can even download this as a PDF.  I'm going to go back.  Now that we've reviewed this data, you can go in and download it, and now we're kind of switching into the very simple, you know, distributing.  This is the most simple step, is you can go in and download this data as a CSV file, HTML, table, JSON, even PDFs, you can download all the submissions as a PDF, but for this demo, just to show how it works, I'm not checking this box, because it would open Excel, I'm not really going to customize anything, because the reality is things are pretty reasonable here, it just takes the fields that you typically would want, and if I un‑check this download export file, it's going to show you the table on screen, and this type of HTML table does open in Excel perfectly pristine, you can even go and extend this and change the color, and that's pretty much walking through the three steps.  We've built a form, we've collected the data, now we've downloaded it.  

Let me back out so when I come back here, we can be at a reasonable point, and I'm going to keep going, and I want to just walk through some of the things I showed you.  The YAML source mode is really powerful.  It makes it possible for you to update all the elements of every label at once, so you can kind of have developers build out what they think is the best version of the form and then have a copy editor make suggestions, and you can just go right in as a developer and change every element's title at once.  With that, with that table I showed you, this is just showing you that the table can be customized, and this is not views, this is just a simple way of checking off the columns you want and how you want things sorted, and you can do views and do anything you want, but this is a very easy way for users to build their own table, and just recently, in the latest release of the Webform module, this now allows individual users to customize a table for themselves.  It's literally a setting.  Otherwise, it customizes the table for all users coming in, and, frankly, it depends on your use case.  If you have 20 different users with different use cases reviewing data, you want them to customize the table for themselves.  If you have the same users kind of looking at it, you probably don't want to go that far with the feature.  And with the PDF download, it's just a really great feature, and it kind of shows more importantly how integrated the Webform module is in the Drupal community, because the generation is being done by the entity print module, and it takes care of 90 percent of the work.  

All that the Webform module is doing is a little integration, so, literally, you get the link at the bottom of the page, and you can customize that PDF by adding a header, footer, and some CSS to it.  You know, I've talked about some specific features, and I want to just talk about just some of the larger features included in the Webform module, and before I do, I just want to say the Webform module provides all the features expected from an enterprise proprietary form builder, combined with the flexibility and openness of Drupal.  Basically, you get a lot of functionality of the box, and you get even more from the Drupal community, and out of the box, you get features that we've seen, some of them, the drag and drop form builder, multi‑com layout, there's support for modal dialogues, scheduling when a form opens and closes, you can pre‑populate the URL, e‑mails, remote posts.  There are lots of support for different types of submission limits, previews, auto‑fills, saving drafts.  I'm walking through everything, and what's funny is the one I like the most is at the end, it has to do with confirmations, and when I get to this little GIF, it's just showing you we have the default confirmation from the contact form, but when you go into settings and go over to confirmation, every possible confirmation type is available to you, so you can have a page, an inline, a message, you can redirect to an external or internal URL.  I personally like the modal, which I'll show here, where you go over to this hash tag, you hit submit, and it hasn't left the page, it just re‑loads, and they get a little modal dialogue, they close it, and they can go about their business.  Just a nice user experience.  It's very clean.  Modal dialogues for forms can work very well, because forms can be complex, you don't really want to render everything on a page.  

We'll get into it more, but I really like that feature.  With elements, there are, I think we're up to 80 plus elements that ship with the Webform module.  You know, a lot of these are pretty standard, standard HTML, advanced HTML, file upload, signatures, buttons.  Switching over to the other side, you get little enhancements to your elements, so select menus support enhancements to make them a little easier when there's multiple values, there's support for computed values, slide‑outs, input masks.  Um, lots of different validation controls, and the best way to get a sense of what's going on with elements is there's a style guide.  If you install the Webform examples module, you can look at examples of every single element here, and I'm just scrolling through that long list and showing you that there's cute kittens for image selection, there's ratings, there's signatures, you know, there's a terms of service element to make it a little easier to set that up, and then we have all the entity reference possibilities.  Now, we're getting to a complex one, which I'll get into, but composite elements, and, finally, all the styles, and the last thing I like showing in this is inline messages, dismissible inline messages that you can control how someone can dismiss them and where they go.  I like this slide a lot, because it zooms in on a single element and shows you all the possible title, placeholder, descriptions, help, and more.  I don't recommend doing this in your forms, turning on everything, but each one of these features has a different use case.  

The example I would say is I use tool tips heavily throughout the Webform module, because I'm trying to tuck all this information while keeping the UI very clean.  I also know people are going to come back to the UI, if they need help, they can roll over the tool tip.  If someone's filling out a form one time, I don't recommend tool tips, I recommend using the simple, this is a description, and the more is really for if you have a very long, verbose description.  I do a lot of forms in healthcare, and you're literally giving them two paragraphs of the definition that you want to just have in a slide‑out, but I hope this just shows you a lot of the flexibility with elements.  So, I've shown so much that I think, instead of saving this for the end, it's good to say it now, how do you get support for the Webform module so you don't feel overwhelmed?  And there's documentation, there's a cookbook and screen cast online, on Drupal stack exchange, people are answering questions and providing a lot of support, so if you just need help understanding something or you need direction, you can get it there, and if you run into bugs and issues, the issue queue is very active and we'll help you fix problems that you find, and this is another thing I'm very proud of, is we have a ton of videos.  There's 40 videos walking through pretty much every feature.  We're literally, right now, this screen cast that you're seeing is showing you how to get Webform views integration working and walking through the steps, the module, the requirements.  This video will probably be posted here as well, every presentation I've done in the past is available online, and, yeah, with all this information, the goal is to inspire you to build awesome forms, and when we talk about building, it switches over to, really, your site builders, and how do you build awesome forms?  

Well, this is the best way to start.  You learn from examples, templates, and demos, and I'll walk through each one of these, and, you know, there's a Webform examples module, and then there's even, like, more specific examples of different features, but with the examples module, you'll get a style guide, you'll get an example of a multi‑step form, multi‑column layout, advanced elements, just seeing them, and there's even examples of computed element, and, honestly, I'm skipping multi‑step and multi‑column, because there's an example, you can look at it and understand those concepts.  The more advanced ones, this is a computed element, so what you're looking at is it's doing calculations on the fly, the top element is doing twig, and the bottom element is just letting you select a user and getting all that information.  Now, this is showing you the back‑end a little bit.  It's just making the point.  It's just twig doing the calculations.  You check a box, and you get ajax working for that computation, and for tokens, it's even simpler, because you're just dropping tokens in and saying grab a token value, and you can grab a token value from anywhere, including the node that the Webform is attached to, and, yeah, it's very powerful.  One caveat is you don't want to have too many of these running, because they're performing dynamic calculations with twig on the back‑end.  Takes a little bit, you know, a little bit of a performance hit.  

Now, composite elements are multiple elements working together.  So, we're looking at the same composite, just there's a singular instance or multiple instances, and this allows you to build things like contact information, address.  What else?  People will build link information.  You can build any type of composite you want and control it.  These are custom composites, where you can actually write code and get really into very specific behavior, because that conditional logic is actually custom code, and this is a very advanced new concept of building your own custom elements, literally defining the markup you want rendered on the form with the CSS, you can even set default options, but then if you go in and hit preview, I'm creating these buttons on the fly, and what the Webform module is doing is adding Javascript, to add behaviors to make that a clickable element.  Taking it a step further, instead of HTML markup, you're just referencing an SVG file with proper IDs, and when you go into this preview mode, you can have a clickable, selectable map of the United States, and this is where we switch gears to say this is an accessible feature, it has full accessibility, this is markup with link attributes, with proper area, and it literally, this point, which I really want to make, and I think the whole community should be proud of this, is that the Webform module in Drupal is one of the most accessible form builders in content management applications on the market, and I think it's really important to emphasize that with accessibility, is that the back‑end of both the Webform module and Drupal is accessible, not just the output website, which is for the general population, it's people coming in and building forms.  

There's short‑cuts, keyboard navigation in the Webform module, there's no keyboard traps, you can actually navigate with a screen‑reader through the Webform module, and moving past examples, because I said example template's in the demo, and these are just example forms you can copy and start with.  It's pretty simple.  You turn it on, you get these 11 templates, and you can click through and get a preview and be like, I want to use an employee evaluation, I'm going to use the medical appointment form, because I work in healthcare, but you can select, this is just an example of an appointment form, you can change these, you can delete them, you can create your own templates, but, literally, someone's just cloning this example.  This can save a lot of time and standardize the forms and make people see different best practices.  And to kind of, you know, we talked about little features, templates and forms, but what can you build once you put these things together?  And you can build applications, job applications, college applications, employee evaluations, you can build event registration systems, meet‑up registrations, you can even do online donations, I do appointments a lot, you can build advanced user profiles, you can have a rich user profile, if you need it, and for demos, there's two great demos that ship with the Webform module, there's an application evaluation demo, and it's better when I show it to you, but the concept is you're doing a college application, people fill it out, and then you, after it's filled out, then people need to evaluate that applicant, and they need to, it's two forms, there's an application and then an evaluation that's attached to that application where people say I like this person, I don't like them.  Event registration is slightly different, because you have events, which, typically, in Drupal are nodes, and then you just attach your registration form to the bottom of it, and you can reuse, this is a concept, you can reuse the same registration form over and over again and attach it to all your events, and it helps to do a demo.  

So, we're going to switch gears, I'm going to pause for a second and do a demo.  So, for the application evaluation, there's two forms.  I'm going to start on the application and just say it's very simple application, think of it like a job application.  I'm going to do the test tab, because I don't really want to upload a file, but I'm going to hit submit, I'm going to create one record, I'm going to go back, I'm going to look at the results, we've got this applicant, going to click through, and we can review this information.  Now, with e‑mails, you can send out e‑mails to different users and say please evaluate this applicant, and in this demo, I've just added an application evaluation to the bottom of the form, I like this person, and I'll hit submit, and, recently, I've added some features to just kind of do a summary of the evaluation, to give an average rating, to track the details, kind of to create a thread of conversation, so that you can kind of make a final assessment.  These are all just little examples, so you can go in and see how I'm wiring these things together and use them to build your own systems, and then you can even download the entire thing as a clean PDF, even to archive all that information.  Going back, let's switch to, um, event registration.  If I go over to home, and in the demo, it adds this tab to the site, and I just generate three events, event one, two, and three, and even here, you can click register, and it'll open a modal dialogue where you can register for an event, and I'm showing some advanced features here.  This is a Webform options limits, and it basically allows you to create a drop‑down menu with limits per option, and in this case, I'm using it to create an inventory system.  It's, I'm calculating the number of shirts, so I probably need an extra large these days, I'm going to hit register, it's going to register me, and this little block is just showing you how you're tracking those limits, and, by the way, there's limits on the event, so if I click back to the event, this is tracking the number of registrants to the event.  

In this demo, I am actually showing that you can have a node that says these are the number of people that can register the event and then have that data propagate through tokens all the way down to the registration form.  Um, once you get to the event, and this is a concept that's kind of, this is a great way to illustrate it, is each Webform, when it's attached to a node, tracks its own results, so I have one registrant for event one, and if I was to go back up to my demo, which I will, I'm going to go to event two, I can even use the test tab for this, I'm going to hit register, I'm going to go back to the form, I'm going to look at results, I only have one record for this event, so each event is tracking its own submission, so you kind of get your own little mini instance, and people can customize this to their heart's content, and the final advanced feature that I mentioned is the option limits, which, in this case, is an inventory tracking system, if you click on the results options, you get this tracking system that tells you how many people have requested, you know, different t‑shirt size.  In this case, it's tracking it per event.  You can customize it to track it per all events, if that's how you're going to do it, but just shows you kind of the advanced features that are available, and we keep, you know, in the community, we keep adding little features to these demos, you know, like, this was recently added, and it's a great way to kind of proof of concept the feature and help share it with other people.  I'm going to get back to home.  I'm going to keep going.  I'm going to quickly do a time check for myself.  I'm fine.  

So, how do you extend the Webform module?  I've shown some features are out of the box, but there's 115 add‑ons available, and these are the clear example where we're not going to include Spam protection in the Webform module, but there's three different immediate Spam protection options in the Drupal community that you can install.  I do recommend honeypot.  Also included in this, it's quickly passing by, but there's lots of integration with third‑party systems, like sales force, and most CRMs have some code available.  It's also very easy to write your own custom code.  That's, you know, how do you write your own custom code?  And it kind of switches into extending the Webform module.  So, Webforms for developers, what can you do with a Webform module?  How far can you go with it?  Um, by the way, this applies to Drupal in general.  Every aspect of the Webform module is extendible and customizable using plug‑ins and hooks, and, you know, for a definition of plug‑ins, they're just small pieces of functionality that are swappable, and yeah, for the site owners and builders, I'm just trying to make them understand these concepts, because when you think about something being reusable, that means you can build it once and use it over and over.  How you're building it is the same across all different properties, and extendible literally means you build it, and then someone could go in and extend it.  Every single handler that's included in the Webform module can be extended and customized.  You don't like how the e‑mails are sent or you want to simplify the handler, you can extend that handler and make it a little, you know, tweak it any way you want, everything, and, yeah, these are the three big plug‑ins, so elements, without getting too far into the weeds on this, it's Webform elements are basically wrappers around Drupal form elements, and that handles, you know, all the features that you see, so the select two integration, the input mask, those labelings, those are all handled in the elements plug‑in.  

Handlers is that step, when I say distribute, it's the idea that you're going to handle a submission.  The two typical ones are sending e‑mail notifications and remote posting that data to a third‑party server, which I will demo.  They're pretty simple plug‑ins in that we did that demo, here, we're going to download the results, and that's an exporter, we're going to go and customize it.  If you want to generate an Excel spreadsheet, you're generally extending that Excel export and just tweaking a few things.  I'm not showing a lot of code here, but what I want to do is show code to make people not afraid to look at code, and the code I'm showing here is just, and this is literally, it's like a paraphrased version of what comes with the Webform example composite module, it's an example of writing a custom composite.  You can build composites in the UI, but this allows you to have full control, get it into code.  The reason I want to pause and say why would you want to get into code, because you can build this standard instance of how you want to collect user data, your user profile data, and then re‑use it across all forms and have full control over it, and if you change it here, it just propagates out everywhere, and you've literally incapsulated some business logic in one single plug‑in, and this is a very simple example of a plug‑in, and it's pretty accurate.  You're defining how you want it presented under get info, which is the theme, what's your template, and then the get composite elements, just define the elements that you want displayed on the screen, and handlers are, I've hinted at these, e‑mail, I think is self‑explanatory, it just sends an e‑mail, it's very robust in the sense of any aspect of the e‑mail you can customize.  You can also do scheduled e‑mails.  

In that demo, the event registration system, I didn't go there, but you can schedule, it's supported in the demo, you can schedule an e‑mail to go out one day before the event, which makes a lot of sense.  You can send out a notification, say thank you for registering, and then schedule, one day before the event, you could send a reminder with different information.  Remote posts, that's a really important concept.  It's unexpected, how many people are using this feature for me, but it's the idea that you don't want to keep your data in Drupal, it's not your canonical source for certain data, especially this type of data, which could be user profile.  In my case, we work in healthcare, we don't want to keep that information in Drupal that's related to patient information, we want to post it to internal sales force, and that's what it does.  Submission comes in, you enter a URL, you choose how you want to put the data there, which is, like, JSON, you can add extra credentials to it.  Once again, to emphasize, you can extend this handler or copy it, and, sorry, I just saw something flick open, oh, because there's 50 participants.  Okay, sorry about that.  You can extend it to put your own authentication layer.  It's a very, lots of people are using it.  I recommend exploring that, especially for enterprise clients and being aware of this feature.  It changes the nature of the Webform module, when people are like, look, I don't want to collect data in Drupal.  You don't have to.  The data never sits in the database, it's transient.  The files sit on the server for 5 hours, and then it's deleted.  Moving on, actions and settings, I'm not going to touch upon more than just to say what these do is they're like rules, rules in the sense of you're allowed to trigger conditional behavior on a submission.  

The example would be someone enters a certain piece of information, and you could flag a submission, or you could disable or lock it.  Settings, conditionally, you can change a confirmation message, so if someone, you have a drop‑down that says, you know, give us some information, in my case, it might be are you a patient or caregiver, and with that little piece of information, you could change the confirmation message by saying I want to change how the form's going to work, and de‑bug, I recommend everyone use it once in awhile, it just will show you the data coming through from the client, makes it easy to say, okay, this data works, it makes sense, I understand the structure of it.  Um, remote posts, I'm going to walk through it, so it's a handler, you're adding it to a form, this is a contact form we demoed, and you're just entering in a URL and saying I want to put this data there, and this is not a good URL to do, but you see, you can change what values are going to go out, but I know to go to the advanced tab and do this for all your remote posts when you're setting it up, is click the de‑bug tab, because it'll show you what's happening and how it's working.  So, when we go to the test tab and I hit send message, it's actually going to fail, because that URL doesn't exist, but we'll get this error at the top that will show us what was called, what was sent, and what the response was, and that it wasn't a good page.  Ideally, it'll be perfect, and it'll go right in, and you just have to explore this feature.  I kind of wanted to show you, it just goes to handlers, you're just managing how things are going to happen.  I should have paused more in that space so you could look at it for a second.  

By the way, the slides are online, I posted them in the chat, and they're on the session.  Um, results download, I just want to re‑emphasize that this is completely customizable, that you can kind of select, you can change all these behaviors and how it's going to work.  Hooks, we can never forget hooks in our community.  I never want to ignore those poor little guys, because they're still around, and, you know, hooks allow you to alter things pretty much, alter behaviors, alter forms.  I particularly like the handler hook at the bottom.  That literally allows you to capture anything that's happening to a handler.  So, if you want to tweak an e‑mail that's going out across all your forms or examine it or block something, you can go right in there and capture that information, and it's important, I'm not going to go very far into this, Webforms and submissions are entities, the Webforms are a config entity, submission's a content entity, all those hooks are available to you, to set defaults, to tweak things, and then there's just a lot of the advanced features have hooks, so the Webform module requires some third‑party libraries, you can actually define your own Webform‑related third‑party libraries, and you should go to the file.  So, to end, kind of, what are the two key things developers should understand about the Webform module?  I've hinted this one, that the Webform module extends Drupal's form API.  You just, you need to have some grasp of Drupal's form API before you start customizing anything, and this is a concept I'm starting to point out to people, I'm even going to write a blog post about it, but the Webform module's APIs are reusable.  Lots of the enhancements and features you're seeing on‑screen, that you're like, wow, that's really cool, all those nodal dialogues, that's a re‑usable feature, and it's hard to show it, but I'm going to step back and just make this statement, you know, so when I start showing some code, people understand what the code is.  

Forms in Drupal, three steps, you're building a form, validating the form, and submitting the form.  The interface literally says this.  It's crazy that the only fourth method is the form ID, and that's it.  That's how forms work in Drupal.  So, when we look at this code, and I'm going to show you the results of the code, it's tricky, I don't know which to show first, but I'm going to show some code, this is code to build your own custom form in Drupal, and there's a line here, I'm going to get my little pointer, and this is loading some configuration.  Don't do that.  It won't press.  This is a node, and this entity auto‑complete, and I want to be clear, this is Drupal, standard Drupal.  When you have the multiple, that a Webform‑specific property that kicks in.  Everything else is standard Drupal, and what this does, you have the multiple, and that's saying you could have 15 possible values, this little element manager, which you'll see an example, you know where it comes from, will process the element and enhance this element to use Webform features, and then the other option with elements, past elements, is you can attach behaviors, and I'm attaching a very simple behavior in the Webform module.  It's the tracking of unsafe data.  If you start to fill out a form and you exit the form before hitting submit, it'll warn you you're going to lose data.  You can literally add this attribute and attachment to your node edit forms to prevent your users from losing data.  I do want to emphasize that there are modules that do it, and there's definitely different approaches to this, and what this generates is this element, and I have actually been using this a lot.  It is just a nice, simple entity reference element, that someone could go in, add a few options, I'm using the events as an example, and you can add multiple, you can have the plus or minus, you can control all these settings, by the way, it's very easy to tweak this widget, and that warning is definitely the you're about to lose your data.  

So, I forgot to say my voila, so, voila.  I'm going to do a demo.  It's a little bit advanced, but it's this concept that I wanted to kind of drill home, how re‑usable the APIs are, and I felt the best way to do it was to write some code and show some code.  So, this demo is, I'm going to do it on the contact form, I feel like I have, I've got enough time to pause and take a second here.  On the contact form, you could say I like that contact form, but I want an outside Webform, and I want it in Drupal code base, so I could go in, I've built a form, we've looked at the source, I can go over to, I'm sorry, to the export tab, and I will pause and say this is a way to export your configuration and copy your Webform from one site to another.  This goes way further and goes export a Webform into form API, and I felt comfortable kind of showing this to you, because it's creating a contact module.  Obviously, we'd get a name space conflict, but what it's showing you is here's your simple contact module, here's the route for a form, here's just administer permission, and then it actually builds you a form in PHP.  It's taking the elements from your Webform and converting them into PHP that is easy to understand, and the concept that I'm illustrating here is that you could take a Webform and use it, or Webform APIs to build really advanced configuration forms, which I think lots of developers do, especially in custom code.  Client says I need this special feature, I keep running into I need a list of nodes, and I don't want to build out a very complex UI, they just need it in this specific block, and I use this type of code, and I literally build out the elements, and I go down to element manager and say process elements, replace a few tokens.  These are showing you good libraries that you could attach for the Webform module.  Really simple.  You can do open and closed date, meaning tracking details, so those are the slide‑outs.  You can have it save those dates when someone comes back to the form.  Unsaved changes, we talked about.

  Oh, by the way, there's a typo that I will fix, probably tomorrow.  You can auto‑focus the first element.  This is a typo, and I just saw it.  You can have a form open, and it puts the cursor on the first element, which is very useful for configuration forms that you know someone just wants to fill out.  Unsaved, we talked about.  Detail saving, and this is to add that nice little widget that will basically say show all collapsible details, and then, at the bottom, it's showing you just, like, how you'd submit a form.  By the way, that's why I pointed out those three steps.  You have your build form, you don't need any validation, because Webform's adding custom validation to your elements, but you're seeing that, you're submitting the data, getting the values, removing some form API values, this is a quick, dirty way to do it, because, basically, it's taking the entire posted array and putting it into a configuration settings form, and the final piece here is the default configuration, where it's just showing you the type of configuration file you would need to power this, and you can download it, if I click download, it's going to jump us out, but it literally will download this entire module, it's basically a skeleton builder, it's building a skeleton module for you, very similar to Drupal console, but I tried to do something very Webform‑centric, and I did the contact form, because I didn't want to overwhelm people with too much going on, but there is an example of how to use this.  It's kind of really interesting.  If I go down, sorry to give you, I got to scroll, an example module, I'm going to click through to the form, it is called Webform example custom form, so the idea is it's a Webform that I built that's kind of like the kitchen sink of all the elements, and if I go to the export tab, I go to form API, you're going to see all those elements converted into PHP, and you get to see how they're structured and what you can do.  

So, this is an example of a counter.  How would you add a counter to a custom configuration form?  And what I, I think it's very funny, I'm kind of smiling about this, how this module is setup, so you have this example module, includes the Webform example, but the nature of this is it generates a module for you called Webform example custom form, so I've used that code, when this is installed, you have a working example, I'll go over here, of this custom code.  I want to pause and emphasize, this is not a Webform you're seeing, this is just a configuration form with just Webform enhancements going crazy.  See, the library is not being loaded, another example of a minor bug that needs to be fixed, but you see how you can get your date pickers kicking in.  There's certain features I see more valuable than others, especially images, if you were going to do, like, pick a logo, it's huge.  Custom composites, if you need complex configuration, this is totally re‑usable.  At the very bottom, there's actually raw examples of internal elements, and this is a multiple element, this allows you to basically build, like, have a configuration form that collects sets of data, so let people enter multiple data points, it just renders it, not renders, but it converts it into a very simple PHP array that you can store in a YAML file and manipulate.  That's pretty much it.  I've shown a lot here.  So, to kind of wrap‑up, there is a statement I want to make of what's not re‑usable, and the way to think about this is it's easy to make the APIs that build a form reusable, the elements, the enhancements, but when you get into the tightly integrated features, that is not something that's reusable, because there's lots of little features around it.  That is possible in Drupal, and to build forms that are multi‑step forms, and kind of my recommendation is to go to the examples module and see an example of a multi‑step form and use that, and all the back‑end logic for displaying submissions, um, it's not available, because you're not really doing Webforms anymore, and kind of extending that, think about it this way, I started off by saying it's to build a form, collect data, and distribute data, the build APIs is what's reusable.  

So, handlers and variants, I didn't really touch on, but advanced access controls, that also, oh, man, I want to say it's not reusable, but now you're getting me to pause and think some of it might be, but I'm not making any guarantees.  By the way, that's kind of a joke toward the end.  PDF generation also isn't, but there's the entity print module, which you can always use and build custom features yourself, but I want to point out some really powerful things that I didn't touch upon at all, but, like, if you see a fancy, like, you're navigating through the Webform user experience, all those APIs are reusable, so how models are opened, how the side bar is opened, there's APIs for it, and even ajax and how they're working on forms.  It just makes it very easy to add ajax to a form.  You add that trait and then reference one method.  You say, you know, add the ajax handlers to the submit buttons on this form, and it will take care of most of the rest.  There's a lot of utility classes, I recommend looking at those.  Off the top of my head, a very, very powerful one is there's, I think it's under Webform, um, form helper, and what that will do is take a nested array of data, especially form elements, and flatten it, so you can get very quick access to all the elements within a form without having to write very long logic, where you're breaking down all the nesting in an array.  The Webform browser test trait has some helpers to test Webforms.  The last one is a real gem that I'd want to demo, but I want to encourage you, anyone who has a code to look in this directory.  It's in the test directory, it's called files, and all it is is examples of every single file type available on the web that anyone would ever use.  

So, when you hit test on a form, it goes into that directory and grabs a file and uses it for test.  What's great about this directory, I use it at least once a week, anytime I have to test a file upload, whether it's a Webform or somewhere else or I need a sample file, you can go in that directory and grab a file.  Um, yeah, I think it kind of gets to this point, like, there's a lot going on here, you got to, if you're using these APIs, you're part of the community, because you should get involved and help contribute to the code and the ideas around it, and, you know, to talk about, you know, Webforms and Drupal and getting involved, well, there's definitely ways to get involved in the Drupal community, through user support, documentation, doing translations, testing, design and usability, donations, development, theming, events, marketing.  I'm going to pause on donations, because I think it's important.  I'm not even going to look at the number, because I want to talk directly to the 50 participant here and say, wow, we are in some really troubling times, and it is definitely worth making some donations, if you're using this stuff for your livelihood.  You know, the DA is going to need funds.  Of course, we should help everyone out, but I think it's important to recognize these people who are doing these events, especially the ones that have been canceled, if they're not lucky enough to get a refund on the event space, it's really critical to make sure they can keep going.  Getting involved with the Webform module, I'm just doing a time check, which I think I'm very good at, um, you can report a bug, you can fix a bug, you can request your build a feature, you can, you know, write or edit documentation, you can spread the word and tell your story, you can even sponsor and contribute a new feature.  I've written blog posts about it, people have sponsored features.  Off the top of my head, the options limit handler was a complete, oh, two of them that I showed were completely sponsored by mile three.  

Um, the options limit handler was sponsored, and that amazing map, that clickable SVG was completely a sponsored feature, and they got exactly what they wanted, and they had, you know, they had the client requirements, we walked through it, and we figured out how we could contribute it back to the Drupal community while meeting the clients' requirements, and you can learn more about me at at Jrockowitz.com.  I'm writing a blog post, and that's a lot more detail, walking through steps and with a screen cast specifically for that feature, so you should check that out.  I'm going to say thanks.  We are at 46 minutes.

>> SPEAKER:  We definitely have time for questions, if folks have them.

>> SPEAKER:  Yeah, and let me see if I can get the little, I lost my little, yeah, people should, let's just open it up to questions.  I'm very comfortable with it.  I hope people will pause, you can say I'm done and we can kind of have a discussion.  I know 50's a lot, but I think it could work.  I don't know, Brian, I can't see the other channels, so if you're seeing questions there, you can ask them first.  I think that is fair.

>> SPEAKER:  Yeah, I don't see anything in the Zoom chat.  I can check the Slack channel real quick.

>> SPEAKER:  Okay, oh, I don't, can people see the question that I'm reading or not really?  No, probably not.

>> SPEAKER:  They should be able to see it, unless it was sent directly to you.

>> SPEAKER:  Yeah, well, no, it's in the Zoom chat, but we're not having it on‑screen, so I've got to read it out loud.  That's really what I'm going to take a sec and be like, okay, we'll be using Webforms to collect data that then will, that writes to Jeera for work requests.  Excited to see how it works.  Yeah, that's not a question, but remote posts definitely works there.  The example would be I make sure the form data, if someone alters the form, there's a fatal exception on my remote post, because I don't want that happening, I need to know I'm getting the data and not losing it.  Is there an option to save submissions both to Drupal and the database?  Absolutely, and I love that I can share my screen, because, you know, there's lots of features I didn't get to show you.  I'm going to show one of the most critical ones around remote posts, is if you turn on, by default, all records are saved to the database, so if you turn on remote posts, it's going to happen both ways.  If you don't want that data to go in the database, you have to turn it off, and there's a little check box under general settings, and you say disable the saving of submissions.  If you don't have any handlers attached to the form, you get a warning that you're going to lose data.  That's a pretty thorough answer.  Okay, can you show again creating custom elements thing.  Okay, that is actually pretty doable.  Um, I'm going to go up, so, one kind of concept is on Webforms, you have settings.  For global, for an individual Webform.  For global things, I call it configuration, trying to line with how Drupal UX is working, and,actually, the custom options elements are under options, and by the way, I didn't demo this, but you can create reasonable sets of options, and it's not a bad thing to point out usable sets of options, images, and now we get to the custom elements, and for, I think buttons is better, I got to emphasize, SVG is just like you're pointing to a file with similar markup to this, and there's blog post about it, the idea is I'm just creating a twig file that's looping through all the options that are defined in the element, and I'm adding some CSS, and you could even define the default options, which doesn't really make sense for this instance, and that comes together to be rendered in this preview.  

Now, if I wanted to use this on a Webform, I can go in, on to contacts, now that I've created it, and I will hit build, add element, and I'm going to do buttons.  By the way, the Webform module ships with some buttons, but we're going to use these.  These are the custom ones we created, say example, and I'm even going to go further and just say let's do days of the week to keep it simple instead of entering all those options, because I want to just save time, and I'm going to do view, and we get our little widget, and this is fully accessible.  Right now, I'm using my keyboard to navigate through.  Okay, going back, um, that's it for questions.  We're kind of good on time.  Of course, I'm available, if anyone wants to reach out to me to ask questions, they can ping me.  Generally, ping the Drupal Slack channel, the Webform channel, and I'll answer, if I can.  If you put something on Drupal answers, I'll usually catch it, and lots of people are available to help too.  Brian, is that good to wrap‑up on?

>> SPEAKER:  Yeah, sounds good to me.  Thank you very much.  That was a fantastic talk.  If people want to, um, un‑mute and clap or use the clap reaction in Zoom, feel free.

(Applause.) 

>> SPEAKER:  Thanks, everybody.  Yeah, so I think there's a little bit of a break for lunch.  There is a general hallway room, if people want to catch up on that.

>> SPEAKER:  Is it on Zoom?  Are we doing an open Zoom?

>> SPEAKER:  I think there is, yeah.

>> SPEAKER:  I'll try.  Oh, man, life is hard.  I've got to check on the kids.  I have a whole string of texts from the family.

(Laughing.)

>> SPEAKER:  Do this, do that.

>> SPEAKER:  I can imagine.

>> SPEAKER:  Everyone, stay healthy.

>> SPEAKER:  Yep.  Stay safe out there.  Thanks, everybody.