💡Customizing XM Cloud Form Component: Gain Full Control Over Form Submission

When working with Sitecore XM Cloud, you may come across use cases where you need complete control over a form’s submission behavior. This blog walks through exactly how to do that using a real-world example.

🧩 Common Scenario

Let’s say you want to:

Render a form created in XM Cloud.
Disable the default form behavior.
Control what happens on form submission.
Send the form data to a custom third-party endpoint (e.g., a webhook or custom API).

The XM Cloud Starter Kit includes a default form component, but it doesn’t give you access to the onSubmit event—making it difficult to intercept or customize submissions.

✅ The Goal

We’ll show you how to:

Extend the default XM Cloud form component.
Intercept the submission event.
Customize the submission logic.
Send form data to an external webhook.

🧱 CMS Part: Setting Up the Custom Form in XM Cloud

Step 1: Duplicate the Default Form Rendering

In XM Cloud, navigate to:


/sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Forms/Form

Duplicate this rendering and name it something like: CustomForm.

📌 Important: Set the ComponentName field to "CustomForm". This field maps the rendering to your component in the codebase.

Step 2: Create Your Form

Create a new form in XM Cloud as you normally would. This guide assumes you're already familiar with building forms in XM Cloud.

Step 3: Add the Custom Component

Add the new CustomForm component to your item’s Presentation Details, and publish the item.

💻 Code Part: Creating the `CustomForm` Component

Step 1: Create the File

Inside your components folder, create a new file:


/components/CustomForm.tsx

Step 2: Add the Code


import React from 'react';
import { Form } from '@sitecore-jss/sitecore-jss-react';
import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';

type FormProps = {
  rendering: ComponentRendering;
  params: {
    FormId: string;
    styles?: string;
    RenderingIdentifier?: string;
  };
};

interface CustomFormProps extends FormProps {
  customProp?: string;
}

const CustomForm: React.FC<CustomFormProps> = ({ customProp, ...formProps }) => {
  console.log('FormId:', formProps.params.FormId);
  if (customProp) {
    console.log('Custom prop:', customProp);
  }

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const form = event.target as HTMLFormElement;
    const formData = new FormData(form);

    const data: Record<string, any> = {};
    formData.forEach((value, key) => {
      data[key] = value;
    });

    console.log('Form data to send:', data);

    try {
      const response = await fetch('https://your-webhook-endpoint.com', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      const result = await response.json();
      console.log('Webhook response:', result);
    } catch (error) {
      console.error('Error sending to webhook:', error);
    }
  };

  return (
    <div className="custom-form-wrapper">
      <form onSubmit={handleSubmit}>
        <Form {...formProps} />
      </form>
    </div>
  );
};

export default CustomForm;

🔍 Code Breakdown

✅ Extending Form Props


interface CustomFormProps extends FormProps {
  customProp?: string;
}

This gives you the ability to inject additional props into your custom component.

✅ Wrapping the Form Component


<form onSubmit={handleSubmit}>
  <Form {...formProps} />
</form>

The default <Form /> component doesn’t expose a submission event. By wrapping it in a native <form> tag, you can control the submission process.

✅ Custom Submit Logic


const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  ...
}

This handler:

Prevents the default submission.
Gathers all form field data.
Sends it to your desired webhook or third-party API.
Handles success/error responses.

🔍 Verification

To verify your implementation:
Open the browser console and submit the form.

2. Check if the form data is logged as expected in console

📝 What's Next?

In the next blog post, we’ll dive into how to:

Trigger a webhook hosted in Next.js
Store form data in a SQL database

Stay tuned for part two!

🏁 Summary

By following this guide, you can:

✅ Extend the XM Cloud Form component
✅ Intercept and override the submission behavior
✅ Send data to external systems (webhooks, APIs, etc.)

This approach is especially useful for enterprise scenarios where form data must be processed or stored outside of Sitecore.

Search This Blog

Sitecore