多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
9.0 KiB

---
title: 'Form'
description: 'Learn how to create, import, and manage forms in NocoDB.'
tags: ['Views', 'Form view']
keywords: ['NocoDB form', 'form view', 'form builder', 'form view builder', 'form view actions', 'form view operations']
---
Form View allows you to arrange fields in a form to input data.
![1010-2 Form](/img/v2/views/form-view/form-view.png)
## Form View Builder
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 View Actions
1. [Create a New Form View](/views/create-view/#create-new-view)
2. [Rename an Existing Form View](/views/actions-on-view#rename-view)
3. [Duplicate a Form View](/views/actions-on-view#duplicate-view)
4. [Remove a Form View](/views/actions-on-view#delete-view)
5. [Share a Form View](/views/share-view)
6. [Lock Form View for Edits](/views/views-overview#view-permission-types)
## Form View Operations
### Add Form Title & Description
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)
### 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.
### Form Appearance Settings
![Form appearance](/img/v2/views/form-view/appearance.png)
#### Change Background Color
To change the background color of the form, select the required color from the color picker in the **Appearance Settings** panel.
#### 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 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-new-field.png)
### 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/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** `Optional` : 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
6 months ago
Here's a more professional rephrasing of the given content:
## Pre-Filling Form Fields
NocoDB offers a convenient feature that allows pre-filling form fields with specific values by setting URL parameters. This functionality enables the creation of custom URLs with desired field values, streamlining data entry and enhancing user experience.
To construct a pre-filled form URL manually, ensure that the URL parameters are appropriately encoded in the following format: `?key1=value1&key2=value2`.
For instance, the URL `https://wh8s5w.noco.to/#/nc/form/66da06-f074-47af-ace7-fde46df55?Status=Qualification&Priority=Very+high` pre-fills the `Status` field with `Qualification` and the `Priority` field with `Very high`.
NocoDB provides an intuitive alternative approach to generate pre-filled URLs through the form builder.
1. Open the form builder and pre-fill the required form fields with the desired values.
2. Click on the `Share` button located in the top right corner.
3. Toggle the `Enable Public Viewing` button to enable sharing.
4. Toggle the `Enable Prefill` button to enable pre-filling.
5. Click on the `Copy Link` button to copy the pre-filled URL.
![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
6 months ago
1. **Default**: Standard mode. This mode will prefill the form fields with the values set in the shared form URL. Users can edit the prefilled fields in the form. 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)
6 months ago
2. **Hide prefilled fields**: This mode will prefill the form fields with the values set in the shared form URL but will hide the prefilled fields in the form from the user. 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)
6 months ago
3. **Lock prefilled fields as read-only**: This mode will prefill the form fields with the values set in the shared form URL and will lock the prefilled fields as read-only. 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).
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/form-view/survey-form.png)
## Attaching a file from mobile device
To attach a file from mobile device,
- Click on the `Add File(s)` button in attach field
- Sample options could be (varies from device to device)
- Camera : use this if you wish to take a picture
- Files : use this if you wish to attach a file from your device
![Attach file from mobile](/img/v2/views/mobile-upload.png)
## Related articles
[Form View](/views/view-types/grid)
[Gallery View](/views/view-types/gallery)
[Kanban View](/views/view-types/kanban)