Hi everyone. Welcome to our webinar today. Today, our webinar is about Sitecore XM cloud forms, a year of innovation, and usually it's Kamruz and Mike, who've been doing forms for as long as I've known them, going back to 2013 but unfortunately, Mike's not feeling well today, so he won't be joining. So Kamruz is going to have to do the whole thing. So take it away.

Thanks. Akshay. Actually, just mentioned he's feeling little unwell, so he won't be able to join. Little bit weird for me, because I've been doing a lot of these forms, web forms and forms presentations with Mike for years, and we had actually presented on the release of XM Cloud forms just over a year ago, and was speaking with Mike, and it's like, hey, there's been all these changes over this past Year, and be good to see what's been released. We had last year when we went through this, we read, obviously, made some of our own suggestions, if you like, what would be nice to see getting released. So yeah, through and see what's been coming out.

Yeah, so I'm Kamruz Jaman. Some of you may remember me as jammykam, and I'm a 13 times Sitecore MVP coaching. Mike is not able to join today, but hopefully you'll know who he is as well. I'll just run through a very, very quick history. I know we did run through this last year when we presented, there is a link to the previous webinar in the deck. In a few minutes, just a brief overview as to forms and why forms matter. Then we'll dive straight into the latest features and just I'll just give you a quick little demo and show you, show you some of these features and how they how they work.

So brief history on Sitecore and forms way back in 2009 Sitecore released a module called Web Forms for marketers, which was very innovative, even for that time, and it allowed content authors and marketers to be able to go in dynamically create the forms, types of fields or data they wanted, that they wanted to create, types of validation they wanted to add. And there were a bunch of out of the box connectors save actions that could then push that data into various systems. And the module was very configurable and customizable that allow, and it allowed you to go ahead and create your own Save action, submit actions, to push it into various systems. And back then, in 2014 they finally added web for inbc support as the Sitecore community and the product itself move towards being supported by asp.net MVC, as opposed to their web forms, asp.net web forms that the previous versions were built on top of. Then in 2017, they released experience forms with a release of Sitecore 9.0, this was MVC only, and it was a modern version of web forms for marketers. It was a lot cleaner, was a lot more easier to work with from a development perspective and even from a content author and perspective, there was a it was a cleaner interface, a bit more drag and drop type of scenario, 2018 sort of release of JSs or headless services as we know it now. And with that, of course, there was an initial version of the forms, support for forms, although more, I'd say Fuller, support, was released in 2019 we also did see an interim release of something called embeddable forms framework in 2022 this. This doesn't seem to have gotten a lot of traction or noise over this, but it was a way of being able to create forms within, within experience, forms within XM XP, and then being able to embed those forms into anywhere like any other, whether it's a Sitecore system or non Sitecore solution. You could drop those forms in, but by just dropping in a snippet, a JavaScript snippet. You're probably used to doing that kind of thing with, like HubSpot forms or Marketo forms in the past. So yeah. A little bit surprised. I didn't see a little bit more love on that one, because that was a really, really great solution.

But now fast forward to 2020. Four with the advent of XM cloud, we, of course, needed a solution for to support this new headless and composable solution, outcomes, release of XM cloud forms, and we've presented on this last year. I think I've got a presentation in the I got a link in the in the in an upcoming slide.

But as I mentioned, the reason the forms matter is it allows content authors, marketers to be able to go and create these forms themselves without requiring developer support. They can easily update, change, uh, allow the almost allowing them to AB test as they're seeing things work and not work. They can just go and experiment to a certain degree, and just be able to put in forms on various pages for, you know, webinars, donations, whatever you like. They can, they can. They can put those forms on themselves without needing developers to go in and code those forms up, deploy it, that entire testing Sitecore just gets reduced to just being essentially content.

