From 8a1282f4b0d95d5d0f26a165ed42be6fa640ea27 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:04:51 +0530
Subject: [PATCH] Form Editor v2.5 (#599)

* Form Editor v2.5

* Remove log debug

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/FileInput.vue         |  9 ++-
 client/components/forms/TextAreaInput.vue     |  3 +-
 client/components/forms/TextInput.vue         |  3 +-
 .../forms/components/InputLabel.vue           |  2 +-
 .../forms/components/InputWrapper.vue         |  3 +-
 .../components/forms/components/VSelect.vue   | 30 ++++++++--
 client/components/forms/useFormInput.js       | 10 ++++
 .../components/forms/validation/HasError.vue  | 45 ++++++++++-----
 client/components/global/EditableTag.vue      | 10 ++--
 .../open/forms/OpenCompleteForm.vue           | 19 +++++--
 client/components/open/forms/OpenForm.vue     |  2 +-
 .../components/open/forms/OpenFormField.vue   |  9 +--
 .../open/forms/components/FormEditor.vue      | 12 +++-
 .../forms/components/FormEditorNavbar.vue     | 55 ++++++++++---------
 .../forms/components/FormFieldsEditor.vue     |  2 +-
 .../form-components/AddFormBlock.vue          |  4 +-
 .../form-components/FormEditorPreview.vue     |  2 +-
 .../components/templates/QuestionsEditor.vue  |  2 +-
 .../forms/fields/components/BlockOptions.vue  |  4 +-
 .../components/HiddenRequiredDisabled.vue     |  2 +-
 client/lib/forms/themes/form-themes.js        | 18 +++---
 client/scss/app.scss                          |  2 +-
 client/stores/working_form.js                 |  8 +++
 23 files changed, 169 insertions(+), 87 deletions(-)

diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index 894e59632..d7e6316da 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -19,6 +19,7 @@
     </div>
     <div
       v-else
+      :style="inputStyle"
       class="flex flex-col w-full items-center justify-center transition-colors duration-40"
       :class="[
         {'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
@@ -29,12 +30,18 @@
         theme.fileInput.spacing.horizontal,
         theme.fileInput.spacing.vertical,
         theme.fileInput.fontSize,
-        theme.fileInput.minHeight
+        theme.fileInput.minHeight,
+        {'border-red-500 border-2':hasError},
+        'focus:outline-none focus:ring-2'
       ]"
+      tabindex="0"
+      role="button"
+      :aria-label="multiple ? 'Choose files or drag here' : 'Choose a file or drag here'"
       @dragover.prevent="uploadDragoverEvent=true"
       @dragleave.prevent="uploadDragoverEvent=false"
       @drop.prevent="onUploadDropEvent"
       @click="openFileUpload"
+      @keydown.enter.prevent="openFileUpload"
     >
       <div class="flex w-full items-center justify-center">
         <div
diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index de3eba5c8..11bc8048e 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -19,7 +19,7 @@
           '!cursor-not-allowed !bg-gray-200': disabled,
         },
       ]"
-      class="resize-y"
+      class="resize-y block"
       :name="name"
       :style="inputStyle"
       :placeholder="placeholder"
