accept field title and description

app/javascript/submission_form/appears_on.vue

@@ -41,7 +41,7 @@ export default {
     uniqueAreas () {
       const areas = {}
 
-      this.field.areas.forEach((area) => {
+      this.field.areas?.forEach((area) => {
         areas[area.attachment_uuid + area.page] ||= area
       })
 

app/javascript/submission_form/form.vue

@@ -204,7 +204,15 @@
                       :checked="!!values[field.uuid]"
                       @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                     >
-                    <span class="text-xl">
+                    <span
+                      v-if="field.title"
+                      class="text-xl"
+                      v-html="field.title"
+                    />
+                    <span
+                      v-else
+                      class="text-xl"
+                    >
                       {{ field.name || field.type + ' ' + (index + 1) }}
                     </span>
                   </label>
@@ -737,7 +745,7 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && !this.submittedValues[fields[0].uuid]?.length
+          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && (this.submittedValues[fields[0].uuid] === true ? false : !this.submittedValues[fields[0].uuid]?.length)
         })
 
         const formData = new FormData(this.$refs.form)

app/javascript/submission_form/text_step.vue

@@ -3,14 +3,21 @@
     v-if="field.name"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl mb-2"
-  >{{ field.name }}
+    class="label text-2xl"
+    :class="{ 'mb-2': !field.description }"
+  ><template v-if="field.title"><span v-html="field.title" /></template>
+    <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">({{ t('optional') }})</template>
   </label>
   <div
     v-else
     class="py-1"
   />
+  <div
+    v-if="field.description"
+    class="mb-3 px-1 text-lg"
+    v-html="field.description"
+  />
   <AppearsOn :field="field" />
   <div class="items-center flex">
     <input