As I mentioned, we did a webinar just over a year ago. You can use a QR code in the bottom here, or use this URL to go catch that video if you haven't seen it, where we did a deep dive into that initial release of ExIm cloud forms and all the features and how it differed from previous releases. And mentioned last, last time out that these are composable forms. Their SAS and cloud hosted. It works. It works with headless only, and what we deem low code, no code solution. We did also mention that because it's a SAS solution, it's cloud hosted. It you get all of the access. You get access to all of the features seamlessly. There's no Robert Hogg is asking if it works on the 10 point 4.1 which literally just got released this morning. But you don't have to do anything with XM cloud forms. If you're on XM cloud, these forms and these features, you just get them. There's no need to do any upgrades or updates. The forms. Just as a quick recap, it does accent platforms features, a very modern builder, as you'd expect in this day and age. It's drag and drop. You get all the visual editing features. There's lots of nice device previews, so you can see what the form will look like on a desktop versus a mobile versus a tablet, for example, they can be easily embedded within your site and just dropped in as a component. I'll show you a quick demo of that again, but we did do that last year. And being composable, the data is sent to third parties via web hooks, the composer. This solution itself does not hold on to that data, which, of course, gives you some gives you some peace of mind with PII data, especially. And of course, we've removed this reliance on Sitecore experience forms, and we fall into this composable, composable product line.

So let's see what's new we it's been over over a year since, since the release. And as we know, innovation doesn't stop and in in the world of composable, headless and SAS and cloud. A lot of these features just get released, and we don't, unlike these previous releases of Sitecore on prem, the XM XP versions, that usually be a big release. And then, you know, there's a whole heap of noise around, Hey, these are all the things that have got released the in the cloud world, these features are just happening and getting released all the time. So sometimes it's almost a little bit easy to miss them, because we don't have that big kind of release notice, if you like. So straight in the form fields, there's been one extra addition to the forms, which is a file upload, since, since this initial release. Doesn't sound like a lot, but actually, the fields that they had initially released with, I felt were pretty comprehensive, and they captured the vast majority of the scenarios that you would need file upload was a made sense. It was one that you know is useful for capturing data, capturing forms. Maybe have a job application form, or even you just wanted to gather, maybe have a support type of form where you just wanted to gather additional information. From users. But now you can add that form upload field on there. You can get attached files to form responses. For example, it does allow you to restrict the types of file formats that it would accept. So if you just want PDFs, for example, or JPEGs or PNGs, you can do that. You can restrict the number of files so it could be, you know, between one and five, for example, that you'd maximize, you'd allow them to upload. And you can also restrict the size of the files. Of course, you don't want something uploading huge zip files of data and just bombarding your system and your solution. And since the release of that file upload field, they did add support for it within the conditional logic. I'll go into that in a second, because that was something that got added. Let's just go straight into actually, yeah, conditional logic. There goes. So this was something that was added since its initial release, you can now go in and carry out various actions and forms on form fields based on other form fields. So classic one would be where you know you might have a radio list of options, and you know you may have If the user selects other, then show them a text field that they can actually type field into, like, where did you hear about us? For example, right? Might have Google LinkedIn, social media, advertising and newspaper, other. And then, you know, if they select other, you may want to show them a text box which will allow them to enter in, enter in some data. You could also do things like make make certain fields conditional based on another field. So again, like with it with this other field, if they selected other you would want to make that text box mandatory if they had selected that option. And you can use various combinations of that makes the forms a lot more dynamic, makes it flow a lot better. You're not, you know, bombarding them with lots of fields that may or may not be necessary based on, you know, what the options they've selected. And of course, that's going to overall help with the engagement and engagement rates of those forms and hopefully get more submissions global styling. So previously within each form, you could go and set some styling which would apply to that form. The only way of then reapplying that styling to other forms would be to essentially duplicate that form, and that would then copy the styling across. But that's not great if you just wanted to start from a brand new and clean form. So styles is a new one. You can go in and create multiple groups of styles and then update those styling to match whatever your brand assets would be. There's a couple of ways of doing it, and I'll show you a demo of that. Again. 

You can use a visual builder to make those changes, or there is a CSS editor for those who want a bit more control, and, you know, a bit more access to or to fully style exactly how they want. And you can, you know, get a bit creative with the CSS and very easy to apply to the start to the forms. I can, I'll show you this, but it's, it is just single click to create your form and then apply a predefined set of styles to it. And of course, that's going to help with your brand consistency across your across the multiple forms, there have also been another, a number of other form improvements. In general, on the initial release, we had mentioned that it was a bit weird that you could create a form, you could activate a form, or once it was active, you could no longer edit a form, which is a problem, because if you've made a mistake, you wanted to add another field. You wanted to remove a field because, you know, it was leading to poor engagement, for example, previously it meant you'd have to duplicate that field and create a brand new one. Now you can go in and you can edit any field that any forms that are already active.

