Form

The Form view lets you arrange fields in a form to enter data.

Form View Builder

The form view builder has 4 sections:

Form View Actions

1. Create a New Form View
2. Rename an Existing Form View
3. Duplicate a Form View
4. Remove a Form View
5. Share a Form View
6. Lock Form View for Edits

Form View Operations

Add Form Title & Description

In the Form View area, click the Title & Description input boxes. Add or change the title and the description of the form.

Add/Remove Fields

To add or remove a field, use the toggle switch next to the field name in Form Fields.

Form Appearance Settings

Change Background Color

To change the background color of the form, select a color in the color picker in the Appearance Settings panel.

Hide Branding

To hide NocoDB branding on the form, turn on the Hide NocoDB Branding switch in the Appearance Settings panel.

Hide Form Banner

To hide the form banner, turn on the Hide Banner switch in the Appearance Settings panel.

Customize Submit Button ☁

You can change the text on the form submit button. The default button label is "Submit".

1. In the Appearance Settings panel, turn on the Customize Submit button toggle.
2. In the text input field, enter the label (up to 50 characters).

Rearrange Fields Within the Form

To change the order of fields in the form, drag a field to its new position. You can do this in the Form Area and in the Form Fields panel.

Arrange Fields in Multi-Column Rows ☁

By default, each form field has its own full-width row. You can put fields side by side. This keeps related inputs together and makes the form easier to read. For example, put first name / last name on one row, and city / state / zip on another row.

To group fields in one row:

• In the Form Area, drag a field card by its body (the full card is the drag handle). Drop it onto the row of another field. The two fields get equal width and share that row.
• To add more fields to the group, drop them onto the same row.
• To move a field back to its own row, drag it onto the Drop here to start a new row zone below the last row.

The fields then show side by side in equal-width columns:

One row can have up to 5 fields. If you drop a 6th field onto a full row, NocoDB puts it in a new row directly below.

The shared form URL keeps the same multi-column layout. On desktop, the fields show in the rows that you set in the builder. On mobile (screens narrower than 768 px), the rows change automatically to one column, so the form is easy to read.

Add a New Field to the Table

To add a new field to the table:

1. In the Form Fields panel, click + Add field.
2. In the dropdown, select the field name & type.
3. Click Save Field.

Form Scheduling ☁

Form scheduling sets when a shared form accepts responses. It uses a Start date and an Expiration date. Use it for time-limited surveys, event registrations, or other forms that must be available only for a specific period.

To turn on form scheduling:

1. Open the form view builder.
2. In the right sidebar, turn on the Form scheduling switch.
3. Set the Start date. This is the date and time when the form starts to accept responses.
4. Set the Expiration date. This is the date and time when the form stops accepting responses.
5. Optional: to show a countdown timer on the shared form, turn on Show expiry countdown.

Builder Preview

When the form is outside the scheduled period, the form builder shows an information banner:

Shared Form View

When a respondent opens the shared form outside the scheduled period, the form shows a message instead of the form fields:

• Before start date: The form shows a "This form is not yet open" message and a live countdown timer. The timer shows the days, hours, minutes, and seconds until the form opens. When the countdown gets to zero, the form opens automatically.

• After expiration date: The form shows a "This form is no longer accepting responses" message. This tells the respondent that the form is closed.

Show Expiry Countdown

When this option is on, the shared form shows a countdown timer with the time until the form expires. When this option is off, the countdown shows automatically when less than 10 minutes remain before expiration.

Save Draft in Browser

The Save draft in browser toggle (on by default) lets respondents come back to a half-finished public form and keep what they typed. When the toggle is on, a public shared form saves the answers of the respondent automatically in the local storage of their browser. A page refresh or an accidental navigation does not delete a partly completed form. The tooltip reads: "Lets people return to a half-finished form without losing what they typed. Saved in their browser only; cleared on submit."

When NocoDB restores a saved draft, a dismissible banner shows at the top of the form: "Draft from {time} restored". When the form is submitted, NocoDB deletes the draft automatically.

This setting applies only to public shared form views (standard and survey forms). It does not apply to the internal form editor. Each form has its own draft. NocoDB keeps a draft for 30 days, only in the browser of the respondent. A draft does not restore Attachment fields, Links / LTAR fields, or hidden or locked fields.

