Understanding Forms in Sitecore XM Cloud

Hello everyone!! In this blog we are going to see how we can create Forms in XM Cloud using Forms feature recently introduced. we will create an webhook submit action to show the posted data.

We will create a sample form in XM Cloud. Follow the screenshot below as most of the things will be. I will add the notes whereever its required.

Select Form from Tools tab.

Create Form and Save

Form Builder

We need to select a layout. Select Full width layout from Layout tab and drag it to page. After that navigate to Items tab which will have fields that can be drag and drop to layout to create the form.

Form Builder

Drag and Drop Short Text field for Full Name and Email. Select the Individual Fields. You will get lot of properties for that selected field. Modify according to one's need. Refer below screenshot for your reference.

Navigate to Settings tab in Form Builder. We will configure thank you message,error message, webhook actions.

Webhook is basically an HTTP REST endpoint which accept data. It can be anything like Azure function, Rest controller etc. There are many free site which provide a free HTTP endpoint for testing purpose.I have also used on free webhook endpoint.

Before proceeding, we will first configure a webhook submit action which will get the submitted form data. Click on Mangage Webhook in Settings tab. It will take you to adding webhook page. Add one and save it. Follow below screenshot for your reference.

Navigate back to Settings tab: Choose webhook from dropdown. choose the submit action as shown below.

Navigate to Preview tab in form builder: Here you can check your form how it is looking and from here you can test the form.

Make your form active before testing the form: Your newly build form will be in inactive state. Click the ... symbol in right corner and activate your form.

Click your newly created Form: Navigate to preview tab and you can test your form there.See below screenshot for your reference.

Webhook Before Form submission.

Form submission successfully tested with webhooks

Webhook After Form submission.: You can check the same payload what you sent from your forms in webhook.

As this blog has became too lenghthy, but it might have given a brief overview of Forms feature in XM Cloud.Thanks for reading and keep learning!!

You can check my other blogs too if interested. Blog Website

Comments

Post a Comment

Popular posts from this blog

Sitecore XM Cloud Form Integration with Azure Function as Webhook

Image
Hello everyone, In this blog, we will see, how Azure Function can be used with Sitecore Forms. Before starting, I would request everyone to read my previous blog on XM Cloud Form as I am not going to go deep with how to create forms in XM Cloud. Creating Azure Function : Will serve as our Webhook Creating and Integrating Form : XM Cloud Form Creating An Azure Function I will not explain how you can create Azure Function with Http Trigger. You can check this youtube link here . Also in reference section, I will provide the link how you can connect and deploy your changes to azure function using Visual Studio. Azure Function Code : Its just a starter code which Azure function by default. Creating XM Cloud Form and Integrating with Azure Function Step 1 : Create a form from Form Editor and once form us published, you can see the below view in preview state. Here you can edit your form too. But it always recommended to use a version of that form as whatever changes is done will ...
Read more

Automate RSS Feed to Sitecore XM Cloud: Logic App, Next.js API & Authoring API Integration

Image
Hello everyone, In this blog, we will see a pratical use case of reading RSS feed and creating the respective items in Sitecore XM Cloud. To accomplish the task, we will use Logic App, an API created in Next JS and lastly calling the Authoring API to execute mutation query for Item Creation in Sitecore. Let's divide the process into 2 parts: Logic App : This will mostly focus on fetching the feed from RSS, performing transformation, storing the result in array of json object and pushing the data to next js api endpoint. Next JS API Development : This will take care of calling the authoring api of XM Cloud instance and performing the create item mutation query on the recieved data from Logic App. Logic App Azure Logic App is a cloud-based service provided by Microsoft Azure that allows you to automate workflows and integrate applications, data, services, and systems without writing complex code. It enables you to create automated workflows visually through...
Read more

Create and Fetch Content From Sitecore Content Hub One using GraphQL and React

Image
Hello everyone, In this blog, we will see overview of Sitecore Content Hub One product its benefits, features etc. This blog will walkthrough below listed points. Overview Features Content Hub One Dashboard Creating Taxonomy Creating Content Type Uploading New Media Creating Content Items From Content Type Getting GraphQL Token Creating Sample React Application To Read the Content from Content Hub One Overview Sitecore Content Hub One is a powerful platform. It is designed to centralize and streamline content creation, management, and distribution across various channels.Focuses on delivering content via APIs, enabling seamless integration with various front-end frameworks.Hosted in the cloud, offering scalability, automatic updates, and reduced infrastructure management.Provides flexible APIs and SDKs for developers to integrate and build custom solutions efficiently. Features Headless Content Management : Allows content to be delivered via APIs to any front-end or platfor...
Read more