You can also archive forms, which is very neat, just to be able to you know no longer uses this, this form anymore. It's done its job. Maybe it was for a webinar. The webinars already occurred. You can just archive that form, and it gets it out of your the list, essentially. So just helps clean, clean it up. You can also create site specific forms so you can restrict which sites that those forms will be visible on and available as a component. I'll show you a quick demo of that. But again, just clean. It up from the content author's perspective, and they're not bombarded with if you've got 50 forms, which can happen very easily, you're not bombarded with a huge list of lots of lots of forms. They've also added this new summary pane, so at the very end of a form, you can add this summary page that will just show the users, hey, this is a, this is the data that you've completed. Are you sure you know, is it correct if you want to submit it? Maybe those, again, those types of, those job application, types of forms that would be great for or maybe as some sort of a survey that you're creating, and you just want to gather that data. So again, you can just helps, helps us, those users, review the data and their that they're inputting before they submit it into the system. And there's also been some great advancements with the analytics.

So you can see that right here. There's a few basic ones like views and direction and submissions. There is an entire analytics dashboard around this as well. I'll show you kind of a basic one of this. I don't have any data in there, fortunately, but you'll get the idea as to the kind of analytics that's being collected, and will really help to see how your forms are performing and help you to adjust and refine those over time, Media Library integration has been added, so you can now pretty seamlessly, just add images from the site called Media Library. This was this is all the other integrations that you see here were available, but the Media Library one was missing. The only way you were able to do that previously was to add in, add in via direct link. So it's nice to be able to pick directly from the media library itself.

This was pretty neat. And I think this is something that was available in a similar kind of way in the previous Sitecore. Experience forms and kind of makes sense. So two changes here, one is in the Select and the multi list fields down here you can see in the screenshot, you can now enable custom values, which allows you to set a value for the display text and a different length value and a different value for what actually gets submitted. So if you think of country codes, for example. So with United you might show the United Kingdom, but the value you actually submit is UK. Or you might show United States, but the value actually submit is us. So this allows you to set those separately. You know, one for human one For human readability, one for maybe a machine readability that maps to some sort of code in the background. Maybe it's a products, right? Maybe it's a list of products that you can select and it maps to a product code in the background. You can also use external data sources. So you can actually point this to a URL which would return some JSON in a very particular format. So there needs to be this value label kind of format, and you could then use that to populate those, those, those multi select types of fields.

Again, useful if you already have data available. You want data consistency, you don't want to repeatedly keep entering these values. So maybe it is a list of products. It's list of countries. Here's a list of other departments within your organization. You can obviously just go ahead and code that up yourself, and just give it a the URL that this this data can get to, doesn't have to be like purely static JSON. You can you decide how you decide the logic and where it gets that data from. And finally, there's an option to pre fill fields with a URL parameter. So maybe, again, it's, you know, you have a product page, and you know, you click a click a button so somebody can get in contact with you about a particular product. You could just pre fill. You can just pass that product itself along in a URL parameter, and it will just pick it up within the form. And then you can submit that in a hidden field, for example. It's also good, great to see that they have support for multi environment setups. Now, previously, one of the annoying things was you to create a form on a particular environment, and then you'd have to recreate the form on the next environment, or from scratch.

So now you can actually share both templates. So we mentioned that we did go through that in the last time, where, in the previous webinar, where you can create a form, you can save it as a template. Eight, which allows you to repeatedly reuse that as a starting point for the next forms. You can share those templates across environments in your organization, and you can also now copy individual forms themselves to other environments within your ex and cloud instance. So this is great just to be able to create a form, set up, a styling, see what it all looks like in a dev staging environment, and then once you're happy with those, it's been reviewed by the business, you've got approval for that campaign. For example, you can then just use the inbuilt copy function to move that across to a production environment and make that life so really, really great to see that this was a big one, and I didn't it was completely out of the blue for me. It wasn't something that I really thought would be in here. But it's really, really great to see that they have an accessibility compliance tool now built in two forms. It's actually very, very fully featured. I'll just bring across the release notes for this, just so that you can see it.

