Walkthrough: Using a Sitecore form in JSS applications

Abstract

Use Sitecore Forms in Next.js and React applications

This walkthrough guides you through the process of using Sitecore Forms in JSS applications, with examples of how to implement forms powered by the Sitecore Forms API in React and Next.js.

Note

JSS comes with a React example of consuming the Forms API. It is possible to consume the forms schema data with other frameworks, but example components are not provided.

This walkthrough assumes you are familiar with JSS fundamentals and have a React or Next.js JSS app that you have set up and deployed to Sitecore.

Additionally, using Sitecore Forms in JSS apps requires functioning session cookies. This means:

  • You have SSL enabled for your environment or disabled secure cookies in your Sitecore instance (/docs/nextjs/tracking-and-analytics/configuration#secure-cookies).

  • For React, you are using the REST Layout Service.

  • For Next.js, you are using the REST Layout Service and you are server-side rendering the route displaying the form.

This walkthrough describes how to render and use a Sitecore Form in a JSS application.

This walkthrough describes how to:

  • Create the form in Sitecore.

  • Create a form rendering component for the JSS application.

  • Add the form rendering to an app route.

  • Implement the form in your JSS application.

Create the form in Sitecore

To use a form in JSS, the form must be created in Sitecore.

To create the form:

  1. In Sitecore, on the Forms dashboard, click Create.

  2. To create a new form from scratch, click Blank form, or select a template to base your form on.

  3. To add a Submit button to your form, in the Form elements pane, in the Structure section, drag the Submit button element onto the form canvas.

  4. To store the form data and prevent the form from clearing itself, set the submit actions to Save Data and Redirect to page.

    Note

    In a JSS app, redirecting the application to a different page after submitting can easily be accomplished with client-side routing - it does not have to be an actual reload of the page.

Create a form rendering component for the JSS application

To add a form to the JSS app, you must have a component to render the form. A form rendering component is a normal JSS component, but because the disconnected mode is not supported for forms, you must create it in Sitecore first.

To create a form rendering component:

  1. Create the component definitions in Sitecore using the JSS CLI: jss deploy component Form --allowedPlaceholders jss-main.

  2. 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.

Add the form rendering to an app route

To add the form rendering to an app route:

  1. In the Experience Editor, navigate to the JSS route item you want to add the form to.

  2. Insert the new Form component into the placeholder it is allowed in.

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

    Note

    A warning that the component is missing its implementation displays. This is expected because you have not yet defined what the form looks like.

Implement the form in your JSS application

Your form implementation in the JSS application depends on which framework SDK you used to create your application.

To implement the form in your JSS app, follow one of the following methods: