Sitecore XM Cloud Form Integration with Azure Function as Webhook

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 be reflected on live site directly

Step 2:Copy the URL of your Azure function from Azure portal which will be used in Webhook URL property in XM Cloud Form

Step 3:Navigate to Webhooks section in Forms Editor and update the value of URL property pointing to Azure Function URL. In earlier blog, I have explained how to create webhook.

Step 4:Update your XM Cloud form to use the updated webhook. There are two ways you can assign the webhook to the form. Both screenshot are given below. 1. Edit the form by selecting the form and navigating to Setting section. 2. Second is the click the ... of your form in forms list.

Step 4:Test the webhook in preview state.

Step 6: Assign the form to your page. This can be done in two ways. 1. From content Editor 2. From Pages Editor. Refer below screenshot.Make sure the BYOC component is added to your placeholder setting wherever you are intending to add the form.

Content Editor

Pages Editor

Step 7: You can test the form submission from your actual page preview in Page editor once the form is added

Step 8: Publish your page and you can see your form which is ready for testing.If form submission is successful, then you will see the success message

Hope you must have enjoyed this blog.Thanks for reading and Happy Learning!!

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

Refernces

Comments

Post a Comment

Popular posts from this blog

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