Lots of stuff in here, right? So checking things like keyboard navigation, screen reader compatibility, form labels, error handling, Aria labels and the response design. Really, really great to see. Really, really like the changes here. Accessibility is a, is a, you know, we should, we should all just build it, accessibility into everything we do. So this is really, really, I really like this feature, as you can tell, it picks up on a lot of different capabilities, and you don't, you don't have to run anything. It will just, it just happens as you go along. And it will pick everything up as you add fields, as you update fields, as you move forms around. And finally, there again, this is there's not much ready to do here, but there is a new JSs wrapper for forms. They added Angular support for XM cloud a few releases back, and as part of that, they refactored the forms control, and then they kind of ported that across and to support it with next js as well. So then you have a singular kind of component library across the frameworks, and they're not dealing with individual ones, which also allowed them to clean up how the forms are rendered, essentially on the front end, there is we also had a webinar a few months back on site course support XM cloud, Support for.net Core, or headless support for.net core and how Sitecore has been has updated that it's becoming a it's a first class citizen now it's a fully featured rendering framework. So if.net core or C sharp is your language of choice, there is form support coming for this soon. So again, we'd expect that to be at future parity as well.

So let's dive into a quick little demo and just to go over some of these new features that will make a lot more sense. So straight off the bat, so they've, they've been making a lot of changes just across the entire XM cloud feature set. We so forms are now actually within this section, that launch pad kind of thing has mostly disappeared, but if you want to get into forms, it's over here. Plug me out. And as you can see, so the dashboard mostly looks the same, but we've got a few additional options, like styles up here. And this is straight off the bat. This is that archived feature that I talked about. So again, this just helps clean things up archiving as simple as going in and archiving from this option here. Along with that, of course, I did mention the copy to other environments. Then you can go in and select multiple environments that you may wish to copy that across to. 

Very clean, very quick, very easy, right?

Not having to manage. Need to recreate all of those as well. So along with that as well, we can open a form that may already be active, and I can actually edit those forms as well. Just obviously been making sure you've read the notice that any changes that you make will be visible. So once the form is active, is kind of it's just available. It's visible. And as you're making those changes, they're going to just reflect into production. So just be aware of that, of that, but it's great to be able to now edit those forms. I can now go and, example, if I needed to, I can go in and add additional text in wherever I need that. Why don't I go and add in an image. So with that, I'd mentioned media library support. So this, this is pulling out from the Sitecore media library, as opposed to the other options, which were the direct links and things. I do have an issue on my local instance. Just so you're aware that the icons are not showing up, but the Media Library integration is right here. We still have all of those direct links giffys. Why did anyone want to use a Giffy these days and a corporate one, but just in case you did, all of those other features are all still available. And of course, you can always pick something up from a local file, as you had previously, and just drop that in and it's it will just continue to work as it had done. All of those nice little features, like being able to resize the images and things like that, just push those changes. Just go back into this form. Since I'm here, I had also mentioned, you mentioned the preview features. Obviously, with this, we demoed this last year as well. But you This is still quite neat that you can actually preview in the different versions. There is also an edit feature where you can actually edit within, within a mobile view as well. So again, both of those options are really neat, just to be able to see how those forms are going to be rendering. Largely, they're about there or there abouts conditional logic, something new that was added since the initial release. You can go in and anyone who's used the Sitecore Rules Editor in previous versions of Sitecore XM, XP, this will be very, very familiar, but I can select a field, and then I can based on the field value. It contains something, for example, and then I can carry out an action, and that action might be highly field, show a field, make something required or make something optional. So gives you that nice way of show you, for example, the job role equal to this is a multi select list, or maybe region is equal to UK. And then here, for example, you might show a postcode field versus a versus if it was the US, you might show a, you might show a zip code field, for example. And each of those fields might have different validation, right? They will have different validation. A zip code is a five digit numeric value, whereas a postcode is usually an alphanumeric mix in a specific format. So this will allow you to add those types of show and hide fields and have different validation on different field. Tests, for example, you can, at the same time, also make certain fields required or not required based on based on the selections. For example, within the setting section, go back to here, say that it's fine.

