From 2a78930923a5fa65823fd3cdb8099a453c6256a3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:31:02 +0530
Subject: [PATCH] Nc feat/form view builder field settings in right pannel and
 fixed column delete modal virtual cell icon issue (#7927)

* feat(nc-gui): form field in right pannel setup

* fix(nc-gui): inline form field reorder issue

* fix(nc-gui): make edit form field right panel scrollable

* fix(nc-gui): form field limit option hide btn focus box shadow style issue

* fix(nc-gui): add support to edit form column in form view builder

* feat(nc-gui): added form field header menu dropdown

* fix(nc-gui): tab issue in form builder

* feat(nc-gui): add support to edit column from form builder itself

* fix(nc-gui): wrong virtual cell icon in column delete modal

* feat(nc-gui): column edit, hide, delete option in form builder field settings

* fix(nc-gui): move all form field settings radio btns to the right side

* chore(nc-gui): lint

* chore(nc-gui): lint errors

* chore(nc-gui): lint

* fix(nc-gui): update 'change icon color' text case

* fix(nc-gui): small changes

* fix(nc-gui): form builder side panel field div key issue

* fix(nc-gui): form view outsideclick fild toggle issue

* chore(nc-gui): lint

* fix(nc-gui): hide select dropdown in value is selected and show if value is not selected

* fix(nc-gui): suggested review changes

* fix(nc-gui): make form field rich text options sticky at bottom

* chore(nc-gui): lint

* fix(nc-gui): small changes

* fix(nc-gui): lazy import richtext component

* fix(nc-gui): set the max height for form rich text fields

* fix(nc-gui): move form settings switch inputs to the right side

* fix(nc-gui): move form select type field layout option to appearance settings section

* fix(nc-gui): select form active field text on focus

* fix(nc-gui): form rich text element menu option tabindex issue

* fix(nc-gui): form search field input autofill issue

* fix(nc-gui): update position of rich text menu option of form description

* feat(nc-gui): adjustable form view sidebar width

* chore(nc-gui): lint

* fix(nc-gui): typo mistake

* fix(nc-gui): PR review changes
---
 .../nc-gui/components/cell/MultiSelect.vue    |    5 +
 packages/nc-gui/components/cell/RichText.vue  |   56 +-
 .../cell/RichText/SelectedBubbleMenu.vue      |  311 +--
 .../nc-gui/components/cell/SingleSelect.vue   |    5 +
 .../dlg/share-and-collaborate/SharePage.vue   |    8 +-
 .../components/general/ShareProject.vue       |    2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 1861 +++++++++--------
 .../components/smartsheet/form/FieldMenu.vue  |  248 +++
 .../components/smartsheet/form/Layout.vue     |   94 +
 .../smartsheet/form/LimitOptions.vue          |    6 +-
 .../smartsheet/header/DeleteColumnModal.vue   |    8 +-
 packages/nc-gui/lang/en.json                  |    6 +-
 packages/nc-gui/lib/enums.ts                  |   17 +
 packages/nc-gui/store/sidebar.ts              |   13 +
 .../playwright/pages/Dashboard/Form/index.ts  |    2 +-
 15 files changed, 1603 insertions(+), 1039 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/form/FieldMenu.vue
 create mode 100644 packages/nc-gui/components/smartsheet/form/Layout.vue

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5b91e4dadb..10913279e9 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -10,6 +10,7 @@ import {
   EditColumnInj,
   EditModeInj,
   IsKanbanInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   RowHeightInj,
   computed,
@@ -64,6 +65,8 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(undefined))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -386,6 +389,8 @@ const onFocus = () => {
     isFocusing.value = false
   }, 250)
 
+  if (isSurveyForm.value && vModel.value?.length) return
+
   isOpen.value = true
 }
 </script>
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 422bea455f..4bc2c87660 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -9,22 +9,31 @@ import Underline from '@tiptap/extension-underline'
 import Placeholder from '@tiptap/extension-placeholder'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
+import type { RichTextBubbleMenuOptions } from '#imports'
 import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj } from '#imports'
 
-const props = defineProps<{
-  value?: string | null
-  readOnly?: boolean
-  syncValueChange?: boolean
-  showMenu?: boolean
-  fullMode?: boolean
-  isFormField?: boolean
-  autofocus?: boolean
-  placeholder?: string
-  renderAsText?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    value?: string | null
+    readOnly?: boolean
+    syncValueChange?: boolean
+    showMenu?: boolean
+    fullMode?: boolean
+    isFormField?: boolean
+    autofocus?: boolean
+    placeholder?: string
+    renderAsText?: boolean
+    hiddenBubbleMenuOptions?: RichTextBubbleMenuOptions[]
+  }>(),
+  {
+    hiddenBubbleMenuOptions: () => [],
+  },
+)
 
 const emits = defineEmits(['update:value'])
 
