Implement a Sitecore form in a JSS React app

Current version: 20.x

After you have created 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:

To render a Sitecore form in a React JSS application:

  1. 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
  2. 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 { withRouter } from 'react-router-dom';
    import { sitecoreApiHost, sitecoreApiKey } from '../../temp/config';
    const JssReactForm = ({ fields, history }) => (
        onRedirect={(url) => history.push(url)}
    export default withRouter(JssReactForm);

    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.

  3. Start the JSS app in connected mode:

    jss start:connected

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

Do you have some feedback for us?

If you have suggestions for improving this article,