You can select which sites form is visible within here. I've got three sites set up here, and then based on those three sites, I can just make it available on specific sites only, styling, I'll show you this. Styles editor in a second. But I can essentially go in and select the style, apply that style. Not much of a styling on this one. But this will, this will then magic. This will then apply the styling based on, based on those, whatever you've applied there. Let's remove those four styling so this is what I was mentioning. So they got two ways of editing, global styles I can come into here, and this gives me a visual editor for all of styling. I can select different colors, and you can kind of get a, get a a preview of what those what? That's what the styling changes is going to look like, lots of different options for lots of different parts of the site, different styles. So you can change those as you want. You can apply those. And then this gives you, almost like a brand kit, right, a predefined set of form styles.

I can also go in and edit those within a styles builder, this allows me full control over every single element of of the CSS. You probably want to figure out what styling is applied where. So obviously, just use the just use your dev tools, right and figure out which bits of styling that you can you can come up, you can piggyback off to apply the styling within, within the CSS editor, it's got a bunch in there, obviously, that you can use and you can build on top of. But you may want to add, add a few of your own. For example, I had to go and add these two at the bottom. One was for I'll show you that actually, that limit counter, I know this was raised in one of our previous webinars where, you know, how do I get rid of this? Well, actually, you can just go in and apply some styling to remove it, essentially. So uh, web hooks largely remain the same. Show you so a couple more things in here, these, as I showed you previously, we can say as a template. And again, the neat thing is, I can kind of decide where I want to save this. I can either save this in my current environment, or I can actually save it as a template across the organization, so it then becomes available in every organ, every every environment across my and every that I may have said across my organization. Great for again, great for those multi site implementations, multi org, where you may have different regional ones, but you know, shared kind of templates, sales people having to recreate those designs every single time, and summary forms as well. This was the other one that says new feature, so you get this new option here just to you can just click Add summary, and it will then add in adding the summary field, and you'll get a preview of it, preview of it here. And your app automatically changes to where you notice. It changes to review button, and it automatically adds in the submit button in here as well.

Accessibility. Okay, so this is an accessibility tool I had mentioned. It's complaining here about something, okay, it's missing an alt text from an image. Click on that, yeah, missing an alt text for this. And you can see that has now disappeared. If I remove complaining, these are the errors that the action button is missing. Those back in so it works hand in hand with those previous ones where we had added, I'll just make sure it's a review back in it works hand in hand with the errors. Error checks, but yeah, labels, if a certain labels missing, for example, that and you can see straight away, it's complaining. It's not I'm not even having to save. Form. It's just coming straight up that you know you need to add a label. You should add a label to This Just In. Again, I'll just show you that within the settings we do have websites that the forms are available on, you can edit those from here. Also, it's just this one. Yeah, so this one's available on this style guide site with the other two, one was all sites, and one was only available on this demo site. So if I head on over to my site and bring this up in page editor, I'm I created an empty page here. There's nothing, nothing really clever here. It's just a purely empty page on the like the base demo site. I haven't even done anything here, and within this form section, you can see I've got the two forms, my request, a demo and this amazing starter kit site that I put in, gonna save that. The form is now here. It's ready. I can, of course, just go in and add in whatever other components that I may want into the page. I'm to delete that, publish that just going to quickly on this so that you can see the form in action. 