@@ -63,7 +63,6 @@ export default {
   props: {
     ...inputProps,
     maxCharLimit: {type: Number, required: false, default: null},
-    showCharLimit: {type: Boolean, required: false, default: false},
   },
 
   setup(props, context) {
diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
index 181f4c523..19fb339dd 100644
--- a/client/components/forms/TextInput.vue
+++ b/client/components/forms/TextInput.vue
@@ -31,6 +31,8 @@
       :maxlength="maxCharLimit"
       @change="onChange"
       @keydown.enter.prevent="onEnterPress"
+      @focus="onFocus"
+      @blur="onBlur"
     >
 
     <template
@@ -74,7 +76,6 @@ export default {
     max: {type: Number, required: false, default: null},
     autocomplete: {type: [Boolean, String, Object], default: null},
     maxCharLimit: {type: Number, required: false, default: null},
-    showCharLimit: {type: Boolean, required: false, default: false},
     pattern: {type: String, default: null},
   },
 
diff --git a/client/components/forms/components/InputLabel.vue b/client/components/forms/components/InputLabel.vue
index 840935ed2..d1df99b24 100644
--- a/client/components/forms/components/InputLabel.vue
+++ b/client/components/forms/components/InputLabel.vue
@@ -4,7 +4,7 @@
     class="input-label"
     :class="[
       theme.default.label,
-      { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels },
+      { 'uppercase text-xs': uppercaseLabels, 'text-sm/none': !uppercaseLabels },
     ]"
   >
     <slot>
diff --git a/client/components/forms/components/InputWrapper.vue b/client/components/forms/components/InputWrapper.vue
index ff863edf1..45f29311e 100644
--- a/client/components/forms/components/InputWrapper.vue
+++ b/client/components/forms/components/InputWrapper.vue
@@ -45,7 +45,8 @@
       <has-error
         v-if="hasValidation && form"
         :form="form"
-        :field="name"
+        :field-id="name"
+        :field-name="label"
       />
     </slot>
   </div>
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index f4114d663..2cf0256da 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -10,7 +10,11 @@
       :class="[
         theme.SelectInput.input,
         theme.SelectInput.borderRadius,
-        { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled },
+        { 
+          '!ring-red-500 !ring-2 !border-transparent': hasError, 
+          '!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled,
+          'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError
+        },
         inputClass
       ]"
     >
@@ -19,12 +23,14 @@
         aria-haspopup="listbox"
         aria-expanded="true"
         aria-labelledby="listbox-label"
-        class="cursor-pointer w-full flex-grow relative"
+        class="cursor-pointer w-full flex-grow relative focus:outline-none"
         :class="[
           theme.SelectInput.spacing.horizontal,
           theme.SelectInput.spacing.vertical
         ]"
         @click="toggleDropdown"
+        @focus="onFocus"
+        @blur="onBlur"
       >
         <div
           class="flex items-center"
@@ -237,12 +243,13 @@ export default {
     allowCreation: {type: Boolean, default: false},
     disabled: {type: Boolean, default: false}
   },
-  emits: ['update:modelValue', 'update-options'],
+  emits: ['update:modelValue', 'update-options', 'focus', 'blur'],
   data() {
     return {
       isOpen: false,
       searchTerm: '',
-      defaultValue: this.modelValue ?? null
+      defaultValue: this.modelValue ?? null,
+      isFocused: false
     }
   },
   computed: {
@@ -311,11 +318,26 @@ export default {
       }
       return this.modelValue === value
     },
