Introduction to Webform for Drupal 8

hi it's an introduction to the webform module for Drupal 8 my name's Jake Rock what's known as j-rock woods on the web I'm a triple development software architect I built and maintained the web for module future Glade so what is the webform module it's a form builder and submission manager and this is the web form builder it's just the UI to build a form on what we're looking at is a contact form so you can see there's a text field and email feel in the text area to collect just a contact message and this is the contact form very simple your name email subject and message and when it's submitted you get a submission and this is the submission that came through for a test and you can review it online edit it and the the next thing that we want to is why use the web form module well the web form module provides all the features expected from an enterprise proprietary form though they're combined with the flexibility and openness of Drupal so the way to put it is the web for module gives you the ability to build any form you want and use it in Drupal and leverage all of Drupal's flexibility extendibility the contributed module system so you can do almost anything you want and if you can write custom code you can integrate with any system you want and the use case for the web form module is that you would you know build a form or copy a template publish the form is at page notre block collect form submissions send confirmations and notifications review these results online and then you would you know distribute these results by like downloading a CSV or remote post in this data to a CRM or a third-party service and the use case is simply you know build the form collect submissions and distribute this data distribute these submissions and I can give you a nice quick demo of just the web form module this is a clean install these messages are dismissible once it is miss you'll never see them again and I'm gonna click through and just show you the contact form that we're just talking about here's the contact form and for this demo I'd like to just add company to this form so I'm gonna go in I'm gonna hit add element I'm going to select text field I'm gonna start a company element I'm not going to show you any of the other properties and settings but I'm going to add that element I'm going to preview it go over to view and here's the company field and there's a minor mistake where I wanted to be required and should say your company be moved up to the top so we're gonna go back over to the Builder I'm going to show you instead of using the UI did you know check require to move the element I'm going to show you the source mode which is a powerful feature including the webform under where you can edit the source code behind a webform so moving up I grabbed the company field moving it after you name I want to change the label and this is just yamo so I'm writing property Emily you can copy and paste properties and elements have your senior developer and understand drupal's form API there's a very fast way to build and manipulate your forms and even if you're a copy editor you can go in and edit every label at once and hit save now I'm gonna go over to the test tab which is going to show us the form but fill it out with just some you know latin text and reasonable default I'm gonna hit Send in the background it's sending an email and it's just giving you a little message on the home page I'm gonna click back and now I'm gonna go over the results time to show you the data coming in just a table listing out the submission you have the ability to manipulate that submission flag it lock it add some notes to it you can even customize the columns here click through and here's the data that it came through now that's the general you know what I just described in the use case the only thing I like to add to this this demo is just the ability to build any type of form you want so what I'm gonna do is just show you some of the front-end styling nuances that you can do so we have your company and your name and you know what I want to distinguish that so I'm gonna give this example where I want to add a horizontal rule so I'm gonna add a horizontal rule it automatically fills out of it and you can also set the styles and you have full control over what these costs are they're just CSS classes but it comes with some defaults I'm gonna do a nice dotted one I'm even gonna go in and make it nice and thick so it stands out I'm going to add that I'm gonna move it up here I'm gonna save it and so I've added a horizontal rule after your name and company now what I'd like to do is get your name and company in a multi-column layout side-by-side so I'm gonna add something called a flexbox which is a css3 layout system without a flexbox layout I'm just going to insert it and keep my we're manipulating an existing form you'd be able to go in and add these elements directly to this layout but I'm gonna place it here and even just to make this a little more interesting I'm gonna go over to settings so we have it let's just look at the form very simple form it's got a horizontal rule we got a multicom you know two columns I also want to just make it I don't know stand out a little bit more so just gonna jump into here and this is the admins you know the settings for the form but I'm gonna go into form and what you can do is add custom styles to it and I'm just gonna make it look like a regular status machine just wrapping the whole form so that it'll be nice and green and stand out keep in mind when you're designers build your patterns you can they can enhance this in many different ways and use bootstrap panels and layouts but you start getting the idea of all the flexibility and everything we're looking at here can be customized the submit buttons can be styled and changed and it also depends on the theme you're using I know this is going a little deep into all the nuances of what you can do but I like adding that to this demo because it shows the the true flexibility available in the webform module so I'm going to move on and and emphasize here this slide is you can build anything the web four modules a complete solution for building forms and what I'm kind of including in these now these training videos or just introductions just some exercises that you could do and I really think it's the these examples which is just like build a simple contact form on scratch add email notification to that contact form test and download the contact forms results these are just things you should do to get more familiar with it as practice and then if you want to get more advanced you can you know edit the contact form as you animal especially if you understand form API it's totally worth just practicing experimenting with it you can also get into the more you know advanced form settings where you add a preview to your contact form you're even able to disable the say results and this is in Iceland another nuance where you could have no data stored in Drupal you can have that data only go into email or you could remote post it to our CRM so that's it for now you can find out more about me at j-roc what's calm and thank you

Channel: Jacob Rockowitz

Views: 28,543

Rating: 4.9542856 out of 5

Keywords: Drupal 8, Webform, Form Builder

Id: VncMRSwjVto

Length: 6min 53sec (413 seconds)

Published: Wed Mar 21 2018