mirror of https://github.com/nocodb/nocodb
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.
1 lines
13 KiB
1 lines
13 KiB
"use strict";(self.webpackChunknoco_docs=self.webpackChunknoco_docs||[]).push([[8838],{3905:(e,t,i)=>{i.d(t,{Zo:()=>m,kt:()=>h});var r=i(67294);function a(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function o(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function n(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?o(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function l(e,t){if(null==e)return{};var i,r,a=function(e,t){if(null==e)return{};var i,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)i=o[r],t.indexOf(i)>=0||(a[i]=e[i]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)i=o[r],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(a[i]=e[i])}return a}var s=r.createContext({}),d=function(e){var t=r.useContext(s),i=t;return e&&(i="function"==typeof e?e(t):n(n({},t),e)),i},m=function(e){var t=d(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},c=r.forwardRef((function(e,t){var i=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),p=d(i),c=a,h=p["".concat(s,".").concat(c)]||p[c]||f[c]||o;return i?r.createElement(h,n(n({ref:t},m),{},{components:i})):r.createElement(h,n({ref:t},m))}));function h(e,t){var i=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=i.length,n=new Array(o);n[0]=c;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:a,n[1]=l;for(var d=2;d<o;d++)n[d]=i[d];return r.createElement.apply(null,n)}return r.createElement.apply(null,i)}c.displayName="MDXCreateElement"},80131:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>s,contentTitle:()=>n,default:()=>f,frontMatter:()=>o,metadata:()=>l,toc:()=>d});var r=i(87462),a=(i(67294),i(3905));const o={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"]},n=void 0,l={unversionedId:"views/view-types/form",id:"views/view-types/form",title:"Form",description:"Learn how to create, import, and manage forms in NocoDB.",source:"@site/docs/090.views/040.view-types/030.form.md",sourceDirName:"090.views/040.view-types",slug:"/views/view-types/form",permalink:"/views/view-types/form",draft:!1,editUrl:"https://github.com/nocodb/nocodb/tree/develop/packages/noco-docs/docs/docs/090.views/040.view-types/030.form.md",tags:[{label:"Views",permalink:"/tags/views"},{label:"Form view",permalink:"/tags/form-view"}],version:"current",sidebarPosition:30,frontMatter:{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"]},sidebar:"tutorialSidebar",previous:{title:"Gallery",permalink:"/views/view-types/gallery"},next:{title:"Kanban",permalink:"/views/view-types/kanban"}},s={},d=[{value:"Form View Builder",id:"form-view-builder",level:2},{value:"Form View Actions",id:"form-view-actions",level:2},{value:"Form View Operations",id:"form-view-operations",level:2},{value:"Add Form Title & Description",id:"add-form-title--description",level:3},{value:"Add Fields to the Form",id:"add-fields-to-the-form",level:3},{value:"Change field label & help-text",id:"change-field-label--help-text",level:3},{value:"Mark a Field as Required",id:"mark-a-field-as-required",level:3},{value:"Rearrange Fields Within the Form",id:"rearrange-fields-within-the-form",level:3},{value:"Remove Fields from the Form",id:"remove-fields-from-the-form",level:3},{value:"Add a New Field to the Table",id:"add-a-new-field-to-the-table",level:3},{value:"Form View Settings",id:"form-view-settings",level:3},{value:"Survey Form View",id:"survey-form-view",level:2},{value:"Related articles",id:"related-articles",level:2}],m={toc:d},p="wrapper";function f(e){let{components:t,...o}=e;return(0,a.kt)(p,(0,r.Z)({},m,o,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Form View allows you to arrange fields in a form to input data."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"1010-2 Form",src:i(36374).Z,width:"2880",height:"1800"})),(0,a.kt)("h2",{id:"form-view-builder"},"Form View Builder"),(0,a.kt)("p",null,"Form view builder layout can be divided into 3 sections:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"Fields Area")," - This is the area where fields available in the tables that are not yet added to the form are listed. "),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"Form Area")," - This is the area where fields added to the form are listed."),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"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.")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Form Builder",src:i(85994).Z,width:"2880",height:"1800"})),(0,a.kt)("h2",{id:"form-view-actions"},"Form View Actions"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/create-view/#create-new-view"},"Create a New Form View")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/actions-on-view#rename-view"},"Rename an Existing Form View")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/actions-on-view#duplicate-view"},"Duplicate a Form View")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/actions-on-view#delete-view"},"Remove a Form View")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/share-view"},"Share a Form View")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"/views/views-overview#view-permission-types"},"Lock Form View for Edits"))),(0,a.kt)("h2",{id:"form-view-operations"},"Form View Operations"),(0,a.kt)("h3",{id:"add-form-title--description"},"Add Form Title & Description"),(0,a.kt)("p",null,"In the ",(0,a.kt)("strong",{parentName:"p"},"Form View")," area, click on in input boxes provided for ",(0,a.kt)("strong",{parentName:"p"},"Title")," <1> & ",(0,a.kt)("strong",{parentName:"p"},"Description")," <2> to add/update title & description to the form."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Form Title & Description",src:i(8037).Z,width:"2880",height:"1800"})),(0,a.kt)("h3",{id:"add-fields-to-the-form"},"Add Fields to the Form"),(0,a.kt)("p",null,"To add a field to the form, either"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Drag and drop the field from the ",(0,a.kt)("strong",{parentName:"li"},"Fields Area")," to the ",(0,a.kt)("strong",{parentName:"li"},"Form Area")," at required position"),(0,a.kt)("li",{parentName:"ul"},"Click on the field in the ",(0,a.kt)("strong",{parentName:"li"},"Fields Area")," to add it to the end of the ",(0,a.kt)("strong",{parentName:"li"},"Form Area"))),(0,a.kt)("h3",{id:"change-field-label--help-text"},"Change field label & help-text"),(0,a.kt)("p",null,"To change the field label displayed on the form & add help-text, click on the field in the ",(0,a.kt)("strong",{parentName:"p"},"Form Area")," and update the values in the input boxes provided for ",(0,a.kt)("strong",{parentName:"p"},"Label")," <1> & ",(0,a.kt)("strong",{parentName:"p"},"Help Text")," <2>."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Field Label & Help Text",src:i(69990).Z,width:"2880",height:"1800"})),(0,a.kt)("h3",{id:"mark-a-field-as-required"},"Mark a Field as Required"),(0,a.kt)("p",null,"To mark a field as required, click on the field in the ",(0,a.kt)("strong",{parentName:"p"},"Form Area")," and toggle the ",(0,a.kt)("inlineCode",{parentName:"p"},"Required")," switch."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Required Field",src:i(17750).Z,width:"2880",height:"1800"})),(0,a.kt)("h3",{id:"rearrange-fields-within-the-form"},"Rearrange Fields Within the Form"),(0,a.kt)("p",null,"To rearrange fields within the form, drag and drop the field to the required position."),(0,a.kt)("h3",{id:"remove-fields-from-the-form"},"Remove Fields from the Form"),(0,a.kt)("p",null,"To remove a field from the form, either"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Drag and drop the field from the ",(0,a.kt)("strong",{parentName:"li"},"Form Area")," to the ",(0,a.kt)("strong",{parentName:"li"},"Fields Area")),(0,a.kt)("li",{parentName:"ul"},"Hover over the field in the ",(0,a.kt)("strong",{parentName:"li"},"Form Area")," and click on the ",(0,a.kt)("inlineCode",{parentName:"li"},"hide")," icon")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Hide Field",src:i(9011).Z,width:"2880",height:"1800"})),(0,a.kt)("h3",{id:"add-a-new-field-to-the-table"},"Add a New Field to the Table"),(0,a.kt)("p",null,"To add a new field to the table, "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Click on the ",(0,a.kt)("inlineCode",{parentName:"li"},"+ Add new field to this table")," in the ",(0,a.kt)("strong",{parentName:"li"},"Fields Area")," and "),(0,a.kt)("li",{parentName:"ul"},"Select the field name & type from the dropdown."),(0,a.kt)("li",{parentName:"ul"},"Click on ",(0,a.kt)("inlineCode",{parentName:"li"},"Save Field"))),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Add Field",src:i(95727).Z,width:"2880",height:"1800"})),(0,a.kt)("h3",{id:"form-view-settings"},"Form View Settings"),(0,a.kt)("p",null,"NocoDB allows you to configure the form view to perform various actions after a form is submitted. These actions can be configured in the ",(0,a.kt)("strong",{parentName:"p"},"Form Settings")," area."),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"After Submit Message"),": You can configure a message to display on successful submission of the form."),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"Show ",(0,a.kt)("inlineCode",{parentName:"strong"},"Submit Another Form")," Button"),": This option when enabled, will display a ",(0,a.kt)("inlineCode",{parentName:"li"},"Submit Another Form")," button after the form is submitted."),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"Show a Blank form"),": This option when enabled, will display a new blank form 5 seconds after the form is submitted."),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("strong",{parentName:"li"},"Email me"),": Enable this option to receive an Email after the form is submitted. ")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Form View Settings",src:i(13742).Z,width:"2880",height:"1800"})),(0,a.kt)("h2",{id:"survey-form-view"},"Survey Form View"),(0,a.kt)("p",null,"NocoDB supports a special type of form view called ",(0,a.kt)("inlineCode",{parentName:"p"},"Survey Form View"),". This view is ideal for creating surveys & questionnaires. This view can be enabled by toggling the ",(0,a.kt)("inlineCode",{parentName:"p"},"Survey Mode")," switch when creating ",(0,a.kt)("a",{parentName:"p",href:"/views/share-view#share-form-view-options"},"shared form view"),". "),(0,a.kt)("p",null,"When enabled, "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Form input fields will be displayed one at a time. "),(0,a.kt)("li",{parentName:"ul"},"Users can navigate between fields using the ",(0,a.kt)("inlineCode",{parentName:"li"},"<")," & ",(0,a.kt)("inlineCode",{parentName:"li"},">")," buttons.")),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Survey Form View",src:i(46359).Z,width:"2878",height:"1416"})),(0,a.kt)("h2",{id:"related-articles"},"Related articles"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"/views/view-types/grid"},"Form View"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("a",{parentName:"p",href:"/views/view-types/gallery"},"Gallery View"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("a",{parentName:"p",href:"/views/view-types/kanban"},"Kanban View")))}f.isMDXComponent=!0},95727:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-add-field-26399d5da0f299a76f045286f4b70690.png"},69990:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-field-label-help-text-aa69425b678df2503add4a96f926e238.png"},85994:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-layout-348a2dba9c9ceafe6911477b7e530283.png"},9011:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-remove-field-efc0f8d307ab234bfea21fa9c467dfd6.png"},17750:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-required-field-62f44205bdd070ef8c4c8d30de181286.png"},13742:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-settings-f765389d102cecdac46b0258b696344f.png"},8037:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-title-description-99d122bea09868f65bd0f6e04e087db4.png"},36374:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/form-view-94e8ab4d97828f668019451e303409c0.png"},46359:(e,t,i)=>{i.d(t,{Z:()=>r});const r=i.p+"assets/images/survey-form-ba422967e0b347d42b4824e8940b064c.png"}}]); |