Content Insights Tip #66 | Enable Forms in Head application

on
XM Cloud logo

When setting up Sitecore Forms on XM Cloud, there are a few critical steps to follow. I wrote a blog post earlier this month covering the initial setup, so make sure to check that out if you’re just getting started.

After testing your form in Pages, everything may seem to work fine. However, issues can arise when moving the form to the Head application in Vercel. In my case, the testers reported that they couldn’t submit the form to the webhook due to a CORS error.

Here's an example of the error you might encounter:

Form:1 Access to fetch at 'https://edge-platform.sitecorecloud.io/v1/forms/data/0ef32cbacec34aceaddf9da937e90dfb-euw' from origin 'https://xm-cloud-websites-v2-7q5mnvi3a-vwpfs-headless.vercel.app' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

POST https://edge-platform.sitecorecloud.io/v1/forms/data/uniqueidentifier net::ERR_FAILED
postData @ VM75:361
buttonCallback @ VM75:601
VM75:392 TypeError: Failed to fetch
at postData (<anonymous>:361:12)
at HTMLFormElement.buttonCallback (<anonymous>:601:13)
overrideMethod @ console.js:288

At first, I thought this was a CORS issue, so I dove into the documentation. Unfortunately, I didn’t find any information specific to Forms and CORS. That’s when I decided to reach out to Sitecore Support.

Turns out, the problem wasn’t a CORS issue after all—it was due to a missing Sitecore Context ID.

How to Fix It: Setting the Sitecore Context ID

The key to resolving this error is to set the SITECORE_EDGE_CONTEXT_ID variable on your Vercel instance. Here’s how to do that:

  1. Log in to the Sitecore Cloud Portal
  2. Open XM Cloud Deploy
  3. Select the Project you are working on
  4. Locate the Context ID
    Each environment (Preview and Live) has a unique Context ID. For the Head application, you’ll need the Live version.

    XM Cloud Deploy example

Once you have the correct Context ID:
  1. Set the SITECORE_EDGE_CONTEXT_ID environment variable in Vercel.
  2. Retest your form to ensure it’s working correctly.

This solution should resolve the error and ensure your forms are successfully submitted in the live environment.

Documentation links:

Until next time!