From 666b4a7e6be96ebbd4775b697eecb5f790f182b9 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 1 Mar 2023 11:07:13 -0800
Subject: [PATCH] DEV: Define form template field inputs (#20430)

---
 .../addon/components/form-template/form.hbs   |  44 ++++---
 .../addon/components/form-template/form.js    |  73 +++++++----
 .../components/form-template/row-item.js      |   3 +-
 .../admin-form-template-validation-options.js |  35 ++++++
 .../admin/addon/lib/template-form-fields.js   |  77 ++++++------
 .../admin/addon/models/form-template.js       |  15 +++
 .../customize-form-templates-index.hbs        |   2 +-
 ...admin-form-template-validation-options.hbs |  23 ++++
 .../form-template-field/checkbox.hbs          |   6 +
 .../form-template-field/dropdown.hbs          |  15 +++
 .../components/form-template-field/input.hbs  |  10 ++
 .../form-template-field/multi-select.hbs      |  15 +++
 .../form-template-field/textarea.hbs          |   9 ++
 .../components/form-template-field/upload.hbs |  11 ++
 .../form-template-field/wrapper.hbs           |  14 +++
 .../components/form-template-field/wrapper.js |  17 +++
 .../customize-form-template-view.js}          |   7 ++
 .../controllers/form-template-form-preview.js |   6 +
 .../modal/customize-form-template-view.hbs}   |  15 ++-
 .../modal/form-template-form-preview.hbs      |   6 +
 .../form-template-field/checkbox-test.js      |  43 +++++++
 .../form-template-field/dropdown-test.js      |  88 ++++++++++++++
 .../form-template-field/input-test.js         |  61 ++++++++++
 .../form-template-field/multi-select-test.js  |  88 ++++++++++++++
 .../form-template-field/textarea-test.js      |  57 +++++++++
 .../form-template-field/wrapper-test.js       |  49 ++++++++
 .../stylesheets/common/admin/customize.scss   |  26 +++-
 .../admin/form_templates_controller.rb        |  19 +++
 config/locales/client.en.yml                  |  37 ++++++
 config/locales/server.en.yml                  |   2 +
 config/routes.rb                              |   4 +-
 .../form_template_yaml_validator.rb           |  28 +++++
 spec/fabricators/form_template_fabricator.rb  |   2 +-
 spec/models/form_template_spec.rb             |  20 +++-
 .../admin/form_templates_controller_spec.rb   |   6 +-
 .../admin_customize_form_templates_spec.rb    | 113 +++++++++++++-----
 .../page_objects/pages/form_template.rb       |  47 ++++++--
 37 files changed, 963 insertions(+), 130 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js
 create mode 100644 app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/wrapper.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/wrapper.js
 rename app/assets/javascripts/{admin/addon/controllers/modals/admin-customize-form-template-view.js => discourse/app/controllers/customize-form-template-view.js} (87%)
 create mode 100644 app/assets/javascripts/discourse/app/controllers/form-template-form-preview.js
 rename app/assets/javascripts/{admin/addon/templates/modal/admin-customize-form-template-view.hbs => discourse/app/templates/modal/customize-form-template-view.hbs} (53%)
 create mode 100644 app/assets/javascripts/discourse/app/templates/modal/form-template-form-preview.hbs
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/checkbox-test.js
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/dropdown-test.js
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/multi-select-test.js
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/form-template-field/wrapper-test.js

diff --git a/app/assets/javascripts/admin/addon/components/form-template/form.hbs b/app/assets/javascripts/admin/addon/components/form-template/form.hbs
index fe94fdc6bd2..907310123d4 100644
--- a/app/assets/javascripts/admin/addon/components/form-template/form.hbs
+++ b/app/assets/javascripts/admin/addon/components/form-template/form.hbs
@@ -1,4 +1,4 @@
-<div class="form-templates--form">
+<div class="form-templates__form">
   <div class="control-group">
     <label for="template-name">
       {{i18n "admin.form_templates.new_template_form.name.label"}}
@@ -6,24 +6,38 @@
     <TextField
       @value={{this.templateName}}
       @name="template-name"
-      @class="form-templates--form-name-input"
+      @class="form-templates__form-name-input"
       @placeholderKey="admin.form_templates.new_template_form.name.placeholder"
     />
   </div>
