Defining webhook in Sitecore XM Cloud Forms

Defining webhook in Sitecore XM Cloud Forms

In the previous blog here we already learnt to create Forms, now its time to connect forms through webhook

Firstly, we should understand what is a webhook?

A webhook is basically a http request, that is triggered by an event, from one system and send to another system with a payload data. Webhooks are automated, so the data is automatically sent out to the destination system when the event is triggered by the source system through the configured webhook URL.

Webhooks are typically used to connect two different systems. Sitecore XM cloud Forms uses webhooks to send data across different applications.

To create and attach a webhook –

1.      Open the Sitecore Form editor and go to settings from the top menu

2.      Then click on Manage Webhook


3.      From here we can use already added webhook or can create a new webhook. To create a new, click on Create Webhook button from top left corner

4.      Fill out the field details.

a.      Authentication type – OAuth2, Basic, Api Key or No Authentication

Need to provide details according to selected authentication type

·       OAuth2 – Client ID, Client Secret and end point url

·       Basic – Username and Password

·       API Key – Header name and API key value

·       No Authentication – No param

b.      Name - Give a name to webhook.

c.      URL – Provide destination URL to transfer the data.

5.      Click on submit. We will receive a notification if the webhook is created successfully.

6.      Now Go to Form editor mentioned in the step -2 and select the newly added webhook from the list in “Choose webhook” field.

7.      Now click on Test webhook to test its working before form activation. It will open the form, fill out all the details and click on submit.

8.      It will display the test form submission details including-

-          Webhook destination URL where the data will be sent to.

-          Payload with the details we just filled in the form, which will be sent.

-          Request header that will be sent


(Here please note that the payload contains “test”:true means it is test data. It helps us to filter out test data from actual user input.)

We can also define, what will happen after the user submits the form in the “Choose Submit action” field.

-          No Action – nothing happens, user will stay on the page.

-          Success message- displays a success message to the user when the form is submitted successfully.

-          redirect to a URL – user will be redirected to the specified URL.


We can also set a message for failure in the “Fail message” field, the default value is set to.

Form has not been submitted!


Now the form is ready to get Activated.

Form save options are:

·       Save and exit – The form will be saved on the versions page with autosave.

·       Save and activate- The form will be saved and activated; the form status will show Active.

·       Save a version – The form will be saved on the versions page with date, time, and username. We can access the form saved version later.

·       Save as template – The form will be saved as a template that can be used later as a base for other forms.

Please be careful while activating a form, check the preview and make sure everything is fine as the form cannot be edited or deleted after it is Active.

Next, we will learn how to configure the Webhook URL at destination application. Thank you ðŸ˜Š

Comments

Post a Comment

Popular posts from this blog

Setting Up Sitecore Headless with Next.js in Disconnected Mode

Image
Sitecore Headless CMS offers a flexible way to integrate with different frontend technologies. For developers working with frameworks like Next.js, Sitecore provides various ways to set up the environment, including four distinct modes: Disconnected Mode , Connected Mode , Integrated Mode , and API Mode . Each mode offers unique features for different stages of development and production needs. What Is Disconnected Mode? Disconnected Mode is designed for local development and testing without requiring a direct connection to the Sitecore platform. In this mode, data is typically retrieved from static files (like YAML or JSON), and content updates are done manually. This mode is ideal for frontend developers who want to focus on building the user interface and the site’s functionality without waiting for backend integration. In Disconnected Mode , the data flow is not dependent on the Sitecore CMS. Instead, content is stored locally in static files, which are easier to manage and qu...
Read more

Step-by-Step Guide: Sitecore Headless GraphQL Filtering, Sorting & Pagination

Image
If you're building a modern web application using Sitecore Headless (JSS), you’ll often need to fetch dynamic content lists like employee directories, articles, or products. To make this dynamic and user-friendly, you’ll want: Filtering – Narrow down results (e.g. by department or name) Sorting – Order by fields like name, date, or custom rank Pagination – Load data page by page In this post, I will walk you through how to build a Sitecore GraphQL query step by step, from basic retrieval to fully paginated, sorted, and filtered results. Demo Setup: Sitecore Content for Querying To demonstrate these GraphQL features, we’ve prepared the following in Sitecore. Template: UserInformation A custom template named UserInformation was created with 5 fields: Field Name Field Type UserName Single-Line Text Designation Single-Line Text Department Single-Line Text ...
Read more

Building a Headless Integration Between Sitecore and Azure Functions

Image
In today’s digital landscape, headless CMS architectures have become a game-changer for delivering personalized, dynamic, and scalable content experiences across multiple channels. Sitecore, with its powerful headless capabilities via Sitecore JSS and Layout Service, provides a flexible content management backbone. But what if we want to extend Sitecore’s capabilities beyond the platform, leveraging cloud-native serverless technologies? Here comes Azure Functions , a serverless compute service that lets us run code on-demand without managing infrastructure. Combining Sitecore with Azure Functions enables developers to build scalable, decoupled integrations that enhance content delivery, personalization, or business logic in a lightweight, cost-effective way. Benefits to Integrate Sitecore with Azure Functions Scalability: Azure Functions automatically scale with your workload. Cost-efficiency: Pay only for compute time, no idle server costs. Extensibility: ...
Read more