From 097f734568bc81585c3c9612b571c83165614442 Mon Sep 17 00:00:00 2001
From: sc-illiakovalenko <illia.kovalenko@sitecore.com>
Date: Fri, 26 Jun 2020 16:07:20 +0300
Subject: [PATCH] [Form] Document how to customize FormFetcher of the <Form>
 component

---
 docs/data/routes/docs/techniques/forms/en.md | 45 ++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/docs/data/routes/docs/techniques/forms/en.md b/docs/data/routes/docs/techniques/forms/en.md
index 8709af604d..9cb9cf6e1e 100644
--- a/docs/data/routes/docs/techniques/forms/en.md
+++ b/docs/data/routes/docs/techniques/forms/en.md
@@ -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.