Walkthrough: Using a Sitecore form in JSS applications
This walkthrough guides you through using Sitecore Forms in JSS applications, with examples of implementing forms powered by the Sitecore Forms API in React and Next.js.
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 set up and deployed to Sitecore.
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:
-
In Sitecore, on the Forms dashboard, click Create.
-
To create a new form from scratch, click Blank form, or select a template to base your form on.
-
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.
-
To store the form data and prevent the form from clearing itself, set the submit actions to Save Data and Redirect to page.
NoteIn 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:
-
Create the component definitions in Sitecore using the JSS CLI:
jss deploy component Form --allowedPlaceholders jss-main
. -
Change the allowed placeholder to the placeholder name you want to allow the form to be added to.
-
In the Sitecore Content Editor, navigate to the rendering item that was created (
/sitecore/layout/Renderings/Project/$yourappname/Form
) -
Set the
Datasource location
field to/sitecore/forms
. -
Set the
Datasource template
field to/sitecore/templates/System/Forms/Form
. -
Set the
Rendering Contents Resolver
field toSitecore 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:
-
In the Experience Editor, navigate to the JSS route item you want to add the form to.
-
Insert the new
Form
component into the placeholder it is allowed in. -
Select the Sitecore Form you created previously as the Associated Content.
NoteA 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: