 Let me see if I can get this okay. Yeah The first start is say hi in the chat which people are doing which is great And it's really helpful to know who's here or just know people are here and they can it's working and We're talking about the web for modules greatest hits and it's also the titles combined with an AMA Because you can ask me questions and just to introduce myself. My name is Jacob Rockwood. I'm known as Jay Rockwood on the web I am a Drupal developer and software architect. I built to maintain the web for module for Drupal 8 So this is a different spin from my typical presentation. I actually did this Once everything went online. I wanted to rethink how it is doing a presentation And this is broken down into 10 segments each segment has a theme but each segment ends with a Q&A and Prefix your questions with a capital Q and a colon in the chat So that I can see it and I can respond to it and you can do it at any time I can always come back to it I have a little notepad here that I can take notes while I'm talking and You know come back to a question if I can't answer it right then and there and yeah My goal is to answer your own questions and something that's evolved with this presentation Is it's really choose your own web form adventure? I mean I start off with some basic stuff But as we're going through we can change direction. I don't have a problem skipping some parts of this These slides and you know the first five sections are really brought in the basics building forms submissions Configuration elements and handlers those are the kind of the core thing and the last five were things really involved When people are asking me questions over the years that I think are important conditional logic span protection security addressing headless Drupal and you know kind of ending with support and I have bonus tracks I'm starting to work on Around tokens, but all these topics are open game And I think it's going to change it to choose your own adventure in the sense that at different points you could say let's talk about PDF generation and I can talk about PDF generation. I actually you know very easy to do I even have my local dev environment spun up so I can go behind Look at some code if we have to talk about some APIs and I'm good about this is a general presentation So I won't go too deep into code ever There's no code in this deck at all but I'm gonna start with the form builder and Each section has kind of like a song. I'm not pretty, but I'm powerful and You know the the form builder provided by the web for module. It's a simple UI for creating forms It's this important note. It's the form builders accessible via keyboard and screeners to all users that Emphasizes how accessible the web form module is People can build forms with disabilities That means there's full keyboard shortcuts and that means the output also follows that pattern It's just an important thing. It's one of the most accessible form builders on the market and The last one last note here is always kind of developer specific But developers can see and edit a form GMO source. I'll have to demo it to show it to you And I'm gonna move ahead and give you a little quick kitchen sink demo Well, not kitchen sink, but just a demo of the form builder So I have a clean Drupal 8 installation and I have a contact form That's default that comes with the web for module and for the demo people seem many times I'm just adding a company I want to see your company in this form. So I'm going to go in Hit the build then this is the form builder and I'm gonna add an element I'm gonna add a text field. I'm gonna quote company Not gonna change anything out of the box the defaults are pretty good and it adds it to the bottom of form and I'm gonna go view The form and there's a little company. It's not totally right because it's say your company should come after your name It should be required and this is a good opportunity to show you you can do this in the UI You definitely drag it up hit required hit save hit edit or you can go into the source mode Which is showing you the source code behind the form and I'm going to take the company YAML Move it up below name I'm going to change the label to your company I'm going to make it required Let's just give you a hint of the power because you can copy elements if you know form API Which is what power is you can type out your forms. You can make quick adjustments. I find it really helpful to edit labels When someone gives me all the editorial form, I'll go into this mode instead of clicking around I'm gonna hit save And now we have another opportunity here to show you the test tab and the test time Just let you populate the form with the fault data. It makes it really easy like hit send and I've generated a test submission boom with a confirmation message That's pretty much a walkthrough of the form builder and we'll go back and There's some tips and tricks here Use admin titles under the advanced tab for elements to make it easy to manage your form and submission data What admin title do if you have a very long question like What what is your age you can put an admin title? That's just age and that admin title appears throughout the UI when you export and look at it makes it use understand What's going on and developers and site builders should know how to use, you know, the YAML source mode that really empowers you to understand Drupal's form API and Get you more familiar with how Drupal works with forms and last one is kind of the opposite is Don't allow untrusted and non-technical users to access the animal source It's a dedicated permission to allow someone to get to that mode If they don't know what they're doing don't give them access to it. It actually could just confuse them Are there any questions usually there's not at this point, which is fine What I kind of like to do is I make up questions as I go along Well, how does the admin title work and there's also a new feature tied to that It's pretty easy to demo here If I go over and You have your name. Let's say your company and I want to make some notes to I click edit and go to the advanced tab And at the bottom I can add an admin title really company is just enough and that's really what you'd want exporting a spreadsheet and You can say this is a Company element. I've used this to say to someone do not edit this element. There's custom logic tied to it Don't touch it. It's really helpful. So watch I hit save and you can see your company's changes to company and It gets a little note here, which just helps people to understand Jeff asked newest to web form is is the yaml a d8 feature with the development of 7 is definitely a d8 feature only If you go on Drupal dot org and look up the yaml form module You'll see the origin of the web for module for Drupal 8 So the yeah, it basically started out with no UI the UI for this for the web form module for jubilee it was yaml form and This was the UI you would just go type it out and then I added a UI to it And it's a definitely different features actually one of the more unique features of the web form under I don't see too many other form builders on the market doing this and It kind of ties together two things yaml and the fact that Drupal form API is really solid and how they're Handling properties and that's what these pounds the hashes. These are properties that define an element You're gonna keep going and feel free to keep asking questions Well, we've created a form and we've gotten a submission Let's just talk about submission management and that's what it's kind of titled show me the data And when you start to look at the results the columns can be customized, you know reviewers can customize Their results so someone looking at content. I don't want these like individuals So you could say here are the columns that everyone should see and here's an individual user can say these are the columns I want to see submissions can be flagged or locked and These results can be exported and they can be replaced with the view So if you don't like the out-of-the-box results that you're seeing you can go into the jubilee views module and just create a custom view and this is also worth demoing and One trick here is you go to the test tab and I'm gonna show another advanced feature where Kind of helps you only have one result So I'm going to generate 50 and this is I have the web form develop I have the develop generate module turned on which allows us to happen. I'm gonna generate 50 submissions And it's going to generate them and move us over to the results tab, which is right next to the test We've got 50 submissions when I talk about the flagging you could flag the submission Locking means no one's can edit it and you can even add little notes to a submission like administrative notes But we can also customize this And to customize it you might want to turn off a lot of the extra data that's not needed We could keep the star lock the notes Create it's probably not important But it is worth keeping the name and you notice how that admin Title kicks in where it simplifies it throughout the UI it makes it much more manageable and I'm gonna hit save and we're gonna get a much simpler table and You can also go in and check off this box where each user could go in and customize their own table Right here. Allow users to customize the submission result table. So now we have a result table Let's just look at an individual result for a second. I Hinted that at the bottom we can review this result, but you can also download it as a PDF You have the entity print module turned on and you can see the submissions and turned into a PDF and You're full control. Hopefully this works. Sometimes it's valid just because of configuration issue, but now we're good You're full control over this so you can make a beautifully styled PDF of a submission so You keep going You can also edit it. I think that people understand Right here, but let's go back to the results and talk about so we've reviewed these results We're happy with them and we want to get them out. You can download these results over here and For the demo, I do want to emphasize that you can also download all the results as individual PDF documents You'll get a zip archive of all the PDFs. It's a great way. I was archiving a web form I would tend to download the results as a CSV and as PDFs that if I have a certain submission And so much as I need a copy of it You can look up the ID in the CSV and then get a PDF exactly what's being what was submitted with old You know the formatting assignment for this demo. Let's switch to an HTML table instead of opening an Excel I'm just gonna show it on screen Every aspect of the generated table or CSV is customizable how the headers are working what? Elements are going out. You can even do some limits to it But for now, I'm gonna uncheck down that export file and what it'll do is generate this on screen And this is a simple HTML table that you can open an Excel You can even extend this and style it any way you want We've done a good amount with submissions. So let's go back up And we keep going so views Integration is really hard to demo. So I felt like the tip and trick here is these are the modules You might want to explore if you need advanced results or submission management. There's a web form views integration module That exposes all your submission on your web form elements to views There's also the web form submission views token. It is a much lighter weight Way to pull submission data. It's not sortable, but it's a way of like You generate a table of submissions and then you're using tokens to pull whatever related submission data You want to be displayed in that cell that allows you full control of reformatting because the web form model has very advanced Token capabilities in a token you can pull the raw value or a formatted value to your exact specification the last one here is the web form query module and It's an API and what it's doing is giving you a way to query submission data because it's not stored using fields for performance Treatment it's using something called an entity attribute value model It's one table that captures all the data and what this API does is it makes it easy to query that data very similar to entity queries So encode you're basically saying get These these elements based on these conditions and sort by these values It's actually an awesome API for anyone wanting to do custom stuff with the web form submission So questions so Dan asked can you set up a web form so it tracks? For example a certain amount of submissions like ticket seats and closed after all the seats have been purchased. Yes. I Actually can give there's two aspects to that You can set up limits for Let me see if I have one in here Well, let's use there's a demo of the event registration, which I'm not going to go into when we go to the form you can set Individual submission limits to Web form so if I go over to settings, which I'm going to get to in a second But it's fine to go here and go to submissions By the way, there's this expanding claps all a few claps all you can then see limits And you can say the total number of submissions for this web form for this web from per source entity So if this web form is attached to multiple events, you can set limits per event and actually Yeah, Dan I think the key thing here is you want to look at the demo event registration system because it shows you all the possibility for submission limits it even includes There's dedicated submission limits poor per option in a drop-down menu because when you said seats it reminds me of You might have a An event where you got five rooms and you want people to book the rooms and you can say hey in room a six People can sit in room B7 people can sit room eight nine people can sit and it'll actually track that and Close out those options as those are met When I describe these features there's videos about every single one I think that's worth one second because by the way, it's like you're asking this really great question And I can't answer it all and yet I have a 45 minute video about it So under the help section, I'm going to demo this in a second Type the word limit there's a dedicated video about submission limits, and it just walks through all the steps there Let's keep going we're in a good spot here Yeah, and we really started diving into configuration and settings and You know the song here is everything anything can change that's really the the mantra behind the web for what everything is adjustable You can change the default labels and behaviors for every aspect of a web form You can it's enable or disable elements handler every single plug in you can disable them including external libraries So the web model depends on a lot of third-party libraries I think you don't want them or you include something else in your code You can turn them off and then you can configure third-party settings And I'm not even demo third-party settings But when I say to you well the entity print module is a third-party setting So there's a separate configuration place for that and if you do spam protection that's a third party can add on and you can configure that and The demo is really about to getting you comfortable with exploring so I'm in the default Main page for the web for module and I will start I'm going to start on the context when we just talked about and there's settings are web form specific and configuration is global and it breaks down hierarchical in the sense of you start from general to specific So you started from the form think about you build a form you collect submissions you display a confirmation You send emails and handle stuff and then the last two are advanced settings where you can add custom CSS and JavaScript or control access In here Every single message could be customized as displayed almost nothing's hard-coded So in a oh and there's examples of what the defaults are and I'm going to show you where to get to these defaults I think that's a very important thing to bring up And I do like the expand on capsule because it gets it very quick to be like okay Here's all your options here and you should explore and be like what are behaviors behaviors are just checkboxes that alter a way of forms Going to work disable client-side validation display a required indicator I don't even need to hit these you should explore them and the tooltips help you understand what's going on there Let's go to configuration now. So configuration is global It's over here and now think about same thing forum element submissions and was very Forms you can set certain default behaviors to apply to all forms some are some make more sense of others It does make sense if you need to disable client-side validation for all weapons You do that you check it off and then it'll check off that option all weapons and disable anyone from unchecking once again, if I go into general settings All the way all the defaults are here and you can go customize them and apply to all forms Don't recommend going crazy here The more important thing you want to be aware of is like turning on and off features that you don't need So if I go here And I go all the way let's let's use. Oh, sorry about jumping Here the second look so my machine is not happy with hopping right now. That's why it's slower than normal Element types these are all the elements available and you can turn them on and off The best example is if you don't want users uploading files Turn off all the file upload. Oh If we scroll down the web for module ships with a password element, but it's disabled out of the box and The example of why is if you check it off. It tells you that It's stored as plain text so passwords You don't really want to turn them on because they're sort of plain text You should probably enable encryption or take the passwords and put them to a third party But we wanted to make that available to everyone Um, the same thing applies to handlers and all the plugins you're seeing you can turn on and off And here's the example of third party libraries and there's even this is all the library Sorry, I've scrolled too fast, but you can turn on say I don't want to use select to turn it off Are there any well, let me do some tips and tricks, but if you have questions about configuration, I can go back Listen keep it simple You don't have to change anything use the full settings when possible disable a needed functionality And I like giving developers a hint here is hooks can be used to change the full settings So web forms are config entities, which means there's hook web form create And you can hook into that and change the default settings for your web forms You could people don't I like that example where people don't want anytime someone creates a web form They automatically have an email handler added to it with the right to pull that Just depends on your organization, but it's great for developers to know they can do it Are there any questions? Okay, I like adding my own questions with the Google if I want to show you what the coolest new configuration feature is and Under the advanced tab It was recently added because there's this problem that web forms are stored under structure But they're kind of like content and very possible that you would turn on web forms and disable all these other options It's kind of in an awkward place for most users It's sitting under structure and the content area doesn't really support the rich UI of the web form model If you go here, and I'll show it in the side tab, you're just getting a series of tabs. It's very limited So you can't really add web forms here and then have all the nested tabs So in the advanced section you could display web forms as a top-level menu item in the toolbar It's better just to click the button check it off and click it And actually this feature makes it easier for me to proceed with demoing Because what's going to happen is and what's doing is rebuilding the menus because I'm moving where web forms are in the UI To next to content and before structure and you get a dedicated menu that gives you full access to everything It's an optional feature. You can turn on it But I think it's a really helpful thing for people doing really big web form installation So let's jump into elements Every question you ask people matters And so there's example modules and there's a web form examples module which has this style guide It shows you examples with every element to kitchen sink Oh, it's like that word showing every single text format file uploads cute kittens ratings Signatures it just gives you a starter and you go in and look at how they're configured You can also tweak this and create your own style guide Full examples of all the entity references Little bit hints of composites which I'll talk about in a second And then just shows you the styling of all your elements and like even how your messages are going to be displayed So you can use this to kind of set up your designers and themers to kind of know exactly how all the forms are going to look It's like the example the starter form that everyone could look at and get all your styles working and This is zooming in on one element I just love this this slide because it shows you the power. This is just about titling and labeling So out of the box you can add a title to an element. That's good accessibility But you can add a tool tip and you can even add placeholder text and then below placeholder text You can have a piece of just a description or you can use the more saw though All of these are available. I do not recommend ever doing what you're seeing on screen on your forums It's overwhelming and the point here is each one of these options has a different use case So in the web for modules you I I use tool tips have the use cases that One people are coming back. I need to save space if people are coming back to the same forms over and over and over again So generally they don't need this help text They only need it once so tool tips allow it to be just there and they get used to it If they need help they roll over the tool tip The description is helpful because it's just a little piece of text that kind of augment what people are typing And if you want to remind someone of something always use a simple piece of text below the input and the more is for More lots of text. I use it in healthcare forums when you're describing something in my two power graphs And you need to say you know like you might have them where you can change the label So you could say what is a PSA that's a prostate antigen test And then you slide out and you could have text with links and images and I've used it even for that where it slides out A whole page depends on the form And I like showing this element. This is a computer twig element So this is doing calculations on the fly using Ajax and twig is going to back in and adding numbers together and just kind Of just going to demo Really you got value a b and c and then a twig element you click through and you get a little twig that adds those two A and B data and B to equal C checking off the do it in Ajax and then there's a computed token which is Identical to twig, but it's just taking token values. So the idea is someone selects the user and we're pulling user data into dedicated elements and we're putting tokens in those values and Components I've given a hint about it's multiple elements working together. It's like selecting a bunch of data points Like an address in this case we're creating custom profiles for a company And you can have multiple or single last one I'm gonna take a sip before I go here because this is a a Lot for people to digest You can build your own custom option element There's an example of a buttons element. It's like web components where you're setting up like what's the HTML twig markup? What's the custom CSS that I want this to look like you can even have a little custom JavaScript? And then I'm gonna go to the preview tab and this is just creating buttons and You just click through and it selects basically in the background is to drop them in I'm going to the next one and this is the real power where you can also set an SVG and In an SVG in the markup you could say an ID and text and those are parsed and it then generates a Map well, this is a map in the United States. It's fully clickable with panning and zooming and What's important is really what this it's a module. It's called but I think the web form options custom module It's concluded. It's layering on job script to one make this possible and make it accessible So everything you're seeing here is fully accessible with keyboards Proper tagging labeling and all that stuff. I use it for medical forms where I have diagram or I need people to click on the diagram So some tips and tricks for elements Every aspect of an element is customized when I tip out of the box There's over 80 properties you can choose from but start out with basic elements You know, keep it simple add a text field and then see if you need more functionality than that or checkboxes Use computed elements with Ajax sparingly that the challenge there is it's very intensive on the surger server because it's going back to the server and doing a full calculate full render of the form in a Calculation and bringing it back to result and I've seen people get hit pretty hard if they've got cascading Computed Ajax elements with one element sugaring another And just be aware of that. It's like a one There's actually now warning when you create these to be a be mindful of the performance application And it's just for developers elements in code provide the most flexibility and stability and there's examples of creating elements in code and What what that means is you get this element code that's one version control to it's available to every single form and Your developers have full control like they can add their own custom validation rules They can go have they like all the options can be dynamic based off of some third-party, you know source and it just Very very powerful when you start doing it Any questions just add them with the queue I think you can do Okay, I'd like to run a web form through a workflow with multiple submitters like an approval flow Um That's a great question. There are several How you meet I'm gonna I'm gonna answer it and then I'm gonna have to actually add this module to it Okay, so the answer is there's no great immediate workflow So you have to install add-on modules and there are workflow related modules Without doing a third-party module what I have done is you have full access controls over your form So you can have a form like I'm gonna have to just illustrate it in a form on this contact form If you wanted a workflow where the person who gets the email needs to do some reviewing You can go to the form and add extra fields like an admin notes field And then when you're in that field you can go to the access tab and say who has access to it And it gives you kind of a really low fidelity way for for example So it fills out a form the workflow that you need them to approve it You can have a checkbox to say approve and only give the user who can approve access access to that element And you do it right here. So for example When someone could update it when they're viewing a submission they could go see that data when they're updating a submission They could see that data or creating it That's the out-of-the-box now if I go to my mother I'm really glad I added this menu I go to add-ons and type workflow. I think I'm gonna even have a dedicated section for that. Let's see workflow So my stroke is incredibly advanced Unbelievably advanced workflows. That's like CRM level Flow charts and everything and a web form can trigger a workflow or a web form can be part of the workflow There's also and I'm going to have to add it Core there's a workflow field like moderation field module that can be integrated and That brings in cores workflow into a web form submission. I haven't used it. So I can't give a full review over it I'm actually writing it down because It's really important that I get that out there because people did some work and it made a lot of sense of basically using this content moderation field I lost you guys for a second. I'm gonna keep going Feel free to ask more questions while I'm talking and And handlers, so we're really getting to the end of like what's the core stuff in the web form module We've got 15 minutes left and we're fine. I don't like stressing about time. Ah, thank you workflow moderation Every action should have a reaction. That's what handlers about they are triggered when someone submits a form Hold on I'll get to that question in a second So email we talked about remote posts. I'm gonna demo That's taking your data and putting it to a third-party server actions and settings I don't demo, but it's important people aware. It's like rules You add this handler and when someone submits a form that handler can tweak how the form is going to work Or how the web form submissions going to work to the example with a form and an action goes to a submission so ready someone submits a form and they enter in a certain value like this is a high priority issue and The action handler can flag the submission and you can do that using conditional logic So you can say trigger this action based on these conditions. Someone said this is a high priority issue settings is Where you can tweak something like a confirmation message, which is coming from the web for module could be very similar Someone could check a box and say this is a high priority issue and using a setting handler You could change the confirmation message to say we hear this a high priority issue And we'll get back to you an X amount of hours or call this number Finally, there's a debug handler, which just shows you the data and you're writing your own handlers It's worth when I'm debugging any issue. I like to look at the data and that's what that handler does And this is going to demo the email handler I'm going to skip it because I want to go to the remote post to see more value in that It's just walking through that you can add an email scheduled email handlers I will say very good go back to the event registration system It allows you someone submit to form and you could say one day before the event send out this email and Some tips and tricks yet enable debugging Handlers can act this isn't really important thing So a handler is a plug-in has a lot of methods it can act on a form Validating submission and entities so the idea there is on the web for someone hits submit You could do an action or you can validate that submission But you can also when the web form submission saved in a handler you could trigger something See sometimes that's really worth doing because sometimes at an API level you're saving a submission a web form submission And you'll want to do something Don't forget handlers support conditional logic. It's a really powerful feature. I mean that means any aspect of the handler Yeah, I don't want this to execute or send out these three different emails And handlers are extendable plugins and it's really important when you get to a handler If you're like, I don't like this one. You can extend it change it. You can remove features by extending you can turn off features I'm gonna do questions. So can a web form now have more than one author the answer is no that would be the The you can but it doesn't really track revisions because they're config entities There is a a web form like it will create revisions for each one of your web form changes And there's a web form logging Aspect where you can log all the changes, but it's not like you can have multiple authors and collaborate on a web That definitely doesn't work the way one would expect as for closer configuration. It is very think about it like views These are a little tricky to have multiple authors Chad ask Would use an action personnel like this user can fill out a questionnaire Like a personality test that adds a value to a user pro pop up absolutely, but the it's Handler definitely could do that and the question I'm now realizing in this presentation. I'm going to start talking more about it If I do a search Let me see if I do content creator There's there's two aspects. It's we're talking about entities and there's not like a generic solution But the web form content creator will create nodes on the fly for your web form submissions Why is that a good thing well one? What do you have a form with 200 100 different elements? And you want you really want 20 of those elements into fields because it's a little easier to manage And views and you can integrate the site content creator does that if I do a search for a user There should be a submission use a new User registration so create a new user upon form submission That's a great example module. It's really powerful. It does a full integration with user registration more than just the original question okay I'm going to keep going we got Not 10 minutes left. We're good. We go over conditional logic. I ain't didatic ask me the right question at the right time There's two types of conditional on this conditional logic Invariant and they allow you to tweak a form based on submission data Conditional logic you'd use it to hide and show or acquire elements variants allow you to just alter every aspect of a web form labels behaviors any settings and Conditional logic is as simple as demoing it. I'm going to use the templates the web form templates module There's a medical request form. I'll preview it. I say conditional logic I'm basically hiding and showing elements if you're a caregiver. I say what's your relationship to the patient? I asked for their information to go back to patient turns out not going to jump the admin UI to show you that But always start with conditional logic That's the most simple one-on-one thing and conditional logic in the local module uses Drupal states API And it's worth kind of understanding how that works especially when you're looking at the source The example I gave you use containers to group related elements You can hide and show the container or not every individual element on that's exactly what I was doing in that demo I was taking your information was a container with the conditional logic not each element and Gradually implement varying and now let's just give you variants 101 a web form variants an alternate instance of a web form that is just setting elements or behaviors to yield a better result and Variants, you know, this is an AB testing example. We're basically having a version and a B version and The a version is a compact horizontal aligned form and Then oh, that's the a and if I go to the B It's going to be a vertically aligned with radio buttons instead of select menus and you can test those two options That's a very basic example, and that's really the thing with variants It's a crawl walk run thing. You want to start really simple and get more advanced And you can use variants. I'll use the second bullet to make the first point You can use variants to organize audience and specific audience and organization specific web forms. It's called Segmentation Dan at the end. I'll add links to the slide and what segmentation for the idea is I have a form I have a contact form that's available to a hundred different companies and at the Top of the form when I know company a has come to the form We want to display a dedicated phone number to company in so I've created a hundred variants of a form Which just changed the phone number at the top of the form and when they come I know which who they are and I display this dedicated phone number and what's really powerful about that is you could Variants and designs is of course unlimited variations with no performance implications it happens once at the beginning it applies it and you're good to go and You can implement your own variant plugins and they give you a lot of flexibility So that phone number one. I just wrote very simple form It's a list of companies you click edit it asks for just the phone number in a dedicated field with Actually custom rules on the phone number and It makes a big difference Variants are very tricky to ask questions about I definitely recommend looking up web form variants because there's a dedicated blog post about it Spam protection I'll speed up a little bit everyone wants to know about spam. So stop sending me your junk These are the three I recommend and they all have their issues How do you pop puts a hidden field anti-pot user JavaScript and capture we all know frustrates the hell out of it And in the add-ons you can find the spam protection modules Capture works the best, but the most annoying honey pot Can be good enough without annoying users and this last one is really important if you need performance Spam protection modules may disable page caching Capture definitely don't the idea is if that the spam protection requires some user specific input It's got a disable caching. So caching it does display an image and get a response that's specific to that image So page caching goes out the window There is a recipe I've started to recommend and it's a combination of honey pot and anti-bots And it's not honey pot time limit time it would disable page caching. It's putting a honey pot in an anti-bots So the idea is there's a hidden element in the form that robots have to figure out and the robots have to have JavaScript enabled and that recipe doesn't kill page caching I'm going to go to securing submissions and I'm going to what I'm going to do with questions now is Do them in four minutes at the end so that people have to go to another place. They can go there. I Don't trust you. I don't trust anyone. So Securing forms a couple of options you can encrypt the submission data You can disable the saving of submissions that never goes into Drupal when you do that You could by default send an email or you can remote post it to a serum Or you can and I also just recommend let's say you are sending emails remote. You can schedule the purging of those submissions That is a very good best practice where you're basically saying I want to hold on to this submission for a week And I think you're getting hint that you have full of levels of access controls to submissions kind of dressed as GDPR and disabling results I Do like this demo because it really shows one of the most powerful things about CRM integration So I'm going back. I wish I would fix it up going back to the contact form Done this demo enough where I can actually do it in less than a minute and a half I'm clearing all the submissions because what we're going to do is say we don't want this to go into Drupal We want it to go Into our serum and I go over to settings and I'm going to say disable the saving of submissions and If I didn't have email give me a big warning to say you're going to lose data, but this case we have emails going out So we're not losing data, but now we want this to go into our serum So we're going to remote post it and we go in and use this dummy URL One great thing about this demo is the debug you can control what data is being posted Not going to go there, but I am going to go to the advanced and Enable debugging the reason you want to do that is it'll show you if there's errors and shows you exactly what's happened And if I hit send It's going to fail because the URL was not a valid URL. I get a big red box at the top Wow the Actual action took one seed it said unable to complete the request. Here's all the debugging information This is what you sent. This is where it went and it was a 404 because the place doesn't exist but it also even gives you a hint of how you do response tokens, so if your Response returns to soon we will parse that and you could take that code Whether it's completed or the response code and put it into your submission if you're writing it into Drupal or even into an email I'm going to keep going oh Boy I Lost my slide so we're going to do one more and I will finish sorry about that Well, this is a great like I could just act like this was an honest mistake because I wanted to get to you the URL of the slides but Well, here's the URL of the slides they're always shared publicly, so I'm going to put this into the chat We have a minute left, which is actually not a horrible tragedy. I Need to pull this down out present And go to the last one and what we're going to miss is support But the I shared the slides so the support options are listed at the end and I'm going to zip through But I spilled a cup of coffee on my keyboard when I started this so this seems trivial to me to have this little mistake Other than it gets you a little jumpy And we're here and I like to talk about sharing of web forms And I want to share my web forms because you want to distribute them you can do head list There's some modules for that you can get them into GraphQL But you can share a web form and there's a web form share module And what it does is it gives you a little JavaScript snippet or an iframe You can benefit and the preview tab shows you this gray box is an iframe loading the web form that gray box can be placed on any site and Work seamlessly and it resizes automatically and Yeah, the headless web forms can't support most advanced functionality. That's one of the problems because you have to rebuild everything from scratch Sharing web forms it definitely provides the most reliable user experience And I want to emphasize that shared web form that Mac Ray box can have any dedicated simpler theme that you want You can apply a dedicated theme to that and for example I probably wouldn't start use the bootstrap theme because it works really well And then put a little styling on it so that if you're putting in some other sites You just have a nice generic looking form that kind of fits in most designs Um Questions I am okay. I'm gonna keep going just getting help. There's lots of options There's rest document documentation cookbook recipes You're gonna have to get answers at fact exchange and use the issue to you if you find problems and there's videos about every web form feature You should get involved I'm jumping ahead because I want to make sure people you can learn more about me at jrockwoods.com And I do want to push people so coming up, of course me on three hours ahead of you but lunchtime and At 12 30 you can do a pet meet or greet with Anna Jen 12 12 30 part 2 of living wisely maintaining balance meeting under modern conditions and 1 p.m. The contribution lounge and These are the sessions coming up next so stick around for more and These are some bonus tracks, I actually get a lot of these So I'm gonna go ahead and say hey do you have questions? There are 23 people still here. I Will stick around and answer any questions that you want Or you guys can slowly exit or finish eating your sandwiches because you guys are still doing or starting ones We're starting to eat your sandwiches Are there any questions that I can address why take a sip it's a pleasure. I really like doing these sessions I've got to get this Q&A down even better because I Think this is where you get the value. It's very hard of these online Conferences because it's hard to just 100 or watch some webinars to me don't always work because you kind of want to be able to be like, well, we really tell me about that Of course, there's a lot to go through I don't know. I almost want to go to my bonuses because it's like if there's 22 people I could keep talking while someone thinks of a question Let me see if I can get my mouse over here. Oh my god cards is such a fun feature Select it Well Adrian sticking around, okay I'll I'll talk about tokens because this is the deck I have it's important to use this thing with tokens It's like sometimes you need a little extra magic and We know what tokens do they generate placeholder there are placeholders for generated values You can use them to display submission value You can reference anything you definitely use the token module But what I wanted to do is throw up some tokens on the screen and walk through them And and just I'm gonna use the pointer and I'll answer that question that just we've got posted But look you can grab an element title You can grab the remote post completed number But this is where you start getting into an individual value grab the value of the subject of email You can add a custom URL. These are all documented when you have The web form token module turned on and this is going all the way get the note By the way, the event registration demo uses this token. It goes out ready The web form goes out to the event node and grab the field web form demo event B Grab the date format to this short and insert it into an element And you can use these tokens for that and this is ridiculously important These are web form tokens suffixes. What these do is you add them to the end of your tokens and they do things So let's say you can use the clear if you have a token and the value doesn't exist It'll remove the token people won't see it if you're taking tokens and inserting them in different contexts The last war helped a lot if you need to put a token in a url It'll url and code the value if you need to insert the token in an xml You can use the xml code If you know what you're doing and you need to decode html entities, you can do that or you can even strip tags So In okay, so let's see the question is in an office setting where standard forms are used What's the best approach? To building a web form to print a standard pdf. I mean definitely the entity print module And it That model does a great job of generating pdf and you um Like without going into like oh you can go you can get into the theme layer of the entity print module and tweak Everything going into the pdf, but this is worth doing like here's third-party settings So down here at third-party settings For the entity print module I can go and specify the header and footer of the template and inject some custom cff To tweak it. Um, I will make some recommendations. Um wk html to pdf Is by far the best pdf generator in the open source community But it needs to be installed on the server, but services like panty on come with it Um, it's basically when it says wk html to pdf. It's the chrome pdf rendering engine So when I hit print here, and I save whatever i'm looking at as a pdf. It's pretty accurate in that Wk html to pdf and it does pull your print files that can help This is very specific. You can also, you know, just a note. You can add a debug link. You can style that link at the bottom Yep. Yeah, wk. It's all one word wk html to pdf Um, it's fairly well made. I've used it for a decade already. So I got it even when they don't support it for a little while I give them a lot of credit um Okay, do you know anyone using web form for a robust event entry system? Absolutely like well martin asks the question and it's really is it um event registration system or like a um Call desk, you know event could be called that event registration. Yes people are using it. There's a demo of it Um Oh, I'll definitely answer dan's question. Those are great great questions. Um So yeah, I'm trying to think of a limitation there and it's not I mean one of the big architecture changes Because it seems like some people are coming from d7 is web forms can be attached to nodes So it makes them very reusable So you take a web form and attach it to dozens of event nodes and you have an that's like boom You have an event registration system quickly web forms track where the submission is coming from so you it's like Web form 101 you immediately get that out of the box and then you can layer on For example the scheduling of emails before the tracking the inventory the limits Um, I'm trying to think of what hasn't It's pretty close Frankly, oh, uh, oh, I don't think there's elements to do not Keep in mind the events coming from a node So you have all that power in a node and then you're just having the registration there um Well fans like sadly we're still you know writing. I understand the pain of running triple seven Are any of the modules you discussed possible for oh d7 web forms? Not really. No, I think um web d7 people have wound down support So it's rare that those modules are getting updated. They still exist um I'm trying but a lot of the d7 modules that have been brought into the web form module They're not really relevant like the web form table There's full table support in the web form module and the csc stuff is kind of built in All that is important to d8 um Yeah, and it's a big shift. It's from seven to eight web form was completely rewritten from scratch I mean, I basically took over maintaining that And you just have to get used to it. There is a migration path um, andrea is asking what's the best source for d8 marquetto integration And this is a funny way I think about this way There's no way I know every aspect of what people are doing with web forms. That's why all I do I At least twice a week. I search around to see what add-ons people have created Let me see if marquetto has one There isn't a marquetto integration well, one thing to say about that is, um It's very easy to also just look at other integrations and copy that code because it's really about pushing data to most crem systems It's about pushing data to it Um, where someone fills out a form and you push it. That's why the remote post handler exists So you can copy a lot of that code Um, that's the best answer. Sorry. I hope someone doesn't add on for that um, I use sales force Oh payment is a great question Chad's asking about event registration and payment. Um, let's do that here and there's two Well payment, there's the donate module Which is an example but commerce And this is heavy, but you you can install the commerce module and this commerce web form Order add-on is well supported. It's a handler that gets added and essentially what it does is it goes from when someone fills out a form They hit submit this handler Goes into the commerce module generates An order number record number and redirects them to payment and customize the whole process And I've seen it incredibly successful because if you think about most payments are always two parts Fill out the form go to the payment. You are going down the commerce path um Which I don't think is a horrible path because it's a great module that's well supported and you're only talking about core commerce In most cases, it's the core commerce payment And that order handler Um, the other option is to redirect to third parties and I've done that too and you know, that's continued more safe um, I haven't oh, what is the I just want to see Uh So I think I'm missing some because ready if I go to integration If we scroll down There might be other integrations with systems that support payment. That's really what I was just authorized net for example Yeah, you just have to look through them and think about what integration do you want to search for? Um We have four minutes left and you guys should well, oh you guys are at once so it doesn't matter um So there's 18 people here. I mean I it's a Saturday for me. I'm kind of chilling um Try to think of other Other cool things. There's well, that's what's great about this This last slide here where I have my list of tips and things because it gives me tons of ideas of what can be done but um and some are more complex than others and What's good about everything you see here is there's dedicated blog posts about doing modals And stuff like that cards. I like to demo. I'm really proud of that. Um And I'll demo it because what it is is web forms for a long time supported multi-step wizards and I'll go to a wizard example. So we're on this. This is an example. It's a wizard the multi-step form The way this is working is each step. I'm going to do the test time is going to go back and render the next page Using ajax and moves back and forward And yes, this seems fast because there's five steps here, but no it's taking A quarter second to a half a second between each step So when I click here That took a while by click back It keeps hitting the server What if you want to have One question per page in the web and doing a wizard doesn't work. You have 30 questions That slows down things dramatically So what cards are is taking the form rendering the form and moving all the logic from multi steps into javascript And what I and this is just a warning that we're going to lose data Which is fine because we're going to submit it And if you have the web on cards module enabled you can convert your wizards to cards We can build them from scratch. I hit convert Give you a little warning experimental And what it's going to do is change wizard page to cards. Keep in mind you can do that in the source mode And it's made these all cards. They almost look identical to wizard pages But then it says add add card if I go here and I go over to the test tab It's going to look exactly the same I do add this little border for a good reason But it's instantaneous. It's super fast because this is all javascript with client side validation fully supported And if I go here, I'll show you like a nice little feature The little box is here because I added a shaking behavior for client side validation not working You know, if you get an error you want to kind of tell people um So I'm doing a massive survey. It's 30 questions and you're paging through it. It even has keyboard shortcut like I'm going to not use my mouse and go to the next button But from here if I click the left and right arrow, it'll just navigate forward and back This is just really powerful and it's kind of solved You know, this is almost like faking a react form It's kind of making it a front-end framework form where everything's happening On the client and the performance is a tenfold game um yep The 17 people left so Well, you know, well, okay. Well when you say 17, it's like half of them are eating Sam which is they're doing something else and then some people are still here um For adrian, I think the thing you want to take in is like the demos and you know, I don't do this But it's worth kind of just if I click extend There's kind of two things happen. The web form module in the Drupal community has the most extension Period of any module that's being outside of core And you can see my crazy stuff here, but I'll go to the bottom And here's the web form by the way, that's because everything it's all these modules here, but These are all different some of these are add-ons But some of these are like there's a web form bootstrap module If you have a bootstrap theme it helps just clean things up Web form client-side validation module does integration. That's where they always will say integration in the description I have all my test modules turned on so you're going to see that occasionally um What you get to is you get examples so Here's wow, by the way, these are a lot of add-ons I use but here's examples and demos And these are kind of like little recipes to do the event registration system And there's another demo of an evaluation application evaluation pattern similar to event registration system is someone Fills out Oh god. Yeah, that's Bob. I'll I'll address that in two seconds for that You you have an application that someone fills out and similar to workflow Then you get that application you have people evaluating that job application and that's a system It just shows you how to glue these things together And okay when you do your demos, do you usually just install all the things in the sandbox including add-ons? Um, oh well this demo I have like a script that runs through A lot I try not to turn on too many things Um, I do with the demo modules and the examples do not a test server Never do more production. I mean I had someone The event registration system kind of borked in six dot x in terms of uninstalling And I tried to help the person but that's still in alpha, which by the way No one's even asked that question about triple nine support And I'm going to avoid it until someone asked it Um examples you're just going to get examples of everything even creating your own remote post handling And that you know even using variants there's examples So it's great as if your developer you look at the code and you start to see the patterns All those examples there's examples of every single plugin that exists So you're going to understand how an element plugin works how a handler plugin works For real events uses there's a ton of test coverage. So there's a ton of test modules So if you wanted to fix paragraphs you check off this one and you get a default installation Of paragraphs Thank you more Yeah, it's really hard just I I'm only doing this module. That's how I support something so complex It's like that. This is my job in the Drupal community and I stick to this one task Okay, I've gone for an hour I think everyone should get lunch I'm going to go out and enjoy my day I'm going to say Goodbye to everyone. Enjoy the remainder of your week and I hope you had a good time at bad camp And I'll probably see you again somewhere online Yeah, and always take me if you have questions on the side