When a respondent comes back to a form with a saved draft, the restored-draft banner shows at the top with a Discard option:

Post Form Submission Settings

You can set the actions that the form view does after a form is submitted. Set these actions in the Post Form Submission Settings panel.

1. Show Submit Another Form Button: When this option is on, a Submit Another Form button shows after the form is submitted.
2. Show a Blank form: When this option is on, a new blank form shows 5 seconds after the form is submitted.
3. Email responses: Select the project collaborators who get an email each time the form is submitted. Open the Email responses dropdown to see all project collaborators. Use the toggle next to each name to turn notifications on or off for that person. Use the search box to find a collaborator. Use select-all / clear-all to change all collaborators at the same time. This replaces the earlier single "Email me" toggle. Submission notifications can go to any project collaborator that you select, not only the form owner.
4. After Submit Message: You can set a message to show when the form is submitted successfully.

To open the collaborator picker, click the gear icon next to Email responses. In the picker, you can search, turn individual collaborators on or off, or use select-all / clear-all:

Redirect URL

To send the user to a specific URL after the form is submitted:

1. In the Post Form Submission Settings panel, turn on the Redirect URL switch.
2. In the input box, enter the URL.

After the form is submitted, the browser goes to this URL. It does not show the default success message & "Submit Another Form" button.

You can use {record_id} in the URL as a query parameter to show the new record as an expanded form. The user who submits the form must have access to the project. For example, https://app.nocodb.com/#/<workspaceId>/<baseId>/<tableId>?rowId={record_id}

You can also use {record_id} in the URL as a query parameter to send the record ID of the new record to a subsequent form, to link it there. For example, to fill a link field in another table with the new record, use the shared form URL with the link field prefilled: https://<shared form URL>?<link field>={record_id}

Field configuration

To change the field label on the form & add help text, click the field in the Form Area. In the configuration panel on the right, set:

1. Label Optional : The default is the field name. The label does not change the field name in the table.
2. Help Text Optional
3. Required : Turn on to make the field required

Select Field Type

Options Layout

For select-based field types, you can show the options as a Dropdown or as an inline expanded List.

Limit Options

You can limit the number of options in the dropdown or list. Use this when a field has many options, to show the user fewer choices.

• To hide an option in the dropdown or list, use the Hide button next to the option.
• To change the order of the options, use the Reorder button of the field.

Autocomplete

You can set browser autocomplete (autofill) hints for form fields in NocoDB. When autocomplete is on, browsers can suggest saved values, for example names, emails, addresses, and phone numbers. This makes forms faster to fill in.

Supported Field Types

Autocomplete is available for these field types:

• Single Line Text
• Email
• Phone Number
• URL
• Long Text (plain text mode only, not available when Rich Text is enabled)

Enabling Autocomplete

1. In the Form Area, click the field.
2. In the configuration panel on the right, turn on the Autocomplete switch. A dropdown shows.
3. In the dropdown, select the type of data that browsers suggest for this field.

Smart Defaults

When you turn on autocomplete, NocoDB automatically selects a default for the field type:

To change the default, select a different option in the dropdown.

Autocomplete Options

The dropdown puts the autocomplete hints in these groups:

Basic

• Off: Turns off browser autofill for this field.
• On: Turns on generic browser autofill.

Personal

• Full name, First name, Middle name, Last name, Prefix, Suffix, Nickname
• Email, Phone number, Phone country code, Phone area code
• Company / Organization, Job title, Gender, Language

Address

• Street address, Address line 1–3, City, State / Province
• Postal / ZIP code, Country code, Country

Web

• Website URL, Username
• New password, Current password, One-time code (OTP)

Field Validations ☁

You can set input data validations for fields in the form. To set a field validation, click the field in the Form Area. Then set the validations in the configuration panel on the right. Each field type has its own validations. The lists below give them.

Text-based Field Types

For the text-based field types Single Line Text Email Phone number URL Long Text Rich Text, you can set these validations:

Some field types have more validations:

---

Configuration Steps

1. In the Form Area, click the field.
2. In the configuration panel on the right, click the Settings icon next to Custom Validations.
3. To add a new validation rule, click Add Validation.
4. VALIDATOR: In the dropdown, select the type of validation rule.
5. VALIDATION VALUE: Enter the value for the validation rule.
6. WARNING MESSAGE (Optional): Enter a warning message. The form shows it when the value does not meet the validation rule.

