Implement a Sitecore form in a JSS React app

Version:

After creating a Sitecore form and added the form to a JSS app route in Sitecore, you can implement a JSS Form component that renders the Sitecore Form in your JSS application.

Using Sitecore Forms in JSS apps requires functioning session cookies. For this purpose:

You must have SSL enabled for your environment or disabled secure cookies in your Sitecore instance.
Your React JSS app must use the REST Layout Service.
You are server-side rendering the JSS React application.

To render a Sitecore form in a React JSS application:

In the root directory of your JSS application, install the necessary packages by running the following command:
npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms

To make the form render, you must tell the application how to render the Sitecore Forms schema. In the src directory of the rendering app, in a component file, for example, src/components/JssReactForm.tsx, implement your form component:

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

const JssReactForm = ({ fields }) => {

  const navigate = useNavigate();

  return (
    <Form
      form={fields}
      sitecoreApiHost={sitecoreApiHost}
      sitecoreApiKey={sitecoreApiKey}
      onRedirect={(url) => navigate(url)}
    />
  );

};

export default JssReactForm;

Note

In headless mode, you get an error if you send requests directly to the Sitecore instance. You must set sitecoreApiHost to an empty string, for example, sitecoreApiHost={''}, so requests are sent directly to your Node.js server.

Start the JSS app in connected mode:
jss start:connected

You can see the form data dumped to the page as JSON.

If you have suggestions for improving this article, let us know!