Skip to main content

Implement a Sitecore form in a JSS React app

Abstract

Implement a Sitecore form in a React JSS application

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 }) => (
      <Form
        form={fields}
        sitecoreApiHost={sitecoreApiHost}
        sitecoreApiKey={sitecoreApiKey}
        onRedirect={(url) => history.push(url)}
      />
    );
    
    export default withRouter(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 that requests are sent directly to your Node.js server.

  3. Start the JSS app in connected mode:

    jss start:connected
  4. You can see the form data dumped to the page as JSON.