Integrate Sitecore Form into a JSS app (React/Next.js) in Headless Architecture.

Everyone is moving toward headless architecture these days and wants to take advantage of the new approach in the CMS industry to improve the CMS experience. However, in a few cases, it does not support a CMS functionality like Sitecore Form. Sitecore does not have any out of the box (OOB) component to implement Sitecore Form. Although Sitecore has provided different approaches and advice on how to integrate Sitecore Form in JSS app.

I have gone through multiple Sitecore documents and consolidated all the details in following steps. So, you will be able to implement forms powered by the Sitecore Forms API in React and Next.js in a headless architecture.

• Create the form in Sitecore.
• Create a form rendering for the JSS app.
• Add the form rendering to the page/app route.
• Install SDK and create the form component in your JSS application.
• Switch the pre-rendering method SSG to SSR.

You must configure your JSS app before utilizing Sitecore Form. You can fetch data from the Sitecore Layout Service using REST or GraphQL, but to deal with Sitecore Forms, you must set FETCH_WITH=REST in the .env file in the JSS app.

1. Create the Form in Sitecore.

Here we are creating simple Sitecore Form. If you are familiar with it, you can skip this step.

1. Go to the Sitecore Dashboard and select Forms, then click Create.

1: Select Forms on Sitecore Dashboard.

2: Create Form

2. Add the form elements from the Form Elements pane.
3. Add a Submit button to your form from the Structure section and drag the Submit button element onto the form canvas.
4. To store the Form data on click of save button, set the submit actions to Save Data .

3: Drag and drop form elements and Submit button from the Structure section.

2. Create a Form Rendering for the JSS App.

To add a Sitecore form to the JSS app, you must have a JSS Component to render the form. A form component is a normal JSS component.

1. Create the Component definitions (Rendering and Placeholder settings) in Sitecore using the JSS CLI:

jss deploy component Form --allowedPlaceholders jss-main

2. We can change the allowed Placeholder to the placeholder name you want to allow the form to be added to.
3. In the Sitecore Content Editor, navigate to the Rendering item that was created (/Sitecore/layout/Renderings/Project/$yourappname/Form)
4. Set the Datasource location field to /sitecore/forms.
5. Set the Datasource template field to /sitecore/templates/System/Forms/Form.
6. Set the Rendering Contents Resolver field to Sitecore Forms Resolver. This causes JSS to deliver form data to the component instead of item data.

4: Set the fields of Form Rendering created by CLI command for JSS app.

3. Add the Form Rendering to Page/App Route.

1. In the Experience Editor, navigate to the JSS route item you want to add the form to.
2. Select the new Form component rendering into the placeholder it is allowed in.

XM Cloud Roadmap Guide

XM Cloud is the future of enterprise content management offerings. The new sites, pages, and components tools offer an efficient content author experience that is not available with other CMS systems.

Get the Guide

5: Adding Form Rendering in the Main(main-jss) placeholder.

3. Select the Sitecore Form you created previously as the Associated Content.

     6: Select the Form you created in Sitecore.

     7: Added Form Rendering to Page/app rout.

4. Install SDK and Create the Form Component in Your JSS Application.

Install the Sitecore JavaScript Rendering SDK Forms for React package, along with its dependencies, in a JSS React or Next.js application.

1. Go to the root directory of your JSS React or Next.js application, and run the following npm command:

npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms

2. Create JSS Component named as Form in your JSS application using:

jss scaffold Form

3. In src/components/Form.tsx implement the form a component as below.

import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
import React from 'react';
import { withRouter } from 'next/router';
import { sitecoreApiHost, sitecoreApiKey } from '../temp/config';

const JssNextForm = ({ fields, router }: any) => (
    <Form
      form={fields}
      sitecoreApiHost={''}
      sitecoreApiKey={sitecoreApiKey}
      onRedirect={(url) => router.push(url)}
    />
  );

export default withRouter(JssNextForm);

Note: You must set sitecoreApiHost to an empty string, for example, sitecoreApiHost={”}, to send requests to the Next.js server. And Sitecore form Rendering name and JSS form component File name must match.

5. Switch the Pre-Rendering Method SSG to SSR.

To switch the JSS Next.js application from SSG to SSR:

1. Move/rename/delete src/pages/[[..path]].tsx.
2. Download the file from [[..path]].SSR.tsxto src/pages/ and rename it to [[..path]].tsx.
3. Or create a new file in src/pages/named as [[..path]].tsx and add below SSR code:

import { useEffect } from 'react';
import { GetServerSideProps } from 'next';
import NotFound from 'src/NotFound';
import Layout from 'src/Layout';
import { SitecorePageProps } from 'lib/page-props';
import { sitecorePagePropsFactory } from 'lib/page-props-factory';
import { componentFactory } from 'temp/componentFactory';
import {
  SitecoreContext,
  ComponentPropsContext,
  handleEditorFastRefresh,
} from '@sitecore-jss/sitecore-jss-nextjs';

const SitecorePage = ({
  notFound,
  componentProps,
  layoutData
}: SitecorePageProps): JSX.Element => {
  useEffect(() => {
    // Since Sitecore editors do not support Fast Refresh, need to refresh EE chromes after Fast Refresh finished
    handleEditorFastRefresh();
  }, []);

  if (notFound) {
    // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
    return <NotFound />;
  }

  return (
    <ComponentPropsContext value={componentProps}>
      <SitecoreContext
        componentFactory={componentFactory}
        layoutData = {layoutData}>
        <Layout layoutData={layoutData} />
      </SitecoreContext>
    </ComponentPropsContext>
  );
};

// This function gets called at request time on server-side.
export const getServerSideProps: GetServerSideProps = async (context) => {
  const props = await sitecorePagePropsFactory.create(context);

  return {
    props,
    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};
export default SitecorePage;

8: Form Component and SSR re-rendering files created in the JSS app.

4. Optionally, delete /src/lib/sitemap-fetcher.ts.
5. Run the JSS app in connected mode by command:

jss start:connected

6. Results:

9: JSS app form submission page view.

10: Sitecore Experience Editor form submission page view.

11: Form submission data.

Note: There are several restrictions when integrating Sitecore Form with the JSS app, as noted down below.

• JSS app must run in Connected mode to Sitecore.
• JSS Forms does not support Sitecore Robot detection.
• Accept form submissions and return JSON data in a REST.

Sitecore may add these features in Headless architecture in future releases.

Happy learning…