Sitecore Forms is a capable form-authoring framework that enables marketers to author their own forms, collect data, and analyse form performance.
Setting up Sitecore Forms and JSS
There are two NPM packages for JSS and Sitecore Forms
- sitecore-jss-react-forms implements components to render forms in React
- sitecore-jss-forms implements framework-agnostic helpers to deal with the forms API (serialising forms to post, 'antiforgery', etc.)
These packages ship with TypeScript typings and JSDoc comments so they are easily discoverable in typings-aware editors such as Code.
To use the sample forms implementation, install the forms packages:
- run command npm i @sitecore-jss/sitecore-jss-forms
- run command npm i @sitecore-jss/sitecore-jss-react-forms
Creating a Form Rendering component for a JSS App
A Sitecore Form is a rendering like any other component created for a JSS app. It’s created under Layout in the content tree. For example sitecore/Layout/Renderings/Feature/Forms/$yourFormComponentName. After adding the rendering:
- 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 to Sitecore Forms Resolver. This will cause JSS to deliver form data to the component instead of item data.
Creating the Form React component
Create the Form React component in the client-app, for example in a matching file path client-app/src/Feature/Form/components/$yourFormComponentName/index.js
Below is what a sample React form implementation looks like:
Customising sample forms markup
When using the JSS sample forms implementation there are several options to customize the final markup of the form.
Altering field types
Similar to JSS' component factory, the field factory maps a given Sitecore Forms field type into an implementing React component. The default field factory is used if no other is passed, meaning the default form field implementations will be used.
In order to use a custom field factory, create a new file. For example, path client-app/src/Feature/Form/components/$yourFormComponentName/fieldFactory.js. This is where the new field factory will be defined.
To start with a fresh field factory:
To start with a default field factory and customise it (recommended):
In order to use the newly created field factory it needs to be imported and passed to the form component:
Custom field type component
Below is an example of what the <CustomComponent /> referenced above looks like:
The above example handles a Text input component with custom label & field error components.
Some events need to be handled in order to tie in Sitecore analytics functionality. For instance, the events passed through props.tracker need to be handled in order for the analytics functionality to work.
Creating a new custom field in Sitecore
When catering for a newly created custom field in Sitecore, the process is similar to overwriting the default field factory.
The main difference here is that instead of passing a FieldType in the first argument of setComponent, a GUID is being passed. This is the GUID of the new field item in Sitecore. It's hard coded as it won’t change after it has been implemented.
Global wrappers
There are alternative methods of customizing the Field Types:
- Adding a custom wrapper
- Adding a custom label
- Adding a custom error
Some of the components can contain markup that nested into basic <Label /> component (for example <Checkbox />). In this case, add props.children into markup of <LabelComponent />. So in <Checkbox /> the check button will be placed before props.field.model.title.
At Codehouse we're constantly exploring new technologies that will improve the development process and help us build engaging solutions for your customers. We love to work on exciting design and build projects often on CMS like Sitecore.