+    onFocus(event) {
+      this.isFocused = true
+      this.$emit('focus', event)
+    },
+
+    onBlur(event) {
+      this.isFocused = false
+      this.$emit('blur', event)
+    },
+
     toggleDropdown() {
       if (this.disabled) {
         this.isOpen = false
       } else {
         this.isOpen = !this.isOpen
+        if (this.isOpen) {
+          this.onFocus()
+        } else {
+          this.onBlur()
+        }
       }
       if (!this.isOpen) {
         this.searchTerm = ''
diff --git a/client/components/forms/useFormInput.js b/client/components/forms/useFormInput.js
index 613e41896..3ffe97923 100644
--- a/client/components/forms/useFormInput.js
+++ b/client/components/forms/useFormInput.js
@@ -88,6 +88,14 @@ export function useFormInput(props, context, options = {}) {
     return wrapperProps
   })
 
+  const onFocus = (event) => {
+    context.emit('focus', event)
+  }
+
+  const onBlur = (event) => {
+    context.emit('blur', event)
+  }
+
   // Watch for changes in props.modelValue and update the local content
   watch(
     () => props.modelValue,
@@ -104,5 +112,7 @@ export function useFormInput(props, context, options = {}) {
     hasValidation,
     hasError,
     inputWrapperProps,
+    onFocus,
+    onBlur,
   }
 }
diff --git a/client/components/forms/validation/HasError.vue b/client/components/forms/validation/HasError.vue
index 7136538d1..427e01d44 100644
--- a/client/components/forms/validation/HasError.vue
+++ b/client/components/forms/validation/HasError.vue
@@ -2,7 +2,7 @@
   <transition name="fade">
     <div
       v-if="errorMessage"
-      class="has-error text-sm text-red-500 -bottom-3"
+      class="has-error text-xs text-red-500 mt-1"
       v-html="errorMessage"
     />
   </transition>
@@ -10,42 +10,57 @@
 
 <script>
 export default {
-  name: "HasError",
+  name: 'HasError',
   props: {
     form: {
       type: Object,
       required: true,
     },
-    field: {
+    fieldId: {
       type: String,
       required: true,
     },
+    fieldName: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     errorMessage() {
-      if (!this.form || !this.form.errors || !this.form.errors.any())
+      if (!this.form.errors || !this.form.errors.any())
         return null
       const subErrorsKeys = Object.keys(this.form.errors.all()).filter(
         (key) => {
-          return key.startsWith(this.field) && key !== this.field
+          return key.startsWith(this.fieldId) && key !== this.fieldId
         },
       )
-      const baseError =
-        this.form.errors.get(this.field) ??
-        (subErrorsKeys.length ? "This field has some errors:" : null)
+      let baseError
+        = this.form.errors.get(this.fieldId)
+        ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
       // If no error and no sub errors, return
-      if (!baseError) return null
+      if (!baseError)
+        return null
 
-      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map(
-        (key) => {
-          return "<li>" + this.getSubError(key) + "</li>"
-        },
-      )}</ul>`
+      // Check if baseError starts with "The {field.name} field" and replace if necessary
+      if (baseError.startsWith(`The ${this.fieldName} field`)) {
+        baseError = baseError.replace(`The ${this.fieldName} field`, 'This field')
+      }
+
+      const coreError = `<p class='text-red-500'>${baseError}</p>`
+      if (subErrorsKeys.length) {
+        return coreError + `<ul class='list-disc list-inside'>${subErrorsKeys.map(
+          (key) => {
+            return `<li>${this.getSubError(key)}</li>`
+          },
+        )}</ul>`
+      }
+
+      return coreError
     },
   },
   methods: {
     getSubError(subErrorKey) {
-      return this.form.errors.get(subErrorKey).replace(subErrorKey, "item")
+      return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
     },
   },
 }
diff --git a/client/components/global/EditableTag.vue b/client/components/global/EditableTag.vue
index c1adad73f..505fa24bc 100644
--- a/client/components/global/EditableTag.vue
+++ b/client/components/global/EditableTag.vue
@@ -15,9 +15,7 @@
       v-if="!editing"
       :content="content"
     >
-      <label class="cursor-pointer truncate w-full">
-        {{ content }}
-      </label>
+      {{ content }}
     </slot>
     <div
       v-if="editing"
@@ -55,7 +53,11 @@ const divHeight = ref(0)
 const parentRef = ref(null) // Ref for parent element
 const editInputRef = ref(null) // Ref for edit input element
 
-const startEditing = () => {
+const startEditing = (event) => {
+  if (editing.value || (event.type === 'keydown' && event.target !== parentRef.value)) {
+    return
+  }
+
   if (parentRef.value) {
     divHeight.value = parentRef.value.offsetHeight
     editing.value = true
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index 80383e8c9..cde381d17 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -10,12 +10,19 @@
       :href="getFontUrl"
     >
     
-    <h1
-      v-if="!isHideTitle"
-      class="mb-4 px-2"
-      :class="{'mt-4':isEmbedPopup}"
-      v-text="form.title"
-    />
+    <template v-if="!isHideTitle">
+      <EditableTag
+        v-if="adminPreview"
+        v-model="form.title"
+        element="h1"
+        class="mb-2"
+      />
+      <h1
+        v-else
+        class="mb-2 px-2"
+        v-text="form.title"
+      />
+    </template>
 
     <div v-if="isPublicFormPage && form.is_password_protected">
       <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index eaeb290c0..6e06072ea 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -88,7 +88,7 @@
         />
         <has-error
           :form="dataForm"
-          field="h-captcha-response"
+          field-id="h-captcha-response"
         />
       </div>
     </template>
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index 94bd8e569..287a76e51 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -19,7 +19,7 @@
     >
       <div
         v-if="adminPreview"
-        class="absolute translate-y-full lg:translate-y-0 -bottom-1.5 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
+        class="absolute translate-y-full lg:translate-y-0 -bottom-1 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
       >
         <div
           class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
@@ -68,7 +68,7 @@
           v-if="field.type === 'nf-text' && field.content"
           :id="field.id"
           :key="field.id"
-          class="nf-text w-full mb-3"
+          class="nf-text w-full my-1.5"
           :class="[getFieldAlignClasses(field)]"
           v-html="field.content"
         />
@@ -76,7 +76,7 @@
           v-if="field.type === 'nf-code' && field.content"
           :id="field.id"
           :key="field.id"
-          class="nf-code w-full px-2 mb-3"
+          class="nf-code w-full px-2 my-1.5"
           v-html="field.content"
         />
         <div
@@ -91,6 +91,7 @@
           :key="field.id"
           class="my-4 w-full px-2"
           :class="[getFieldAlignClasses(field)]"
+          @dblclick="editFieldOptions"
         >
           <div
             v-if="!field.image_block"
@@ -115,7 +116,7 @@
         class="hidden group-hover/nffield:flex translate-x-full absolute right-0 top-0 h-full w-5 flex-col justify-center pl-1 pt-3"
       >
         <div
-          class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle"
+          class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle min-h-[40px]"
         >
           <Icon
             name="clarity:drag-handle-line"
diff --git a/client/components/open/forms/components/FormEditor.vue b/client/components/open/forms/components/FormEditor.vue
index 8bcda1291..aeef0082a 100644
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -4,6 +4,13 @@
     id="form-editor"
     class="relative flex w-full flex-col grow max-h-screen"
   >
+    <!-- Loading overlay -->
+    <div
+      v-if="updateFormLoading"
+      class="absolute inset-0 bg-white bg-opacity-70 z-50 flex items-center justify-center"
+    >
+      <loader class="h-6 w-6 text-blue-500" />
+    </div>
     <div
       class="border-b bg-white md:hidden fixed inset-0 w-full z-50 flex flex-col items-center justify-center"
     >
@@ -175,6 +182,7 @@ export default {
 
   mounted() {
     this.$emit("mounted")
+    this.workingFormStore.activeTab = 0
     useAmplitude().logEvent('form_editor_viewed')
     this.appStore.hideNavbar()
     if (!this.isEdit) {
@@ -292,6 +300,8 @@ export default {
               slug: this.createdFormSlug,
               new_form: response.users_first_form,
             },
+          }).then(() => {
+            this.updateFormLoading = false
           })
         })
         .catch((error) => {
@@ -304,8 +314,6 @@ export default {
             )
             captureException(error)
           }
-        })
-        .finally(() => {
           this.updateFormLoading = false
         })
     },
diff --git a/client/components/open/forms/components/FormEditorNavbar.vue b/client/components/open/forms/components/FormEditorNavbar.vue
index 66e61d939..f7beb47e4 100644
--- a/client/components/open/forms/components/FormEditorNavbar.vue
+++ b/client/components/open/forms/components/FormEditorNavbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full border-b p-2 flex gap-x-3 items-center bg-white">
+  <div class="w-full border-b p-2 flex gap-x-2 items-center bg-white">
     <a
       v-if="backButton"
       href="#"
@@ -13,38 +13,39 @@
     </a>
 
 
-    <EditableTag
-      v-model="form.title"
-      element="h3"
-      class="font-medium py-1 text-md w-48 text-gray-500 truncate"
+    <UTabs
+      id="form-editor-navbar-tabs"
+      v-model="activeTab"
+      :items="[
+        { label: 'Build' },
+        { label: 'Design'},
+        { label: 'Settings'}
+      ]"
     />
 
-    <UBadge
-      v-if="form.visibility == 'draft'"
-      color="yellow"
-      variant="soft"
-      label="Draft"
-    />
-    <UBadge
-      v-else-if="form.visibility == 'closed'"
-      color="gray"
-      variant="soft"
-      label="Closed"
-    />
-
-    <UndoRedo />
-
     <div class="flex-grow flex justify-center">
-      <UTabs
-        v-model="activeTab"
-        :items="[
-          { label: 'Build' },
-          { label: 'Design'},
-          { label: 'Settings'}
-        ]"
+      <EditableTag
+        id="form-editor-title"
+        v-model="form.title"
+        element="h3"
+        class="font-medium py-1 text-md w-48 text-gray-500 truncate form-editor-title"
+      />
+      <UBadge
+        v-if="form.visibility == 'draft'"
+        color="yellow"
+        variant="soft"
+        label="Draft"
+      />
+      <UBadge
+        v-else-if="form.visibility == 'closed'"
+        color="gray"
+        variant="soft"
+        label="Closed"
       />
     </div>
 
+    <UndoRedo />
+
     <div
       class="flex items-stretch gap-x-2"
     >
diff --git a/client/components/open/forms/components/FormFieldsEditor.vue b/client/components/open/forms/components/FormFieldsEditor.vue
index a6c562ab8..3bd5f3e60 100644
--- a/client/components/open/forms/components/FormFieldsEditor.vue
+++ b/client/components/open/forms/components/FormFieldsEditor.vue
@@ -52,7 +52,7 @@
 
               <UTooltip :text="element.hidden ? 'Show Block' : 'Hide Block'">
                 <button
-                  class="hidden cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
+                  class="hidden !cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
                   :class="{
                     'text-gray-300 hover:text-blue-500 md:group-hover:flex': !element.hidden,
                     'text-gray-300 hover:text-gray-500 md:flex': element.hidden,
diff --git a/client/components/open/forms/components/form-components/AddFormBlock.vue b/client/components/open/forms/components/form-components/AddFormBlock.vue
index a87832133..73c736949 100644
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -18,7 +18,7 @@
     </div>
 
     <div class="py-2 px-4">
-      <p class="text-sm font-medium my-2">
+      <p class="text-gray-500 text-xs font-medium my-2">
         Input Blocks
       </p>
       <draggable
@@ -34,7 +34,7 @@
       >
         <template #item="{element}">
           <div
-            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2"
+            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2 group"
             role="button"
             @click.prevent="addBlock(element.name)"
           >
diff --git a/client/components/open/forms/components/form-components/FormEditorPreview.vue b/client/components/open/forms/components/form-components/FormEditorPreview.vue
index b95816f4d..3f52b6d62 100644
--- a/client/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/client/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -22,7 +22,7 @@
         <div class="bg-red-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-yellow-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-green-500 rounded-full w-2.5 h-2.5" />
-        <p class="text-sm text-gray-500/70 text-sm ml-4">
+        <p class="text-sm text-gray-500/70 text-sm ml-4 select-none">
           Form Preview
         </p>
         <div class="flex-grow" />
diff --git a/client/components/open/forms/components/templates/QuestionsEditor.vue b/client/components/open/forms/components/templates/QuestionsEditor.vue
index 618f9f09f..d4d4ff299 100644
--- a/client/components/open/forms/components/templates/QuestionsEditor.vue
+++ b/client/components/open/forms/components/templates/QuestionsEditor.vue
@@ -99,7 +99,7 @@
     <has-error
       v-if="hasValidation"
       :form="form"
-      :field="name"
+      :field-id="name"
     />
   </div>
 </template>
diff --git a/client/components/open/forms/fields/components/BlockOptions.vue b/client/components/open/forms/fields/components/BlockOptions.vue
index b2615ec3e..be442e3c8 100644
--- a/client/components/open/forms/fields/components/BlockOptions.vue
+++ b/client/components/open/forms/fields/components/BlockOptions.vue
@@ -53,7 +53,7 @@
 
     <div
       v-if="field.type == 'nf-text'"
-      class="border-t py-2"
+      class="border-t mt-4"
     >
       <rich-text-area-input
         class="mx-4"
@@ -85,7 +85,7 @@
 
     <div
       v-else-if="field.type == 'nf-image'"
-      class="border-t py-2"
+      class="border-t mt-4"
     >
       <image-input
         name="image_block"
diff --git a/client/components/open/forms/fields/components/HiddenRequiredDisabled.vue b/client/components/open/forms/fields/components/HiddenRequiredDisabled.vue
index 1abe4d1c1..31d19991a 100644
--- a/client/components/open/forms/fields/components/HiddenRequiredDisabled.vue
+++ b/client/components/open/forms/fields/components/HiddenRequiredDisabled.vue
@@ -7,7 +7,7 @@
       :class="[
         option.class ? (typeof option.class === 'function' ? option.class(isSelected(option.name)) : option.class) : {},
         {
-          'border-blue-500': isSelected(option.name),
+          'border-blue-500 bg-blue-50': isSelected(option.name),
           'hover:bg-gray-100 border-gray-300': !isSelected(option.name)
         }
       ]"
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index 2edde5fea..c505a8d80 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -5,9 +5,9 @@ export const themes = {
   default: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
-        md: 'relative mb-3',
-        lg: 'relative mb-3',
+        sm: 'relative my-1',
+        md: 'relative my-1.5',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-700 dark:text-gray-300 font-medium',
       input:
@@ -156,9 +156,9 @@ export const themes = {
   simple: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
-        md: 'relative mb-3',
-        lg: 'relative mb-3',
+        sm: 'relative my-1',
+        md: 'relative my-1.5',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-700 dark:text-gray-300 font-medium',
       input:
@@ -301,9 +301,9 @@ export const themes = {
   notion: {
     default: {
       wrapper: {
-        sm: 'relative mb-2',
-        md: 'relative mb-3',
-        lg: 'relative mb-3',
+        sm: 'relative my-1',
+        md: 'relative my-1.5',
+        lg: 'relative my-1.5',
       },
       label: 'text-gray-900 dark:text-gray-100 mb-1 block mt-4',
       input:
diff --git a/client/scss/app.scss b/client/scss/app.scss
index e844bc8b2..5efa0604f 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -23,7 +23,7 @@ body.dark * {
   }
 
   h1 {
-    @apply text-3xl sm:text-4xl font-semibold;
+    @apply text-2xl sm:text-3xl font-extrabold;
   }
 
   h2 {
diff --git a/client/stores/working_form.js b/client/stores/working_form.js
index d334e45aa..9a3b2bfba 100644
--- a/client/stores/working_form.js
+++ b/client/stores/working_form.js
@@ -73,6 +73,14 @@ export const useWorkingFormStore = defineStore("working_form", {
     },
 
     prefillDefault(data) {
+      // If a field already has this name, we need to make it unique with a number at the end
+      let baseName = data.name
+      let counter = 1
+      while (this.content.properties.some(prop => prop.name === data.name)) {
+        counter++
+        data.name = `${baseName} ${counter}`
+      }
+      
       if (data.type === "nf-text") {
         data.content = "<p>This is a text block.</p>"
       } else if (data.type === "nf-page-break") {