diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index 80700c4..730ef99 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -5,6 +5,7 @@
 
 from forms_pro.api.user import get_user
 from forms_pro.forms_pro.doctype.form.form import Form
+from forms_pro.utils.constants import FORMS_PRO_SYSTEM_FIELDNAMES, UNSUPPORTED_FRAPPE_FIELDTYPES
 
 
 class FormSharedWithResponse(BaseModel):
@@ -36,9 +37,11 @@ def is_login_required(route: str) -> bool:
     return bool(login_enabled)
 
 
-@frappe.whitelist(allow_guest=True)
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
 def get_form_by_route(route: str) -> dict:
     form_id = frappe.db.get_value("Form", {"route": route}, pluck="name")
+    if not form_id:
+        frappe.throw(_("Form not found"), frappe.DoesNotExistError)
     return get_form(form_id)
 
 
@@ -230,25 +233,13 @@ def get_doctype_list() -> list[str]:
     )
 
 
-@frappe.whitelist(allow_guest=True)
-def get_doctype_fields(doctype: str) -> dict:
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
+def get_doctype_fields(doctype: str) -> list:
     doctype = frappe.get_doc("DocType", doctype)
-    fields = doctype.fields
-
-    FIELDTYPES_TO_REMOVE = [
-        "Section Break",
-        "HTML",
-        "Button",
-        "Column Break",
-        "Tab Break",
-        "Barcode",
-        "Dynamic Link",
-        "Fold",
+    fields = [
+        field
+        for field in doctype.fields
+        if field.fieldtype not in UNSUPPORTED_FRAPPE_FIELDTYPES
+        and field.fieldname not in FORMS_PRO_SYSTEM_FIELDNAMES
     ]
-
-    FIELDS_TO_REMOVE = ["fp_submission_status", "fp_linked_form"]
-
-    fields = [field for field in fields if field.fieldtype not in FIELDTYPES_TO_REMOVE]
-    fields = [field for field in fields if field.fieldname not in FIELDS_TO_REMOVE]
-
     return fields
diff --git a/forms_pro/api/submission.py b/forms_pro/api/submission.py
index 859389d..73d303e 100644
--- a/forms_pro/api/submission.py
+++ b/forms_pro/api/submission.py
@@ -1,3 +1,4 @@
+import json
 from datetime import datetime
 from typing import Any
 
@@ -32,11 +33,98 @@ def parse_datetime(cls, v: Any) -> datetime:
         raise ValueError(f"Invalid datetime value: {v}")
 
 
-@frappe.whitelist(allow_guest=True)
+def _coerce_field_value(value: Any, fieldtype: str) -> Any:
+    """Coerce a submitted value to its comparable type, matching frontend conditionals.ts logic."""
+    if value is None or value == "":
+        return None
+    # Matches isBoolean types in the frontend registry (Switch, Checkbox)
+    if fieldtype in ("Switch", "Checkbox"):
+        return bool(value)
+    if fieldtype == "Number":
+        try:
+            return float(value)
+        except (TypeError, ValueError):
+            return None
+    return str(value)
+
+
+def _evaluate_conditions(conditions: list[dict], form_data: dict, field_map: dict) -> bool:
+    """Evaluate AND-joined conditions against submitted form data."""
+    for condition in conditions:
+        fieldname = condition.get("fieldname")
+        operator = condition.get("operator")
+        expected = condition.get("value")
+        field = field_map.get(fieldname)
+        if not field:
+            return False
+        actual = _coerce_field_value(form_data.get(fieldname), field.fieldtype)
+        # Coerce the condition's expected value through the same function so
+        # types match — avoids str(True)=="True" vs "true" mismatches and
+        # str(3.0)=="3.0" vs "3" mismatches for Number fields.
+        expected_coerced = _coerce_field_value(expected, field.fieldtype)
+        if operator == "Is" and actual != expected_coerced:
+            return False
+        if operator == "Is Not" and actual == expected_coerced:
+            return False
+        if operator == "Is Empty" and actual is not None and actual != "":
+            return False
+        if operator == "Is Not Empty" and (actual is None or actual == ""):
+            return False
+    return True
+
+
+def _validate_form_response(form: "Form", form_data: dict) -> None:
+    """
+    Validate required and conditionally-required fields server-side.
+
+    Mirrors the shouldFieldBeVisible / shouldFieldBeRequired logic in
+    frontend/src/utils/conditionals.ts so that direct API calls cannot
+    bypass frontend validation.
+    """
+    field_map = {f.fieldname: f for f in form.fields}
+    errors: list[str] = []
+
+    for field in form.fields:
+        is_visible = not field.hidden
+        is_required = bool(field.reqd)
+
+        for other in form.fields:
+            if not other.conditional_logic:
+                continue
+            try:
+                logic = json.loads(other.conditional_logic)
+            except (json.JSONDecodeError, TypeError):
+                continue
+
+            if logic.get("target_field") != field.fieldname:
+                continue
+
+            conditions_met = _evaluate_conditions(logic.get("conditions", []), form_data, field_map)
+            if conditions_met:
+                action = logic.get("action")
+                if action == "Show Field":
+                    is_visible = True
+                elif action == "Hide Field":
+                    is_visible = False
+                elif action == "Require Answer":
+                    is_required = True
+
+        if not is_visible:
+            continue
+
+        value = form_data.get(field.fieldname)
+        if is_required and (value is None or value == ""):
+            errors.append(_("{0} is required").format(field.label))
+
+    if errors:
+        frappe.throw("\n".join(errors), frappe.ValidationError)
+
+
+@frappe.whitelist(allow_guest=True)  # nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
 def submit_form_response(
     form_id: str,
     form_data: list[dict],
-    submission_status: SubmissionStatus = SubmissionStatus.SUBMITTED,
+    submission_status: str = SubmissionStatus.SUBMITTED.value,
 ) -> str:
     """
     Submit a form response
@@ -49,6 +137,14 @@ def submit_form_response(
     Returns:
         The name of the submission
     """
+    try:
+        status = SubmissionStatus(submission_status)
+    except ValueError:
+        frappe.throw(
+            _("Invalid submission status: {0}").format(submission_status),
+            frappe.ValidationError,
+        )
+
     try:
         form: Form = frappe.get_doc("Form", form_id)
         linked_doctype = form.linked_doctype
@@ -59,12 +155,22 @@ def submit_form_response(
                 frappe.PermissionError,
             )
 
+        form_data_dict = {item["fieldname"]: item["value"] for item in form_data}
+
+        # Whitelist to declared form fields only — prevents injecting system fields
+        # like owner, docstatus, etc. into the linked DocType.
+        allowed_fieldnames = {f.fieldname for f in form.fields}
+        form_data_dict = {k: v for k, v in form_data_dict.items() if k in allowed_fieldnames}
+
+        if status == SubmissionStatus.SUBMITTED:
+            _validate_form_response(form, form_data_dict)
+
         submission = frappe.new_doc(linked_doctype)
-        for data in form_data:
-            submission.set(data["fieldname"], data["value"])
+        for fieldname, value in form_data_dict.items():
+            submission.set(fieldname, value)
 
         submission.fp_linked_form = form_id
-        submission.fp_submission_status = submission_status.value
+        submission.fp_submission_status = status.value
         submission.insert(ignore_permissions=True, ignore_mandatory=True)
 
         # Share the submission with the owner
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index f347b6d..209b21d 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -4,6 +4,32 @@
 # import frappe
 from frappe.model.document import Document
 
+# Maps Forms Pro field types to Frappe CustomField fieldtypes.
+# When adding a new field type:
+#   1. Add the option to form_field.json  →  DF.Literal regenerates automatically
+#   2. Add an entry here
+#   3. Add an entry to FIELD_TYPE_DEFINITIONS in frontend/src/config/fieldTypes.ts
+FORM_TO_FRAPPE_FIELDTYPE: dict[str, dict] = {
+    "Attach": {"fieldtype": "Attach"},
+    "Data": {"fieldtype": "Data"},
+    "Number": {"fieldtype": "Int"},
+    "Email": {"fieldtype": "Data", "options": "Email"},
+    "Date": {"fieldtype": "Date"},
+    "Date Time": {"fieldtype": "Datetime"},
+    "Date Range": {"fieldtype": "Data"},
+    "Time Picker": {"fieldtype": "Time"},
+    "Password": {"fieldtype": "Password"},
+    "Select": {"fieldtype": "Select"},
+    "Phone": {"fieldtype": "Phone"},
+    "Switch": {"fieldtype": "Check"},
+    "Textarea": {"fieldtype": "Text"},
+    "Text Editor": {"fieldtype": "Text Editor"},
+    "Link": {"fieldtype": "Link"},
+    "Checkbox": {"fieldtype": "Check"},
+    "Rating": {"fieldtype": "Rating"},
+    "Table": {"fieldtype": "Table"},
+}
+
 
 class FormField(Document):
     # begin: auto-generated types
@@ -49,30 +75,13 @@ class FormField(Document):
 
     @property
     def to_frappe_field(self) -> dict:
-        _fieldtype = self.fieldtype
-
-        if self.fieldtype == "Email":
-            _fieldtype = "Data"
-            self.options = "Email"
-        elif self.fieldtype == "Number":
-            _fieldtype = "Int"
-        elif self.fieldtype == "Date Time":
-            _fieldtype = "Datetime"
-        elif self.fieldtype == "Date Range":
-            _fieldtype = "Data"
-        elif self.fieldtype == "Time Picker":
-            _fieldtype = "Time"
-        elif self.fieldtype == "Switch" or self.fieldtype == "Checkbox":
-            _fieldtype = "Check"
-        elif self.fieldtype == "Textarea":
-            _fieldtype = "Text"
-
+        mapping = FORM_TO_FRAPPE_FIELDTYPE.get(self.fieldtype, {})
         return {
             "fieldname": self.fieldname,
-            "fieldtype": _fieldtype,
+            "fieldtype": mapping.get("fieldtype", self.fieldtype),
             "label": self.label,
             "reqd": self.reqd,
-            "options": self.options,
+            "options": mapping.get("options", self.options),
             "description": self.description,
             "default": self.default,
         }
diff --git a/forms_pro/tests/test_submission_validation.py b/forms_pro/tests/test_submission_validation.py
new file mode 100644
index 0000000..9aaff25
--- /dev/null
+++ b/forms_pro/tests/test_submission_validation.py
@@ -0,0 +1,215 @@
+# Copyright (c) 2025, harsh@buildwithhussain.com and contributors
+# For license information, please see license.txt
+
+import json
+import unittest
+from types import SimpleNamespace
+
+from forms_pro.api.submission import _coerce_field_value, _evaluate_conditions, _validate_form_response
+from forms_pro.utils.constants import FORMS_PRO_SYSTEM_FIELDNAMES, UNSUPPORTED_FRAPPE_FIELDTYPES
+from forms_pro.utils.form_generator import LINKED_FORM_FIELDOPTIONS, SUBMISSION_STATUS_FIELDOPTIONS
+
+
+def _field(fieldname, fieldtype="Data", label=None, reqd=0, hidden=0, conditional_logic=None):
+    """Build a minimal field stub matching what _validate_form_response expects."""
+    return SimpleNamespace(
+        fieldname=fieldname,
+        fieldtype=fieldtype,
+        label=label or fieldname.replace("_", " ").title(),
+        reqd=reqd,
+        hidden=hidden,
+        conditional_logic=conditional_logic,
+    )
+
+
+def _form(*fields):
+    """Build a minimal form stub."""
+    return SimpleNamespace(fields=list(fields))
+
+
+class TestCoerceFieldValue(unittest.TestCase):
+    def test_empty_string_returns_none(self):
+        self.assertIsNone(_coerce_field_value("", "Data"))
+
+    def test_none_returns_none(self):
+        self.assertIsNone(_coerce_field_value(None, "Data"))
+
+    def test_switch_coerces_to_bool(self):
+        self.assertTrue(_coerce_field_value(1, "Switch"))
+        self.assertFalse(_coerce_field_value(0, "Switch"))
+        self.assertFalse(_coerce_field_value("", "Switch"))
+
+    def test_checkbox_coerces_to_bool(self):
+        self.assertTrue(_coerce_field_value("true", "Checkbox"))
+        self.assertFalse(_coerce_field_value(0, "Checkbox"))
+
+    def test_number_coerces_to_float(self):
+        self.assertEqual(_coerce_field_value("42", "Number"), 42.0)
+        self.assertEqual(_coerce_field_value(7, "Number"), 7.0)
+        self.assertEqual(_coerce_field_value("3.14", "Number"), 3.14)
+        self.assertEqual(_coerce_field_value(3.14, "Number"), 3.14)
+
+    def test_number_invalid_returns_none(self):
+        self.assertIsNone(_coerce_field_value("abc", "Number"))
+
+    def test_data_returns_string(self):
+        self.assertEqual(_coerce_field_value("hello", "Data"), "hello")
+        self.assertEqual(_coerce_field_value(123, "Data"), "123")
+
+
+class TestEvaluateConditions(unittest.TestCase):
+    def _field_map(self, *fields):
+        return {f.fieldname: f for f in fields}
+
+    def test_is_operator_match(self):
+        fields = self._field_map(_field("status", "Data"))
+        conditions = [{"fieldname": "status", "operator": "Is", "value": "Active"}]
+        self.assertTrue(_evaluate_conditions(conditions, {"status": "Active"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
+
+    def test_is_not_operator(self):
+        fields = self._field_map(_field("status", "Data"))
+        conditions = [{"fieldname": "status", "operator": "Is Not", "value": "Active"}]
+        self.assertTrue(_evaluate_conditions(conditions, {"status": "Inactive"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"status": "Active"}, fields))
+
+    def test_is_empty_operator(self):
+        fields = self._field_map(_field("note", "Data"))
+        conditions = [{"fieldname": "note", "operator": "Is Empty", "value": None}]
+        self.assertTrue(_evaluate_conditions(conditions, {"note": ""}, fields))
+        self.assertTrue(_evaluate_conditions(conditions, {"note": None}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"note": "some text"}, fields))
+
+    def test_is_not_empty_operator(self):
+        fields = self._field_map(_field("note", "Data"))
+        conditions = [{"fieldname": "note", "operator": "Is Not Empty", "value": None}]
+        self.assertTrue(_evaluate_conditions(conditions, {"note": "hi"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"note": ""}, fields))
+
+    def test_all_conditions_must_pass(self):
+        """AND logic — all conditions must be true."""
+        fields = self._field_map(_field("a", "Data"), _field("b", "Data"))
+        conditions = [
+            {"fieldname": "a", "operator": "Is", "value": "yes"},
+            {"fieldname": "b", "operator": "Is", "value": "yes"},
+        ]
+        self.assertTrue(_evaluate_conditions(conditions, {"a": "yes", "b": "yes"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"a": "yes", "b": "no"}, fields))
+
+    def test_unknown_field_returns_false(self):
+        conditions = [{"fieldname": "nonexistent", "operator": "Is", "value": "x"}]
+        self.assertFalse(_evaluate_conditions(conditions, {}, {}))
+
+    def test_number_condition_matches_float(self):
+        """float("3.14") must equal float(3.14) — old int() coercion would have failed."""
+        fields = self._field_map(_field("score", "Number"))
+        conditions = [{"fieldname": "score", "operator": "Is", "value": 3.14}]
+        self.assertTrue(_evaluate_conditions(conditions, {"score": "3.14"}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"score": "3.15"}, fields))
+
+    def test_number_condition_int_vs_float_parity(self):
+        """Condition value stored as int 42 must match submitted value "42"."""
+        fields = self._field_map(_field("age", "Number"))
+        conditions = [{"fieldname": "age", "operator": "Is", "value": 42}]
+        self.assertTrue(_evaluate_conditions(conditions, {"age": "42"}, fields))
+
+    def test_boolean_condition_type_aware(self):
+        """True (bool) condition must match truthy submitted value without str() mismatch."""
+        fields = self._field_map(_field("agreed", "Switch"))
+        conditions = [{"fieldname": "agreed", "operator": "Is", "value": True}]
+        self.assertTrue(_evaluate_conditions(conditions, {"agreed": 1}, fields))
+        self.assertFalse(_evaluate_conditions(conditions, {"agreed": 0}, fields))
+
+
+class TestValidateFormResponse(unittest.TestCase):
+    def test_required_field_missing_raises(self):
+        import frappe
+
+        form = _form(_field("name", reqd=1))
+        with self.assertRaises(frappe.ValidationError):
+            _validate_form_response(form, {})
+
+    def test_required_field_present_passes(self):
+        form = _form(_field("name", reqd=1))
+        _validate_form_response(form, {"name": "John"})  # must not raise
+
+    def test_hidden_required_field_is_skipped(self):
+        """A hidden required field must not be validated."""
+        form = _form(_field("secret", reqd=1, hidden=1))
+        _validate_form_response(form, {})  # must not raise
+
+    def test_conditional_show_makes_field_required(self):
+        """A field conditionally required via require_answer must be checked."""
+        import frappe
+
+        logic = json.dumps(
+            {
+                "target_field": "phone",
+                "action": "Require Answer",
+                "conditions": [{"fieldname": "contact_method", "operator": "Is", "value": "Phone"}],
+            }
+        )
+        contact = _field("contact_method")
+        phone = _field("phone", reqd=0)
+        phone_with_logic = _field("contact_method", conditional_logic=logic)
+
+        form = _form(contact, phone, phone_with_logic)
+        with self.assertRaises(frappe.ValidationError):
+            _validate_form_response(form, {"contact_method": "Phone", "phone": ""})
+
+    def test_conditional_hide_skips_required_field(self):
+        """A conditionally hidden field must not be validated even if reqd=1."""
+        logic = json.dumps(
+            {
+                "target_field": "extra",
+                "action": "Hide Field",
+                "conditions": [{"fieldname": "flag", "operator": "Is", "value": "yes"}],
+            }
+        )
+        flag = _field("flag")
+        extra = _field("extra", reqd=1)
+        flag_with_logic = _field("flag", conditional_logic=logic)
+
+        form = _form(flag, extra, flag_with_logic)
+        # extra is required but should be hidden when flag=yes — no error expected
+        _validate_form_response(form, {"flag": "yes", "extra": ""})
+
+    def test_multiple_missing_fields_all_reported(self):
+        """All missing required fields should appear in the error, not just the first."""
+        import frappe
+
+        form = _form(
+            _field("first_name", reqd=1),
+            _field("last_name", reqd=1),
+        )
+        with self.assertRaises(frappe.ValidationError) as ctx:
+            _validate_form_response(form, {})
+
+        error_msg = str(ctx.exception)
+        self.assertIn("First Name", error_msg)
+        self.assertIn("Last Name", error_msg)
+
+    def test_required_field_with_zero_passes(self):
+        """Numeric 0 is a valid value and must not trigger a required-field error."""
+        form = _form(_field("score", fieldtype="Number", reqd=1))
+        _validate_form_response(form, {"score": 0})  # must not raise
+
+    def test_required_field_with_false_passes(self):
+        """Boolean False (unchecked Switch) is a valid value for a required field."""
+        form = _form(_field("agreed", fieldtype="Switch", reqd=1))
+        _validate_form_response(form, {"agreed": False})  # must not raise
+
+
+class TestConstants(unittest.TestCase):
+    def test_system_fieldnames_derived_from_form_generator(self):
+        """Constants must stay in sync with form_generator field definitions."""
+        self.assertIn(SUBMISSION_STATUS_FIELDOPTIONS["fieldname"], FORMS_PRO_SYSTEM_FIELDNAMES)
+        self.assertIn(LINKED_FORM_FIELDOPTIONS["fieldname"], FORMS_PRO_SYSTEM_FIELDNAMES)
+
+    def test_unsupported_fieldtypes_contains_layout_types(self):
+        for fieldtype in ("Section Break", "Column Break", "Tab Break", "Fold"):
+            self.assertIn(fieldtype, UNSUPPORTED_FRAPPE_FIELDTYPES)
+
+    def test_unsupported_fieldtypes_contains_non_input_types(self):
+        for fieldtype in ("HTML", "Button", "Barcode", "Dynamic Link"):
+            self.assertIn(fieldtype, UNSUPPORTED_FRAPPE_FIELDTYPES)
diff --git a/forms_pro/utils/constants.py b/forms_pro/utils/constants.py
new file mode 100644
index 0000000..7675945
--- /dev/null
+++ b/forms_pro/utils/constants.py
@@ -0,0 +1,27 @@
+from forms_pro.utils.form_generator import LINKED_FORM_FIELDOPTIONS, SUBMISSION_STATUS_FIELDOPTIONS
+
+# Frappe fieldtypes that have no Forms Pro equivalent and must be excluded
+# when importing fields from an existing DocType into a form.
+# These are layout/structural types (Section Break, Column Break, etc.)
+# or types with no meaningful input representation (Button, Barcode, Fold).
+UNSUPPORTED_FRAPPE_FIELDTYPES: frozenset[str] = frozenset(
+    [
+        "Section Break",
+        "Column Break",
+        "Tab Break",
+        "Fold",
+        "HTML",
+        "Button",
+        "Barcode",
+        "Dynamic Link",
+    ]
+)
+
+# Fieldnames injected by Forms Pro itself — must never appear in the
+# user-visible field list returned to the form builder or submission page.
+FORMS_PRO_SYSTEM_FIELDNAMES: frozenset[str] = frozenset(
+    [
+        SUBMISSION_STATUS_FIELDOPTIONS["fieldname"],  # fp_submission_status
+        LINKED_FORM_FIELDOPTIONS["fieldname"],  # fp_linked_form
+    ]
+)
diff --git a/frontend/src/components/builder/FieldLabel.vue b/frontend/src/components/builder/FieldLabel.vue
new file mode 100644
index 0000000..8572ffa
--- /dev/null
+++ b/frontend/src/components/builder/FieldLabel.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Asterisk } from "lucide-vue-next";
+
+defineProps<{
+    field: {
+        label?: string;
+        reqd?: boolean;
+    };
+    inEditMode: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:label": [value: string];
+}>();
+</script>
+
+<template>
+    <div class="flex gap-2 items-start">
+        <input
+            v-if="inEditMode"
+            placeholder="Label"
+            type="text"
+            :value="field.label"
+            @input="emit('update:label', ($event.target as HTMLInputElement).value)"
+            class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
+        />
+        <label class="text-base" v-else>{{ field.label }}</label>
+        <Asterisk v-if="field.reqd" class="w-4 h-4 text-red-400" />
+    </div>
+</template>
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index 9af4ea7..748c19f 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { Asterisk } from "lucide-vue-next";
 import RenderField from "../RenderField.vue";
+import FieldLabel from "./FieldLabel.vue";
 import Table from "@/components/fields/Table.vue";
 import { useFieldOptions } from "@/utils/selectOptions";
+import { getFieldTypeDef, Fieldtype } from "@/config/fieldTypes";
 
 const props = defineProps({
     field: {
@@ -22,11 +23,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:field"]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const modelValue = defineModel<any>();
 
-// Add v-model support
-const modelValue = defineModel();
-
-// Create a computed property for two-way binding
 const fieldData = computed({
     get() {
         return props.field;
@@ -36,152 +35,81 @@ const fieldData = computed({
     },
 });
 
-const getClasses = computed(() => {
-    switch (fieldData.value.fieldtype) {
-        case "Text Editor":
-            return "w-fit";
-        case "Switch":
-            return "w-full flex gap-4 my-2";
-        case "Checkbox":
-            return "w-full flex gap-2";
-        default:
-            return "w-full flex flex-col gap-2";
-    }
-});
+const layout = computed(
+    () => getFieldTypeDef(fieldData.value.fieldtype as Fieldtype)?.layout ?? "default"
+);
 
 const { options: selectOptions } = useFieldOptions(fieldData);
 </script>
+
 <template>
-    <div :class="getClasses" v-if="fieldData.fieldtype == 'Switch'">
+    <!-- inline: Switch / Checkbox — input precedes label -->
+    <div v-if="layout === 'inline'" class="w-full flex gap-2 my-2">
         <RenderField
             v-model="modelValue"
             :field="fieldData"
-            :class="{ 'pointer-events-none': inEditMode }"
+            :class="{ 'pointer-events-none mt-1': inEditMode }"
             :disabled="disabled"
         />
-        <div class="flex flex-col gap-1">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
+        <div class="flex flex-col gap-1 w-full">
+            <FieldLabel
+                :field="fieldData"
+                :in-edit-mode="inEditMode"
+                @update:label="fieldData.label = $event"
+            />
+            <small class="text-gray-500">{{ fieldData.description }}</small>
         </div>
     </div>
-    <div :class="getClasses" v-else-if="fieldData.fieldtype == 'Checkbox'">
+
+    <!-- description-first: Text Editor — description sits above the input -->
+    <div v-else-if="layout === 'description-first'" class="flex flex-col gap-1">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
+        <small class="text-gray-500">{{ fieldData.description }}</small>
         <RenderField
             v-model="modelValue"
             :field="fieldData"
-            :class="{ 'pointer-events-none mt-1': inEditMode }"
+            :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
         />
-        <div class="flex flex-col gap-1 w-full">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    :id="fieldData.name + '_label'"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 px-0 py-1 !w-full"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small v-if="fieldData.description" class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
-        </div>
     </div>
-    <div v-else-if="fieldData.fieldtype == 'Text Editor'">
-        <div class="flex flex-col gap-1">
-            <div class="flex gap-2 items-start">
-                <input
-                    v-if="inEditMode"
-                    placeholder="Label"
-                    type="text"
-                    v-model="fieldData.label"
-                    class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-                />
-                <label class="text-base" v-else>{{ fieldData.label }}</label>
-                <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-            </div>
-            <small class="text-gray-500">
-                {{ fieldData.description }}
-            </small>
-            <RenderField
-                :model-value="modelValue"
-                :field="fieldData"
-                @change="(value: any) => (modelValue = value)"
-                :class="{ 'pointer-events-none': inEditMode }"
-                :disabled="disabled"
-            />
-        </div>
-    </div>
-    <div v-else-if="fieldData.fieldtype == 'Attach'">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
+
+    <!-- custom: Attach and Table each need their own binding/widget -->
+    <div v-else-if="layout === 'custom' && fieldData.fieldtype === 'Attach'">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
         <RenderField
-            :value="modelValue"
-            @update:value="(value: string) => (modelValue = value)"
+            v-model="modelValue"
             :field="fieldData"
             :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
         />
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
+        <small class="text-gray-500">{{ fieldData.description }}</small>
     </div>
-    <div v-else-if="fieldData.fieldtype == 'Table'" class="w-full space-y-4">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
-        <Table
-            v-model="modelValue as undefined"
+
+    <div v-else-if="layout === 'custom'" class="w-full space-y-4">
+        <FieldLabel
+            :field="fieldData"
             :in-edit-mode="inEditMode"
-            :doctype="fieldData.options"
+            @update:label="fieldData.label = $event"
         />
+        <small class="text-gray-500">{{ fieldData.description }}</small>
+        <Table v-model="modelValue" :in-edit-mode="inEditMode" :doctype="fieldData.options" />
     </div>
-    <div v-else :class="getClasses">
-        <div class="flex gap-2 items-start">
-            <input
-                v-if="inEditMode"
-                placeholder="Label"
-                type="text"
-                v-model="fieldData.label"
-                class="bg-transparent border-none outline-none text-base focus:ring-0 w-fit px-0 py-1"
-            />
-            <label class="text-base" v-else>{{ fieldData.label }}</label>
-            <Asterisk v-if="fieldData.reqd" class="w-4 h-4 text-red-400" />
-        </div>
+
+    <!-- default: label → input → description -->
+    <div v-else class="w-full flex flex-col gap-2">
+        <FieldLabel
+            :field="fieldData"
+            :in-edit-mode="inEditMode"
+            @update:label="fieldData.label = $event"
+        />
         <RenderField
             v-model="modelValue"
             :field="fieldData"
@@ -189,8 +117,6 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             :disabled="disabled"
             :options="selectOptions"
         />
-        <small class="text-gray-500">
-            {{ fieldData.description }}
-        </small>
+        <small class="text-gray-500">{{ fieldData.description }}</small>
     </div>
 </template>
diff --git a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
index 4183359..38cc19a 100644
--- a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
+++ b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useEditForm } from "@/stores/editForm";
 import { FormControl } from "frappe-ui";
-import { FormField, FormFieldTypes } from "@/types/formfield";
+import { FormField } from "@/types/formfield";
+import { FIELD_TYPE_DEFINITIONS } from "@/config/fieldTypes";
 import { computed } from "vue";
 import type { Component } from "vue";
 import ConditionalLogicSection from "./ConditionalLogicSection.vue";
@@ -44,7 +45,7 @@ const fieldProperties = computed(() => {
                 label: "Fieldtype",
                 required: true,
                 variant: "outline",
-                options: Object.values(FormFieldTypes),
+                options: FIELD_TYPE_DEFINITIONS.map((d) => d.name),
             },
         },
         {
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 2ebad2e..3ae838d 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { formFields, FormFields } from "@/utils/form_fields";
+import { Fieldtype } from "@/types/formfield";
 import { FormControl, Button } from "frappe-ui";
 import { useEditForm } from "@/stores/editForm";
 import RenderField from "@/components/RenderField.vue";
@@ -40,7 +41,7 @@ const editFormStore = useEditForm();
                         class="absolute top-4 -right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10"
                         variant="outline"
                         icon="plus"
-                        @click="editFormStore.addField(component)"
+                        @click="editFormStore.addField(component as Fieldtype)"
                     />
                 </div>
             </div>
diff --git a/frontend/src/components/fields/Attachment.vue b/frontend/src/components/fields/Attachment.vue
index effaad4..aab9714 100644
--- a/frontend/src/components/fields/Attachment.vue
+++ b/frontend/src/components/fields/Attachment.vue
@@ -2,16 +2,13 @@
 import { ErrorMessage, FileUploader } from "frappe-ui";
 import { ref } from "vue";
 
-const props = defineProps({
+defineProps({
     field: {
         type: Object,
         required: true,
     },
 });
 
-const emit = defineEmits(["update:value"]);
-
-// @ts-ignore
 const value = defineModel<string>();
 
 const inPreview = ref(false);
@@ -51,24 +48,20 @@ const formatFileSize = (fileSize: number) => {
 const handleChange = (file: FileType) => {
     fileData.value = file;
     if (file.file_url) {
-        emit("update:value", file.file_url);
+        value.value = file.file_url;
     }
     inPreview.value = true;
 };
 
 const handleRemove = () => {
     fileData.value = null;
-    emit("update:value", "");
+    value.value = "";
     inPreview.value = false;
 };
 </script>
 <template>
     <div class="flex gap-2 flex-col mt-2">
-        <FileUploader
-            v-if="!inPreview"
-            v-bind="props.field"
-            @success="(file: FileType) => handleChange(file)"
-        >
+        <FileUploader v-if="!inPreview" @success="(file: FileType) => handleChange(file)">
             <!-- @vue-ignore -->
             <template #default="{ uploading, progress, error, openFileSelector }">
                 <Button @click="openFileSelector()" :loading="uploading">
diff --git a/frontend/src/components/form/submissions/SubmissionFieldValue.vue b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
index c788458..8eb8843 100644
--- a/frontend/src/components/form/submissions/SubmissionFieldValue.vue
+++ b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Checkbox, Switch, Rating, TextEditor } from "frappe-ui";
-import { FormFieldTypes } from "@/types/formfield";
+import { Fieldtype } from "@/types/formfield";
+import { getFieldTypeDef } from "@/config/fieldTypes";
 import { formatDate, formatDateTime, formatTime } from "@/utils/date";
 import { computed } from "vue";
 
@@ -8,20 +9,20 @@ const props = defineProps<{
     fieldname: string;
     label: string;
     description?: string;
-    fieldtype: FormFieldTypes;
+    fieldtype: Fieldtype;
     value: any;
 }>();
 
 const formattedDateValue = computed(() => {
     if (!props.value) return "";
     switch (props.fieldtype) {
-        case FormFieldTypes.Date:
+        case Fieldtype.DATE:
             return formatDate(props.value);
-        case FormFieldTypes.DateTime:
+        case Fieldtype.DATE_TIME:
             return formatDateTime(props.value);
-        case FormFieldTypes.TimePicker:
+        case Fieldtype.TIME_PICKER:
             return formatTime(props.value);
-        case FormFieldTypes.DateRange:
+        case Fieldtype.DATE_RANGE:
             try {
                 const dates = JSON.parse(props.value);
                 if (Array.isArray(dates) && dates.length === 2) {
@@ -36,21 +37,29 @@ const formattedDateValue = computed(() => {
     }
 });
 
-const isDateField = computed(() =>
-    [
-        FormFieldTypes.Date,
-        FormFieldTypes.DateTime,
-        FormFieldTypes.DateRange,
-        FormFieldTypes.TimePicker,
-    ].includes(props.fieldtype)
-);
+const typeDef = computed(() => getFieldTypeDef(props.fieldtype));
+const isDateField = computed(() => typeDef.value?.isDate ?? false);
 
-const classNames = computed<string>(() => {
-    if ([FormFieldTypes.Switch, FormFieldTypes.Checkbox].includes(props.fieldtype)) {
-        return "flex gap-1 flex-row-reverse items-start justify-end";
+// Only allow safe attachment URLs (relative Frappe paths or http/https).
+// Rejects javascript: and other unsafe schemes.
+const safeAttachUrl = computed<string | null>(() => {
+    if (!props.value) return null;
+    const url = String(props.value);
+    if (url.startsWith("/")) return url;
+    try {
+        const { protocol } = new URL(url);
+        if (protocol === "https:" || protocol === "http:") return url;
+    } catch {
+        // unparseable — not a valid URL
     }
-    return "flex flex-col gap-1";
+    return null;
 });
+
+const classNames = computed<string>(() =>
+    typeDef.value?.isBoolean
+        ? "flex gap-1 flex-row-reverse items-start justify-end"
+        : "flex flex-col gap-1"
+);
 </script>
 
 <template>
@@ -61,20 +70,16 @@ const classNames = computed<string>(() => {
         </div>
 
         <Checkbox
-            v-if="fieldtype === FormFieldTypes.Checkbox"
+            v-if="fieldtype === Fieldtype.CHECKBOX"
             class="mt-1"
             :modelValue="Boolean(value)"
             disabled
         />
 
-        <Switch
-            v-else-if="fieldtype === FormFieldTypes.Switch"
-            :modelValue="Boolean(value)"
-            disabled
-        />
+        <Switch v-else-if="fieldtype === Fieldtype.SWITCH" :modelValue="Boolean(value)" disabled />
 
         <TextEditor
-            v-else-if="fieldtype === FormFieldTypes.TextEditor"
+            v-else-if="fieldtype === Fieldtype.TEXT_EDITOR"
             :content="value"
             :editable="false"
             :bubbleMenu="false"
@@ -82,19 +87,23 @@ const classNames = computed<string>(() => {
             editorClass="prose-sm !border-none !p-0 !shadow-none"
         />
 
-        <Rating v-else-if="fieldtype === FormFieldTypes.Rating" :modelValue="value" readonly />
+        <Rating v-else-if="fieldtype === Fieldtype.RATING" :modelValue="value" readonly />
 
         <a
-            v-else-if="fieldtype === FormFieldTypes.Attach && value"
-            :href="value"
+            v-else-if="fieldtype === Fieldtype.ATTACH && safeAttachUrl"
+            :href="safeAttachUrl"
             target="_blank"
+            rel="noopener noreferrer"
             class="text-sm text-blue-600 hover:text-blue-700 underline truncate"
         >
             {{ value }}
         </a>
+        <span v-else-if="fieldtype === Fieldtype.ATTACH && value" class="text-sm text-ink-gray-5">
+            {{ value }}
+        </span>
 
         <span
-            v-else-if="fieldtype === FormFieldTypes.Textarea"
+            v-else-if="fieldtype === Fieldtype.TEXTAREA"
             class="text-sm text-ink-gray-7 whitespace-pre-wrap"
         >
             {{ value ?? "–" }}
diff --git a/frontend/src/config/fieldTypes.ts b/frontend/src/config/fieldTypes.ts
new file mode 100644
index 0000000..a83a6ed
--- /dev/null
+++ b/frontend/src/config/fieldTypes.ts
@@ -0,0 +1,266 @@
+/**
+ * SINGLE SOURCE OF TRUTH for field type metadata.
+ *
+ * Every property that varies by field type — Vue component, layout behaviour,
+ * Frappe fieldtype mapping, boolean/date semantics — lives here. Nothing else
+ * in the frontend should hardcode field-type-specific logic; import from this
+ * file and derive from the registry instead.
+ *
+ * The `Fieldtype` enum itself is auto-generated from `form_field.json` via
+ * frappe-types, so the JSON is the ground truth for the list of valid names.
+ * This registry owns everything that can't be auto-generated.
+ *
+ * To add a new field type:
+ *   1. Add the option to `form_field.json`
+ *      → `DF.Literal` (Python) and `Fieldtype` (TS) regenerate automatically.
+ *   2. TypeScript will error in FIELD_TYPE_DEFINITIONS below until you add an entry.
+ *   3. Add a matching entry to `FORM_TO_FRAPPE_FIELDTYPE` in `form_field.py`.
+ *   4. Create a Vue component if the type needs a new input widget.
+ */
+
+import type { Component } from "vue";
+import {
+  Checkbox,
+  DatePicker,
+  DateRangePicker,
+  DateTimePicker,
+  Password,
+  Rating,
+  Select,
+  Switch,
+  Textarea,
+  TextEditor,
+  TimePicker,
+  FormControl,
+} from "frappe-ui";
+import Attachment from "@/components/fields/Attachment.vue";
+import Phone from "@/components/fields/Phone.vue";
+import Table from "@/components/fields/Table.vue";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+
+export { Fieldtype };
+
+/**
+ * Controls how FieldRenderer positions the label relative to the input widget.
+ *
+ * - "default"           label on top, input below, description at the bottom
+ * - "inline"            input first, label to the right (Switch, Checkbox)
+ * - "description-first" label on top, description below label, input at the bottom (Text Editor)
+ * - "custom"            the component handles its own full layout (Table)
+ */
+export type FieldLayout = "default" | "inline" | "description-first" | "custom";
+
+export type FieldTypeDefinition = {
+  /** Canonical name — must match a Fieldtype enum value */
+  name: Fieldtype;
+  /** Vue component used to render this field in input mode */
+  component: Component;
+  /** Default props forwarded to the component */
+  props: Record<string, unknown>;
+  /** How FieldRenderer lays out the label relative to the input */
+  layout: FieldLayout;
+  /** Frappe fieldtype to use when syncing this field to a DocType */
+  frappeFieldtype: string;
+  /** Override the `options` value on the Frappe CustomField (e.g. "Email" for Data fields) */
+  frappeOptions?: string;
+  /** True for Switch / Checkbox — affects conditional logic evaluation and display */
+  isBoolean: boolean;
+  /** True for Date / DateTime / DateRange / TimePicker — affects display formatting */
+  isDate: boolean;
+};
+
+export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
+  {
+    name: Fieldtype.ATTACH,
+    component: Attachment,
+    props: {
+      variant: "outline",
+      filetypes: ["image/*", ".jpg", ".gif", ".pdf"],
+    },
+    layout: "custom",
+    frappeFieldtype: "Attach",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.DATA,
+    component: FormControl,
+    props: { type: "text", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.NUMBER,
+    component: FormControl,
+    props: { type: "number", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Int",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.EMAIL,
+    component: FormControl,
+    props: { type: "email", variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    frappeOptions: "Email",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.DATE,
+    component: DatePicker,
+    props: { variant: "outline", clearable: true, format: "D MMM YYYY" },
+    layout: "default",
+    frappeFieldtype: "Date",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.DATE_TIME,
+    component: DateTimePicker,
+    props: {
+      format: "DD MMM YYYY, hh:mm A",
+      clearable: true,
+      variant: "outline",
+    },
+    layout: "default",
+    frappeFieldtype: "Datetime",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.DATE_RANGE,
+    component: DateRangePicker,
+    props: { clearable: true, variant: "outline", format: "DD MMM 'YY" },
+    layout: "default",
+    frappeFieldtype: "Data",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.TIME_PICKER,
+    component: TimePicker,
+    props: { variant: "outline", use12Hour: true, clearable: true },
+    layout: "default",
+    frappeFieldtype: "Time",
+    isBoolean: false,
+    isDate: true,
+  },
+  {
+    name: Fieldtype.PASSWORD,
+    component: Password,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Password",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.SELECT,
+    component: Select,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Select",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.PHONE,
+    component: Phone,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Phone",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.SWITCH,
+    component: Switch,
+    props: {},
+    layout: "inline",
+    frappeFieldtype: "Check",
+    isBoolean: true,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TEXTAREA,
+    component: Textarea,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Text",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TEXT_EDITOR,
+    component: TextEditor,
+    props: {
+      editorClass:
+        "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
+      fixedMenu: true,
+      bubbleMenu: true,
+      starterkitOptions: { heading: { levels: [2, 3, 4] } },
+    },
+    layout: "description-first",
+    frappeFieldtype: "Text Editor",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.LINK,
+    component: Select,
+    props: { variant: "outline" },
+    layout: "default",
+    frappeFieldtype: "Link",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.CHECKBOX,
+    component: Checkbox,
+    props: {},
+    layout: "inline",
+    frappeFieldtype: "Check",
+    isBoolean: true,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.RATING,
+    component: Rating,
+    props: {},
+    layout: "default",
+    frappeFieldtype: "Rating",
+    isBoolean: false,
+    isDate: false,
+  },
+  {
+    name: Fieldtype.TABLE,
+    component: Table,
+    props: {
+      options: {
+        emptyState: {
+          title: "This is a table field",
+          description: "Use this field to input a list of items.",
+        },
+      },
+    },
+    layout: "custom",
+    frappeFieldtype: "Table",
+    isBoolean: false,
+    isDate: false,
+  },
+];
+
+export const FIELD_TYPE_MAP = new Map<Fieldtype, FieldTypeDefinition>(
+  FIELD_TYPE_DEFINITIONS.map((d) => [d.name, d])
+);
+
+export function getFieldTypeDef(
+  name: Fieldtype
+): FieldTypeDefinition | undefined {
+  return FIELD_TYPE_MAP.get(name);
+}
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 4425f7b..f6cc4f0 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 import { createDocumentResource, createResource } from "frappe-ui";
 import { mapDoctypeFieldForForm } from "@/utils/form_fields";
-import { FormField, FormFieldTypes } from "@/types/formfield";
+import { FormField, Fieldtype } from "@/types/formfield";
 import { Form } from "@/types/form";
 import { toast } from "vue-sonner";
 
@@ -119,7 +119,7 @@ export const useEditForm = defineStore("editForm", () => {
   function saveAndPublish() {
     if (formResource.value) {
       formResource.value.doc.is_published = 1;
-      save();
+      return save();
     }
   }
 
@@ -151,11 +151,11 @@ export const useEditForm = defineStore("editForm", () => {
     }
   }
 
-  function addField(fieldtype: string) {
+  function addField(fieldtype: Fieldtype) {
     if (formResource.value?.doc) {
       const newField: FormField = {
         idx: formResource.value.doc.fields.length + 1,
-        fieldtype: fieldtype as FormFieldTypes,
+        fieldtype,
         label: "",
         fieldname: "",
         options: "",
diff --git a/frontend/src/types/FormsPro/form.types.ts b/frontend/src/types/FormsPro/form.types.ts
new file mode 100644
index 0000000..1293ece
--- /dev/null
+++ b/frontend/src/types/FormsPro/form.types.ts
@@ -0,0 +1,38 @@
+import { FormField } from "./form_field.types";
+
+export interface Form {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Is Published? : Check	*/
+  is_published?: 0 | 1;
+  /**	Route : Data	*/
+  route?: string;
+  /**	Title : Data	*/
+  title: string;
+  /**	Linked Doctype : Link - DocType	*/
+  linked_doctype: string;
+  /**	Linked Team : Link - FP Team	*/
+  linked_team_id: string;
+  /**	Login Required : Check	*/
+  login_required?: 0 | 1;
+  /**	Allow Incomplete Forms : Check - Allow saving Draft forms	*/
+  allow_incomplete?: 0 | 1;
+  /**	Success Title : Data	*/
+  success_title?: string;
+  /**	Success Description : Text Editor	*/
+  success_description?: string;
+  /**	Description : Text Editor	*/
+  description?: string;
+  /**	Fields : Table - Form Field	*/
+  fields?: FormField[];
+  /**	Meta Data : Code	*/
+  metadata?: string;
+}
diff --git a/frontend/src/types/FormsPro/form_field.types.ts b/frontend/src/types/FormsPro/form_field.types.ts
new file mode 100644
index 0000000..ca9278c
--- /dev/null
+++ b/frontend/src/types/FormsPro/form_field.types.ts
@@ -0,0 +1,51 @@
+export enum Fieldtype {
+  "ATTACH" = "Attach",
+  "DATA" = "Data",
+  "NUMBER" = "Number",
+  "EMAIL" = "Email",
+  "DATE" = "Date",
+  "DATE_TIME" = "Date Time",
+  "DATE_RANGE" = "Date Range",
+  "TIME_PICKER" = "Time Picker",
+  "PASSWORD" = "Password",
+  "SELECT" = "Select",
+  "SWITCH" = "Switch",
+  "TEXTAREA" = "Textarea",
+  "TEXT_EDITOR" = "Text Editor",
+  "LINK" = "Link",
+  "CHECKBOX" = "Checkbox",
+  "RATING" = "Rating",
+  "PHONE" = "Phone",
+  "TABLE" = "Table",
+}
+
+export interface FormField {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Mandatory : Check	*/
+  reqd?: 0 | 1;
+  /**	Hidden : Check	*/
+  hidden?: 0 | 1;
+  /**	Label : Data	*/
+  label: string;
+  /**	Fieldtype : Select	*/
+  fieldtype: Fieldtype;
+  /**	Fieldname : Data	*/
+  fieldname: string;
+  /**	Description : Small Text	*/
+  description?: string;
+  /**	Options : Small Text	*/
+  options?: string;
+  /**	Default : Small Text	*/
+  default?: string;
+  /**	Conditional Logic : Code	*/
+  conditional_logic?: string;
+}
diff --git a/frontend/src/types/FormsPro/fpteam.types.ts b/frontend/src/types/FormsPro/fpteam.types.ts
new file mode 100644
index 0000000..faa490d
--- /dev/null
+++ b/frontend/src/types/FormsPro/fpteam.types.ts
@@ -0,0 +1,20 @@
+import { FPTeamMember } from "./fpteam_member.types";
+
+export interface FPTeam {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	Logo : Attach Image	*/
+  logo?: string;
+  /**	Team Name : Data	*/
+  team_name: string;
+  /**	Users : Table MultiSelect - FP Team Member	*/
+  users?: FPTeamMember[];
+}
diff --git a/frontend/src/types/FormsPro/fpteam_member.types.ts b/frontend/src/types/FormsPro/fpteam_member.types.ts
new file mode 100644
index 0000000..1fe67e6
--- /dev/null
+++ b/frontend/src/types/FormsPro/fpteam_member.types.ts
@@ -0,0 +1,14 @@
+export interface FPTeamMember {
+  name: string;
+  creation: string;
+  modified: string;
+  owner: string;
+  modified_by: string;
+  docstatus: 0 | 1 | 2;
+  parent?: string;
+  parentfield?: string;
+  parenttype?: string;
+  idx?: number;
+  /**	User : Link - User	*/
+  user?: string;
+}
diff --git a/frontend/src/types/formfield.ts b/frontend/src/types/formfield.ts
index 32c26ca..edfa075 100644
--- a/frontend/src/types/formfield.ts
+++ b/frontend/src/types/formfield.ts
@@ -1,28 +1,10 @@
-export enum FormFieldTypes {
-  Attach = "Attach",
-  Data = "Data",
-  Number = "Number",
-  Email = "Email",
-  Date = "Date",
-  DateTime = "Date Time",
-  DateRange = "Date Range",
-  TimePicker = "Time Picker",
-  Password = "Password",
-  Select = "Select",
-  Phone = "Phone",
-  Switch = "Switch",
-  Textarea = "Textarea",
-  TextEditor = "Text Editor",
-  Link = "Link",
-  Checkbox = "Checkbox",
-  Rating = "Rating",
-  Table = "Table",
-}
+export { Fieldtype } from "@/types/FormsPro/form_field.types";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
 
 export type FormField = {
   label: string;
   fieldname: string;
-  fieldtype: FormFieldTypes;
+  fieldtype: Fieldtype;
   description?: string;
   reqd?: boolean;
   hidden?: boolean;
diff --git a/frontend/src/utils/conditionals.ts b/frontend/src/utils/conditionals.ts
index 8fae4f0..28f4bd4 100644
--- a/frontend/src/utils/conditionals.ts
+++ b/frontend/src/utils/conditionals.ts
@@ -4,7 +4,8 @@ import {
   Condition,
   Actions,
 } from "@/types/conditional-render.types";
-import { FormField } from "@/types/formfield";
+import { FormField, Fieldtype } from "@/types/formfield";
+import { getFieldTypeDef } from "@/config/fieldTypes";
 
 /**
  * Parse conditional_logic string into ConditionalLogic object
@@ -35,13 +36,14 @@ function getFieldValue(
     return null;
   }
 
-  // Handle boolean/switch fields
-  if (fieldType === "Switch" || fieldType === "Checkbox") {
+  const typeDef = getFieldTypeDef(fieldType as Fieldtype);
+
+  if (typeDef?.isBoolean) {
     return Boolean(fieldValue);
   }
 
   // Handle number fields
-  if (fieldType === "Number") {
+  if (fieldType === Fieldtype.NUMBER) {
     const num = Number(fieldValue);
     return isNaN(num) ? null : num;
   }
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index c4e6eec..13cf2e7 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -1,229 +1,57 @@
 import {
-  Checkbox,
-  FormControl,
-  DatePicker,
-  DateRangePicker,
-  DateTimePicker,
-  Rating,
-  Select,
-  Switch,
-  Textarea,
-  TextEditor,
-  TimePicker,
-  Password,
-} from "frappe-ui";
-import { Component } from "vue";
-import Attachment from "@/components/fields/Attachment.vue";
-import Phone from "@/components/fields/Phone.vue";
-import Table from "@/components/fields/Table.vue";
-
+  FIELD_TYPE_DEFINITIONS,
+  FIELD_TYPE_MAP,
+  getFieldTypeDef,
+} from "@/config/fieldTypes";
+import type { FieldTypeDefinition } from "@/config/fieldTypes";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+import type { Component } from "vue";
+
+// Re-export the registry under the names the rest of the codebase uses
+export {
+  FIELD_TYPE_DEFINITIONS as formFields,
+  getFieldTypeDef,
+  FIELD_TYPE_MAP,
+};
+export type { FieldTypeDefinition as FormFields };
+
+// Subset type used by RenderField.vue
 export type FormFieldType = {
   component: Component;
-  props: Record<string, any>;
-};
-
-export type FormFields = FormFieldType & {
-  name: string;
-};
-
-// Individual form field components as dictionaries
-
-export const AttachmentField: FormFieldType = {
-  component: Attachment,
-  props: {
-    variant: "outline",
-    filetypes: ["image/*", ".jpg", ".gif", ".pdf"],
-  },
-};
-
-export const DataField: FormFieldType = {
-  component: FormControl,
-  props: { type: "text", variant: "outline" },
-};
-
-export const NumberField: FormFieldType = {
-  component: FormControl,
-  props: { type: "number", variant: "outline" },
-};
-
-export const EmailField: FormFieldType = {
-  component: FormControl,
-  props: { type: "email", variant: "outline" },
-};
-
-export const DateField: FormFieldType = {
-  component: DatePicker,
-  props: {
-    variant: "outline",
-    clearable: true,
-    format: "D MMM YYYY",
-  },
-};
-
-export const DateTimeField: FormFieldType = {
-  component: DateTimePicker,
-  props: {
-    format: "DD MMM YYYY, hh:mm A",
-    clearable: true,
-    variant: "outline",
-  },
-};
-
-export const DateRangeField: FormFieldType = {
-  component: DateRangePicker,
-  props: {
-    clearable: true,
-    variant: "outline",
-    format: "DD MMM 'YY",
-  },
-};
-
-export const TimeField: FormFieldType = {
-  component: TimePicker,
-  props: {
-    variant: "outline",
-    use12Hour: true,
-    clearable: true,
-  },
-};
-
-export const PasswordField: FormFieldType = {
-  component: Password,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const RatingField: FormFieldType = {
-  component: Rating,
-  props: {},
-};
-
-export const SelectField: FormFieldType = {
-  component: Select,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const SwitchField: FormFieldType = {
-  component: Switch,
-  props: {},
-};
-
-export const TextareaField: FormFieldType = {
-  component: Textarea,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const TextEditorField: FormFieldType = {
-  component: TextEditor,
-  props: {
-    editorClass:
-      "bg-surface-white w-full rounded-b form-description border rounded-b min-h-24",
-    fixedMenu: true,
-    bubbleMenu: true,
-    starterkitOptions: {
-      heading: {
-        levels: [2, 3, 4],
-      },
-    },
-  },
-};
-
-export const CheckboxField: FormFieldType = {
-  component: Checkbox,
-  props: {},
-};
-
-export const PhoneField: FormFieldType = {
-  component: Phone,
-  props: {
-    variant: "outline",
-  },
-};
-
-export const TableField: FormFieldType = {
-  component: Table,
-  props: {
-    options: {
-      emptyState: {
-        title: "This is a table field",
-        description: "Use this field to input a list of items.",
-      },
-    },
-  },
-};
-
-export const formFields: FormFields[] = [
-  { name: "Attach", ...AttachmentField },
-  { name: "Data", ...DataField },
-  { name: "Link", ...SelectField },
-  { name: "Number", ...NumberField },
-  { name: "Email", ...EmailField },
-  { name: "Date", ...DateField },
-  { name: "Date Time", ...DateTimeField },
-  { name: "Date Range", ...DateRangeField },
-  { name: "Time Picker", ...TimeField },
-  { name: "Password", ...PasswordField },
-  { name: "Rating", ...RatingField },
-  { name: "Select", ...SelectField },
-  { name: "Switch", ...SwitchField },
-  { name: "Textarea", ...TextareaField },
-  { name: "Text Editor", ...TextEditorField },
-  { name: "Checkbox", ...CheckboxField },
-  { name: "Phone", ...PhoneField },
-  { name: "Table", ...TableField },
-];
-
-export const mapDoctypeFieldForForm = (fieldtype: string): string => {
-  const FIELD_TYPE_MAP = {
-    Autocomplete: "Data",
-    Attach: "Attach",
-    "Attach Image": "Attach",
-    Barcode: "Barcode",
-    Button: "Button",
-    Check: "Checkbox",
-    Code: "Code",
-    Color: "Color",
-    "Column Break": "Column Break",
-    Currency: "Number",
-    Data: "Data",
-    Date: "Date",
-    Datetime: "Date Time",
-    Duration: "Duration",
-    "Dynamic Link": "Dynamic Link",
-    Float: "Number",
-    Fold: "Fold",
-    Geolocation: "Geolocation",
-    Heading: "Heading",
-    HTML: "HTML",
-    "HTML Editor": "Text Editor",
-    Icon: "Icon",
-    Image: "Image",
-    Int: "Number",
-    JSON: "JSON",
-    Link: "Link",
-    "Long Text": "Textarea",
-    "Markdown Editor": "Text Editor",
-    Password: "Password",
-    Percent: "Number",
-    Phone: "Phone",
-    "Read Only": "Read Only",
-    Rating: "Rating",
-    "Section Break": "Section Break",
-    Select: "Select",
-    Signature: "Signature",
-    "Small Text": "Textarea",
-    "Tab Break": "Tab Break",
-    Table: "Table",
-    "Table MultiSelect": "Table MultiSelect",
-    Text: "Textarea",
-    "Text Editor": "Text Editor",
-    Time: "Time",
+  props: Record<string, unknown>;
+};
+
+// Maps Frappe DocType fieldtypes to the equivalent Forms Pro fieldtype.
+// Used when importing fields from an existing DocType into a form.
+export const mapDoctypeFieldForForm = (
+  fieldtype: string
+): string | undefined => {
+  const FRAPPE_TO_FORM_TYPE: Partial<Record<string, Fieldtype>> = {
+    Autocomplete: Fieldtype.DATA,
+    Attach: Fieldtype.ATTACH,
+    "Attach Image": Fieldtype.ATTACH,
+    Check: Fieldtype.CHECKBOX,
+    Currency: Fieldtype.NUMBER,
+    Data: Fieldtype.DATA,
+    Date: Fieldtype.DATE,
+    Datetime: Fieldtype.DATE_TIME,
+    Float: Fieldtype.NUMBER,
+    "HTML Editor": Fieldtype.TEXT_EDITOR,
+    Int: Fieldtype.NUMBER,
+    Link: Fieldtype.LINK,
+    "Long Text": Fieldtype.TEXTAREA,
+    "Markdown Editor": Fieldtype.TEXT_EDITOR,
+    Password: Fieldtype.PASSWORD,
+    Percent: Fieldtype.NUMBER,
+    Phone: Fieldtype.PHONE,
+    Rating: Fieldtype.RATING,
+    Select: Fieldtype.SELECT,
+    "Small Text": Fieldtype.TEXTAREA,
+    Table: Fieldtype.TABLE,
+    Text: Fieldtype.TEXTAREA,
+    "Text Editor": Fieldtype.TEXT_EDITOR,
+    Time: Fieldtype.TIME_PICKER,
   };
 
-  return FIELD_TYPE_MAP[fieldtype as keyof typeof FIELD_TYPE_MAP];
+  return FRAPPE_TO_FORM_TYPE[fieldtype];
 };