-
-  <div class="control-group form-templates--quick-insert-field-buttons">
-    <span>
-      {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
-    </span>
-    {{#each this.quickInsertFields as |field|}}
+  <div class="control-group form-templates__editor">
+    <div class="form-templates__quick-insert-field-buttons">
+      <span>
+        {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
+      </span>
+      {{#each this.quickInsertFields as |field|}}
+        <DButton
+          @class="btn-flat btn-icon-text quick-insert-{{field.type}}"
+          @icon={{field.icon}}
+          @label="admin.form_templates.quick_insert_fields.{{field.type}}"
+          @action={{this.onInsertField}}
+          @actionParam={{field.type}}
+        />
+      {{/each}}
       <DButton
-        @class="btn-flat btn-icon-text quick-insert-{{field.type}}"
-        @icon={{field.icon}}
-        @label="admin.form_templates.quick_insert_fields.{{field.type}}"
-        @action={{this.onInsertField}}
-        @actionParam={{field.type}}
+        class="btn-flat btn-icon-text form-templates__validations-modal-button"
+        @label="admin.form_templates.validations_modal.button_title"
+        @icon="check-circle"
+        @action={{this.showValidationOptionsModal}}
       />
-    {{/each}}
+    </div>
+    <DButton
+      @class="form-templates__preview-button"
+      @icon="eye"
+      @label="admin.form_templates.new_template_form.preview"
+      @action={{this.showPreview}}
+      @disabled={{this.disablePreviewButton}}
+    />
   </div>
 
   <div class="control-group">
@@ -36,7 +50,7 @@
       @label="admin.form_templates.new_template_form.submit"
       @icon="check"
       @action={{this.onSubmit}}
-      @disabled={{this.formSubmitted}}
+      @disabled={{this.disableSubmitButton}}
     />
 
     <DButton
diff --git a/app/assets/javascripts/admin/addon/components/form-template/form.js b/app/assets/javascripts/admin/addon/components/form-template/form.js
index c0212eea406..f6655a7de4a 100644
--- a/app/assets/javascripts/admin/addon/components/form-template/form.js
+++ b/app/assets/javascripts/admin/addon/components/form-template/form.js
@@ -6,14 +6,15 @@ import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { templateFormFields } from "admin/lib/template-form-fields";
 import FormTemplate from "admin/models/form-template";
+import showModal from "discourse/lib/show-modal";
 
 export default class FormTemplateForm extends Component {
   @service router;
   @service dialog;
   @tracked formSubmitted = false;
   @tracked templateContent = this.args.model?.template || "";
+  @tracked templateName = this.args.model?.name || "";
   isEditing = this.args.model?.id ? true : false;
-  templateName = this.args.model?.name;
   quickInsertFields = [
     {
       type: "checkbox",
@@ -41,6 +42,17 @@ export default class FormTemplateForm extends Component {
     },
   ];
 
+  get disablePreviewButton() {
+    return Boolean(!this.templateName.length || !this.templateContent.length);
+  }
+
+  get disableSubmitButton() {
+    return (
+      Boolean(!this.templateName.length || !this.templateContent.length) ||
+      this.formSubmitted
+    );
+  }
+
   @action
   onSubmit() {
     if (!this.formSubmitted) {
@@ -54,27 +66,17 @@ export default class FormTemplateForm extends Component {
 
     if (this.isEditing) {
       postData["id"] = this.args.model.id;
-
-      FormTemplate.updateTemplate(this.args.model.id, postData)
-        .then(() => {
-          this.formSubmitted = false;
-          this.router.transitionTo("adminCustomizeFormTemplates.index");
-        })
-        .catch((e) => {
-          popupAjaxError(e);
-          this.formSubmitted = false;
-        });
-    } else {
-      FormTemplate.createTemplate(postData)
-        .then(() => {
-          this.formSubmitted = false;
-          this.router.transitionTo("adminCustomizeFormTemplates.index");
-        })
-        .catch((e) => {
-          popupAjaxError(e);
-          this.formSubmitted = false;
-        });
     }
+
+    FormTemplate.createOrUpdateTemplate(postData)
+      .then(() => {
+        this.formSubmitted = false;
+        this.router.transitionTo("adminCustomizeFormTemplates.index");
+      })
+      .catch((e) => {
+        popupAjaxError(e);
+        this.formSubmitted = false;
+      });
   }
 
   @action
@@ -106,4 +108,33 @@ export default class FormTemplateForm extends Component {
       this.templateContent += `\n${structure}`;
     }
   }
+
+  @action
+  showValidationOptionsModal() {
+    return showModal("admin-form-template-validation-options", {
+      admin: true,
+    });
+  }
+
+  @action
+  showPreview() {
+    const data = {
+      name: this.templateName,
+      template: this.templateContent,
+    };
+
+    if (this.isEditing) {
+      data["id"] = this.args.model.id;
+    }
+
+    FormTemplate.validateTemplate(data)
+      .then(() => {
+        return showModal("form-template-form-preview", {
+          model: {
+            content: this.templateContent,
+          },
+        });
+      })
+      .catch(popupAjaxError);
+  }
 }
diff --git a/app/assets/javascripts/admin/addon/components/form-template/row-item.js b/app/assets/javascripts/admin/addon/components/form-template/row-item.js
index ef94e04a37e..823c17847cb 100644
--- a/app/assets/javascripts/admin/addon/components/form-template/row-item.js
+++ b/app/assets/javascripts/admin/addon/components/form-template/row-item.js
@@ -12,8 +12,7 @@ export default class FormTemplateRowItem extends Component {
 
   @action
   viewTemplate() {
-    showModal("admin-customize-form-template-view", {
-      admin: true,
+    showModal("customize-form-template-view", {
       model: this.args.template,
       refreshModel: this.args.refreshModel,
     });
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js
new file mode 100644
index 00000000000..a9300f8f6d6
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/controllers/modals/admin-form-template-validation-options.js
@@ -0,0 +1,35 @@
+import Controller from "@ember/controller";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+import I18n from "I18n";
+
+export default class AdminFormTemplateValidationOptions extends Controller.extend(
+  ModalFunctionality
+) {
+  TABLE_HEADER_KEYS = ["key", "type", "description"];
+  VALIDATION_KEYS = ["required", "minimum", "maximum", "pattern"];
+
+  get tableHeaders() {
+    const translatedHeaders = [];
+    this.TABLE_HEADER_KEYS.forEach((header) => {
+      translatedHeaders.push(
+        I18n.t(`admin.form_templates.validations_modal.table_headers.${header}`)
+      );
+    });
+
+    return translatedHeaders;
+  }
+
+  get validations() {
+    const translatedValidations = [];
+    const prefix = "admin.form_templates.validations_modal.validations";
+    this.VALIDATION_KEYS.forEach((validation) => {
+      translatedValidations.push({
+        key: I18n.t(`${prefix}.${validation}.key`),
+        type: I18n.t(`${prefix}.${validation}.type`),
+        description: I18n.t(`${prefix}.${validation}.description`),
+      });
+    });
+
+    return translatedValidations;
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/lib/template-form-fields.js b/app/assets/javascripts/admin/addon/lib/template-form-fields.js
index c69cb0f711a..6a27b5c1d05 100644
--- a/app/assets/javascripts/admin/addon/lib/template-form-fields.js
+++ b/app/assets/javascripts/admin/addon/lib/template-form-fields.js
@@ -1,70 +1,75 @@
-// TODO(@keegan): Add translations for template strings
+import I18n from "I18n";
+
 export const templateFormFields = [
   {
     type: "checkbox",
     structure: `- type: checkbox
-  choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
   attributes:
-    label: "Enter question here"
-    description: "Enter description here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "input",
     structure: `- type: input
   attributes:
-    label: "Enter input label here"
-    description: "Enter input description here"
-    placeholder: "Enter input placeholder here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    placeholder: "${I18n.t(
+      "admin.form_templates.field_placeholders.placeholder"
+    )}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "textarea",
     structure: `- type: textarea
   attributes:
-    label: "Enter textarea label here"
-    description: "Enter textarea description here"
-    placeholder: "Enter textarea placeholder here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    placeholder: "${I18n.t(
+      "admin.form_templates.field_placeholders.placeholder"
+    )}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "dropdown",
     structure: `- type: dropdown
   choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.first")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.second")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.third")}"
   attributes:
-    label: "Enter dropdown label here"
-    description: "Enter dropdown description here"
-    validations:
-      required: true`,
+    none_label: "${I18n.t(
+      "admin.form_templates.field_placeholders.none_label"
+    )}"
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    filterable: false
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "upload",
     structure: `- type: upload
   attributes:
     file_types: "jpg, png, gif"
-    label: "Enter upload label here"
-    description: "Enter upload description here"`,
+    allow_multiple: false
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "multiselect",
-    structure: `- type: multiple_choice
+    structure: `- type: multi-select
   choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.first")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.second")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.third")}"
   attributes:
-    label: "Enter multiple choice label here"
-    description: "Enter multiple choice description here"
-    validations:
-      required: true`,
+    none_label: "${I18n.t(
+      "admin.form_templates.field_placeholders.none_label"
+    )}"
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
 ];
diff --git a/app/assets/javascripts/admin/addon/models/form-template.js b/app/assets/javascripts/admin/addon/models/form-template.js
index 9893d9244a9..782b6a8c317 100644
--- a/app/assets/javascripts/admin/addon/models/form-template.js
+++ b/app/assets/javascripts/admin/addon/models/form-template.js
@@ -18,6 +18,14 @@ FormTemplate.reopenClass({
     });
   },
 
+  createOrUpdateTemplate(data) {
+    if (data.id) {
+      return this.updateTemplate(data.id, data);
+    } else {
+      return this.createTemplate(data);
+    }
+  },
+
   deleteTemplate(id) {
     return ajax(`/admin/customize/form-templates/${id}.json`, {
       type: "DELETE",
@@ -35,4 +43,11 @@ FormTemplate.reopenClass({
       return model.form_template;
     });
   },
+
+  validateTemplate(data) {
+    return ajax(`/admin/customize/form-templates/preview.json`, {
+      type: "GET",
+      data,
+    });
+  },
 });
diff --git a/app/assets/javascripts/admin/addon/templates/customize-form-templates-index.hbs b/app/assets/javascripts/admin/addon/templates/customize-form-templates-index.hbs
index e7f1fc3adc6..b9a61cc44b4 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-form-templates-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-form-templates-index.hbs
@@ -2,7 +2,7 @@
   <FormTemplate::InfoHeader />
 
   {{#if this.model}}
-    <table class="form-templates--table grid">
+    <table class="form-templates__table grid">
       <thead>
         <th class="col heading">
           {{i18n "admin.form_templates.list_table.headings.name"}}
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs
new file mode 100644
index 00000000000..330dd1cebdc
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-form-template-validation-options.hbs
@@ -0,0 +1,23 @@
+<DModalBody
+  @class="form-templates__validation-options"
+  @title="admin.form_templates.validations_modal.modal_title"
+>
+  <table>
+    <thead>
+      <tr>
+        {{#each this.tableHeaders as |header|}}
+          <th>{{header}}</th>
+        {{/each}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each this.validations as |item|}}
+        <tr>
+          <td><pre>{{item.key}}</pre></td>
+          <td>{{item.type}}</td>
+          <td>{{item.description}}</td>
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</DModalBody>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
new file mode 100644
index 00000000000..e4f4c10a239
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
@@ -0,0 +1,6 @@
+<div class="control-group form-template-field" data-field-type="checkbox">
+  <label class="form-template-field__label">
+    <Input class="form-template-field__checkbox" @type="checkbox" />
+    {{@attributes.label}}
+  </label>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
new file mode 100644
index 00000000000..c4f17167935
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
@@ -0,0 +1,15 @@
+<div class="control-group form-template-field" data-field-type="dropdown">
+  {{#if @attributes.label}}
+    <label class="form-template-field__label">{{@attributes.label}}</label>
+  {{/if}}
+  <ComboBox
+    @class="form-template-field__dropdown"
+    @content={{@choices}}
+    @nameProperty={{null}}
+    @valueProperty={{null}}
+    @options={{hash
+      translatedNone=@attributes.none_label
+      filterable=@attributes.filterable
+    }}
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
new file mode 100644
index 00000000000..4a08a25960b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
@@ -0,0 +1,10 @@
+<div class="control-group form-template-field" data-field-type="input">
+  {{#if @attributes.label}}
+    <label class="form-template-field__label">{{@attributes.label}}</label>
+  {{/if}}
+  <Input
+    class="form-template-field__input"
+    @type="text"
+    placeholder={{@attributes.placeholder}}
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
new file mode 100644
index 00000000000..06721b3cd86
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
@@ -0,0 +1,15 @@
+<div class="control-group form-template-field" data-field-type="multi-select">
+  {{#if @attributes.label}}
+    <label class="form-template-field__label">{{@attributes.label}}</label>
+  {{/if}}
+  <MultiSelect
+    @class="form-template-field__multi-select"
+    @content={{@choices}}
+    @nameProperty={{null}}
+    @valueProperty={{null}}
+    @options={{hash
+      translatedNone=@attributes.none_label
+      maximum=@validations.maximum
+    }}
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
new file mode 100644
index 00000000000..3029d15a318
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
@@ -0,0 +1,9 @@
+<div class="control-group form-template-field" data-field-type="textarea">
+  {{#if @attributes.label}}
+    <label class="form-template-field__label">{{@attributes.label}}</label>
+  {{/if}}
+  <Textarea
+    class="form-template-field__textarea"
+    placeholder={{@attributes.placeholder}}
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
new file mode 100644
index 00000000000..20ddddde27f
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
@@ -0,0 +1,11 @@
+<div class="control-group form-template-field" data-field-type="upload">
+  {{#if @attributes.label}}
+    <label class="form-template-field__label">{{@attributes.label}}</label>
+  {{/if}}
+  <input
+    type="file"
+    accept={{@attributes.file_types}}
+    class="form-template-field__upload"
+    multiple={{@attributes.allow_multiple}}
+  />
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.hbs
new file mode 100644
index 00000000000..3d69797766e
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.hbs
@@ -0,0 +1,14 @@
+{{#if this.canShowContent}}
+  {{#each this.parsedContent as |content|}}
+    {{component
+      (concat "form-template-field/" content.type)
+      attributes=content.attributes
+      choices=content.choices
+      validations=content.validations
+    }}
+  {{/each}}
+{{else}}
+  <div class="alert alert-error">
+    {{this.error}}
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.js b/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.js
new file mode 100644
index 00000000000..f181dd88c47
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/wrapper.js
@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import Yaml from "js-yaml";
+import { tracked } from "@glimmer/tracking";
+
+export default class FormTemplateFieldWrapper extends Component {
+  @tracked error = null;
+
+  get canShowContent() {
+    try {
+      const parsedContent = Yaml.load(this.args.content);
+      this.parsedContent = parsedContent;
+      return true;
+    } catch (e) {
+      this.error = e;
+    }
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-customize-form-template-view.js b/app/assets/javascripts/discourse/app/controllers/customize-form-template-view.js
similarity index 87%
rename from app/assets/javascripts/admin/addon/controllers/modals/admin-customize-form-template-view.js
rename to app/assets/javascripts/discourse/app/controllers/customize-form-template-view.js
index 817621d485b..302d77f782b 100644
--- a/app/assets/javascripts/admin/addon/controllers/modals/admin-customize-form-template-view.js
+++ b/app/assets/javascripts/discourse/app/controllers/customize-form-template-view.js
@@ -5,12 +5,19 @@ import { inject as service } from "@ember/service";
 import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { ajax } from "discourse/lib/ajax";
+import { tracked } from "@glimmer/tracking";
 
 export default class AdminCustomizeFormTemplateView extends Controller.extend(
   ModalFunctionality
 ) {
   @service router;
   @service dialog;
+  @tracked showPreview = false;
+
+  @action
+  togglePreview() {
+    this.showPreview = !this.showPreview;
+  }
 
   @action
   editTemplate() {
diff --git a/app/assets/javascripts/discourse/app/controllers/form-template-form-preview.js b/app/assets/javascripts/discourse/app/controllers/form-template-form-preview.js
new file mode 100644
index 00000000000..15a936ada6b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/controllers/form-template-form-preview.js
@@ -0,0 +1,6 @@
+import Controller from "@ember/controller";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+
+export default class AdminFormTemplateValidationOptions extends Controller.extend(
+  ModalFunctionality
+) {}
diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-customize-form-template-view.hbs b/app/assets/javascripts/discourse/app/templates/modal/customize-form-template-view.hbs
similarity index 53%
rename from app/assets/javascripts/admin/addon/templates/modal/admin-customize-form-template-view.hbs
rename to app/assets/javascripts/discourse/app/templates/modal/customize-form-template-view.hbs
index 771c43bfd65..b27d7740b46 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-customize-form-template-view.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/customize-form-template-view.hbs
@@ -1,6 +1,17 @@
 <DModalBody @rawTitle={{this.model.name}}>
-  <HighlightedCode @lang="yaml" @code={{this.model.template}} />
-  {{! ? TODO(@keegan): Perhaps add what places (ex. categories) the templates are active in }}
+  <div class="control-group">
+    <DToggleSwitch
+      class="form-templates__preview-toggle"
+      @state={{this.showPreview}}
+      @label="admin.form_templates.view_template.toggle_preview"
+      {{on "click" this.togglePreview}}
+    />
+  </div>
+  {{#if this.showPreview}}
+    <FormTemplateField::Wrapper @content={{this.model.template}} />
+  {{else}}
+    <HighlightedCode @lang="yaml" @code={{this.model.template}} />
+  {{/if}}
 </DModalBody>
 <div class="modal-footer">
   <DButton
diff --git a/app/assets/javascripts/discourse/app/templates/modal/form-template-form-preview.hbs b/app/assets/javascripts/discourse/app/templates/modal/form-template-form-preview.hbs
new file mode 100644
index 00000000000..1624b7bc369
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/modal/form-template-form-preview.hbs
@@ -0,0 +1,6 @@
+<DModalBody
+  @class="form-templates__validation-options"
+  @title="admin.form_templates.preview_modal.title"
+>
+  <FormTemplateField::Wrapper @content={{this.model.content}} />
+</DModalBody>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/checkbox-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/checkbox-test.js
new file mode 100644
index 00000000000..18945954ca8
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/checkbox-test.js
@@ -0,0 +1,43 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | checkbox",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("renders a checkbox input", async function (assert) {
+      await render(hbs`<FormTemplateField::Checkbox />`);
+
+      assert.ok(
+        exists(
+          ".form-template-field[data-field-type='checkbox'] input[type='checkbox']"
+        ),
+        "A checkbox component exists"
+      );
+    });
+
+    test("renders a checkbox with a label", async function (assert) {
+      const attributes = {
+        label: "Click this box",
+      };
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Checkbox @attributes={{this.attributes}} />`
+      );
+
+      assert.ok(
+        exists(
+          ".form-template-field[data-field-type='checkbox'] input[type='checkbox']"
+        ),
+        "A checkbox component exists"
+      );
+
+      assert.dom(".form-template-field__label").hasText("Click this box");
+    });
+  }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/dropdown-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/dropdown-test.js
new file mode 100644
index 00000000000..98e2e890587
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/dropdown-test.js
@@ -0,0 +1,88 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | dropdown",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    hooks.beforeEach(function () {
+      this.set("subject", selectKit());
+    });
+
+    test("renders a dropdown with choices", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+
+      this.set("choices", choices);
+
+      await render(
+        hbs`<FormTemplateField::Dropdown @choices={{this.choices}}/>`
+      );
+      assert.ok(
+        exists(".form-template-field__dropdown"),
+        "A dropdown component exists"
+      );
+
+      await this.subject.expand();
+
+      const dropdown = this.subject.displayedContent();
+      assert.strictEqual(dropdown.length, 3, "it has 3 choices");
+      assert.strictEqual(
+        dropdown[0].name,
+        "Choice 1",
+        "it has the correct name for choice 1"
+      );
+      assert.strictEqual(
+        dropdown[1].name,
+        "Choice 2",
+        "it has the correct name for choice 2"
+      );
+      assert.strictEqual(
+        dropdown[2].name,
+        "Choice 3",
+        "it has the correct name for choice 3"
+      );
+    });
+
+    test("renders a dropdown with choices and attributes", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+      const attributes = {
+        none_label: "Select a choice",
+        filterable: true,
+      };
+
+      this.set("choices", choices);
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Dropdown @choices={{this.choices}} @attributes={{this.attributes}} />`
+      );
+      assert.ok(
+        exists(".form-template-field__dropdown"),
+        "A dropdown component exists"
+      );
+
+      await this.subject.expand();
+      assert.strictEqual(
+        this.subject.header().label(),
+        attributes.none_label,
+        "None label is correct"
+      );
+    });
+
+    test("doesn't render a label when attribute is missing", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+      this.set("choices", choices);
+
+      await render(
+        hbs`<FormTemplateField::Dropdown @choices={{this.choices}} />`
+      );
+
+      assert.dom(".form-template-field__label").doesNotExist();
+    });
+  }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js
new file mode 100644
index 00000000000..6c835794e9b
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js
@@ -0,0 +1,61 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { exists, query } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | input",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("renders a text input", async function (assert) {
+      await render(hbs`<FormTemplateField::Input />`);
+
+      assert.ok(
+        exists(
+          ".form-template-field[data-field-type='input'] input[type='text']"
+        ),
+        "A text input component exists"
+      );
+    });
+
+    test("renders a text input with attributes", async function (assert) {
+      const attributes = {
+        label: "My text label",
+        placeholder: "Enter text here",
+      };
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Input @attributes={{this.attributes}} />`
+      );
+
+      assert.ok(
+        exists(
+          ".form-template-field[data-field-type='input'] input[type='text']"
+        ),
+        "A text input component exists"
+      );
+
+      assert.dom(".form-template-field__label").hasText("My text label");
+      assert.strictEqual(
+        query(".form-template-field__input").placeholder,
+        "Enter text here"
+      );
+    });
+
+    test("doesn't render a label when attribute is missing", async function (assert) {
+      const attributes = {
+        placeholder: "Enter text here",
+      };
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Input @attributes={{this.attributes}} />`
+      );
+
+      assert.dom(".form-template-field__label").doesNotExist();
+    });
+  }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/multi-select-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/multi-select-test.js
new file mode 100644
index 00000000000..fd31415719f
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/multi-select-test.js
@@ -0,0 +1,88 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | multi-select",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    hooks.beforeEach(function () {
+      this.set("subject", selectKit());
+    });
+
+    test("renders a multi-select dropdown with choices", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+
+      this.set("choices", choices);
+
+      await render(
+        hbs`<FormTemplateField::MultiSelect @choices={{this.choices}}/>`
+      );
+      assert.ok(
+        exists(".form-template-field__multi-select"),
+        "A multiselect component exists"
+      );
+
+      await this.subject.expand();
+
+      const dropdown = this.subject.displayedContent();
+      assert.strictEqual(dropdown.length, 3, "it has 3 choices");
+      assert.strictEqual(
+        dropdown[0].name,
+        "Choice 1",
+        "it has the correct name for choice 1"
+      );
+      assert.strictEqual(
+        dropdown[1].name,
+        "Choice 2",
+        "it has the correct name for choice 2"
+      );
+      assert.strictEqual(
+        dropdown[2].name,
+        "Choice 3",
+        "it has the correct name for choice 3"
+      );
+    });
+
+    test("renders a multi-select with choices and attributes", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+      const attributes = {
+        none_label: "Select a choice",
+        filterable: true,
+      };
+
+      this.set("choices", choices);
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::MultiSelect @choices={{this.choices}} @attributes={{this.attributes}} />`
+      );
+      assert.ok(
+        exists(".form-template-field__multi-select"),
+        "A multiselect dropdown component exists"
+      );
+
+      await this.subject.expand();
+      assert.strictEqual(
+        this.subject.header().label(),
+        attributes.none_label,
+        "None label is correct"
+      );
+    });
+
+    test("doesn't render a label when attribute is missing", async function (assert) {
+      const choices = ["Choice 1", "Choice 2", "Choice 3"];
+      this.set("choices", choices);
+
+      await render(
+        hbs`<FormTemplateField::MultiSelect @choices={{this.choices}} />`
+      );
+
+      assert.dom(".form-template-field__label").doesNotExist();
+    });
+  }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js
new file mode 100644
index 00000000000..b79e4730f2d
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js
@@ -0,0 +1,57 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { exists, query } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | textarea",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("renders a textarea input", async function (assert) {
+      await render(hbs`<FormTemplateField::Textarea />`);
+
+      assert.ok(
+        exists(".form-template-field__textarea"),
+        "A textarea input component exists"
+      );
+    });
+
+    test("renders a text input with attributes", async function (assert) {
+      const attributes = {
+        label: "My text label",
+        placeholder: "Enter text here",
+      };
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Textarea @attributes={{this.attributes}} />`
+      );
+
+      assert.ok(
+        exists(".form-template-field__textarea"),
+        "A textarea input component exists"
+      );
+
+      assert.dom(".form-template-field__label").hasText("My text label");
+      assert.strictEqual(
+        query(".form-template-field__textarea").placeholder,
+        "Enter text here"
+      );
+    });
+
+    test("doesn't render a label when attribute is missing", async function (assert) {
+      const attributes = {
+        placeholder: "Enter text here",
+      };
+      this.set("attributes", attributes);
+
+      await render(
+        hbs`<FormTemplateField::Textarea @attributes={{this.attributes}} />`
+      );
+
+      assert.dom(".form-template-field__label").doesNotExist();
+    });
+  }
+);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/wrapper-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/wrapper-test.js
new file mode 100644
index 00000000000..9597db2c4e2
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/wrapper-test.js
@@ -0,0 +1,49 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+
+module(
+  "Integration | Component | form-template-field | wrapper",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("does not render a component when template content has invalid YAML", async function (assert) {
+      this.set("content", `- type: checkbox\n  attributes;invalid`);
+      await render(
+        hbs`<FormTemplateField::Wrapper @content={{this.content}} />`
+      );
+
+      assert.notOk(
+        exists(".form-template-field"),
+        "A form template field should not exist"
+      );
+      assert.ok(exists(".alert"), "An alert message should exist");
+    });
+
+    test("renders a component based on the component type in the template content", async function (assert) {
+      const content = `- type: checkbox\n- type: input\n- type: textarea\n- type: dropdown\n- type: upload\n- type: multi-select`;
+      const componentTypes = [
+        "checkbox",
+        "input",
+        "textarea",
+        "dropdown",
+        "upload",
+        "multi-select",
+      ];
+      this.set("content", content);
+
+      await render(
+        hbs`<FormTemplateField::Wrapper @content={{this.content}} />`
+      );
+
+      componentTypes.forEach((componentType) => {
+        assert.ok(
+          exists(`.form-template-field[data-field-type='${componentType}']`),
+          `${componentType} component exists`
+        );
+      });
+    });
+  }
+);
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index bf7ed040d89..909a14a1535 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -925,11 +925,11 @@ table.permalinks {
 }
 
 .form-templates {
-  &--info {
+  &__info {
     margin-top: 1rem;
   }
 
-  &--table {
+  &__table {
     margin-bottom: 1rem;
 
     .admin-list-item .action {
@@ -937,7 +937,7 @@ table.permalinks {
     }
   }
 
-  &--form {
+  &__form {
     input {
       width: 300px;
     }
@@ -975,7 +975,13 @@ table.permalinks {
     }
   }
 
-  &--quick-insert-field-buttons {
+  &__editor {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &__quick-insert-field-buttons {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -986,14 +992,22 @@ table.permalinks {
     }
 
     .btn {
-      &:not(:last-child) {
+      &:not(:last-of-type) {
         border-right: 1px solid var(--primary-low);
       }
     }
   }
+
+  &__validation-options td {
+    padding: 0.75rem;
+  }
+
+  &__preview-button {
+    margin-left: auto;
+  }
 }
 
-.admin-customize-form-template-view-modal {
+.customize-form-template-view-modal {
   .modal-footer {
     .btn:last-child {
       margin-left: auto;
diff --git a/app/controllers/admin/form_templates_controller.rb b/app/controllers/admin/form_templates_controller.rb
index f076cba550e..9cf39f5861e 100644
--- a/app/controllers/admin/form_templates_controller.rb
+++ b/app/controllers/admin/form_templates_controller.rb
@@ -11,6 +11,25 @@ class Admin::FormTemplatesController < Admin::StaffController
   def new
   end
 
+  def preview
+    params.require(:name)
+    params.require(:template)
+
+    if params[:id].present?
+      template = FormTemplate.find(params[:id])
+      template.assign_attributes(name: params[:name], template: params[:template])
+    else
+      template = FormTemplate.new(name: params[:name], template: params[:template])
+    end
+
+    begin
+      template.validate!
+      render json: success_json
+    rescue FormTemplate::NotAllowed => err
+      render_json_error(err.message)
+    end
+  end
+
   def create
     params.require(:name)
     params.require(:template)
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 89322c09a9c..7ee5d8212ef 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5547,6 +5547,7 @@ en:
           close: "Close"
           edit: "Edit"
           delete: "Delete"
+          toggle_preview: "Toggle Preview"
         new_template_form:
           submit: "Save"
           cancel: "Cancel"
@@ -5556,6 +5557,7 @@ en:
           template:
             label: "Template"
             placeholder: "Create a YAML template here..."
+          preview: "Preview"
         delete_confirm: "Are you sure you would like to delete this template?"
         quick_insert_fields:
           add_new_field: "Add"
@@ -5565,6 +5567,41 @@ en:
           dropdown: "Dropdown"
           upload: "Upload a file"
           multiselect: "Multiple choice"
+        validations_modal:
+          button_title: "Validations"
+          modal_title: "Validation Options"
+          table_headers:
+            key: "Key"
+            type: "Type"
+            description: "Description"
+          validations:
+            required:
+              key: "required"
+              type: "boolean"
+              description: "Requires the field to be completed to submit the form."
+            minimum:
+              key: "minimum"
+              type: "integer"
+              description: "In text fields, specifies the minimum number of characters allowed."
+            maximum:
+              key: "maximum"
+              type: "integer"
+              description: "In text fields, specifies the maximum number of characters allowed. In multi select dropdowns, specifies the maximum number of options that can be selected."
+            pattern:
+              key: "pattern"
+              type: "regex string"
+              description: "In text fields, a regular expression specifying the allowed input."
+        preview_modal:
+          title: "Preview Template"
+        field_placeholders:
+          validations: "enter validations here"
+          label: "Enter label here"
+          placeholder: "Enter placeholder here"
+          none_label: "Select an item"
+          choices:
+            first: "Option 1"
+            second: "Option 2"
+            third: "Option 3"
         edit_category:
           toggle_freeform: "form template disabled"
           toggle_form_template: "form template enabled"
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index a192cbafcc7..63c48a5152e 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -5253,3 +5253,5 @@ en:
   form_templates:
     errors:
       invalid_yaml: "is not a valid YAML string"
+      invalid_type: "contains an invalid template type: %{type} (valid types are: %{valid_types})"
+      missing_type: "is missing a field type"
diff --git a/config/routes.rb b/config/routes.rb
index 01a5fe03a33..225b535393b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -233,7 +233,9 @@ Discourse::Application.routes.draw do
       scope "/customize", constraints: AdminConstraint.new do
         resources :user_fields, constraints: AdminConstraint.new
         resources :emojis, constraints: AdminConstraint.new
-        resources :form_templates, constraints: AdminConstraint.new, path: "/form-templates"
+        resources :form_templates, constraints: AdminConstraint.new, path: "/form-templates" do
+          collection { get "preview" => "form_templates#preview" }
+        end
 
         get "themes/:id/:target/:field_name/edit" => "themes#index"
         get "themes/:id" => "themes#index"
diff --git a/lib/validators/form_template_yaml_validator.rb b/lib/validators/form_template_yaml_validator.rb
index 154ee8430a4..9a0fdfd7d4d 100644
--- a/lib/validators/form_template_yaml_validator.rb
+++ b/lib/validators/form_template_yaml_validator.rb
@@ -4,8 +4,36 @@ class FormTemplateYamlValidator < ActiveModel::Validator
   def validate(record)
     begin
       yaml = Psych.safe_load(record.template)
+      check_missing_type(record, yaml)
+      check_allowed_types(record, yaml)
     rescue Psych::SyntaxError
       record.errors.add(:template, I18n.t("form_templates.errors.invalid_yaml"))
     end
   end
+
+  def check_allowed_types(record, yaml)
+    allowed_types = %w[checkbox dropdown input multi-select textarea upload]
+    yaml.each do |field|
+      if !allowed_types.include?(field["type"])
+        return(
+          record.errors.add(
+            :template,
+            I18n.t(
+              "form_templates.errors.invalid_type",
+              type: field["type"],
+              valid_types: allowed_types.join(", "),
+            ),
+          )
+        )
+      end
+    end
+  end
+
+  def check_missing_type(record, yaml)
+    yaml.each do |field|
+      if field["type"].blank?
+        return record.errors.add(:template, I18n.t("form_templates.errors.missing_type"))
+      end
+    end
+  end
 end
diff --git a/spec/fabricators/form_template_fabricator.rb b/spec/fabricators/form_template_fabricator.rb
index 5d561d99351..3ec5684a807 100644
--- a/spec/fabricators/form_template_fabricator.rb
+++ b/spec/fabricators/form_template_fabricator.rb
@@ -2,5 +2,5 @@
 
 Fabricator(:form_template) do
   name { sequence(:name) { |i| "template_#{i}" } }
-  template "some yaml template: value"
+  template "- type: input"
 end
diff --git a/spec/models/form_template_spec.rb b/spec/models/form_template_spec.rb
index 0445b44b0f1..f7c730d9795 100644
--- a/spec/models/form_template_spec.rb
+++ b/spec/models/form_template_spec.rb
@@ -4,17 +4,29 @@ require "rails_helper"
 
 RSpec.describe FormTemplate, type: :model do
   it "can't have duplicate names" do
-    Fabricate(:form_template, name: "Bug Report", template: "some yaml: true")
-    t = Fabricate.build(:form_template, name: "Bug Report", template: "some yaml: true")
+    Fabricate(:form_template, name: "Bug Report", template: "- type: input")
+    t = Fabricate.build(:form_template, name: "Bug Report", template: "- type: input")
     expect(t.save).to eq(false)
-    t = Fabricate.build(:form_template, name: "Bug Report", template: "some yaml: true")
+    t = Fabricate.build(:form_template, name: "Bug Report", template: "- type: input")
     expect(t.save).to eq(false)
     expect(described_class.count).to eq(1)
   end
 
   it "can't have an invalid yaml template" do
-    template = "first: good\nsecond; bad"
+    template = "- type: checkbox\nattributes; bad"
     t = Fabricate.build(:form_template, name: "Feature Request", template: template)
     expect(t.save).to eq(false)
   end
+
+  it "must have a supported type" do
+    template = "- type: fancy"
+    t = Fabricate.build(:form_template, name: "Fancy Template", template: template)
+    expect(t.save).to eq(false)
+  end
+
+  it "must have a type propety" do
+    template = "- hello: world"
+    t = Fabricate.build(:form_template, name: "Basic Template", template: template)
+    expect(t.save).to eq(false)
+  end
 end
diff --git a/spec/requests/admin/form_templates_controller_spec.rb b/spec/requests/admin/form_templates_controller_spec.rb
index 9538ae397a2..0a858452a26 100644
--- a/spec/requests/admin/form_templates_controller_spec.rb
+++ b/spec/requests/admin/form_templates_controller_spec.rb
@@ -74,7 +74,7 @@ RSpec.describe Admin::FormTemplatesController do
                params: {
                  name: "Bug Reports",
                  template:
-                   "body:\n- type: input\n  attributes:\n    label: Website or apps\n    description: |\n      Which website or app were you using when the bug happened?\n    placeholder: |\n      e.g. website URL, name of the app\n    validations:\n      required: true",
+                   "- type: input\n  attributes:\n    label: Website or apps\n    description: |\n      Which website or app were you using when the bug happened?\n    placeholder: |\n      e.g. website URL, name of the app\n    validations:\n      required: true",
                }
 
           expect(response.status).to eq(200)
@@ -112,13 +112,13 @@ RSpec.describe Admin::FormTemplatesController do
             params: {
               id: form_template.id,
               name: "Updated Template",
-              template: "New yaml: true",
+              template: "- type: checkbox",
             }
 
         expect(response.status).to eq(200)
         form_template.reload
         expect(form_template.name).to eq("Updated Template")
-        expect(form_template.template).to eq("New yaml: true")
+        expect(form_template.template).to eq("- type: checkbox")
       end
     end
 
diff --git a/spec/system/admin_customize_form_templates_spec.rb b/spec/system/admin_customize_form_templates_spec.rb
index 270fb065fbc..9ecd2035ee0 100644
--- a/spec/system/admin_customize_form_templates_spec.rb
+++ b/spec/system/admin_customize_form_templates_spec.rb
@@ -21,7 +21,14 @@ describe "Admin Customize Form Templates", type: :system, js: true do
     it "should show the form template structure in a modal" do
       visit("/admin/customize/form-templates")
       form_template_page.click_view_form_template
-      expect(form_template_page).to have_template_structure("some yaml template: value")
+      expect(form_template_page).to have_template_structure("- type: input")
+    end
+
+    it "should show a preview of the template in a modal when toggling the preview" do
+      visit("/admin/customize/form-templates")
+      form_template_page.click_view_form_template
+      form_template_page.click_toggle_preview
+      expect(form_template_page).to have_input_field("input")
     end
   end
 
@@ -45,7 +52,7 @@ describe "Admin Customize Form Templates", type: :system, js: true do
       visit("/admin/customize/form-templates/new")
 
       sample_name = "My First Template"
-      sample_template = "test: true"
+      sample_template = "- type: input"
 
       form_template_page.type_in_template_name(sample_name)
       ace_editor.type_input(sample_template)
@@ -53,19 +60,62 @@ describe "Admin Customize Form Templates", type: :system, js: true do
       expect(form_template_page).to have_form_template(sample_name)
     end
 
+    it "should disable the save button until form is filled out" do
+      visit("/admin/customize/form-templates/new")
+      expect(form_template_page).to have_save_button_with_state(true)
+      form_template_page.type_in_template_name("New Template")
+      expect(form_template_page).to have_save_button_with_state(true)
+      ace_editor.type_input("- type: input")
+      expect(form_template_page).to have_save_button_with_state(false)
+    end
+
+    it "should disable the preview button until form is filled out" do
+      visit("/admin/customize/form-templates/new")
+      expect(form_template_page).to have_preview_button_with_state(true)
+      form_template_page.type_in_template_name("New Template")
+      expect(form_template_page).to have_preview_button_with_state(true)
+      ace_editor.type_input("- type: input")
+      expect(form_template_page).to have_preview_button_with_state(false)
+    end
+
+    it "should show validation options in a modal when clicking the validations button" do
+      visit("/admin/customize/form-templates/new")
+      form_template_page.click_validations_button
+      expect(form_template_page).to have_validations_modal
+    end
+
+    it "should show a preview of the template in a modal when clicking the preview button" do
+      visit("/admin/customize/form-templates/new")
+      form_template_page.type_in_template_name("New Template")
+      ace_editor.type_input("- type: input")
+      form_template_page.click_preview_button
+      expect(form_template_page).to have_preview_modal
+      expect(form_template_page).to have_input_field("input")
+    end
+
+    it "should render all the input field types in the preview" do
+      visit("/admin/customize/form-templates/new")
+      form_template_page.type_in_template_name("New Template")
+      ace_editor.type_input(
+        "- type: input\n- type: textarea\n- type: checkbox\n- type: dropdown\n- type: upload\n- type: multi-select",
+      )
+      form_template_page.click_preview_button
+      expect(form_template_page).to have_input_field("input")
+      expect(form_template_page).to have_input_field("textarea")
+      expect(form_template_page).to have_input_field("checkbox")
+      expect(form_template_page).to have_input_field("dropdown")
+      expect(form_template_page).to have_input_field("upload")
+      expect(form_template_page).to have_input_field("multi-select")
+    end
+
     it "should allow quick insertion of checkbox field" do
       quick_insertion_test(
         "checkbox",
         '- type: checkbox
-  choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
   attributes:
-    label: "Enter question here"
-    description: "Enter description here"
-    validations:
-      required: true',
+    label: "Enter label here"
+  validations:
+    # enter validations here',
       )
     end
 
@@ -74,11 +124,10 @@ describe "Admin Customize Form Templates", type: :system, js: true do
         "input",
         '- type: input
   attributes:
-    label: "Enter input label here"
-    description: "Enter input description here"
-    placeholder: "Enter input placeholder here"
-    validations:
-      required: true',
+    label: "Enter label here"
+    placeholder: "Enter placeholder here"
+  validations:
+    # enter validations here',
       )
     end
 
@@ -87,11 +136,10 @@ describe "Admin Customize Form Templates", type: :system, js: true do
         "textarea",
         '- type: textarea
   attributes:
-    label: "Enter textarea label here"
-    description: "Enter textarea description here"
-    placeholder: "Enter textarea placeholder here"
-    validations:
-      required: true',
+    label: "Enter label here"
+    placeholder: "Enter placeholder here"
+  validations:
+    # enter validations here',
       )
     end
 
@@ -104,10 +152,11 @@ describe "Admin Customize Form Templates", type: :system, js: true do
     - "Option 2"
     - "Option 3"
   attributes:
-    label: "Enter dropdown label here"
-    description: "Enter dropdown description here"
-    validations:
-      required: true',
+    none_label: "Select an item"
+    label: "Enter label here"
+    filterable: false
+  validations:
+    # enter validations here',
       )
     end
 
@@ -117,24 +166,26 @@ describe "Admin Customize Form Templates", type: :system, js: true do
         '- type: upload
   attributes:
     file_types: "jpg, png, gif"
-    label: "Enter upload label here"
-    description: "Enter upload description here"',
+    allow_multiple: false
+    label: "Enter label here"
+  validations:
+    # enter validations here',
       )
     end
 
     it "should allow quick insertion of multiple choice field" do
       quick_insertion_test(
         "multiselect",
-        '- type: multiple_choice
+        '- type: multi-select
   choices:
     - "Option 1"
     - "Option 2"
     - "Option 3"
   attributes:
-    label: "Enter multiple choice label here"
-    description: "Enter multiple choice description here"
-    validations:
-      required: true',
+    none_label: "Select an item"
+    label: "Enter label here"
+  validations:
+    # enter validations here',
       )
     end
   end
diff --git a/spec/system/page_objects/pages/form_template.rb b/spec/system/page_objects/pages/form_template.rb
index 3f1c04195e0..508a396f6b2 100644
--- a/spec/system/page_objects/pages/form_template.rb
+++ b/spec/system/page_objects/pages/form_template.rb
@@ -5,15 +5,20 @@ module PageObjects
     class FormTemplate < PageObjects::Pages::Base
       # Form Template Index
       def has_form_template_table?
-        page.has_selector?("table.form-templates--table")
+        page.has_selector?("table.form-templates__table")
       end
 
       def click_view_form_template
-        find(".form-templates--table tr:first-child .btn-view-template").click
+        find(".form-templates__table tr:first-child .btn-view-template").click
+      end
+
+      def click_toggle_preview
+        find(".d-toggle-switch .d-toggle-switch__checkbox-slider", visible: false).click
+        self
       end
 
       def has_form_template?(name)
-        find(".form-templates--table tbody tr td", text: name).present?
+        find(".form-templates__table tbody tr td", text: name).present?
       end
 
       def has_template_structure?(structure)
@@ -22,20 +27,48 @@ module PageObjects
 
       # Form Template new/edit form related
       def type_in_template_name(input)
-        find(".form-templates--form-name-input").send_keys(input)
+        find(".form-templates__form-name-input").send_keys(input)
         self
       end
 
       def click_save_button
-        find(".form-templates--form .footer-buttons .btn-primary").click
+        find(".form-templates__form .footer-buttons .btn-primary").click
       end
 
       def click_quick_insert(field_type)
-        find(".form-templates--form .quick-insert-#{field_type}").click
+        find(".form-templates__form .quick-insert-#{field_type}").click
+      end
+
+      def click_validations_button
+        find(".form-templates__validations-modal-button").click
+      end
+
+      def click_preview_button
+        find(".form-templates__preview-button").click
+      end
+
+      def has_input_field?(type)
+        find(".form-template-field__#{type}").present?
+      end
+
+      def has_preview_modal?
+        find(".form-template-form-preview-modal").present?
+      end
+
+      def has_validations_modal?
+        find(".admin-form-template-validation-options-modal").present?
       end
 
       def has_name_value?(name)
-        find(".form-templates--form-name-input").value == name
+        find(".form-templates__form-name-input").value == name
+      end
+
+      def has_save_button_with_state?(state)
+        find_button("Save", disabled: state)
+      end
+
+      def has_preview_button_with_state?(state)
+        find_button("Preview", disabled: state)
       end
     end
   end