Content Insights Tip #64 | Using Forms in Sitecore XM Cloud

on

 

XM Cloud logo

Congratulations on creating your first form in Sitecore XM Cloud Forms! Using the latest technology is always exciting, but now you're probably wondering, "How do I actually use this form on my site?" In this blog post, I'll guide you through the process step-by-step.

Logging in to Sitecore Cloud Portal

To get started, log in to the Sitecore Cloud portal. After logging in, choose the XM Cloud environment you want to work in. From the options provided, select Forms.

XM Cloud - Options

Activating Your Form

Before you can use your form, its status must be set to ACTIVE. To activate a form, you need to have both a valid form and a webhook configured. If you're just testing and don't have a proper webhook yet, you can use a simple tool like Webhook.site. It provides an easy interface to receive and inspect your data, as shown in the example below.

Note: Do not use this tool for sending sensitive data, as it's intended solely for testing purposes.

Webhook example

Adding a Webhook to Your Form

There are two ways to add a webhook to your forms: directly from within your form or via the overview page in the Forms section.

1. Creating a Webhook via the Overview Page

  1. Click on Webhooks in the top navigation bar to see an overview of existing webhooks.
  2. To create a new webhook, click the + Create Webhook button.
  3. Fill in the required information. If you're using Webhook.site, open it in a browser and copy your unique webhook URL.
  4. Set the Authentication Type to No Authentication. Give your webhook a name and paste the URL you copied into the URL field.
  5. Your webhook is now ready to be used with any form.

2. Creating a Webhook Directly in a Form

  1. Open the form that needs a webhook.
  2. Click the cogwheel in the navigation bar to open the settings.
  3. Under Choose Webhook, select the webhook you created earlier. If it isn't listed, click Manage Webhooks and follow the steps for creating a webhook via the overview page.
  4. Once done, close the settings and select your newly created webhook from the dropdown list.
Configure webhook

Testing Your Webhook

After setting up the webhook, make sure to test it:
  • Click Test Webhook. This sends a filled-in form to test the webhook functionality.

Test webhook
  • Review the data that will be sent. If you’re using Webhook.site, you'll see the data appear on your screen, allowing you to verify the connection is working correctly.
Webhook test data

Webhook triggered

Activating Your Form

To activate your form:
  • Go to the Forms overview page and select the form you want to activate.
  • Click the dropdown next to the Save and Exit button and choose Save and Activate.
  • Confirm your action by clicking Activate. The site will process your request, and your form will be ready for use in XM Cloud.
Note: To use XM Cloud Forms with Pages, ensure you're using JSS version 21.6.0 or later. Check with your front-end developer to confirm this. You can direct them to this JSS upgrade guide.

Using Forms on a Page

  1. Navigate to XM Cloud and open the website of your choice.
  2. Go to the page where you want to add the form. Click on Components in the top left to switch views.
  3. Drag and drop the form onto the page. If the form isn't showing, it might still need activation. Refer to the Form Activation section to resolve this.
In some cases, XM Cloud may restrict which components can be added directly to a page. If this happens, you may need to add a "global" container component that supports forms.


Pages error

Fixing Component Placement

  1. Identify which component you want to use for your form. For example, you might need to drop a "global" container on the page.
  2. In XM Cloud, go to Tools in the top bar and click on Content Editor.
  3. Navigate to the Presentation folder of your site, such as Sitecore\Content\Headless Site\Headless Folder\Site name\Presentation.
  4. Locate the component that should allow forms to be added. If it's a placeholder, it will be in the Placeholder Settings folder.
  5. Click on the component name to open it.
  6. Scroll down to the Allowed Controls section and click Edit. Search for the BYOC Wrapper component, a generic Sitecore component that allows forms to be added to a page.
  7. Double-click on BYOC Wrapper and hit OK. Remember to click Save.

Content Editor - Placeholder Settings

Adding the Form Again

Return to XM Cloud, open the page, switch to the Components tab, and drag the form onto your container. After a few seconds, your form will appear on the page. To preview the form, click the preview icon in the top right corner. And that's it—your form is now live!

Form on page
By following these steps, you can seamlessly integrate and manage forms within Sitecore XM Cloud, enhancing your website's interactive capabilities.

Until next time!