Nc docs/form view (#7990)

* docs: form view updates

* docs: form layout & appearance

* docs: prefill

* docs: prefill lock

* docs: add on notes

* docs: limit options & layout

packages/noco-docs/docs/090.views/040.view-types/030.form.md

@@ -7,15 +7,16 @@ keywords: ['NocoDB form', 'form view', 'form builder', 'form view builder', 'for
 
 Form View allows you to arrange fields in a form to input data.
 
-![1010-2 Form](/img/v2/views/form-view.png)
+![1010-2 Form](/img/v2/views/form-view/form-view.png)
 
 ## Form View Builder 
-Form view builder layout can be divided into 3 sections:
-1. **Fields Area** - This is the area where fields available in the tables that are not yet added to the form are listed. 
-2. **Form Area** - This is the area where fields added to the form are listed.
-3. **Form Settings** - This is the area where you can configure the form view. This mainly consists of actions & customisations that can be performed after a form view is submitted.
+Form view builder layout can be divided into 4 sections:
+1. **Form Area** - This is the area where fields added to the form are listed. This area also acts as a preview of the form.
+2. **Form Fields** - This area lists all the fields available in the table. You can drag and drop fields for re-ordering and toggle the `hide` switch to remove fields from the form.
+3. **Appearance Settings** - This is the area where you can configure the form view appearance settings like Background Color, Banner & Branding.
+4. **Post Form Submission Settings** - This is the area where you can configure the form view to perform various actions after a form is submitted. 
 
-![Form Builder](/img/v2/views/form-view-layout.png)
+![Form Builder](/img/v2/views/form-view/layout.png)
 
 ## Form View Actions
 1. [Create a New Form View](/views/create-view/#create-new-view)
@@ -28,51 +29,121 @@ Form view builder layout can be divided into 3 sections:
 ## Form View Operations
 
 ### Add Form Title & Description
-In the **Form View** area, click on in input boxes provided for **Title** {"<"}1{">"} & **Description** {"<"}2{">"} to add/update title & description to the form.
+In the **Form View** area, click on in input boxes provided for **Title** & **Description** to add/update title & description to the form.
+
+:::info
+Formatting options are supported for the description field. You can also use markdown to format the text.
+:::
 
-![Form Title & Description](/img/v2/views/form-view-title-description.png)
+![Form Title & Description](/img/v2/views/form-view/title-description.png)
 
-### Add Fields to the Form
-To add a field to the form, either
-- Drag and drop the field from the **Fields Area** to the **Form Area** at required position
-- Click on the field in the **Fields Area** to add it to the end of the **Form Area**
+### Add/Remove Fields
+To add/remove a field 
+- Use toggle switch next to the field name in the **Form Fields** to add/remove a field from the form.
 
-### Change field label & help-text
-To change the field label displayed on the form & add help-text, click on the field in the **Form Area** and update the values in the input boxes provided for **Label** {"<"}1{">"} & **Help Text** {"<"}2{">"}.
-
-![Field Label & Help Text](/img/v2/views/form-view-field-label-help-text.png)
 
-### Mark a Field as Required
-To mark a field as required, click on the field in the **Form Area** and toggle the `Required` switch.
+### Form Appearance Settings
 
-![Required Field](/img/v2/views/form-view-required-field.png)
+![Form appearance](/img/v2/views/form-view/appearance.png)
 
-### Rearrange Fields Within the Form
-To rearrange fields within the form, drag and drop the field to the required position.
+#### Change Background Color
+To change the background color of the form, select the required color from the color picker in the **Appearance Settings** panel.
 
-### Remove Fields from the Form
-To remove a field from the form, either
-- Drag and drop the field from the **Form Area** to the **Fields Area**
-- Hover over the field in the **Form Area** and click on the `hide` icon
-
-![Hide Field](/img/v2/views/form-view-remove-field.png)
+#### Hide Branding
+To hide NocoDB branding from the form, toggle the `Hide NocoDB Branding` switch in the **Appearance Settings** panel.
+
+:::info
+This feature is available only in the paid plans.
+:::
+
+#### Hide Form Banner
+To hide the form banner, toggle the `Hide Banner` switch in the **Appearance Settings** panel.
+
+### Rearrange Fields Within the Form
+To rearrange fields within the form, drag and drop the field to the required position. This can be done in both the **Form Area** and **Form Fields** panel.
 
 ### Add a New Field to the Table
 To add a new field to the table, 
-- Click on the `+ Add new field to this table` in the **Fields Area** and 
+- Click on the `+ Add field` in the **Form Fields** panel 
 - Select the field name & type from the dropdown.
 - Click on `Save Field`
 
-![Add Field](/img/v2/views/form-view-add-field.png)
+![Add Field](/img/v2/views/form-view/add-new-field.png)
 
-### Form View Settings
-NocoDB allows you to configure the form view to perform various actions after a form is submitted. These actions can be configured in the **Form Settings** area.
-1. **After Submit Message**: You can configure a message to display on successful submission of the form.
-2. **Show `Submit Another Form` Button**: This option when enabled, will display a `Submit Another Form` button after the form is submitted.
-3. **Show a Blank form**: This option when enabled, will display a new blank form 5 seconds after the form is submitted.
-4. **Email me**: Enable this option to receive an Email after the form is submitted. 
+### Post Form Submission Settings
+NocoDB allows you to configure the form view to perform various actions after a form is submitted. These actions can be configured in the **Post Form Submission Settings** panel.
+1. **Show `Submit Another Form` Button**: This option when enabled, will display a `Submit Another Form` button after the form is submitted.
+2. **Show a Blank form**: This option when enabled, will display a new blank form 5 seconds after the form is submitted.
+3. **Email me**: Enable this option to receive an Email after the form is submitted. 
+4. **After Submit Message**: You can configure a message to display on successful submission of the form.
 
-![Form View Settings](/img/v2/views/form-view-settings.png)
+![Form View Settings](/img/v2/views/form-view/post-submit-settings.png)
+
+:::info
+Formatting options are supported for the `After Submit Message` field. You can also use markdown to format the text.
+:::
+
+## Field configuration
+To change the field label displayed on the form & add help-text, click on the required field in the **Form Area** and on the right side configuration panel, configure
+1. **Label** `Opitonal` : Defaults to the field name. This doesn't affect the field name in the table.
+2. **Help Text** `Optional`
+3. **Required** : Toggle to mark the field as required
+
+![Field Label & Help Text](/img/v2/views/form-view/field-config.png)
+
+:::info
+Formatting options are supported for the `Help Text` field. You can also use markdown to format the text.
+:::
+
+### Field Type Specific Settings
+For select based field types (`Single-Select`, `Multi-Select`, `User`), you can configure the following additional settings:  
+
+#### Limit Options 
+Limit the number of options displayed in the dropdown or list of shared form. This is useful when you have a large number of options & want to limit the number of options displayed in the dropdown or list for the user to select from. 
+- Use `Hide` button next to the option to hide the option from the dropdown or list.  
+- Use `Reorder` button associated with a field to reorder the options.  
+
+![Limit options](/img/v2/views/form-view/limit-options.png)
+
+#### Options Layout
+For select based field types, you can configure the options layout to be displayed as a `Dropdown` or an inline expanded `List`. 
+
+![Options Layout](/img/v2/views/form-view/options-layout.png)
+
+## Prefill Form Fields
+Prefilling form fields is a way to pre-populate form fields with default values. This can be useful when you want to save time for users by prefilling some fields with default values. The prefilled fields and their values are visible in the URL of the form view & can be manually constructed by ensuring URL parameters are appropriately encoded. 
+
+NocoDB provides an easier approach to construct prefilled URLs. One can use the form builder to prefill form fields with default values & auto-generate encoded prefilled URL. Follow the below steps to prefill form fields & generate a prefilled URL - 
+1. Open the form builder, prefill the required form fields with default values.
+2. Click on the `Share` button in the top right corner.
+3. Toggle `Enable Public Viewing` button to enable share.
+4. Toggle `Enable Prefill` button to enable prefill.
+5. Click on the `Copy Link` button to copy the link.
+
+![Prefill](/img/v2/views/form-view/prefill.png)
+![Prefill share](/img/v2/views/form-view/prefill-share.png)
+
+:::info
+- Prefilled fields override the default values if any were set for this field in the table
+- Maximum length of the URL is 8000 characters.
+:::
+
+### Prefill modes
+1. **Default**: Standard mode. This mode will prefill the form fields with the default values set in the form builder. Users can edit the prefilled fields. When shared, the prefilled fields will be visible in the URL. In the image below, the `Number` field is prefilled with the value `1234`, `Currency` field is prefilled with the value `1000` and `Year` field is prefilled with value `2023`.  
+
+   ![Prefill default](/img/v2/views/form-view/prefill-default.png)
+
+2. **Hide prefilled fields**: This mode will prefill the form fields with the default values set in the form builder but will hide the prefilled fields from the user. When shared, the prefilled fields will be visible in the URL. In the image below, the `Number` field is prefilled with the value `1234`, `Currency` field is prefilled with the value `1000` and `Year` field is prefilled with value `2023`.
+
+  ![Prefill hide](/img/v2/views/form-view/prefill-hide.png)
+
+3. **Lock prefilled fields as read-only**: This mode will prefill the form fields with the default values set in the form builder and will lock the prefilled fields as read-only. When shared, the prefilled fields will be visible in the URL. In the image below, the `Number` field is prefilled with the value `1234`, `Currency` field is prefilled with the value `1000` and `Year` field is prefilled with value `2023`. 
+
+  ![Prefill lock](/img/v2/views/form-view/prefill-lock.png)
+
+:::info
+In any of the modes, the user can still change the prefilled fields by editing the URL.
+:::
 
 ## Survey Form View
 NocoDB supports a special type of form view called `Survey Form View`. This view is ideal for creating surveys & questionnaires. This view can be enabled by toggling the `Survey Mode` switch when creating [shared form view](/views/share-view#share-form-view-options). 
@@ -81,7 +152,7 @@ When enabled,
 - Form input fields will be displayed one at a time. 
 - Users can navigate between fields using the `<` & `>` buttons.
 
-![Survey Form View](/img/v2/views/survey-form.png)
+![Survey Form View](/img/v2/views/form-view/survey-form.png)
 
 ## Attaching a file from mobile device
 To attach a file from mobile device,