There's a form, just finance info, obviously, we'll get our validation for things we haven't entered. Here's my review page, review I can actually go back. It has remembered everything that I had little bit weird with the these reviews. I think this may be a work in progress. I need to get removed, or maybe because I'm in the preview mode, but I can then go ahead and submit that. Form has been submitted. I've got a like, last time I'm using this webhook, dot site for the testing. See, I just had that form data get submitted. Pretty clean, pretty easy, very, very simple to hook all of that up. I can let me pick my forms again. Josh, just show you that I have, so I'm going to remove, make this not available on the site that I just showed you say that back to my head. It's and now within my form section, the only form I have available is that one form, because the others, the others are not available in this in this particular instance, so pretty clean, I think it's going to clean up the Components View really, well and really keep on point for you know, specific sites, for specific forms, for specific sites and specific instances, and it will allow you, you know, the entire kind of development workflow as you'd expect. So this, this is a slide from last year we had this at the very end of our presentation. So what would we have liked to have seen? Multilingual support still is there. You have to create individual forms for individual languages and then just drop those in as you need. But conditional logic has been added. We've got some Oh, announced form analytics. I did want to show you that, because that was pretty neat as well. So we'll just go back here to my instance. So within, within your XM cloud instance, within the in the analytics, this will give you bear in mind, this is a clean instance of Sitecore XM cloud, so I don't really have any analytics to show you, but you'll get. The idea from the dashboard, but within the analytics dashboard, the analytics dashboard has just been getting really, really great over the past couple of years and the past couple of few months. But there's a form section in here, aside from just the sites, you can select an individual form, or select, you know, multiple forms allow you to kind of look at forms on specific sites. Let's go and set those up. You'll get analytics like, you know, how many times a form has been viewed the interaction with it, interaction rates, submissions, abandonment rates, so, and you'll get some last nice graph data. This was completely clean analytics dashboard. Unfortunately, next time, I'll fill this up a little bit with some fake submissions. But really great to see this, this level of analytics in there, it's going to really help you refine and tweak those forms over time to see what's working. What's not working. Are we getting? Are we gathering too much information? Are we making too many fields mandatory?

Is submission rates? Rates going up or down as we make those changes? It's still really nice to see some custom fields and extensions. We over us using it. We haven't really needed it so far. So I'm not entirely sure what we would need here. But you know, there's always hooks that you could you could put in place, and maybe a JS embed code. I know somebody is asking about XM XP and so would be nice if you have both environments running side by side to be able to drop those in there. That's currently not available yet, unfortunately. And then we also had this wish list from a year ago. So great to see that some of these things have been have been checked off and a bit more. So, you know, being able to edit the forms once they were activated, archiving old forms and migrating forms across environments. I'd still like to see this, hiding the form, or the form and the review page, and actually being able to hide that once a form has been submitted, it'll just make it a lot more cleaner and lot more obvious that the form is has been submitted, being able to manage forms using APIs. Yeah, it's, again, we haven't really had the need for this, but maybe, maybe not. That's, that's a far off wish list. And we've mentioned AI generated forms. AI is even more the rage than it was over a year ago. So I know Sitecore is doing a lot of work with AI these days, and there's a lot more to come with stream, for example. So hey, maybe we'll have aI generated forms and self updating forms, maybe, right? Maybe the forms will just adjust themselves as they see certain things that we don't. That was it from me? I know we've got a few questions. 

Yeah, so we got a couple of questions. The first one is where the files saved? And can we control where the files get saved? Yeah, the files don't get saved anywhere, so to speak. They just get pushed through as a payload on your on the web hooks. So you will pick it up on your web hook, and then you decide on the other end of that what you want to do with that file. So if you could push it into Sitecore connect, for example, wakaro Zapier, whatever integration platform you're using, and then from there, you could use a connector to push it into maybe a SharePoint site dynamics against the contact. For example, you can store it there, yeah, this one's kind of related. Is there a way to view submitted form data in ExIm cloud along with the links to the files uploaded? Yeah? No, you can see the analytics for the submissions, but they don't store the data of the submissions. Again, you'd want to push that data into some other system, right? So it would be, you know, whatever your CRM is, or something like that. 

And then finally, does it work with JSs on XP? No, it's XM cloud only. This is not available on prem, as I mentioned at the very beginning. Like you get a lot of changes, right? It's rapid evolution with these cloud based systems. So just like pages and all of the multi site capabilities within XM cloud are not available on XM XP, unfortunately, XM cloud forms is restricted to XM cloud only cool. That's all the questions that we have.

Great. Thank you everyone. If you have any questions, then obviously, just feel free to email LinkedIn, Slack. I don't go on Twitter very often, but if you want to get hold of me there, you can also just get hold of me there as well. It's fine. Thanks guys.