 Welcome, everyone. I'm excited to be here to talk about Webform Module and integration with CRM. My name is Karen, Karen G on GitHub and on Drupal. And I live in Calgary, Canada. CRM stands for Contact Relationship Management. But depending on the context of your organization, the C might be a contact. It might be a client. It might be a customer. If you're a political party, it might be a constituent. And if you're an organization providing services, for example, counseling services, it might be a case client. A general definition could be contact relationship management, so technology for managing all relationships, all interactions between all your contacts and your organization. So what if you already have a Drupal website? And if you have a Drupal website, you have access to Drupal Webform Module. It is a modern state-of-the-art form builder. It is loaded with functionality. So Jake Rockowitz, of course, Webform Module is maintained by Jake. He recognized this early on. And he added in a remote post handler option. A remote post handler allows a Webform submission to be posted to an external URL, a third-party application. And with the rise of CRMs, being able to push that data from one server to another has become a requirement for many organizations. So when I talked to Jake about this presentation, he wasn't able to join us in Portland here. But he said, you've got to show one of my animated GIFs. So he sent me all 500 of them. And I selected the remote post handler integration option. This is where he's showing us you can go to Settings, you click Handlers, you can add a handler, you click Remote Post. And what you need to do is you need to set the URL that you would like this Webform submission to go to. In this example, he's just posting it to a fake URL. We're deciding what fields we need to send over. Under Advanced, there's some more goodies, like a debug option. And let's test this form. And if we submit this form, it's coming back red because this URL actually doesn't exist. But from a Webform point of view, this is exactly what it had to do. It had to send that data over. OK, so I gave this a try. I created a very simple Webform here on the left. The Webform has two fields, first name and an email field. And yes, this is Olivero. You're going to be seeing a lot of Olivero on my slides. We love Olivero. We love sub-theming it. You're not supposed to do it, but we do it because it's beautiful. And shout out to Mike Herschel and his team. And I fully agree with him that it is the most beautiful CMS ever. So if I hit Submit on my simple Webform, I'm actually sending it to a real URL. So I'm getting a status of 200. So it worked. The data arrived, those two fields arrived. What actually happens on the other end, of course, depends on what the server does with these fields. So you can extend the remote post-handler to do something more sophisticated than just sending two fields over to another server. I googled some examples, and I found this right up by chapter three that I think is very good. It shows you how to create a module and how to then extend the remote post-handler. In this particular example on the bottom right there, they're sending data from a Webform over to a third party booking application. And what they need to do is they need to do a little bit of transformation on dates so that the third party application can understand the date format. So that's a good example of how you could code your own. But don't just go code your own just because you can. Google your CRM, whatever you're using, and Drupal integration. And you might be surprised to see that there's quite a few options already out there. What I did here was I did a search, and these are the ones I found for Drupal 9 and have at least a beta release or higher. And apologies if I've missed any. This was a couple weeks ago when they needed my slides. There's a Salesforce integration, a Webform Mailchimp integration, Zoho, Redhand, and CVCRM integration. So I installed the Mailchimp one, the Webform Mailchimp module. And after you do that, you end up with a Mailchimp handler right underneath the post handler. It really is just an extension of that hook. You also need to set up API keys in your Mailchimp account because not everyone in the world is going to be allowed to send email addresses to your Mailchimp account. So it requires a little bit more config on the Drupal side. But when you do that, and before I continue on, this is Claro theme, another shout-out. I mean, another major improvement, I think, to the looks of Drupal. We're using it for every single one of our Drupal 9 projects. And I don't care if it's officially in core or not. It looks beautiful. So we're using it. Back to my form, a simple form, first name and email. If I hit Submit, it does go into my Mailchimp account, which I created for the purpose of this demo. And apparently, if you do that, you get two stars, whatever that means, but you get two stars. OK, next thing I want to talk about is Webform CV CRM. Webform CV CRM module is the module that I maintain with my team. And because not all of you may be familiar with CV CRM, I thought I would take a minute and a half of a short introduction video to show you what it can do. Just a brief introduction. But in summary, it is open source, just like Drupal. There's no licensing cost. There's no user fees. And on Drupal 9, it really just is another composer required. Shout-out to Ellen, a CV CRM friend and partner from Belgium for putting this together. That one minute and a half is about all we have on an open source marketing project. But I think you did a fantastic job on that. OK, if you look at the CV CRM installation guide, it really is just two composer config statements and a composer required to get all of the CV CRM core code, the packages, and it says Drupal 8 there, but what that really means is everything above seven. So if you do this, you will install Drupal 9, the latest Drupal 9 version, with CV CRM 5.46. I think we're up to 5.48 now. This was a couple of weeks ago when I created these. It's not that complicated, but it is still composer. So if you run into troubles and it doesn't work right away, keep calm, clear cache, try again, stick with it. And if you need support, CV CRM has a stack exchange presence and it also has a matter-most instance. A matter-most is like Slack, but it's the open source equivalent for Slack. So reach out, there's people there, just like in the Drupal community, that are keen to help others and help see you through the installation process. And we know it installs, because for a web-form CV CRM module, we install five different combinations of Drupal 9 and CV CRM every single day, five versions of CV CRM for all our testing, all our automated testing to ensure it works. After you've successfully installed CV CRM, you'll find a CV CRM tab in the top of your Drupal menu bar. And if you click on that, you get to the contact dashboard. This is on your site, it's in slash CV CRM, and this is the user's dashboard, so I configured it with some graphics and the news, the blog from the CV CRM feed. CV CRM is contact-centric, so that means all the data are stored related to the contact. This is the default contact screen, so we've got tags that we might use to organize contacts, we have email addresses, you can have multiple email addresses, phone numbers, websites addresses, in this case we have two addresses here, a home and a main, we could have as many as you want. On the left-hand side, you can see contributions, a contact contributions, that could be membership payments, donations, could be purchases for any items, pledges, memberships, organizations that are membership-based will use that. Events, participants, contacts maybe, right? Attending events, activities, are all the activities associated with a contact. Relationships, how does this contact relate to other contacts? Contacts can be organized in groups, they can be tagged, and if you look at the very, very bottom of the slide here, it says former communication data, that is actually a custom data group. You can make custom fields on contacts as well, so if there's core fields that aren't quite capturing what you would like to store, you can make custom fields. CVCRM does have a native form builder, this is Coleman from the CVCRM core team, and he's put a lot of effort into this, because CVCRM doesn't just run on Drupal, it can also run on WordPress, Joomla, and Backdrop. So it's a major effort to try and make a form builder that works on all platforms. Some of this work sponsored by some large nonprofits around the world, like Wikimedia Foundation, New York State Senate, and Greenpeace, just to name a few. But if you have Drupal, and if you have Webform Module, you're not gonna use a native form builder. This is our Drupal project page, and those are some of my team members. You see Coleman's involved with this as well, of course, this was originally his project, and I've taken that over about five years ago, I think, and he's still involved, because he loves what we've done with it, and taken it to Drupal 9. Over 3,000 projects and sites are using our Webform CVCRM Module. We have a full Drupal 9 release, compatible with a variety of CVCRMs, all the way from extended security release, all the way to latest stable. So next, what I want to do is I want to show you some of the capabilities of Webform CVCRM, to short a little movie, about three minutes, and then after that we'll go into a detailed. That's just a little video that I put together for FOSDEM Europe last year, I think it was last year. I think it's a bit of a blur the last couple of years, but I kept it. So now what I want to do is go through it a little bit slower, step by step, to make a volunteer application form, and I'm going to do this on one of our projects. This is Action Canada for Sexual Health and Rights, and they're based out of Ottawa, but they serve all of Canada. And what we're going to do is we're going to make a volunteer application. As soon as you've made your Webform, entitled Apply to Volunteer with Action Canada, you're going to hit the CVCRM tab right away. And after you do that, you're going to check the box on the left top and say, enable processing. And now all the fields in your CVCRM, all the core entities, and all the custom fields you've created are instantly available to you here. You just need to now pick and choose. It's like a buffet. You need to decide what you want to select. So in this case, we're going to put first and last name on the form. We're also going to enable tags. We're going to make the tags a user select so that a volunteer can indicate what they are interested in to volunteer for. We're going to also add an address to the form. We're going to ask for city postal codes, state provinces, just to see if we're in Canada that are located because that's going to help us with scheduling and time zones. We are also going to ask for a phone number and we're going to store that as their main phone location. You can make it home and work and whatnot. But these days, I think that's a little outdated. These days, I just want to know what your main number is because I don't really care what number it is if it's in your pocket or back at home. We're going to store it as primary because you might have more phone numbers, but this is the one that we want to have as primary. And we're going to capture an email address and we'll do the same thing. We'll call it main and primary. On the left side, we're also going to use a membership. We're going to assign a membership to this group of volunteers and why a membership? Because that's a nice little useful tool to help us with some Drupal permissions a little bit later on here. It's going to be an access line membership. That's their volunteer program. We created a membership type in CVCRM so we can select it here because all of that, even what you configure is available here. We're going to set the status to pending because we're not just going to approve anyone who's going to submit this form. We're going to ask them for a letter and see if they're suitable to do this kind of work. I'm also going to log in activity because we want to capture the moment they signed up. That can go in the database too. So this activity is going to be of type volunteer sign up. The activity participant is the volunteer, which is that first contact that we added. And all the way at the bottom, you see a little check box. I checked attachment one because we're going to ask for a letter. We're going to ask for something to upload. And in this very simple demo, it's just a letter. But if you're doing work with children or summer camps or whatnot, you might have a variety of documents that you would like to see like police information checks and other documentation about qualification. And then you hit save. And literally that puts all of these CRM fields on your web form. And all I've done here is I've added a few flex boxes and I drag them in the right order. That's all I've done. I changed a few titles. I think, yes, I did. I changed a few titles, but that's all I did. So that will take you about five minutes to make. And I kid you not, my teenagers helped me do some of this work for some of our clients because it's that easy. Let's look at the form we just created. This is what the top of the screen looks like. There's our volunteer. We organize it in flex boxes. And I'm going to fill it out. So first name Karen, last name G pronouns. That's actually a custom field. So this year doesn't have a field for pronouns, but we can make it obviously. And it's a good organization to make that field for. Email address, we're going to fill that out. We're going to put a phone number. That is not my actual number. You can try it, but it's not. I know this is being recorded. That email address does exist, but that's okay. Calgary, Alberta, T3H4Y4. And these are my tags. So I've only made three of the tags they have available and I'm volunteering for the Access Line project. The last section is that activity where we're going to upload that attachment. And this is what we uploaded. This is my volunteer letter. Why do I think this is important work? Why do I want to contribute? That last little field, that check box at the bottom, send me a copy. That's the only web form native field on this entire form. That's just a check box that then links into the native web form email handlers to say send an email to someone in the organization and CC whatever we filled out on the first page here on the email field. Submit application. Okay, let's go see where all the data landed. So here we have the name I filled out. We have the tag, the Access Line volunteer. This contact is immediately stored in the right place in your database with the email address, the phone number, that fake phone number, home address, what else do we have? We have that membership. See, here's that membership. It's an Access Line membership. I did this on April 6th, because my slides were due April 8th. So I've been a member since April 6th and status is pending, right? Because why is that important? Because pending doesn't give you anything. You're just pending. You're to be evaluated. And when and if we decide that you are a current member, that you are an approved volunteer, what we can use is a simple module called CV member role sync. Super powerful because of what it lets you do is it lets you say if a member, like if a Drupal user who logs in has a membership of a certain type and of a certain status, then give them this Drupal role. And you all know what you can do with that. That gives them access to more web forms and maybe views and other things that they should be seeing, like their calendars. So that's part of the approval process. I often use membership for this purpose. The activity is also generated. The volunteer sign up activity that was April 6th at 726 p.m. The red one you see here is red because it's a scheduled. The membership is still pending. It's actually telling us that this person needs a little bit of ad hoc work to get approved. And yeah, there's a truckload of activities on the left here, because I moved them from Razor's Edge about a month earlier, maybe a few months earlier, but that's just because it was the same user. If I drill down further into the activities, I can open that file attachment that we uploaded on the Drupal site. It's right there in your CVSRM. So administrators having access to the backend, they can just evaluate everything they need to do. They don't need to go back to the web form site if they don't want to. Okay, so let's extend this. Web forms can be used to push data into your CRM. Let's pull data out of your CRM. To get a Drupal view with CVSRM data, you need to install CVSRM entity module. And CVSRM entity module is maintained by square. And what that lets you do is create things like this. This is a view. And this is a view of CVSRM data. So this looks like any view. The only difference is that under the fields, you see CVSRM fields that are being pulled in from the CVSRM database, which those tables may reside in your Drupal database, but they don't have to be. That could be a completely separate database. You can separate that as far as you want. That, those fields are being pulled in. And you can see it lines up. There's names, first name, last name. I'm hitting sort name. I don't know why, but I think I decided to do first name, last name instead. And we're pulling in some other information. If I hit the my calendar button, I get this, something like this. So a CVSRM administrator has scheduled four telephone shifts for me. I'm gonna be staffing the access line between two and four PM in the first week of May. Okay, I see that on my calendar, because I'm logged in. I have that membership. I have the permissions to see my calendar. I can filter it down to whatever is assigned to me. This is what I'm seeing. We did quite a bit of work on full calendar view module and integrating that with CVSRM entity. And for some reason, I'm a co-maintainer of full calendar view module as well. In the process, I don't know how that happened, but these things happen. It has been fun to work on that project as well, because it really helps us to visualize the CVSRM data. If we look at the backend, how does that work? How is this just my calendar? We're pulling in the activities, the shifts. On the right-hand side, you can see relationships. So a CVSRM activity is assigned to someone. We can then relate that someone, that contact to the Drupal user, and then we can use a contextual filter for Drupal user ID. So that way, everybody who logs in just sees their calendar, right? It's a very powerful concept. I absolutely love contextual filters and use them almost all the time. And what kind of functionality can you build on top of this? We can click that Thursday shift. Let's say, an administrator called me, a coordinator said, Karen, can you please go until five o'clock on May 5th? Because we have somebody that can't make it until later. You can make it such that you click on it, you can hit update shift, you can get some button to go. And just like Webform, CVSRM module, can help you push new data into your CVSRM. It can also help extract data from your CVSRM. So Webform, CVSRM here knows about that activity. It knows it's on May 5th. It knows it's at two o'clock and it was 120 minutes. And it knows it's assigned to me. So the only thing I changed here was, I set it to 180 minutes, because I can do three hours instead of. And saving that indeed just extended my session, I'm gonna be on the call desk until five o'clock that afternoon. So very powerful. You can give your volunteers, for instance, or your membership, you can make a membership portal. You can make any portal you want for any group of your constituents and let them do a lot of self-serve options. They don't have access to your CVSRM, but they can manipulate and push little bits of their own data into CVSRM. If I have administrator privileges and I do, I can go in the backend and if I click through, I can see that that May 5th activity indeed has, you know, if we're seeing it on the calendar, that data really is coming from there. It's a life connection. Okay, when I talked to Jake, he said you must mention sharing web forms. So I'm mentioning sharing web forms and I actually have a good example of that as well. This is also Action Canada for Sexual Health and Rights because they actually do a web form share. This is their donate page and it's a bit longer, so I just put it side by side but visualize the right hand side at the bottom here. It has everything you want in a donate page. It has buttons, it has other options. You can do one time, you can do monthlies, you can do in honor, memory, blah, blah, blah. This is a web form CVSRM module. This one accepts payments for credit card and direct debit. If it's Canadian currency, we pop up a Canadian check image. If it's US currency, we'll pop up a US check image to help users figure out what numbers to use. This is a share for security reasons and separation reasons. So Action Canada actually has two Drupal 9 sites with us. They have one front end site, they're www and they have a secure site. So the secure site just does the web form in the views and the CVSRM and the www site, which is what we're seeing on the left, is actually embedding web forms from the secure site. So it's a nice little separation of your data and of course there's an animated gift for it and there's a movie for it but I'll let you Google that one yourself. A few more examples I wanted to show you. This is the Alberta Widewater Association. They sell memberships across the province of Alberta to about 40 different clubs. So we have one web form that handles all of that and every single club has its own financial type and every single club has its own image and every single club has its own title. You can use one web form and use all the leverage from web form to make that form specific to that particular club. Conditionals, lots of conditionals, but they work great. You can do waivers. You can put a view in a web form. How cool is that? Like that is ridiculously awesome because you don't need, everything is integrated. Web form, CVSRAM, and web form itself. The cool thing is once you get your CVSRAM field onto your web form, you can do anything you want with a web form field, now with your CVSRAM field. We can do signatures for waivers. This is an example of a newsletter sign up and of course once you do this it goes into your CVSRAM. You know everything about it, right? So you can use tokens, like there it says contact first name. We know your name. We can say thank you, dear John, thank you for donating $50 last Thursday at 5.03 PM. We know everything, right? Because it's all coming from the same database. It's not just some third party email application. This was last year, vaccinations became a thing and I got a request from someone in the British version island. They needed vaccination scheduling and how would we do that? Oh, okay. Well, let me think about it. So in CVSRAM we created activities. They became appointments on the full calendar view at the bottom there and then you could click on one and it would open a web form that would pull in that activity information and because it's a web form we can use computed elements. So we use computed elements, computed twig to calculate the second vaccination date. You could do that because you now have web form, right? You can manipulate and do so much with your CVSRAM fields because you have all the tools that web form has available to you. And then we also changed the activity type. So therefore the booked appointments actually have slightly different color and that way you can make a nice looking calendar where it's clear. Then you use views conditional that if you click on one of a certain type then you just pop up something that says, sorry, appointment full, right? You can do lots of things because you can leverage all the views tools as well. Administrators, this is Lelouchly Canada, they love web form CVSRAM because it doesn't take them much time to just pop in a little, are you interested in volunteering form in the right hand side here? And I had Nikki on the phone when I was actually making these slides and she's like, well, tell them I absolutely love web form. So I said, okay, I'll tell them that you absolutely love web form. It empowers administrators, right? It really lets them take control over their own forms and the kind of data that they are collecting. So with talking about empowering with great power comes great responsibility. So when we decided to port the web form CVSRAM module from Drupal 7 to Drupal 9, we started with functional JavaScript testing right from the start to build that in because a lot of functionality resides in these forms and we want to protect that. Shout out to Matt. Matt Glamon helped me set this up. He's an absolute wizard, introduced me to GitHub Action, showed me how to use it, got me excited about it and we are constantly running and setting up maybe five, six times a day we'll set up five Drupal 9 combinations with CVSRAM sites just to see. We're doing testing even on individual corpiers in CVSRAM even on Dev in web form module itself. We found one bug in web form module itself because our tests started failing. It couldn't send out a little email anymore after doing a form submission and it turned out it was a CK editor edit in web form module itself. So of course Jake was happy we notified him before anyone else figured it out and it was fixed of course like two hours later because that's about the time he takes to do something. So we have a lot of coverage, we have a lot of tests and these tests are fun to write. If you're a site builder you can write these tests because these tests are literally click this, wait for this text then click that then go there. It literally is you're telling the browser what to do when it's testing it. So it's the ideal test for a functionality like this. We have 55 tests over 1,300 assertions at the moment. So one assertion could be is the financial type correct? Is the amount correct? Did the recurring contribution set up to monthly? Is that correct? Did we get a transaction ID from Stripe? Did we have live tests in here with Stripe and IATS payments? So if anything breaks like we want to know like now and not tomorrow or hear it from one of our clients. Get involved. It's an open source project. Try CIB-SIRAM, try web form CIB-SIRAM. Tell me what you think about it. Check us out on the Drupal project page and issue queue the code repo lives on github.com explained to you in a second why that has to be there. Check us out on CIB-SIRAM stack exchange or look for support on MatterMost. Automated testing, GitLab to GitHub. Okay, so on the Drupal.org pages you'll find a web form CIB-SIRAM GitLab repository. Just like every project has one and Drupal does not install in the CI, does not install PHP international extension and CIB-SIRAM requires it. So I cannot run these tests on the Drupal infrastructure and I'm still talking to the guys that are in charge of that to see if maybe we can make that work. What we can, so what we've done is to be inclusive and open, what we've done is we created a GitLab to GitHub bridge. So you can submit a merge request in our Drupal project and what it will do is it will actually spin up a GitHub somewhere else and run all the tests against it because there we have control over the environment. Shout out today for helping me with this work. One of my team members, it's the Civi Carrot, we call it. It stands for CIB-SIRAM Automated Runner, running automated tests. We have to figure out what to do with that last O, but it's fun because you do get feedback whether or not you're MR. So whether you wanna work with us on the GitHub repo directly or whether you wanna use GitLab, you can do either and we'll know what your PR did if it broke any one of our 55 tests. Drupal 10 readiness, absolutely. Okay, this is hot off the press just three days ago. I had to get them to swap in a slide. Just three days ago we managed to install Civi-SIRAM on Drupal 10, woohoo. And it's not fully functional, but hey, we got to the status page and it doesn't have anything red and it, well, there's actually a little bit of red at the bottom but I cropped it out. That's Drupal 10 readiness and this morning we actually spun up a site on our own Docker infrastructure and that I think as of about an hour ago we figured out what was wrong and why it wasn't working at first. But we're on it, we wanna be ready for that. Unfortunately, because PHP International Extension is required for Civi-SIRAM, we're not gonna show up in Gabor's fancy search tool because it's just gonna say composer cannot install. It's like aw, so talking to him too to see if he can maybe do something. Because it is cool, we are gonna be ready though regardless of what it says there, absolutely. Okay, so our project page is webform-civi-sIRAM.io. I have some cards out there on the table if you want to take some, it has the URL on there. And what I'd like to do is I'd like to invite all of you to a DrupalCon ad hoc meetup. If you're interested, go to webform-civi-sIRAM.io slash DrupalCon. It will be Friday, May 20th at 10 a.m. Calgary time and shout out to Melanie, one of my team members for saying that's what I would like. She's been a client with us for 10 years. She's with the Arctic Institute of North America at the University of Calgary and has been helping me out part-time with some project because she's an expert side builder. She's been doing this for 10 years. So she said we should give everyone an opportunity to join later because the conference will be busy and you may not get to see everything or ask everyone their questions. So if you'd like to meet up, go to that URL, sign yourself up, that link is working and hopefully we'll see you on May 20th. You'll get credentials and meeting location when you register. And of course that's a webform-civi-sIRAM, right? It is. So thank you very much. We have a few minutes for questions if you have anything urgent, otherwise feel free to find me later or we'll see you at the ad hoc meeting.