Numeric Field Types

For the numeric field types Number Currency Percentage Decimal Duration, you can set these validations:

• Minimum: The minimum numeric value for the field.
• Maximum: The maximum numeric value for the field.

---

Configuration Steps

1. In the Form Area, click the field.
2. In the configuration panel on the right, click the toggle button next to Limit number to a range.
3. [Optional] Set the minimum value for the field.
4. [Optional] Set the maximum value for the field.

Date-based Field Types

For the date-based field types Date Date & Time Time Year, you can set these validations:

• Minimum: The minimum value for the field.
• Maximum: The maximum value for the field.

---

Configuration Steps

1. In the Form Area, click the field.
2. In the configuration panel on the right, click the toggle button next to Limit date to a range.
3. [Optional] Set the minimum value for the field.
4. [Optional] Set the maximum value for the field.

Attachment Field Type

For the attachment field type, you can set these validations:

• Limit file types: Limits the file types that users can upload. Enter the permitted MIME types. Example
  • image/png Allows only PNGs
  • application/pdf Allows PDF documents only
  • image/* Allows all images
• Limit file size: The maximum file size for the attachment, in KB or MB.
• Limit number of files: The maximum number of files that users can upload.

---

Configuration Steps

1. In the Form Area, click the field.
2. In the Limit file types section, enter the permitted MIME types. Use a comma between them.
3. In the Limit number of files section, enter the maximum number of files that users can upload.
4. In the Limit file size section, enter the maximum file size for the attachment.

This video gives more details and examples:

Field "Show On Conditions"

Conditional fields in the Form view control the visibility and behavior of selected fields. The data entered in earlier fields sets the result. A form field shows or hides when its filter conditions are met. The form then shows only the fields that apply to the user input.

In a condition, you can use only fields that are in the form & come before the field with the condition. This also limits how you can reorder the fields in the form. You can reorder fields only when this rule stays true.

To set up conditional fields in the Form view, open the form view builder. Then:

1. Select the field that gets the condition.
2. In the configuration panel on the right, click the Settings icon next to Show On Condition. The conditional field settings open.
3. To add new conditions, click Add Filter OR Add Filter Group.

In the form builder, an eye icon after the field name shows that the field is conditionally visible.

You can also use a Lookup field as the source of a condition. A Lookup gets its value through a link field. Thus, that link field must be on the form, before the field that depends on the Lookup. The Lookup value comes from the linked record that the respondent selects in the form. NocoDB uses the Lookup value only to check the condition. The form does not show it as an editable input.

Pre-Filling Form Fields

You can pre-fill form fields with specific values through URL parameters. This lets you create custom URLs with the field values that you need. Data entry is then faster and easier for users.

To make a pre-filled form URL manually, make sure that the URL parameters are encoded in this format: ?key1=value1&key2=value2.

For example, 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.

You can also make pre-filled URLs in the form builder:

1. Open the form builder.
2. Fill in the form fields with the values that you need.
3. In the top right corner, click the Share button.
4. To turn on sharing, turn on the Enable Public Viewing button.
5. To turn on pre-filling, turn on the Enable Prefill button.
6. To copy the pre-filled URL, click the Copy Link button.

Pre-fill Modes

1. Default: Standard mode. This mode fills the form fields with the values 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.

   

2. Hide prefilled fields: This mode fills the form fields with the values in the shared form URL. The form does not show the prefilled fields to 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.

   

3. Lock prefilled fields as read-only: This mode fills the form fields with the values in the shared form URL. The prefilled fields are locked 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.

   

Survey Form View

NocoDB has a special type of form view: Survey Form View. Use this view to create surveys & questionnaires. To turn on this view, turn on the Survey Mode switch when you create a shared form view.

This video shows how to use the Survey Mode:

When Survey Mode is on:

• The form shows one input field at a time.
• Users move between fields with the < & > buttons.

Attaching a file from mobile device

To attach a file from a mobile device:

• In the attachment field, click the Add File(s) button.
• Select an option. The options are different on each device. For example:
  • Camera : use this to take a picture
  • Files : use this to attach a file from your device

Related

Grid View
Gallery View
Kanban View