Skip to content

Commit

Permalink
[Form] Document how to customize FormFetcher of the <Form> component
Browse files Browse the repository at this point in the history
  • Loading branch information
illiakovalenko committed Jun 26, 2020
1 parent b56b3af commit 097f734
Showing 1 changed file with 45 additions and 0 deletions.
45 changes: 45 additions & 0 deletions docs/data/routes/docs/techniques/forms/en.md
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,51 @@ const FieldErrorComponent = (props) => (
<Form fieldValidationErrorsComponent={FieldErrorComponent} {...otherProps} />
```

#### Customizing Form Fetcher

You can customize the behaviour of the default FormFetcher. You can add custom error handler, in case if unhandled error was thrown.

```js
export const formFetcher = (formData, endpoint) => fetch(endpoint, {
body: formData.toUrlEncodedFormData(),
method: 'post',
// IMPORTANT: Sitecore forms relies on cookies for some state management, so credentials must be included.
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then((res) => res.json())
.catch(() => {
return {
success: false,
errors: 'Something went wrong. Error was thrown when submit form'
}
})

// Usage on form component
<Form formFetcher={formFetcher} {...otherProps} />
```

You can implement _formFetcher_ using `multipart/form-data` Content-Type.

```js
export const formFetcher = (formData, endpoint) => fetch(endpoint, {
body: formData.toMultipartFormData(),
method: 'post',
// IMPORTANT: Sitecore forms relies on cookies for some state management, so credentials must be included.
credentials: 'include',
// Browser set 'Content-Type' automatically with multipart/form-data; boundary
})
.then((res) => res.json())
.catch(() => {
return {
success: false,
errors: 'Something went wrong. Error was thrown when submit form'
}
})
```

### Limitations

There are some limitations to be aware of with JSS' Sitecore Forms support.
Expand Down

0 comments on commit 097f734

Please sign in to comment.