+const { hiddenBubbleMenuOptions } = toRefs(props)
+
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
@@ -208,7 +217,8 @@ useEventListener(
   editorDom,
   'focusout',
   (e: FocusEvent) => {
-    if (!(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
+    const targetEl = e?.relatedTarget as HTMLElement
+    if (targetEl?.classList?.contains('tiptap') || !targetEl?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
       isFocused.value = false
     }
   },
@@ -223,7 +233,7 @@ useEventListener(
       'flex flex-col flex-grow nc-rich-text-full': fullMode,
       'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
       'readonly': readOnly,
-      'nc-form-rich-text-field !p-0': isFormField,
+      'nc-form-rich-text-field !p-0 relative': isFormField,
       'nc-rich-text-grid': isGrid,
     }"
     :tabindex="readOnlyCell || isFormField ? -1 : 0"
@@ -251,21 +261,26 @@ useEventListener(
         class="flex flex-col nc-textarea-rich-editor w-full"
         :class="{
           'mt-2.5 flex-grow': fullMode,
-          'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
+          'scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent': !fullMode || (!fullMode && isExpandedFormOpen),
           'flex-grow': isExpandedFormOpen,
           [`!overflow-hidden children:line-clamp-${rowHeight}`]:
             !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
         }"
       />
-      <div v-if="isFormField && !readOnly">
+      <div v-if="isFormField && !readOnly" class="nc-form-field-bubble-menu-wrapper overflow-hidden">
         <div
-          class="overflow-hidden"
           :class="isFocused ? 'max-h-[50px]' : 'max-h-0'"
           :style="{
             transition: 'max-height 0.2s ease-in-out',
           }"
         >
-          <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode is-form-field />
+          <CellRichTextSelectedBubbleMenu
+            v-if="editor"
+            :editor="editor"
+            embed-mode
+            is-form-field
+            :hidden-options="hiddenBubbleMenuOptions"
+          />
         </div>
       </div>
     </template>
@@ -343,7 +358,7 @@ useEventListener(
 
 .nc-textarea-rich-editor {
   .tiptap p.is-editor-empty:first-child::before {
-    color: #6a7184;
+    color: #9aa2af;
     content: attr(data-placeholder);
     float: left;
     height: 0;
@@ -462,4 +477,9 @@ useEventListener(
     height: fit-content;
   }
 }
+.nc-form-field-bubble-menu-wrapper {
+  @apply absolute -bottom-9 left-1/2 z-50 rounded-lg;
+  transform: translateX(-50%);
+  box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.1);
+}
 </style>
diff --git a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
index ed5048d9fd..7d48b3b472 100644
--- a/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
+++ b/packages/nc-gui/components/cell/RichText/SelectedBubbleMenu.vue
@@ -10,16 +10,22 @@ import MsFormatH3 from '~icons/material-symbols/format-h3'
 import TablerBlockQuote from '~icons/tabler/blockquote'
 import MsCode from '~icons/material-symbols/code'
 import MsFormatQuote from '~icons/material-symbols/format-quote'
+import { RichTextBubbleMenuOptions } from '#imports'
 
 interface Props {
   editor: Editor
   embedMode?: boolean
   isFormField?: boolean
+  hiddenOptions?: RichTextBubbleMenuOptions[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  embedMode: false,
+  isFormField: false,
+  hiddenOptions: () => [],
+})
 
-const { editor, embedMode } = toRefs(props)
+const { editor, embedMode, isFormField, hiddenOptions } = toRefs(props)
 
 const cmdOrCtrlKey = computed(() => {
   return isMac() ? '⌘' : 'CTRL'
@@ -33,6 +39,14 @@ const altKey = computed(() => {
   return isMac() ? '⌥' : 'Alt'
 })
 
+const tooltipPlacement = computed(() => {
+  if (isFormField.value) return 'bottom'
+})
+
+const tabIndex = computed(() => {
+  return isFormField.value ? -1 : 0
+})
+
 const onToggleLink = () => {
   const activeNode = editor.value?.state?.selection?.$from?.nodeBefore || editor.value?.state?.selection?.$from?.nodeAfter
 
@@ -74,19 +88,29 @@ const onToggleLink = () => {
     }, 100)
   }
 }
+
+const isOptionVisible = (option: RichTextBubbleMenuOptions) => {
+  if (isFormField.value) return !hiddenOptions.value.includes(option)
+
+  return true
+}
+
+const showDivider = (options: RichTextBubbleMenuOptions[]) => {
+  return !isFormField.value || options.some((o) => !hiddenOptions.value.includes(o))
+}
 </script>
 
 <template>
   <div
-    class="bubble-menu flex-row gap-x-1 py-1 rounded-lg"
+    class="bubble-menu flex-row gap-x-1 rounded-lg"
     :class="{
-      'inline-flex !bg-transparent': isFormField,
-      'flex bg-gray-100 px-1': !isFormField,
+      'nc-form-field-bubble-menu inline-flex py-0': isFormField,
+      'flex bg-gray-100 px-1 py-1': !isFormField,
       'embed-mode': embedMode,
       'full-mode': !embedMode,
     }"
   >
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -100,14 +124,14 @@ const onToggleLink = () => {
         type="text"
         :class="{ 'is-active': editor.isActive('bold') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleBold().run()"
       >
         <MdiFormatBold />
       </NcButton>
     </NcTooltip>
 
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -121,13 +145,13 @@ const onToggleLink = () => {
         type="text"
         :disabled="editor.isActive('codeBlock')"
         :class="{ 'is-active': editor.isActive('italic') }"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click=";(editor!.chain().focus() as any).toggleItalic().run()"
       >
         <MdiFormatItalic />
       </NcButton>
     </NcTooltip>
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -142,13 +166,13 @@ const onToggleLink = () => {
         type="text"
         :class="{ 'is-active': editor.isActive('underline') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleUnderline().run()"
       >
         <MdiFormatUnderline />
       </NcButton>
     </NcTooltip>
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip :placement="tooltipPlacement" :disabled="editor.isActive('codeBlock')">
       <template #title>
         <div class="flex flex-col items-center">
           <div>
@@ -162,156 +186,179 @@ const onToggleLink = () => {
         type="text"
         :class="{ 'is-active': editor.isActive('strike') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="editor!.chain().focus().toggleStrike().run()"
       >
         <MdiFormatStrikeThrough />
       </NcButton>
     </NcTooltip>
-    <template v-if="!isFormField">
-      <NcTooltip v-if="embedMode">
-        <template #title> {{ $t('general.code') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('codeBlock') }"
-          @click="editor!.chain().focus().toggleCodeBlock().run()"
-        >
-          <MsCode />
-        </NcButton>
-      </NcTooltip>
-      <NcTooltip v-else :disabled="editor.isActive('codeBlock')">
-        <template #title> {{ $t('general.quote') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('code') }"
-          :disabled="editor.isActive('codeBlock')"
-          @click="editor!.chain().focus().toggleCode().run()"
-        >
-          <MsFormatQuote />
-        </NcButton>
-      </NcTooltip>
-      <div class="divider"></div>
 
-      <template v-if="embedMode">
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading1') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 1</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 1 }).run()"
-          >
-            <MsFormatH1 />
-          </NcButton>
-        </NcTooltip>
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading2') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 2</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 2 }).run()"
-          >
-            <MsFormatH2 />
-          </NcButton>
-        </NcTooltip>
-        <NcTooltip>
-          <template #title>
-            <div class="flex flex-col items-center">
-              <div>
-                {{ $t('labels.heading3') }}
-              </div>
-              <div>{{ cmdOrCtrlKey }} {{ altKey }} 3</div>
-            </div>
-          </template>
-          <NcButton
-            size="small"
-            type="text"
-            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-            @click="editor!.chain().focus().toggleHeading({ level: 3 }).run()"
-          >
-            <MsFormatH3 />
-          </NcButton>
-        </NcTooltip>
-
-        <div class="divider"></div>
-      </template>
-
-      <NcTooltip v-if="embedMode">
-        <template #title> {{ $t('labels.blockQuote') }}</template>
-        <NcButton
-          size="small"
-          type="text"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
-          @click="editor!.chain().focus().toggleBlockquote().run()"
-        >
-          <TablerBlockQuote class="-mt-0.25" />
-        </NcButton>
-      </NcTooltip>
+    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.code)" :placement="tooltipPlacement">
+      <template #title> {{ $t('general.code') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('codeBlock') }"
+        @click="editor!.chain().focus().toggleCodeBlock().run()"
+      >
+        <MsCode />
+      </NcButton>
+    </NcTooltip>
+    <NcTooltip
+      v-if="isFormField ? isOptionVisible(RichTextBubbleMenuOptions.quote) : !embedMode"
+      :placement="tooltipPlacement"
+      :disabled="editor.isActive('codeBlock')"
+    >
+      <template #title> {{ $t('general.quote') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('code') }"
+        :disabled="editor.isActive('codeBlock')"
+        @click="editor!.chain().focus().toggleCode().run()"
+      >
+        <MsFormatQuote />
+      </NcButton>
+    </NcTooltip>
+    <div class="divider"></div>
 
+    <template v-if="embedMode && !isFormField">
       <NcTooltip>
-        <template #title> {{ $t('labels.bulletList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading1') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 1</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
-          @click="editor!.chain().focus().toggleBulletList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 1 }).run()"
         >
-          <MdiFormatBulletList />
+          <MsFormatH1 />
         </NcButton>
       </NcTooltip>
-
       <NcTooltip>
-        <template #title> {{ $t('labels.numberedList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading2') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 2</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
-          @click="editor!.chain().focus().toggleOrderedList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 2 }).run()"
         >
-          <MdiFormatListNumber />
+          <MsFormatH2 />
         </NcButton>
       </NcTooltip>
-
       <NcTooltip>
-        <template #title> {{ $t('labels.taskList') }}</template>
+        <template #title>
+          <div class="flex flex-col items-center">
+            <div>
+              {{ $t('labels.heading3') }}
+            </div>
+            <div>{{ cmdOrCtrlKey }} {{ altKey }} 3</div>
+          </div>
+        </template>
         <NcButton
           size="small"
           type="text"
-          :class="{ 'is-active': editor.isActive('taskList') }"
-          @click="editor!.chain().focus().toggleTaskList().run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+          @click="editor!.chain().focus().toggleHeading({ level: 3 }).run()"
         >
-          <MdiFormatListCheckbox />
+          <MsFormatH3 />
         </NcButton>
       </NcTooltip>
 
       <div class="divider"></div>
     </template>
 
-    <NcTooltip :placement="isFormField ? 'bottom' : undefined" :disabled="editor.isActive('codeBlock')">
+    <NcTooltip v-if="embedMode && isOptionVisible(RichTextBubbleMenuOptions.blockQuote)" :placement="tooltipPlacement">
+      <template #title> {{ $t('labels.blockQuote') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+        @click="editor!.chain().focus().toggleBlockquote().run()"
+      >
+        <TablerBlockQuote class="-mt-0.25" />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.bulletList)" :placement="tooltipPlacement">
+      <template #title> {{ $t('labels.bulletList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        @click="editor!.chain().focus().toggleBulletList().run()"
+      >
+        <MdiFormatBulletList />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.numberedList)" :placement="tooltipPlacement">
+      <template #title> {{ $t('labels.numberedList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        @click="editor!.chain().focus().toggleOrderedList().run()"
+      >
+        <MdiFormatListNumber />
+      </NcButton>
+    </NcTooltip>
+
+    <NcTooltip v-if="isOptionVisible(RichTextBubbleMenuOptions.taskList)" :placement="tooltipPlacement">
+      <template #title> {{ $t('labels.taskList') }}</template>
+      <NcButton
+        size="small"
+        type="text"
+        :tabindex="tabIndex"
+        :class="{ 'is-active': editor.isActive('taskList') }"
+        @click="editor!.chain().focus().toggleTaskList().run()"
+      >
+        <MdiFormatListCheckbox />
+      </NcButton>
+    </NcTooltip>
+
+    <div
+      v-if="
+        showDivider([
+          RichTextBubbleMenuOptions.blockQuote,
+          RichTextBubbleMenuOptions.bulletList,
+          RichTextBubbleMenuOptions.numberedList,
+          RichTextBubbleMenuOptions.taskList,
+        ])
+      "
+      class="divider"
+    ></div>
+
+    <NcTooltip
+      v-if="isOptionVisible(RichTextBubbleMenuOptions.link)"
+      :placement="tooltipPlacement"
+      :disabled="editor.isActive('codeBlock')"
+    >
       <template #title> {{ $t('general.link') }}</template>
       <NcButton
         size="small"
         type="text"
         :class="{ 'is-active': editor.isActive('link') }"
         :disabled="editor.isActive('codeBlock')"
-        :tabindex="isFormField ? -1 : 0"
+        :tabindex="tabIndex"
         @click="onToggleLink"
       >
         <GeneralIcon v-if="isFormField" icon="link2"></GeneralIcon>
@@ -349,14 +396,14 @@ const onToggleLink = () => {
   box-shadow: 0px 0px 1.2rem 0 rgb(230, 230, 230) !important;
 }
 
-.bubble-menu.embed-mode {
+.bubble-menu.embed-mode:not(.nc-form-field-bubble-menu) {
   @apply border-transparent !shadow-none;
 }
 .bubble-menu.form-field-mode {
   @apply bg-transparent px-0;
 }
 
-.embed-mode.bubble-menu {
+.embed-mode.bubble-menu:not(.nc-form-field-bubble-menu) {
   @apply !py-0 !my-0 !border-0;
 
   .divider {
@@ -373,12 +420,20 @@ const onToggleLink = () => {
   @apply bg-white;
   border-width: 1px;
 
+  &.nc-form-field-bubble-menu {
+    .divider {
+      @apply border-r-1 border-gray-200 my-0;
+    }
+  }
+
   .nc-button.is-active {
     @apply !hover:outline-gray-200 bg-gray-100 text-brand-500;
     outline: 1px;
   }
-  .divider {
-    @apply border-r-1 border-gray-200 !h-6 !mx-0.5 my-1;
+  &:not(.nc-form-field-bubble-menu) {
+    .divider {
+      @apply border-r-1 border-gray-200 !h-6 !mx-0.5 my-1;
+    }
   }
   .ant-select-selector {
     @apply !rounded-md;
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 703d02c016..4423cc0479 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -11,6 +11,7 @@ import {
   EditModeInj,
   IsFormInj,
   IsKanbanInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   enumColor,
@@ -62,6 +63,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { $api } = useNuxtApp()
 
 const searchVal = ref()
@@ -312,6 +315,8 @@ const onFocus = () => {
     isFocusing.value = false
   }, 250)
 
+  if (isSurveyForm.value && vModel.value) return
+
   isOpen.value = true
 }
 </script>
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index fafadd37ba..a375b4dadb 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -370,9 +370,9 @@ watchEffect(() => {})
                 <div>
                   {{ $t('activity.surveyMode') }}
                 </div>
-                <NcTooltip>
+                <NcTooltip class="flex items-center">
                   <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
-                  <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                  <GeneralIcon icon="info" class="flex-none text-gray-600 cursor-pointer"></GeneralIcon>
                 </NcTooltip>
               </div>
               <a-switch
@@ -405,13 +405,13 @@ watchEffect(() => {})
                 {{ $t('activity.preFilledFields.title') }}
               </div>
 
-              <NcTooltip>
+              <NcTooltip class="flex items-center">
                 <template #title>
                   <div class="text-center">
                     {{ $t('tooltip.preFillFormInfo') }}
                   </div>
                 </template>
-                <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                <GeneralIcon icon="info" class="flex-none text-gray-600 cursor-pointer"></GeneralIcon>
               </NcTooltip>
             </div>
             <a-switch
diff --git a/packages/nc-gui/components/general/ShareProject.vue b/packages/nc-gui/components/general/ShareProject.vue
index 17c75aa057..f3d729e64f 100644
--- a/packages/nc-gui/components/general/ShareProject.vue
+++ b/packages/nc-gui/components/general/ShareProject.vue
@@ -47,7 +47,7 @@ const copySharedBase = async () => {
 <template>
   <div
     v-if="!isSharedBase && isUIAllowed('baseShare') && visibility !== 'hidden' && (activeTable || base)"
-    class="flex flex-col justify-center h-full"
+    class="nc-share-base-button flex flex-col justify-center h-full"
     data-testid="share-base-button"
     :data-sharetype="visibility"
   >
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b64ab3f9e6..3e28dd911b 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -7,6 +7,7 @@ import type { FormItemProps } from 'ant-design-vue'
 
 import {
   type AttachmentResType,
+  type ColumnType,
   ProjectRoles,
   RelationTypes,
   UITypes,
@@ -23,6 +24,7 @@ import {
   IsGalleryInj,
   MetaInj,
   ReloadViewDataHookInj,
+  RichTextBubbleMenuOptions,
   computed,
   createEventHook,
   extractSdkResponseErrorMsg,
@@ -30,7 +32,6 @@ import {
   inject,
   isEeUI,
   message,
-  onClickOutside,
   parseProp,
   provide,
   ref,
@@ -66,12 +67,20 @@ const hiddenColTypes = [
   UITypes.LastModifiedBy,
 ]
 
+const hiddenBubbleMenuOptions = [
+  RichTextBubbleMenuOptions.code,
+  RichTextBubbleMenuOptions.blockQuote,
+  RichTextBubbleMenuOptions.bulletList,
+  RichTextBubbleMenuOptions.numberedList,
+  RichTextBubbleMenuOptions.taskList,
+]
+
 const enum NcForm {
   heading = 'nc-form-heading',
   subheading = 'nc-form-sub-heading',
 }
 
-const { isMobileMode, user } = useGlobal()
+const { user } = useGlobal()
 
 const { $api, $e } = useNuxtApp()
 
@@ -127,8 +136,11 @@ const draggableRef = ref()
 
 const systemFieldsIds = ref<Record<string, any>[]>([])
 
-const showColumnDropdown = ref(false)
-
+const dropdownStates = ref({
+  showColumnMenu: false,
+  showEditColumn: false,
+  showAddColumn: false,
+})
 const drag = ref(false)
 
 const emailMe = ref(false)
@@ -137,8 +149,6 @@ const submitted = ref(false)
 
 const activeRow = ref('')
 
-const isTabPressed = ref(false)
-
 const isLoadingFormView = ref(false)
 
 const showCropper = ref(false)
@@ -188,7 +198,20 @@ const { open, onChange: onChangeFile } = useFileDialog({
 
 const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).sort((a, b) => a.order - b.order))
 
-const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value.logo_url)))
+const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value?.logo_url)))
+
+const activeField = computed(() => visibleColumns.value.find((c) => c.id === activeRow.value) || null)
+
+const activeColumn = computed(() => {
+  if (meta.value && activeField.value) {
+    if (meta.value.columnsById && (meta.value.columnsById as Record<string, ColumnType>)[activeField.value?.fk_column_id]) {
+      return (meta.value.columnsById as Record<string, ColumnType>)[activeField.value.fk_column_id]
+    } else if (meta.value.columns) {
+      return meta.value.columns.find((c) => c.id === activeField.value?.fk_column_id) ?? null
+    }
+  }
+  return null
+})
 
 const updateView = useDebounceFn(
   () => {
@@ -288,7 +311,6 @@ function onMoveCallback(event: any) {
 async function onMove(event: any, isVisibleFormFields = false) {
   if (isLocked.value || !isEditable) return
 
-  const { oldIndex } = event.moved
   let { newIndex, element } = event.moved
 
   const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === element.fk_column_id)
@@ -297,11 +319,7 @@ async function onMove(event: any, isVisibleFormFields = false) {
 
   if (isVisibleFormFields) {
     element = localColumns.value[localColumns.value?.findIndex((c) => c.fk_column_id === element.fk_column_id)]
-    newIndex = localColumns.value.findIndex(
-      (c) =>
-        c.fk_column_id ===
-        visibleColumns.value[newIndex > oldIndex ? newIndex - 1 : newIndex < oldIndex ? newIndex + 1 : newIndex].fk_column_id,
-    )
+    newIndex = localColumns.value.findIndex((c) => c.fk_column_id === visibleColumns.value[newIndex].fk_column_id)
   }
   if (!localColumns.value.length || localColumns.value.length === 1) {
     element.order = 1
@@ -317,7 +335,7 @@ async function onMove(event: any, isVisibleFormFields = false) {
 
   fields.value[fieldIndex] = element as any
 
-  localColumns.value = localColumns.value.sort((a, b) => {
+  localColumns.value = [...localColumns.value].sort((a, b) => {
     if (a.order !== undefined && b.order !== undefined) {
       return a.order - b.order
     }
@@ -327,12 +345,12 @@ async function onMove(event: any, isVisibleFormFields = false) {
   $e('a:form-view:reorder')
 }
 
-async function showOrHideColumn(column: Record<string, any>, show: boolean, isSidePannel = false) {
+async function showOrHideColumn(column: Record<string, any>, show: boolean, isFormSettings = false) {
   if (isLocked.value || !isEditable) return
 
   if (shouldSkipColumn(column)) {
     // Required field can't be moved
-    !isSidePannel && message.info(t('msg.info.requriedFieldsCantBeMoved'))
+    !isFormSettings && message.info(t('msg.info.requriedFieldsCantBeMoved'))
     return
   }
   const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === column.fk_column_id)
@@ -351,6 +369,9 @@ async function showOrHideColumn(column: Record<string, any>, show: boolean, isSi
       $e('a:form-view:hide-columns')
     }
   }
+  if (!show && !isFormSettings && activeRow.value) {
+    activeRow.value = ''
+  }
 }
 
 function shouldSkipColumn(col: Record<string, any>) {
@@ -423,7 +444,7 @@ function setFormData() {
   localColumns.value = col
     .filter((f) => !hiddenColTypes.includes(f.uidt) && !systemFieldsIds.value.includes(f.fk_column_id))
     .sort((a, b) => a.order - b.order)
-    .map((c) => ({ ...c, required: !!c.required }))
+    .map((c) => ({ ...c, label: c.label || c.title, required: !!c.required }))
 }
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
@@ -453,10 +474,35 @@ function onEmailChange() {
   updateView()
 }
 
-async function submitCallback() {
-  await loadFormView()
-  setFormData()
-  showColumnDropdown.value = false
+function resetFormFieldState() {
+  if (!activeField.value) return
+
+  // Reset the formstate if column type is changed or if column is deleted
+  delete formState.value[activeField.value.title]
+  if (isVirtualCol(activeField.value)) {
+    delete state.value[activeField.value.title]
+  }
+}
+
+async function addColumnCallback() {
+  dropdownStates.value.showAddColumn = false
+
+  reloadEventHook.trigger()
+}
+
+async function editColumnCallback() {
+  dropdownStates.value.showEditColumn = false
+
+  if (activeField.value && activeField.value.uidt !== activeColumn.value?.uidt) {
+    resetFormFieldState()
+  }
+
+  reloadEventHook.trigger()
+}
+
+async function deleteColumnCallback() {
+  resetFormFieldState()
+  reloadEventHook.trigger()
 }
 
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
@@ -476,8 +522,7 @@ const columnSupportsScanning = (elementType: UITypes) =>
 const onFormItemClick = (element: any) => {
   if (isLocked.value || !isEditable) return
 
-  activeRow.value = element.title
-  isTabPressed.value = false
+  activeRow.value = element.id
 }
 
 const handleChangeBackground = (color: string) => {
@@ -567,7 +612,7 @@ const validateFormURL = async (_rule, value) => {
 }
 
 const formElementValidationRules = (element) => {
-  const rules: FormItemProps['rules'][] = [
+  const rules: FormItemProps['rules'] = [
     {
       required: isRequired(element, element.required),
       message: t('msg.error.fieldRequired', { value: 'This field' }),
@@ -594,18 +639,16 @@ const formElementValidationRules = (element) => {
   return rules
 }
 
-onClickOutside(draggableRef, (e) => {
-  if (
-    (e.target as HTMLElement)?.closest(
-      '.nc-dropdown-single-select-cell, .nc-dropdown-multi-select-cell, .nc-dropdown-user-select-cell, .nc-form-rich-text-field',
-    )
-  ) {
-    return
-  }
+const onFocusActiveFieldLabel = (e: FocusEvent) => {
+  ;(e.target as HTMLTextAreaElement).select()
+}
 
-  activeRow.value = ''
-  isTabPressed.value = false
-})
+const updateSelectFieldLayout = (value: boolean) => {
+  if (!activeField.value) return
+
+  activeField.value.meta.isList = value
+  updateColMeta(activeField.value)
+}
 
 onMounted(async () => {
   if (imageCropperData.value.src) {
@@ -659,9 +702,9 @@ watch(
   },
 )
 
-watch(activeRow, (newValue) => {
+watch(activeField, (newValue) => {
   if (newValue) {
-    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.replaceAll(' ', ''))}`)
+    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.title?.replaceAll(' ', ''))}`)
 
     if (field) {
       setTimeout(() => {
@@ -669,48 +712,21 @@ watch(activeRow, (newValue) => {
       }, 50)
     }
   }
-})
 
-watch([focusLabel, activeRow], () => {
-  if (activeRow && focusLabel.value) {
-    focusLabel.value?.focus()
+  dropdownStates.value = {
+    ...dropdownStates.value,
+    showColumnMenu: false,
+    showEditColumn: false,
   }
 })
 
-useEventListener(
-  formRef,
-  'focusout',
-  (e: FocusEvent) => {
-    const nextActiveFieldTitle =
-      (e?.relatedTarget as HTMLElement)?.getAttribute('data-title') ||
-      (e?.relatedTarget as HTMLElement)?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title') ||
-      (e?.relatedTarget as HTMLElement)?.closest('.nc-form-focus-element')?.getAttribute('data-title')
-    if (
-      (activeRow.value || [NcForm.heading, NcForm.subheading].includes(nextActiveFieldTitle as NcForm)) &&
-      nextActiveFieldTitle &&
-      activeRow.value !== nextActiveFieldTitle
-    ) {
-      if (isTabPressed.value) {
-        activeRow.value = nextActiveFieldTitle
-      }
-    }
-    isTabPressed.value = false
-  },
-  true,
-)
-
-useEventListener(
-  formRef,
-  'keydown',
-  (e: KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      isTabPressed.value = true
-    } else {
-      isTabPressed.value = false
-    }
-  },
-  true,
-)
+watch([focusLabel, activeField], () => {
+  if (activeField && focusLabel.value) {
+    nextTick(() => {
+      focusLabel.value?.focus()
+    })
+  }
+})
 
 useEventListener(
   document,
@@ -735,6 +751,24 @@ useEventListener(
   },
   true,
 )
+
+useEventListener(
+  document,
+  'mousedown',
+  (e: MouseEvent) => {
+    if (
+      (draggableRef.value?.targetDomElement && draggableRef.value?.targetDomElement.contains(e.target)) ||
+      (e.target as HTMLElement)?.closest(
+        '.nc-form-right-panel, [class*="dropdown"], .nc-form-rich-text-field, .ant-modal, .ant-modal-wrap, .nc-share-base-button',
+      )
+    ) {
+      return
+    }
+
+    activeRow.value = ''
+  },
+  true,
+)
 </script>
 
 <template>
@@ -839,56 +873,61 @@ useEventListener(
           </div>
         </div>
         <template v-else-if="formViewData">
-          <div
-            class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
-            :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
-          >
-            <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
-              <GeneralImageCropper
-                v-if="isEditable"
-                v-model:show-cropper="showCropper"
-                :image-config="imageCropperData.imageConfig"
-                :cropper-config="imageCropperData.cropperConfig"
-                :upload-config="imageCropperData.uploadConfig"
-                @submit="handleOnUploadImage"
-              ></GeneralImageCropper>
-              <!-- cover image -->
-              <div v-if="!parseProp(formViewData?.meta).hide_banner" class="group relative max-w-[max(33%,688px)] mx-auto">
-                <GeneralFormBanner :key="formViewData.banner_image_url?.path" :banner-image-url="formViewData.banner_image_url" />
-                <div class="absolute bottom-0 right-0 hidden group-hover:block">
-                  <div class="flex items-center space-x-1 m-2">
-                    <NcTooltip :disabled="isEeUI">
-                      <template #title>
-                        <div class="text-center">
-                          {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                        </div>
-                      </template>
+          <SmartsheetFormLayout>
+            <template #preview>
+              <div
+                class="w-full h-full overflow-auto nc-form-scrollbar p-6"
+                :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
+              >
+                <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
+                  <GeneralImageCropper
+                    v-if="isEditable"
+                    v-model:show-cropper="showCropper"
+                    :image-config="imageCropperData.imageConfig"
+                    :cropper-config="imageCropperData.cropperConfig"
+                    :upload-config="imageCropperData.uploadConfig"
+                    @submit="handleOnUploadImage"
+                  ></GeneralImageCropper>
+                  <!-- cover image -->
+                  <div v-if="!parseProp(formViewData?.meta).hide_banner" class="group relative max-w-[max(33%,688px)] mx-auto">
+                    <GeneralFormBanner
+                      :key="formViewData.banner_image_url?.path"
+                      :banner-image-url="formViewData.banner_image_url"
+                    />
+                    <div class="absolute bottom-0 right-0 hidden group-hover:block">
+                      <div class="flex items-center space-x-1 m-2">
+                        <NcTooltip :disabled="isEeUI">
+                          <template #title>
+                            <div class="text-center">
+                              {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                            </div>
+                          </template>
 
-                      <NcButton
-                        type="secondary"
-                        size="small"
-                        class="nc-form-upload-banner-btn"
-                        data-testid="nc-form-upload-banner-btn"
-                        :disabled="!isEeUI"
-                        @click="openUploadImage(true)"
-                      >
-                        <div class="flex gap-2 items-center">
-                          <component :is="iconMap.upload" class="w-4 h-4" />
-                          <span>
-                            {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
-                            {{ $t('general.banner') }}
-                          </span>
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
-                    <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
-                      <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
-                      <NcButton
-                        type="secondary"
-                        size="small"
-                        class="nc-form-delete-banner-btn"
-                        data-testid="nc-form-delete-banner-btn"
-                        @click="
+                          <NcButton
+                            type="secondary"
+                            size="small"
+                            class="nc-form-upload-banner-btn"
+                            data-testid="nc-form-upload-banner-btn"
+                            :disabled="!isEeUI"
+                            @click="openUploadImage(true)"
+                          >
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.upload" class="w-4 h-4" />
+                              <span>
+                                {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
+                                {{ $t('general.banner') }}
+                              </span>
+                            </div>
+                          </NcButton>
+                        </NcTooltip>
+                        <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
+                          <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
+                          <NcButton
+                            type="secondary"
+                            size="small"
+                            class="nc-form-delete-banner-btn"
+                            data-testid="nc-form-delete-banner-btn"
+                            @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.banner_image_url = null
@@ -896,75 +935,75 @@ useEventListener(
                                 }
                               }
                             "
-                      >
-                        <div class="flex gap-2 items-center">
-                          <component :is="iconMap.delete" class="w-4 h-4" />
-                        </div>
-                      </NcButton>
-                    </NcTooltip>
+                          >
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.delete" class="w-4 h-4" />
+                            </div>
+                          </NcButton>
+                        </NcTooltip>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-              <a-card
-                class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
-                :body-style="{
-                  margin: '0 auto',
-                  padding: '0px !important',
-                }"
-              >
-                <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-                  <!-- form header -->
-                  <div class="flex flex-col px-4 lg:px-6">
-                    <!-- Form logo  -->
-                    <div class="mb-4">
-                      <div
-                        class="nc-form-logo-wrapper mx-6 group relative inline-block h-56px overflow-hidden flex items-center"
-                        :class="
-                          formViewData.logo_url
-                            ? 'max-w-189px hover:(w-full bg-gray-100 rounded-xl) '
-                            : 'bg-gray-100 max-w-147px rounded-xl'
-                        "
-                        style="transition: all 0.3s ease-in"
-                      >
-                        <LazyCellAttachmentImage
-                          v-if="formViewData.logo_url"
-                          :key="formViewData.logo_url?.path"
-                          :srcs="getFormLogoSrc"
-                          class="flex-none nc-form-logo !object-contain object-left max-h-full max-w-full !m-0"
-                        />
-                        <div
-                          class="items-center space-x-1 flex-nowrap m-3"
-                          :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
-                        >
-                          <NcTooltip :disabled="isEeUI">
-                            <template #title>
-                              <div class="text-center">
-                                {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                              </div>
-                            </template>
-                            <NcButton
-                              v-if="isEditable"
-                              type="secondary"
-                              size="small"
-                              class="nc-form-upload-logo-btn"
-                              data-testid="nc-form-upload-log-btn"
-                              :disabled="!isEeUI"
-                              @click="openUploadImage(false)"
+                  <a-card
+                    class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
+                    :body-style="{
+                      margin: '0 auto',
+                      padding: '0px !important',
+                    }"
+                  >
+                    <a-form ref="formRef" :model="formState" class="nc-form" no-style>
+                      <!-- form header -->
+                      <div class="flex flex-col px-4 lg:px-6">
+                        <!-- Form logo  -->
+                        <div class="mb-4">
+                          <div
+                            class="nc-form-logo-wrapper mx-6 group relative inline-block h-56px overflow-hidden flex items-center"
+                            :class="
+                              formViewData.logo_url
+                                ? 'max-w-189px hover:(w-full bg-gray-100 rounded-xl) '
+                                : 'bg-gray-100 max-w-147px rounded-xl'
+                            "
+                            style="transition: all 0.3s ease-in"
+                          >
+                            <LazyCellAttachmentImage
+                              v-if="formViewData.logo_url"
+                              :key="formViewData.logo_url?.path"
+                              :srcs="getFormLogoSrc"
+                              class="flex-none nc-form-logo !object-contain object-left max-h-full max-w-full !m-0"
+                            />
+                            <div
+                              class="items-center space-x-1 flex-nowrap m-3"
+                              :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
                             >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.upload" class="w-4 h-4" />
-                                <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
-                              </div>
-                            </NcButton>
-                          </NcTooltip>
-                          <NcTooltip v-if="isEeUI && formViewData.logo_url">
-                            <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
-                            <NcButton
-                              type="secondary"
-                              size="small"
-                              class="nc-form-delete-logo-btn"
-                              data-testid="nc-form-delete-logo-btn"
-                              @click="
+                              <NcTooltip :disabled="isEeUI">
+                                <template #title>
+                                  <div class="text-center">
+                                    {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                                  </div>
+                                </template>
+                                <NcButton
+                                  v-if="isEditable"
+                                  type="secondary"
+                                  size="small"
+                                  class="nc-form-upload-logo-btn"
+                                  data-testid="nc-form-upload-log-btn"
+                                  :disabled="!isEeUI"
+                                  @click="openUploadImage(false)"
+                                >
+                                  <div class="flex gap-2 items-center">
+                                    <component :is="iconMap.upload" class="w-4 h-4" />
+                                    <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
+                                  </div>
+                                </NcButton>
+                              </NcTooltip>
+                              <NcTooltip v-if="isEeUI && formViewData.logo_url">
+                                <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
+                                <NcButton
+                                  type="secondary"
+                                  size="small"
+                                  class="nc-form-delete-logo-btn"
+                                  data-testid="nc-form-delete-logo-btn"
+                                  @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.logo_url = null
@@ -972,639 +1011,684 @@ useEventListener(
                                 }
                               }
                             "
-                            >
-                              <div class="flex gap-2 items-center">
-                                <component :is="iconMap.delete" class="w-4 h-4" />
-                              </div>
-                            </NcButton>
-                          </NcTooltip>
+                                >
+                                  <div class="flex gap-2 items-center">
+                                    <component :is="iconMap.delete" class="w-4 h-4" />
+                                  </div>
+                                </NcButton>
+                              </NcTooltip>
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-
-                    <!-- form title -->
-                    <div
-                      class="border-transparent px-4 lg:px-6"
-                      :class="[
-                        {
-                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                        },
-                        {
-                          'mb-4 py-0 lg:py-0': !isEditable,
-                        },
-                        {
-                          'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
-                        },
-                        {
-                          'bg-gray-50': activeRow === NcForm.heading && isEditable,
-                        },
-                        {
-                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                        },
-                      ]"
-                      @click.stop="onFormItemClick({ title: NcForm.heading })"
-                    >
-                      <a-form-item v-if="isEditable" class="!my-0">
-                        <a-textarea
-                          v-model:value="formViewData.heading"
-                          class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
-                          :style="{
-                            'borderRightWidth': '0px !important',
-                            'height': '70px',
-                            'max-height': '250px',
-                            'resize': 'vertical',
-                          }"
-                          auto-size
-                          size="large"
-                          hide-details
-                          :disabled="isLocked"
-                          placeholder="Form Title"
-                          :bordered="false"
-                          :data-testid="NcForm.heading"
-                          :data-title="NcForm.heading"
-                          @update:value="updateView"
-                        />
-                      </a-form-item>
-
-                      <div v-else class="font-bold text-2xl text-gray-900">
-                        {{ formViewData.heading }}
-                      </div>
-                    </div>
 
-                    <!-- form description  -->
-                    <div
-                      class="border-transparent px-4 lg:px-6"
-                      :class="[
-                        {
-                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                        },
-                        {
-                          'mb-4 py-0 lg:py-0': !isEditable,
-                        },
-                        {
-                          'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
-                        },
-                        {
-                          'bg-gray-50': activeRow === NcForm.subheading && isEditable,
-                        },
-                        {
-                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                        },
-                      ]"
-                      @click.stop="onFormItemClick({ title: NcForm.subheading })"
-                    >
-                      <LazyCellRichText
-                        v-if="isEditable && !isLocked"
-                        v-model:value="formViewData.subheading"
-                        :placeholder="$t('msg.info.formDesc')"
-                        class="nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
-                        is-form-field
-                        :autofocus="activeRow === NcForm.subheading"
-                        :data-testid="NcForm.subheading"
-                        :data-title="NcForm.subheading"
-                        @update:value="updateView"
-                      />
-                      <LazyCellRichText
-                        v-else-if="formViewData.subheading"
-                        :value="formViewData.subheading"
-                        class="font-medium text-base !text-gray-500 -ml-1"
-                        is-form-field
-                        read-only
-                        sync-value-change
-                      />
-                    </div>
-                  </div>
+                        <!-- form title -->
+                        <div
+                          class="border-transparent px-4 lg:px-6"
+                          :class="[
+                            {
+                              'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                            },
+                            {
+                              'mb-4 py-0 lg:py-0': !isEditable,
+                            },
+                            {
+                              'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
+                            },
+                            {
+                              'bg-gray-50': activeRow === NcForm.heading && isEditable,
+                            },
+                            {
+                              '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                            },
+                          ]"
+                          @click.stop="onFormItemClick({ id: NcForm.heading })"
+                        >
+                          <a-form-item v-if="isEditable" class="!my-0">
+                            <a-textarea
+                              v-model:value="formViewData.heading"
+                              class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
+                              :style="{
+                                'borderRightWidth': '0px !important',
+                                'height': '70px',
+                                'max-height': '250px',
+                                'resize': 'vertical',
+                              }"
+                              auto-size
+                              size="large"
+                              hide-details
+                              :disabled="isLocked"
+                              placeholder="Form Title"
+                              :bordered="false"
+                              :data-testid="NcForm.heading"
+                              :data-title="NcForm.heading"
+                              @update:value="updateView"
+                            />
+                          </a-form-item>
 
-                  <Draggable
-                    ref="draggableRef"
-                    :list="visibleColumns"
-                    item-key="fk_column_id"
-                    draggable=".item"
-                    handle=".nc-form-field-drag-handler"
-                    group="form-inputs"
-                    ghost-class="nc-form-field-ghost"
-                    class="h-full px-4 lg:px-6"
-                    :move="onMoveCallback"
-                    :disabled="isLocked || !isEditable"
-                    @change="onMove($event, true)"
-                  >
-                    <template #item="{ element }">
-                      <div
-                        class="nc-editable nc-form-focus-element item relative bg-white"
-                        :class="[
-                          `nc-form-drag-${element.title.replaceAll(' ', '')}`,
-                          {
-                            'rounded-2xl overflow-hidden border-2 my-1': isEditable,
-                          },
-                          {
-                            'p-4 lg:p-6 border-transparent my-0': !isEditable,
-                          },
-                          {
-                            'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 cursor-pointer':
-                              activeRow !== element.title && isEditable,
-                          },
-
-                          {
-                            'border-brand-500': activeRow === element.title,
-                          },
-                          {
-                            '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                          },
-                        ]"
-                        :data-title="element.title"
-                        data-testid="nc-form-fields"
-                        @click.stop="onFormItemClick(element)"
-                      >
-                        <div v-if="activeRow !== element.title">
-                          <div class="text-sm font-semibold text-gray-800">
-                            <span data-testid="nc-form-input-label">
-                              {{ element.label || element.title }}
-                            </span>
-                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                              >&nbsp;*</span
-                            >
+                          <div v-else class="font-bold text-2xl text-gray-900">
+                            {{ formViewData.heading }}
                           </div>
+                        </div>
 
+                        <!-- form description  -->
+                        <div
+                          class="border-transparent px-4 lg:px-6"
+                          :class="[
+                            {
+                              'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                            },
+                            {
+                              'mb-4 py-0 lg:py-0': !isEditable,
+                            },
+                            {
+                              'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
+                            },
+                            {
+                              'bg-gray-50': activeRow === NcForm.subheading && isEditable,
+                            },
+                            {
+                              '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                            },
+                          ]"
+                          @click.stop="onFormItemClick({ id: NcForm.subheading })"
+                        >
                           <LazyCellRichText
-                            v-if="element.description"
-                            :value="element.description"
+                            v-if="isEditable && !isLocked"
+                            v-model:value="formViewData.subheading"
+                            :placeholder="$t('msg.info.formDesc')"
+                            class="nc-form-description nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
+                            is-form-field
+                            :autofocus="activeRow === NcForm.subheading"
+                            :data-testid="NcForm.subheading"
+                            :data-title="NcForm.subheading"
+                            @update:value="updateView"
+                          />
+                          <LazyCellRichText
+                            v-else-if="formViewData.subheading"
+                            :value="formViewData.subheading"
+                            class="font-medium text-base !text-gray-500 -ml-1"
                             is-form-field
                             read-only
                             sync-value-change
-                            class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
-                            data-testid="nc-form-help-text"
-                            @update:value="updateColMeta(element)"
                           />
                         </div>
+                      </div>
 
-                        <!-- Field Header  -->
-                        <div
-                          v-if="activeRow === element.title"
-                          class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50 border-b-1 border-gray-200"
-                        >
-                          <component
-                            :is="iconMap.drag"
-                            class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
-                          />
-                          <div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]">
-                            <SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
-                            <SmartsheetHeaderCellIcon v-else :column-meta="element" />
-
-                            <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
-                              <template #title>
-                                <div class="text-center">
-                                  {{ element.title }}
-                                </div>
-                              </template>
+                      <Draggable
+                        ref="draggableRef"
+                        :model-value="visibleColumns"
+                        item-key="fk_column_id"
+                        draggable=".item"
+                        handle=".nc-form-field-drag-handler"
+                        group="form-inputs"
+                        ghost-class="nc-form-field-ghost"
+                        class="h-full px-4 lg:px-6"
+                        :move="onMoveCallback"
+                        :disabled="isLocked || !isEditable"
+                        @change="onMove($event, true)"
+                      >
+                        <template #item="{ element }">
+                          <div
+                            :key="element.id"
+                            class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
+                            :class="[
+                              `nc-form-drag-${element.title.replaceAll(' ', '')}`,
+                              {
+                                'rounded-2xl border-2 my-1': isEditable,
+                              },
+                              {
+                                'border-transparent my-0': !isEditable,
+                              },
+                              {
+                                'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
+                                  activeRow !== element.id && isEditable,
+                              },
+
+                              {
+                                'border-brand-500': activeRow === element.id,
+                              },
+                              {
+                                '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                              },
+                            ]"
+                            :data-title="element.title"
+                            data-testid="nc-form-fields"
+                            @click.stop="onFormItemClick(element)"
+                          >
+                            <div v-if="activeRow === element.id" class="absolute -left-3 top-6">
+                              <NcButton
+                                type="primary"
+                                size="small"
+                                class="nc-form-field-drag-handler !cursor-move !p-1 !min-w-6 !h-auto !rounded"
+                              >
+                                <component
+                                  :is="iconMap.drag"
+                                  class="nc-form-field-drag-handler flex-none !h-4 !w-4 text-white font-bold"
+                                />
+                              </NcButton>
+                            </div>
+                            <div class="text-sm font-semibold text-gray-800">
                               <span data-testid="nc-form-input-label">
-                                {{ element.title }}
+                                {{ element.label || element.title }}
                               </span>
-                            </NcTooltip>
-                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                              >&nbsp;*</span
-                            >
-                          </div>
-                          <a-form-item class="!my-0">
-                            <div class="flex gap-2 items-center">
-                              <span
-                                class="nc-form-input-required text-gray-500 mr-2"
-                                data-testid="nc-form-input-required"
-                                @click.stop="
-                                  () => {
-                                    element.required = !element.required
-                                    updateColMeta(element)
-                                  }
-                                "
+                              <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                                >&nbsp;*</span
                               >
-                                {{ $t('general.required') }}
-                              </span>
-                              <a-switch
-                                v-model:checked="element.required"
-                                v-e="['a:form-view:field:mark-required']"
-                                size="small"
-                                @change="updateColMeta(element)"
-                              />
                             </div>
-                          </a-form-item>
-                        </div>
 
-                        <!-- Field Body  -->
-
-                        <div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
-                          <template v-if="activeRow === element.title">
-                            <a-form-item class="my-0 !mb-2">
-                              <a-textarea
-                                ref="focusLabel"
-                                v-model:value="element.label"
-                                :rows="1"
-                                auto-size
-                                hide-details
-                                class="form-meta-input nc-form-input-label"
-                                data-testid="nc-form-input-label"
-                                :placeholder="$t('msg.info.formInput')"
-                                @keydown.enter.prevent
-                                @change="updateColMeta(element)"
-                              />
-                            </a-form-item>
-
-                            <a-form-item class="my-0 !mb-3">
-                              <LazyCellRichText
-                                v-model:value="element.description"
-                                :placeholder="$t('msg.info.formHelpText')"
-                                class="form-meta-input nc-form-input-help-text"
-                                is-form-field
-                                data-testid="nc-form-input-help-text"
-                                @update:value="updateColMeta(element)"
-                            /></a-form-item>
-
-                            <a-form-item
-                              v-if="columnSupportsScanning(element.uidt)"
-                              class="!my-0 !mb-3 nc-form-input-enable-scanner-form-item"
-                            >
-                              <div class="flex space-x-4 items-center">
-                                <a-switch
-                                  v-model:checked="element.enable_scanner"
-                                  v-e="['a:form-view:field:mark-enable-scanner']"
-                                  size="small"
-                                  @change="updateColMeta(element)"
-                                />
-                                <span
-                                  class="text-gray-500 nc-form-input-enable-scanner"
-                                  data-testid="nc-form-input-enable-scanner"
-                                  @click="
-                                    () => {
-                                      element.general.enable_scanner = !element.general.enable_scanner
-                                      updateColMeta(element)
-                                    }
-                                  "
+                            <LazyCellRichText
+                              v-if="element.description"
+                              :value="element.description"
+                              is-form-field
+                              read-only
+                              sync-value-change
+                              class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
+                              data-testid="nc-form-help-text"
+                              @update:value="updateColMeta(element)"
+                            />
+
+                            <!-- Field Body  -->
+
+                            <div class="nc-form-field-body">
+                              <div class="mt-2">
+                                <a-form-item
+                                  :name="element.title"
+                                  class="!my-0 nc-input-required-error nc-form-input-item"
+                                  :rules="formElementValidationRules(element)"
                                 >
-                                  {{ $t('general.enableScanner') }}
-                                </span>
+                                  <LazySmartsheetDivDataCell class="relative" @click.stop>
+                                    <LazySmartsheetVirtualCell
+                                      v-if="isVirtualCol(element)"
+                                      v-model="formState[element.title]"
+                                      :row="row"
+                                      class="nc-input"
+                                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :column="element"
+                                    />
+                                    <LazySmartsheetCell
+                                      v-else
+                                      v-model="formState[element.title]"
+                                      class="nc-input truncate"
+                                      :class="[
+                                        `nc-form-input-${element.title.replaceAll(' ', '')}`,
+                                        { 'layout-list': element.meta.isList },
+                                      ]"
+                                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                      :column="element"
+                                      :edit-enabled="true"
+                                    />
+                                  </LazySmartsheetDivDataCell>
+                                </a-form-item>
                               </div>
-                            </a-form-item>
-                          </template>
-                          <div :class="activeRow !== element.title ? 'mt-2' : ''">
-                            <a-form-item
-                              :name="element.title"
-                              class="!my-0 nc-input-required-error nc-form-input-item"
-                              :rules="formElementValidationRules(element)"
-                            >
-                              <LazySmartsheetDivDataCell
-                                class="relative"
-                                @click.stop="
-                                  () => {
-                                    isTabPressed = false
-                                    if (activeRow !== element.title) {
-                                      activeRow = ''
-                                    }
-                                  }
-                                "
-                              >
-                                <LazySmartsheetVirtualCell
-                                  v-if="isVirtualCol(element)"
-                                  v-model="formState[element.title]"
-                                  :row="row"
-                                  class="nc-input"
-                                  :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :column="element"
-                                />
-                                <LazySmartsheetCell
-                                  v-else
-                                  v-model="formState[element.title]"
-                                  class="nc-input truncate"
-                                  :class="[
-                                    `nc-form-input-${element.title.replaceAll(' ', '')}`,
-                                    { 'layout-list': element.meta.isList },
-                                  ]"
-                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                  :column="element"
-                                  :edit-enabled="true"
-                                />
-                              </LazySmartsheetDivDataCell>
-                            </a-form-item>
-                          </div>
-                        </div>
-
-                        <!-- Field Settings  -->
-                        <div
-                          v-if="activeRow === element.title && isSelectTypeCol(element.uidt)"
-                          class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3 bg-gray-50"
-                        >
-                          <!-- Layout  -->
-                          <div v-if="isSelectTypeCol(element.uidt)">
-                            <div>Layout</div>
-
-                            <a-radio-group
-                              :value="!!element.meta.isList"
-                              class="nc-form-field-layout !mt-2"
-                              @update:value="
-                                (value) => {
-                                  element.meta.isList = value
-                                  updateColMeta(element)
-                                }
-                              "
-                            >
-                              <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                              <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                            </a-radio-group>
-                          </div>
-                          <!-- Todo: Show on conditions,... -->
-                          <!-- eslint-disable vue/no-constant-condition -->
-                          <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
-                            <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
-                            <div>
-                              <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
-                              <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
                             </div>
                           </div>
+                        </template>
 
-                          <!-- Limit options -->
+                        <template #footer>
                           <div
-                            v-if="isSelectTypeCol(element.uidt)"
-                            class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white"
+                            v-if="!visibleColumns.length && isEditable"
+                            class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
                           >
-                            <div class="flex items-center gap-3">
-                              <a-switch
-                                v-model:checked="element.meta.isLimitOption"
-                                v-e="['a:form-view:field:limit-options']"
-                                size="small"
-                                class="nc-form-switch-focus"
-                                @change="updateColMeta(element)"
-                              />
-                              <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
-                            </div>
-                            <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
-                              <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                              <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
-                                <LazySmartsheetFormLimitOptions
-                                  v-model:model-value="element.meta.limitOptions"
-                                  :column="element"
-                                  :is-required="isRequired(element, element.required)"
-                                  @update:model-value="updateColMeta(element)"
-                                ></LazySmartsheetFormLimitOptions>
-                              </div>
-                            </div>
+                            {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
                           </div>
-                        </div>
+                        </template>
+                      </Draggable>
+
+                      <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
+                        <NcButton
+                          type="secondary"
+                          size="small"
+                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                          class="nc-form-clear nc-form-focus-element"
+                          data-testid="nc-form-clear"
+                          data-title="nc-form-clear"
+                          @click="clearForm"
+                        >
+                          {{ $t('activity.clearForm') }}
+                        </NcButton>
+
+                        <NcButton
+                          html-type="submit"
+                          type="primary"
+                          size="small"
+                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                          class="nc-form-submit nc-form-focus-element"
+                          data-testid="nc-form-submit"
+                          data-title="nc-form-submit"
+                          @click="submitForm"
+                        >
+                          {{ $t('general.submit') }}
+                        </NcButton>
                       </div>
-                    </template>
+                    </a-form>
 
-                    <template #footer>
-                      <div
-                        v-if="!visibleColumns.length && isEditable"
-                        class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
-                      >
-                        {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
+                    <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
+                      <a-divider v-if="!isLocked" class="!my-8" />
+                      <!-- Nocodb Branding  -->
+                      <div class="inline-block">
+                        <GeneralFormBranding />
                       </div>
-                    </template>
-                  </Draggable>
-
-                  <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                      class="nc-form-clear nc-form-focus-element"
-                      data-testid="nc-form-clear"
-                      data-title="nc-form-clear"
-                      @click="clearForm"
-                    >
-                      {{ $t('activity.clearForm') }}
-                    </NcButton>
-
-                    <NcButton
-                      html-type="submit"
-                      type="primary"
-                      size="small"
-                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                      class="nc-form-submit nc-form-focus-element"
-                      data-testid="nc-form-submit"
-                      data-title="nc-form-submit"
-                      @click="submitForm"
-                    >
-                      {{ $t('general.submit') }}
-                    </NcButton>
-                  </div>
-                </a-form>
-
-                <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
-                  <a-divider v-if="!isLocked" class="!my-8" />
-                  <!-- Nocodb Branding  -->
-                  <div class="inline-block">
-                    <GeneralFormBranding />
-                  </div>
-                </div>
-              </a-card>
-            </div>
-          </div>
-          <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
-            <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
-              <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
-                <div class="flex flex-wrap justify-between items-center gap-2">
-                  <div class="flex gap-3">
-                    <div class="text-base font-bold text-gray-900">
-                      {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
                     </div>
-                    <NcBadge color="border-gray-200">
-                      {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
-                    </NcBadge>
-                  </div>
+                  </a-card>
+                </div>
+              </div>
+            </template>
+            <template #sidebar>
+              <!-- Right Panel -->
+              <div
+                class="nc-form-right-panel h-full flex-grow max-w-full"
+                :class="{
+                  'overflow-y-auto nc-form-scrollbar': activeField,
+                }"
+              >
+                <!-- Form Field settings -->
+                <div v-if="activeField && activeColumn" :key="activeField?.id">
+                  <!-- Field header -->
+                  <div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
+                    <div class="flex items-center">
+                      <div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
+                        {{ $t('objects.viewType.form') }}
+                      </div>
+                      <div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
 
-                  <a-dropdown
-                    v-if="isUIAllowed('fieldAdd')"
-                    v-model:visible="showColumnDropdown"
-                    :trigger="['click']"
-                    overlay-class-name="nc-dropdown-form-add-column"
-                  >
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      class="nc-form-add-field"
-                      data-testid="nc-form-add-field"
-                      @click.stop="showColumnDropdown = true"
-                    >
-                      <div class="flex gap-2 items-center">
-                        <component :is="iconMap.plus" class="w-4 h-4" />
-                        <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                      <div class="flex items-center pr-1 py-1.5 text-gray-800">
+                        <SmartsheetHeaderVirtualCellIcon
+                          v-if="isVirtualCol(activeField)"
+                          :column-meta="activeField"
+                          class="flex-none"
+                        />
+                        <SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="flex-none" />
+
+                        <NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
+                          <template #title>
+                            <div class="text-center">
+                              {{ activeField.title }}
+                            </div>
+                          </template>
+
+                          <span data-testid="nc-form-input-label">
+                            {{ activeField.title }}
+                          </span>
+                        </NcTooltip>
                       </div>
-                    </NcButton>
-
-                    <template #overlay>
-                      <SmartsheetColumnEditOrAddProvider
-                        v-if="showColumnDropdown"
-                        @submit="submitCallback"
-                        @cancel="showColumnDropdown = false"
-                        @click.stop
-                        @keydown.stop
-                      />
-                    </template>
-                  </a-dropdown>
-                </div>
-                <div>
-                  <a-input
-                    v-model:value="searchQuery"
-                    class="!h-9 !px-3 !py-1 !rounded-lg"
-                    :placeholder="`${$t('placeholder.searchFields')}...`"
-                    name="nc-form-field-search-input"
-                    data-testid="nc-form-field-search-input"
-                  >
-                    <template #prefix>
-                      <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
-                    </template>
-                    <template #suffix>
-                      <GeneralIcon
-                        v-if="searchQuery.length > 0"
-                        icon="close"
-                        class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
-                        data-testid="nc-form-field-clear-search"
-                        @click="searchQuery = ''"
+                    </div>
+                    <div class="flex items-center space-x-2">
+                      <a-dropdown
+                        v-model:visible="dropdownStates.showEditColumn"
+                        :trigger="['click']"
+                        overlay-class-name="nc-dropdown-form-edit-column"
+                        :disabled="!isUIAllowed('fieldEdit')"
+                      >
+                        <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
+                          {{ $t('general.edit') }} {{ $t('objects.field') }}
+                        </NcButton>
+                        <template #overlay>
+                          <SmartsheetColumnEditOrAddProvider
+                            v-if="dropdownStates.showEditColumn"
+                            :column="activeColumn"
+                            @submit="editColumnCallback"
+                            @cancel="dropdownStates.showEditColumn = false"
+                            @click.stop
+                            @keydown.stop
+                          />
+                        </template>
+                      </a-dropdown>
+                      <SmartsheetFormFieldMenu
+                        v-model:is-open="dropdownStates.showColumnMenu"
+                        :column="activeColumn"
+                        :form-column="activeField"
+                        :is-required="isRequired(activeField, activeField.required)"
+                        :on-delete="
+                          () => {
+                            deleteColumnCallback()
+                          }
+                        "
+                        @hide-field="showOrHideColumn(activeField, false, false)"
                       />
-                    </template>
-                  </a-input>
-                </div>
-                <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
-                  <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
-                    {{ $t('title.noFieldsFound') }}
+                    </div>
                   </div>
-                  <template v-if="localColumns.length">
-                    <div
-                      key="nc-form-show-all-fields"
-                      class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
-                      data-testid="nc-form-show-all-fields"
-                      @click.stop
-                    >
-                      <div class="w-4 h-4 flex-none mx-2"></div>
-                      <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
-                        <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
-                        <div class="flex items-center px-2">
+
+                  <!-- Field text -->
+                  <div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
+                    <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('general.text') }}</div>
+
+                    <a-textarea
+                      ref="focusLabel"
+                      v-model:value="activeField.label"
+                      :rows="1"
+                      auto-size
+                      hide-details
+                      class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
+                      data-testid="nc-form-input-label"
+                      :placeholder="$t('msg.info.formInput')"
+                      @focus="onFocusActiveFieldLabel"
+                      @keydown.enter.prevent
+                      @change="updateColMeta(activeField)"
+                    />
+
+                    <LazyCellRichText
+                      v-model:value="activeField.description"
+                      :placeholder="$t('msg.info.formHelpText')"
+                      class="form-meta-input nc-form-input-help-text"
+                      is-form-field
+                      :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
+                      data-testid="nc-form-input-help-text"
+                      @update:value="updateColMeta(activeField)"
+                    />
+                  </div>
+
+                  <!-- Field Settings -->
+                  <div class="nc-form-field-settings p-4 flex flex-col gap-4 border-b border-gray-200">
+                    <div class="text-base font-bold">{{ $t('objects.field') }} {{ $t('activity.settings') }}</div>
+                    <div class="flex flex-col gap-6">
+                      <div class="flex items-center justify-between gap-3">
+                        <div class="nc-form-input-required text-gray-800 font-medium">
+                          {{ $t('general.required') }} {{ $t('objects.field').toLowerCase() }}
+                        </div>
+
+                        <a-switch
+                          v-model:checked="activeField.required"
+                          v-e="['a:form-view:field:mark-required']"
+                          size="small"
+                          data-testid="nc-form-input-required"
+                          @change="updateColMeta(activeField)"
+                        />
+                      </div>
+
+                      <div v-if="columnSupportsScanning(activeField.uidt)" class="!my-0 nc-form-input-enable-scanner-form-item">
+                        <div class="flex items-center justify-between gap-3">
+                          <div class="nc-form-input-enable-scanner text-gray-800 font-medium">
+                            {{ $t('general.enableScanner') }}
+                          </div>
                           <a-switch
-                            :checked="visibleColumns.length === localColumns.length"
+                            v-model:checked="activeField.enable_scanner"
+                            v-e="['a:form-view:field:mark-enable-scanner']"
+                            data-testid="nc-form-input-enable-scanner"
                             size="small"
-                            class="nc-switch"
-                            @change="handleAddOrRemoveAllColumns"
+                            @change="updateColMeta(activeField)"
                           />
                         </div>
                       </div>
+
+                      <!-- Todo: Show on conditions,... -->
+                      <!-- eslint-disable vue/no-constant-condition -->
+                      <div v-if="false" class="flex items-start justify-between gap-3">
+                        <div>
+                          <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                          <div class="text-gray-500 mt-2">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+                        </div>
+                        <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
+                      </div>
+
+                      <!-- Limit options -->
+                      <div v-if="isSelectTypeCol(activeField.uidt)" class="flex items-start justify-between gap-3">
+                        <div class="flex items-center gap-3">
+                          <div class="flex-1">
+                            <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                            <div class="text-gray-500 mt-2">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                            <div v-if="activeField.meta.isLimitOption" class="mt-3">
+                              <LazySmartsheetFormLimitOptions
+                                v-model:model-value="activeField.meta.limitOptions"
+                                :column="activeField"
+                                :is-required="isRequired(activeField, activeField.required)"
+                                @update:model-value="updateColMeta(activeField)"
+                              ></LazySmartsheetFormLimitOptions>
+                            </div>
+                          </div>
+                        </div>
+                        <a-switch
+                          v-model:checked="activeField.meta.isLimitOption"
+                          v-e="['a:form-view:field:limit-options']"
+                          size="small"
+                          class="nc-form-switch-focus"
+                          @change="updateColMeta(activeField)"
+                        />
+                      </div>
                     </div>
-                    <Draggable
-                      :list="localColumns"
-                      item-key="id"
-                      ghost-class="nc-form-field-ghost"
-                      :style="{ height: 'calc(100% - 64px)' }"
-                      :disabled="isLocked || !isEditable"
-                      @change="onMove($event)"
-                      @start="drag = true"
-                      @end="drag = false"
-                    >
-                      <template #item="{ element: field }">
-                        <div
-                          v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
-                          :key="field.id"
-                          class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
-                          :class="[
-                            `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
-                            `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
-                          ]"
-                          :data-testid="`nc-form-field-item-${field.title}`"
+                  </div>
+
+                  <!-- Field Appearance Settings -->
+
+                  <div
+                    v-if="isSelectTypeCol(activeField.uidt)"
+                    class="nc-form-field-appearance-settings p-4 flex flex-col gap-4 border-b border-gray-200"
+                  >
+                    <div class="text-base font-bold">{{ $t('general.appearance') }}</div>
+                    <div class="flex flex-col gap-6">
+                      <!-- Select type field Options Layout  -->
+                      <div>
+                        <div class="text-gray-800 font-medium">Options layout</div>
+
+                        <a-radio-group
+                          :value="!!activeField.meta.isList"
+                          class="nc-form-field-layout !mt-3 max-w-[calc(100%_-_40px)]"
+                          @update:value="updateSelectFieldLayout"
                         >
-                          <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                          <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                          <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                        </a-radio-group>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Form Settings -->
+                <template v-else>
+                  <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
+                    <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
+                      <div class="flex flex-wrap justify-between items-center gap-2">
+                        <div class="flex gap-3">
+                          <div class="text-base font-bold text-gray-900">
+                            {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
+                          </div>
+                          <NcBadge color="border-gray-200">
+                            {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
+                          </NcBadge>
+                        </div>
+
+                        <a-dropdown
+                          v-if="isUIAllowed('fieldAdd')"
+                          v-model:visible="dropdownStates.showAddColumn"
+                          :trigger="['click']"
+                          overlay-class-name="nc-dropdown-form-add-column"
+                        >
+                          <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.plus" class="w-4 h-4" />
+                              <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                            </div>
+                          </NcButton>
+
+                          <template #overlay>
+                            <SmartsheetColumnEditOrAddProvider
+                              v-if="dropdownStates.showAddColumn"
+                              @submit="addColumnCallback"
+                              @cancel="dropdownStates.showAddColumn = false"
+                              @click.stop
+                              @keydown.stop
+                            />
+                          </template>
+                        </a-dropdown>
+                      </div>
+
+                      <form autocomplete="off">
+                        <a-input
+                          key="nc-form-field-search-input"
+                          v-model:value="searchQuery"
+                          type="text"
+                          autocomplete="off"
+                          class="!h-9 !px-3 !py-1 !rounded-lg"
+                          :placeholder="`${$t('placeholder.searchFields')}...`"
+                          name="nc-form-field-search-input"
+                          data-testid="nc-form-field-search-input"
+                        >
+                          <template #prefix>
+                            <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+                          </template>
+                          <template #suffix>
+                            <GeneralIcon
+                              v-if="searchQuery.length > 0"
+                              icon="close"
+                              class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
+                              data-testid="nc-form-field-clear-search"
+                              @click="searchQuery = ''"
+                            />
+                          </template>
+                        </a-input>
+                      </form>
+
+                      <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
+                        <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
+                          {{ $t('title.noFieldsFound') }}
+                        </div>
+                        <template v-if="localColumns.length">
                           <div
-                            class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
-                            @click="showOrHideColumn(field, !field.show, true)"
+                            key="nc-form-show-all-fields"
+                            class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
+                            data-testid="nc-form-show-all-fields"
+                            @click.stop
+                          >
+                            <div class="w-4 h-4 flex-none mx-2"></div>
+                            <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                              <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
+                              <div class="flex items-center px-2">
+                                <a-switch
+                                  :checked="visibleColumns.length === localColumns.length"
+                                  size="small"
+                                  class="nc-switch"
+                                  @change="handleAddOrRemoveAllColumns"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <Draggable
+                            :list="localColumns"
+                            item-key="id"
+                            ghost-class="nc-form-field-ghost"
+                            :style="{ height: 'calc(100% - 64px)' }"
+                            :disabled="isLocked || !isEditable"
+                            @change="onMove($event)"
+                            @start="drag = true"
+                            @end="drag = false"
                           >
-                            <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
-                            <SmartsheetHeaderCellIcon v-else :column-meta="field" />
-                            <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
-                              <div class="w-full flex items-center">
-                                <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
-                                  <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
-                                    <template #title>
-                                      <div class="text-center">
-                                        {{ field.title }}
+                            <template #item="{ element: field }">
+                              <div
+                                v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
+                                :key="field.id"
+                                class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
+                                :class="[
+                                  `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
+                                  `${activeRow === field.id ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
+                                ]"
+                                :data-testid="`nc-form-field-item-${field.title}`"
+                              >
+                                <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                                <div
+                                  class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
+                                  @click="showOrHideColumn(field, !field.show, true)"
+                                >
+                                  <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                                  <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                                  <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
+                                    <div class="w-full flex items-center">
+                                      <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
+                                        <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
+                                          <template #title>
+                                            <div class="text-center">
+                                              {{ field.title }}
+                                            </div>
+                                          </template>
+                                          <span data-testid="nc-field-title"> {{ field.title }} </span>
+                                        </NcTooltip>
                                       </div>
-                                    </template>
-                                    <span data-testid="nc-field-title"> {{ field.title }} </span>
-                                  </NcTooltip>
-                                </div>
-                                <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
-                                  <span>&nbsp;(</span>
-                                  <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
-                                    <template #title>
-                                      <div class="text-center">
-                                        {{ field.label }}
+                                      <div
+                                        v-if="field.label?.trim()"
+                                        class="truncate inline-flex text-xs font-normal text-gray-700"
+                                      >
+                                        <span>&nbsp;(</span>
+                                        <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
+                                          <template #title>
+                                            <div class="text-center">
+                                              {{ field.label }}
+                                            </div>
+                                          </template>
+                                          <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
+                                        </NcTooltip>
+                                        <span>)</span>
                                       </div>
-                                    </template>
-                                    <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
-                                  </NcTooltip>
-                                  <span>)</span>
+                                      <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
+                                        >&nbsp;*</span
+                                      >
+                                    </div>
+                                  </div>
+                                  <a-switch
+                                    :checked="!!field.show"
+                                    :disabled="field.required || isLocked || !isEditable"
+                                    class="nc-switch"
+                                    size="small"
+                                  />
                                 </div>
-                                <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
-                                  >&nbsp;*</span
-                                >
                               </div>
+                            </template>
+                            <template
+                              v-if="
+                                !localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length
+                              "
+                              #footer
+                            >
+                              <div class="px-0.5 py-2 text-gray-500 text-center">
+                                {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
+                              </div>
+                            </template>
+                          </Draggable>
+                        </template>
+                      </div>
+                    </Pane>
+                    <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
+                      <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
+                        <!-- Appearance Settings -->
+                        <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
+
+                        <div class="flex flex-col space-y-3">
+                          <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
+                            <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
+                            <div class="flex justify-start">
+                              <LazyGeneralColorPicker
+                                :model-value="(formViewData.meta as Record<string,any>).background_color"
+                                :colors="[
+                                  '#FFFFFF',
+                                  '#FFDBD9',
+                                  '#FEE6D6',
+                                  '#FFF0D1',
+                                  '#D4F7E0',
+                                  '#D7F2FF',
+                                  '#FED8F4',
+                                  '#E5D4F5',
+                                  '#FFCFE6',
+                                ]"
+                                color-box-border
+                                is-new-design
+                                class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
+                                @input="handleChangeBackground"
+                              />
                             </div>
-                            <a-switch
-                              :checked="!!field.show"
-                              :disabled="field.required || isLocked || !isEditable"
-                              class="nc-switch"
-                              size="small"
-                            />
                           </div>
-                        </div>
-                      </template>
-                      <template
-                        v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
-                        #footer
-                      >
-                        <div class="px-0.5 py-2 text-gray-500 text-center">
-                          {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
-                        </div>
-                      </template>
-                    </Draggable>
-                  </template>
-                </div>
-              </Pane>
-              <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
-                <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
-                  <!-- Appearance Settings -->
-                  <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
-
-                  <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
-                    <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
-                    <div class="flex justify-start">
-                      <LazyGeneralColorPicker
-                        :model-value="(formViewData.meta as Record<string,any>).background_color"
-                        :colors="[
-                          '#FFFFFF',
-                          '#FFDBD9',
-                          '#FEE6D6',
-                          '#FFF0D1',
-                          '#D4F7E0',
-                          '#D7F2FF',
-                          '#FED8F4',
-                          '#E5D4F5',
-                          '#FFCFE6',
-                        ]"
-                        color-box-border
-                        is-new-design
-                        class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
-                        @input="handleChangeBackground"
-                      />
-                    </div>
-                  </div>
 
-                  <div class="flex items-center">
-                    <!-- Hide NocoDB Branding -->
-                    <a-switch
-                      v-if="isEeUI"
-                      v-e="[`a:form-view:hide-branding`]"
-                      :checked="parseProp(formViewData.meta)?.hide_branding"
-                      size="small"
-                      class="nc-form-hide-branding"
-                      data-testid="nc-form-hide-branding"
-                      :disabled="isLocked || !isEditable"
-                      @change="
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Hide NocoDB Branding -->
+
+                            <span>{{ $t('labels.hideNocodbBranding') }}</span>
+
+                            <a-switch
+                              v-if="isEeUI"
+                              v-e="[`a:form-view:hide-branding`]"
+                              :checked="parseProp(formViewData.meta)?.hide_branding"
+                              size="small"
+                              class="nc-form-hide-branding"
+                              data-testid="nc-form-hide-branding"
+                              :disabled="isLocked || !isEditable"
+                              @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1612,27 +1696,28 @@ useEventListener(
                         updateView()
                       }
                     "
-                    />
-                    <NcTooltip v-else placement="top">
-                      <template #title>
-                        <div class="text-center">
-                          {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                        </div>
-                      </template>
-                      <a-switch :checked="false" size="small" :disabled="true" />
-                    </NcTooltip>
-                    <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
-                  </div>
-                  <div class="flex items-center">
-                    <!-- Hide Banner -->
-                    <a-switch
-                      v-e="[`a:form-view:hide-banner`]"
-                      :checked="parseProp(formViewData.meta)?.hide_banner"
-                      size="small"
-                      class="nc-form-hide-banner"
-                      data-testid="nc-form-hide-banner"
-                      :disabled="isLocked || !isEditable"
-                      @change="
+                            />
+
+                            <NcTooltip v-else placement="top">
+                              <template #title>
+                                <div class="text-center">
+                                  {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                                </div>
+                              </template>
+                              <a-switch :checked="false" size="small" :disabled="true" />
+                            </NcTooltip>
+                          </div>
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Hide Banner -->
+                            <span>{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
+                            <a-switch
+                              v-e="[`a:form-view:hide-banner`]"
+                              :checked="parseProp(formViewData.meta)?.hide_banner"
+                              size="small"
+                              class="nc-form-hide-banner"
+                              data-testid="nc-form-hide-banner"
+                              :disabled="isLocked || !isEditable"
+                              @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1640,94 +1725,94 @@ useEventListener(
                         updateView()
                       }
                     "
-                    />
-
-                    <span class="ml-4">{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
-                  </div>
-                </div>
-
-                <div class="p-4 flex flex-col space-y-4">
-                  <!-- Post Form Submission Settings -->
-                  <div class="text-base font-bold text-gray-900">
-                    {{ $t('msg.info.postFormSubmissionSettings') }}
-                  </div>
-
-                  <!-- Show this message -->
-                  <div>
-                    <div class="text-gray-800 mb-2">
-                      {{ $t('msg.info.formDisplayMessage') }}
-                    </div>
-                    <a-form-item class="!my-0">
-                      <LazyCellRichText
-                        v-if="!isLocked && isEditable"
-                        v-model:value="formViewData.success_msg"
-                        class="nc-form-after-submit-msg"
-                        :is-form-field="true"
-                        data-testid="nc-form-after-submit-msg"
-                        @update:value="updateView" />
-                      <LazyCellRichText
-                        v-else
-                        :value="formViewData.success_msg"
-                        class="nc-form-after-submit-msg"
-                        is-form-field
-                        read-only
-                        data-testid="nc-form-after-submit-msg"
-                    /></a-form-item>
-                  </div>
+                            />
+                          </div>
+                        </div>
+                      </div>
 
-                  <!-- Other options -->
-                  <div class="flex flex-col gap-3">
-                    <div class="flex items-center">
-                      <!-- Show "Submit Another Form" button -->
-                      <a-switch
-                        v-model:checked="formViewData.submit_another_form"
-                        v-e="[`a:form-view:submit-another-form`]"
-                        size="small"
-                        class="nc-form-checkbox-submit-another-form"
-                        data-testid="nc-form-checkbox-submit-another-form"
-                        :disabled="isLocked || !isEditable"
-                        @change="updateView"
-                      />
-                      <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
-                    </div>
+                      <div class="p-4 flex flex-col space-y-4">
+                        <!-- Post Form Submission Settings -->
+                        <div class="text-base font-bold text-gray-900">
+                          {{ $t('msg.info.postFormSubmissionSettings') }}
+                        </div>
 
-                    <div class="flex items-center">
-                      <!-- Show a blank form after 5 seconds -->
-                      <a-switch
-                        v-model:checked="formViewData.show_blank_form"
-                        v-e="[`a:form-view:show-blank-form`]"
-                        size="small"
-                        class="nc-form-checkbox-show-blank-form"
-                        data-testid="nc-form-checkbox-show-blank-form"
-                        :disabled="isLocked || !isEditable"
-                        @change="updateView"
-                      />
+                        <div class="flex flex-col gap-3">
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Show "Submit Another Form" button -->
+                            <span>{{ $t('msg.info.submitAnotherForm') }}</span>
+                            <a-switch
+                              v-model:checked="formViewData.submit_another_form"
+                              v-e="[`a:form-view:submit-another-form`]"
+                              size="small"
+                              class="nc-form-checkbox-submit-another-form"
+                              data-testid="nc-form-checkbox-submit-another-form"
+                              :disabled="isLocked || !isEditable"
+                              @change="updateView"
+                            />
+                          </div>
 
-                      <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
-                    </div>
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Show a blank form after 5 seconds -->
+                            <span>{{ $t('msg.info.showBlankForm') }}</span>
+                            <a-switch
+                              v-model:checked="formViewData.show_blank_form"
+                              v-e="[`a:form-view:show-blank-form`]"
+                              size="small"
+                              class="nc-form-checkbox-show-blank-form"
+                              data-testid="nc-form-checkbox-show-blank-form"
+                              :disabled="isLocked || !isEditable"
+                              @change="updateView"
+                            />
+                          </div>
 
-                    <div class="flex items-center">
-                      <a-switch
-                        v-model:checked="emailMe"
-                        v-e="[`a:form-view:email-me`]"
-                        size="small"
-                        class="nc-form-checkbox-send-email"
-                        data-testid="nc-form-checkbox-send-email"
-                        :disabled="isLocked || !isEditable"
-                        @change="onEmailChange"
-                      />
+                          <div class="flex items-center justify-between gap-3">
+                            <!-- Email me at <email> -->
+                            <span>
+                              {{ $t('msg.info.emailForm') }}
+                              <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                            </span>
+                            <a-switch
+                              v-model:checked="emailMe"
+                              v-e="[`a:form-view:email-me`]"
+                              size="small"
+                              class="nc-form-checkbox-send-email"
+                              data-testid="nc-form-checkbox-send-email"
+                              :disabled="isLocked || !isEditable"
+                              @change="onEmailChange"
+                            />
+                          </div>
+                        </div>
 
-                      <!-- Email me at <email> -->
-                      <span class="ml-4">
-                        {{ $t('msg.info.emailForm') }}
-                        <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </Pane>
-            </Splitpanes>
-          </div>
+                        <!-- Show this message -->
+                        <div class="pb-10">
+                          <div class="text-gray-800 mb-2">
+                            {{ $t('msg.info.formDisplayMessage') }}
+                          </div>
+                          <a-form-item class="!my-0">
+                            <LazyCellRichText
+                              v-if="!isLocked && isEditable"
+                              v-model:value="formViewData.success_msg"
+                              class="nc-form-after-submit-msg"
+                              is-form-field
+                              :hidden-bubble-menu-options="hiddenBubbleMenuOptions"
+                              data-testid="nc-form-after-submit-msg"
+                              @update:value="updateView" />
+                            <LazyCellRichText
+                              v-else
+                              :value="formViewData.success_msg"
+                              class="nc-form-after-submit-msg"
+                              is-form-field
+                              read-only
+                              data-testid="nc-form-after-submit-msg"
+                          /></a-form-item>
+                        </div>
+                      </div>
+                    </Pane>
+                  </Splitpanes>
+                </template>
+              </div>
+            </template>
+          </SmartsheetFormLayout>
         </template>
       </div>
     </template>
@@ -1857,7 +1942,7 @@ useEventListener(
 }
 
 .nc-form-scrollbar {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
+  @apply scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {
     @apply !scrollbar-thumb-gray-300;
   }
@@ -1899,6 +1984,13 @@ useEventListener(
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
   }
 }
+.nc-form-right-panel {
+  :deep(.nc-form-rich-text-field) {
+    .nc-text-area-rich-link-option-input {
+      @apply !w-250px;
+    }
+  }
+}
 </style>
 
 <style lang="scss">
@@ -1912,6 +2004,9 @@ useEventListener(
   }
   &.nc-form-input-help-text .nc-textarea-rich-editor {
     @apply pt-1 text-gray-700;
+    .ProseMirror {
+      max-height: 7.5rem !important;
+    }
   }
 }
 .nc-form-after-submit-msg {
@@ -1919,7 +2014,13 @@ useEventListener(
     @apply pl-1 pr-2 pt-2 pb-1 !rounded-lg !text-sm border-1 border-gray-200 focus-within:border-brand-500;
     .ProseMirror {
       min-height: 5rem;
+      max-height: 7.5rem !important;
     }
   }
 }
+.nc-form-description {
+  .nc-form-field-bubble-menu-wrapper {
+    @apply -bottom-12;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/form/FieldMenu.vue b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
new file mode 100644
index 0000000000..cad663897f
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/form/FieldMenu.vue
@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { computed } from 'vue'
+import {
+  ActiveViewInj,
+  ColumnInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  SmartsheetStoreEvents,
+  iconMap,
+  inject,
+  message,
+  toRefs,
+  useI18n,
+  useMetas,
+  useNuxtApp,
+  useSmartsheetStoreOrThrow,
+} from '#imports'
+
+const props = defineProps<{
+  column: ColumnType
+  formColumn: Record<string, any>
+  isRequired?: boolean
+  isOpen: boolean
+  onDelete: () => void
+}>()
+
+const emit = defineEmits(['hideField', 'update:isOpen', 'delete'])
+
+const { column, isRequired } = toRefs(props)
+
+const isOpen = useVModel(props, 'isOpen', emit)
+
+const { eventBus } = useSmartsheetStoreOrThrow()
+
+const reloadDataHook = inject(ReloadViewDataHookInj)
+
+const meta = inject(MetaInj, ref())
+
+const view = inject(ActiveViewInj, ref())
+
+const isLocked = inject(IsLockedInj)
+
+provide(ColumnInj, column)
+
+const { $api } = useNuxtApp()
+
+const { t } = useI18n()
+
+const { getMeta } = useMetas()
+
+const showDeleteColumnModal = ref(false)
+
+const isDuplicateDlgOpen = ref(false)
+const selectedColumnExtra = ref<any>()
+const duplicateDialogRef = ref<any>()
+
+const duplicateVirtualColumn = async () => {
+  let columnCreatePayload = {}
+
+  // generate duplicate column title
+  const duplicateColumnTitle = getUniqueColumnName(`${column!.value.title} copy`, meta!.value!.columns!)
+
+  columnCreatePayload = {
+    ...column!.value!,
+    ...(column!.value.colOptions ?? {}),
+    title: duplicateColumnTitle,
+    column_name: duplicateColumnTitle.replace(/\s/g, '_'),
+    id: undefined,
+    colOptions: undefined,
+    order: undefined,
+    system: false,
+  }
+
+  try {
+    const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list
+
+    const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
+    let newColumnOrder
+    if (currentColumnIndex === gridViewColumnList.length - 1) {
+      newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1
+    } else {
+      newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2
+    }
+
+    await $api.dbTableColumn.create(meta!.value!.id!, {
+      ...columnCreatePayload,
+      pv: false,
+      view_id: view.value!.id as string,
+      column_order: {
+        order: newColumnOrder,
+        view_id: view.value!.id as string,
+      },
+    } as ColumnReqType)
+    await getMeta(meta!.value!.id!, true)
+
+    eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD)
+    reloadDataHook?.trigger()
+
+    // message.success(t('msg.success.columnDuplicated'))
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+  // closing dropdown
+  isOpen.value = false
+}
+
+const openDuplicateDlg = async () => {
+  if (!column?.value) return
+  if (
+    column.value.uidt &&
+    [
+      UITypes.Lookup,
+      UITypes.Rollup,
+      UITypes.CreatedTime,
+      UITypes.LastModifiedTime,
+      UITypes.CreatedBy,
+      UITypes.LastModifiedBy,
+    ].includes(column.value.uidt as UITypes)
+  ) {
+    duplicateVirtualColumn()
+  } else {
+    const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list
+
+    const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id)
+    let newColumnOrder
+    if (currentColumnIndex === gridViewColumnList.length - 1) {
+      newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1
+    } else {
+      newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2
+    }
+
+    selectedColumnExtra.value = {
+      pv: false,
+      view_id: view.value!.id as string,
+      column_order: {
+        order: newColumnOrder,
+        view_id: view.value!.id as string,
+      },
+    }
+
+    if (column.value.uidt === UITypes.Formula) {
+      nextTick(() => {
+        duplicateDialogRef?.value?.duplicate()
+      })
+    } else {
+      isDuplicateDlgOpen.value = true
+    }
+
+    isOpen.value = false
+  }
+}
+
+// hide the field in view
+const hideField = async () => {
+  if (isRequired.value) return
+  isOpen.value = false
+  emit('hideField')
+}
+
+const handleDelete = () => {
+  // closing the dropdown
+  // when modal opens
+  isOpen.value = false
+  showDeleteColumnModal.value = true
+}
+
+const isDeleteAllowed = computed(() => {
+  return column?.value && !column.value.system
+})
+const isDuplicateAllowed = computed(() => {
+  return column?.value && !column.value.system
+})
+</script>
+
+<template>
+  <a-dropdown
+    v-if="!isLocked"
+    v-model:visible="isOpen"
+    :trigger="['click']"
+    placement="bottomLeft"
+    overlay-class-name="nc-dropdown-form-column-operations !border-1 rounded-lg !shadow-xl"
+    @click.stop="isOpen = !isOpen"
+  >
+    <NcButton
+      type="secondary"
+      size="small"
+      class="nc-form-add-field"
+      data-testid="nc-form-add-field"
+      @click.stop="showAddColumnDropdown = true"
+    >
+      <component :is="iconMap.threeDotVertical" class="flex-none w-4 h-4" />
+    </NcButton>
+    <template #overlay>
+      <NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options">
+        <!-- Todo: Duplicate column with form column settings -->
+        <!-- eslint-disable vue/no-constant-condition -->
+        <NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg">
+          <div class="nc-column-duplicate nc-form-header-menu-item">
+            <component :is="iconMap.duplicate" />
+            <!-- Duplicate -->
+            {{ t('general.duplicate') }}
+          </div>
+        </NcMenuItem>
+
+        <NcMenuItem :disabled="isRequired" @click="hideField">
+          <div class="nc-column-insert-before nc-form-header-menu-item">
+            <component :is="iconMap.eye" class="!w-3.75 !h-3.75" />
+            <!-- Hide Field -->
+            {{ $t('general.hideField') }}
+          </div>
+        </NcMenuItem>
+
+        <template v-if="!column?.pv">
+          <a-divider class="!my-0" />
+
+          <NcMenuItem :disabled="!isDeleteAllowed" class="!hover:bg-red-50" @click="handleDelete">
+            <div class="nc-column-delete nc-form-header-menu-item text-red-600">
+              <component :is="iconMap.delete" />
+              <!-- Delete -->
+              {{ $t('general.delete') }}
+            </div>
+          </NcMenuItem>
+        </template>
+      </NcMenu>
+    </template>
+  </a-dropdown>
+  <SmartsheetHeaderDeleteColumnModal
+    v-model:visible="showDeleteColumnModal"
+    class="nc-form-column-delete-dropdown"
+    :on-delete-column="onDelete"
+  />
+  <DlgColumnDuplicate
+    v-if="column"
+    ref="duplicateDialogRef"
+    v-model="isDuplicateDlgOpen"
+    :column="column"
+    :extra="selectedColumnExtra"
+  />
+</template>
+
+<style scoped>
+.nc-form-header-menu-item {
+  @apply flex items-center gap-2;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/form/Layout.vue b/packages/nc-gui/components/smartsheet/form/Layout.vue
new file mode 100644
index 0000000000..4f521543b9
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/form/Layout.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { Pane, Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
+
+const { leftSidebarWidth, windowSize, formRightSidebarState, formRightSidebarWidthPercent } = storeToRefs(useSidebarStore())
+
+const formPreviewSize = computed(() => 100 - formRightSidebarWidthPercent.value)
+
+function onResize(widthPercent: any) {
+  const sidebarWidth = (widthPercent * (windowSize.value - leftSidebarWidth.value)) / 100
+
+  if (sidebarWidth > formRightSidebarState.value.maxWidth) {
+    formRightSidebarState.value.width = formRightSidebarState.value.maxWidth
+  } else if (sidebarWidth < formRightSidebarState.value.minWidth) {
+    formRightSidebarState.value.width = formRightSidebarState.value.minWidth
+  } else {
+    formRightSidebarState.value.width = sidebarWidth
+  }
+}
+
+const normalizeSidebarWidth = computed(() => {
+  if (formRightSidebarState.value.width > formRightSidebarState.value.maxWidth) {
+    return formRightSidebarState.value.maxWidth
+  } else if (formRightSidebarState.value.width < formRightSidebarState.value.minWidth) {
+    return formRightSidebarState.value.minWidth
+  } else {
+    return formRightSidebarState.value.width
+  }
+})
+</script>
+
+<template>
+  <Splitpanes
+    class="nc-form-right-sidebar-content-resizable-wrapper w-full h-full"
+    @resize="(event: any) => onResize(event[1].size)"
+  >
+    <Pane :size="formPreviewSize" class="flex-1 h-full">
+      <slot name="preview" />
+    </Pane>
+    <Pane
+      min-size="15%"
+      class="nc-sidebar-splitpane relative"
+      :size="formRightSidebarWidthPercent"
+      :style="{
+        minWidth: `${formRightSidebarState.minWidth}px !important`,
+        maxWidth: `${normalizeSidebarWidth}px !important`,
+      }"
+    >
+      <slot name="sidebar" />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style lang="scss">
+/** Split pane CSS */
+
+.nc-form-right-sidebar-content-resizable-wrapper > {
+  .splitpanes__splitter {
+    @apply !w-0 relative overflow-visible;
+  }
+  .splitpanes__splitter:before {
+    @apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40;
+    content: '';
+  }
+
+  .splitpanes__splitter:hover:before {
+    @apply bg-scrollbar;
+    width: 3px !important;
+    left: 0px;
+  }
+
+  .splitpanes--dragging .splitpanes__splitter:before {
+    @apply bg-scrollbar;
+    width: 3px !important;
+    left: 0px;
+  }
+
+  .splitpanes--dragging .splitpanes__splitter {
+    @apply w-1 mr-0;
+  }
+}
+
+.splitpanes__pane {
+  transition: width 0.15s ease-in-out !important;
+}
+
+.splitpanes--dragging {
+  cursor: col-resize;
+
+  > .splitpanes__pane {
+    transition: none !important;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
index c12b9ba4c5..4a7787fe98 100644
--- a/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
+++ b/packages/nc-gui/components/smartsheet/form/LimitOptions.vue
@@ -162,7 +162,7 @@ const showOrHideAll = (showAll: boolean) => {
     </div>
 
     <div v-if="vModel.length" class="flex items-stretch gap-2 pr-2 pl-3 py-1.5 rounded-t-lg border-1 border-b-0 border-gray-200">
-      <NcTooltip class="truncate max-w-full" :disabled="!isRequired">
+      <NcTooltip :disabled="!isRequired">
         <template #title> {{ $t('msg.info.preventHideAllOptions') }} </template>
 
         <NcButton
@@ -172,7 +172,7 @@ const showOrHideAll = (showAll: boolean) => {
           :disabled="isRequired || vModel.filter((o) => !o.show).length === vModel.length"
           @click="showOrHideAll(false)"
         >
-          Hide all
+          {{ $t('general.hideAll') }}
         </NcButton>
       </NcTooltip>
 
@@ -184,7 +184,7 @@ const showOrHideAll = (showAll: boolean) => {
           :disabled="vModel.filter((o) => o.show).length === vModel.length"
           @click="showOrHideAll(true)"
         >
-          Show all
+          {{ $t('general.showAll') }}
         </NcButton>
       </div>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
index ef0296c24b..4cfcd7517f 100644
--- a/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
+++ b/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
-import { RelationTypes, isLinksOrLTAR } from 'nocodb-sdk'
+import { RelationTypes, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
 
 const props = defineProps<{
   visible: boolean
+  onDeleteColumn?: () => void
 }>()
 
 const emits = defineEmits(['update:visible'])
@@ -46,6 +47,8 @@ const onDelete = async () => {
 
     $e('a:column:delete')
     visible.value = false
+
+    props.onDeleteColumn?.()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {
@@ -58,7 +61,8 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.column')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="column" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <SmartsheetHeaderCellIcon class="nc-view-icon"></SmartsheetHeaderCellIcon>
+        <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" class="nc-view-icon"></SmartsheetHeaderVirtualCellIcon>
+        <SmartsheetHeaderCellIcon v-else class="nc-view-icon"></SmartsheetHeaderCellIcon>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.5"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index bf29da34c1..6c583e1fee 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -198,7 +198,9 @@
     "logo": "Logo",
     "dropdown": "Dropdown",
     "list": "List",
-    "apply": "Apply"
+    "apply": "Apply",
+    "text": "Text",
+    "appearance": "Appearance"
   },
   "objects": {
     "day": "Day",
@@ -972,7 +974,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "changeIconColour": "Change Icon Colour",
+    "changeIconColour": "Change icon colour",
     "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index f386e6a9df..3fbd9746e3 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -142,3 +142,20 @@ export enum PreFilledMode {
   Hidden = 'hidden',
   Locked = 'locked',
 }
+
+export enum RichTextBubbleMenuOptions {
+  bold = 'bold',
+  italic = 'italic',
+  underline = 'underline',
+  strike = 'strike',
+  code = 'code',
+  quote = 'quote',
+  heading1 = 'heading1',
+  heading2 = 'heading2',
+  heading3 = 'heading3',
+  blockQuote = 'blockQuote',
+  bulletList = 'bulletList',
+  numberedList = 'numberedList',
+  taskList = 'taskList',
+  link = 'link',
+}
diff --git a/packages/nc-gui/store/sidebar.ts b/packages/nc-gui/store/sidebar.ts
index 7f0e5ee2bd..2c6abd0f9a 100644
--- a/packages/nc-gui/store/sidebar.ts
+++ b/packages/nc-gui/store/sidebar.ts
@@ -52,6 +52,16 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
 
   const nonHiddenLeftSidebarWidth = computed(() => (width.value * nonHiddenMobileSidebarSize.value) / 100)
 
+  const formRightSidebarState = ref({
+    minWidth: 384,
+    maxWidth: 600,
+    width: 384,
+  })
+
+  const formRightSidebarWidthPercent = computed(() => {
+    return (formRightSidebarState.value.width / (width.value - leftSidebarWidth.value)) * 100
+  })
+
   return {
     isLeftSidebarOpen,
     isRightSidebarOpen,
@@ -61,6 +71,9 @@ export const useSidebarStore = defineStore('sidebarStore', () => {
     leftSidebarWidth,
     mobileNormalizedSidebarSize,
     nonHiddenLeftSidebarWidth,
+    windowSize: width,
+    formRightSidebarState,
+    formRightSidebarWidthPercent,
   }
 })
 
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index cefa14284f..b2eeea39e8 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -60,7 +60,7 @@ export class FormPage extends BasePage {
   }
 
   getFormFieldsRequired() {
-    return this.get().locator('[data-testid="nc-form-input-required"] + button');
+    return this.get().locator('[data-testid="nc-form-input-required"]');
   }
 
   getFormFieldsInputLabel() {