Implement a Sitecore Form in a JSS Next.js App

If you have an application based on Next.js, at any instance, you might mandate input from the end user to roll further with the process. Then the most accessible and manageable method to retrieve inputs from the end users is to have a form.

Sitecore Forms allow you to create forms quickly and act as a bridge for communication between the end users and your application.

All you require to set up a form is relevant content for the Form. It is crucial to have the fields of the Form ready before setting up the Sitecore Form to simplify your job.

You simply need to go through the below steps to have a form over your application successfully:

Create the Form in Sitecore

• Click on Create Form from the Sitecore dashboard
• Create structure and form elements for the required form layout
• Add submit button bottom of the Form
• Give redirection and data source for the Form

 

Create the form rendering in Sitecore JSS

 

• Create a component using JSS CLI:

jss deploy component Form --allowedPlaceholders jss-main

• Add Placeholder name
• Navigate rendering item

/sitecore/layout/Renderings/Project/$yourappname/Form

• Set Datasource location
• Set Datasource template
• Add app routing

 

Implement Form in Sitecore JSS

 

• Install package:
• Implement form component
• Create a component under src/components/your component name



• Start your JSS App

 

It is essential to take care of that; to have forms operating over the JSS applications like Next.js, it will need the functioning session cookies. To ensure that it is enabled to sidestep any interruption, have enabled SSL over your environment or in the Sitecore instance that disables secure cookies.

The application uses REST Layout Service. You are rendering the route server side and demonstrating the form using the function GetServerSideProps. The above guide will easily drive you to have a form running smoothly over the JSS application you have. For further Sitecore-related queries or concerns contact us today.