diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte
deleted file mode 100644
index 3311ddd7bb..0000000000
--- a/packages/client/src/components/app/blocks/FormBlock.svelte
+++ /dev/null
@@ -1,242 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import BlockComponent from "../../BlockComponent.svelte"
-  import Block from "../../Block.svelte"
-  import Placeholder from "../Placeholder.svelte"
-  import { makePropSafe as safe } from "@budibase/string-templates"
-
-  export let actionType
-  export let dataSource
-  export let size
-  export let disabled
-  export let fields
-  export let labelPosition
-  export let title
-  export let showSaveButton
-  export let showDeleteButton
-  export let rowId
-  export let actionUrl
-
-  const { fetchDatasourceSchema } = getContext("sdk")
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-  }
-
-  let schema
-  let formId
-  let providerId
-  let repeaterId
-
-  $: fetchSchema(dataSource)
-  $: onSave = [
-    {
-      "##eventHandlerType": "Save Row",
-      parameters: {
-        providerId: formId,
-        tableId: dataSource?.tableId,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Navigate To",
-      parameters: {
-        url: actionUrl,
-      },
-    },
-  ]
-  $: onDelete = [
-    {
-      "##eventHandlerType": "Delete Row",
-      parameters: {
-        confirm: true,
-        tableId: dataSource?.tableId,
-        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
-        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Navigate To",
-      parameters: {
-        url: actionUrl,
-      },
-    },
-  ]
-  $: filter = [
-    {
-      field: "_id",
-      operator: "equal",
-      type: "string",
-      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
-      valueType: "Binding",
-    },
-  ]
-
-  $: dataProvider = `{{ literal ${safe(providerId)} }}`
-  $: renderDeleteButton = showDeleteButton && actionType === "Update"
-  $: renderSaveButton = showSaveButton && actionType !== "View"
-  $: renderButtons = renderDeleteButton || renderSaveButton
-  $: renderHeader = renderButtons || title
-
-  const fetchSchema = async () => {
-    schema = (await fetchDatasourceSchema(dataSource)) || {}
-  }
-
-  const getComponentForField = field => {
-    if (!field || !schema?.[field]) {
-      return null
-    }
-    const type = schema[field].type
-    return FieldTypeToComponentMap[type]
-  }
-</script>
-
-<Block>
-  {#if fields?.length}
-    <BlockComponent
-      type="dataprovider"
-      context="provider"
-      bind:id={providerId}
-      props={{
-        dataSource,
-        filter,
-        limit: 1,
-        paginate: false,
-      }}
-    >
-      <BlockComponent
-        type="repeater"
-        context="repeater"
-        bind:id={repeaterId}
-        props={{
-          dataProvider,
-          noRowsMessage: "We couldn't find a row to display",
-          direction: "column",
-          hAlign: "center",
-        }}
-      >
-        <BlockComponent
-          type="form"
-          props={{
-            actionType: actionType === "Create" ? "Create" : "Update",
-            dataSource,
-            size,
-            disabled: disabled || actionType === "View",
-          }}
-          styles={{
-            normal: {
-              width: "600px",
-            },
-          }}
-          context="form"
-          bind:id={formId}
-        >
-          <BlockComponent
-            type="container"
-            props={{
-              direction: "column",
-              hAlign: "stretch",
-              vAlign: "top",
-              gap: "M",
-            }}
-          >
-            {#if renderHeader}
-              <BlockComponent
-                type="container"
-                props={{
-                  direction: "row",
-                  hAlign: "stretch",
-                  vAlign: "center",
-                  gap: "M",
-                  wrap: true,
-                }}
-                order={0}
-              >
-                <BlockComponent
-                  type="heading"
-                  props={{ text: title || "" }}
-                  order={0}
-                />
-                {#if renderButtons}
-                  <BlockComponent
-                    type="container"
-                    props={{
-                      direction: "row",
-                      hAlign: "stretch",
-                      vAlign: "center",
-                      gap: "M",
-                      wrap: true,
-                    }}
-                    order={1}
-                  >
-                    {#if renderDeleteButton}
-                      <BlockComponent
-                        type="button"
-                        props={{
-                          text: "Delete",
-                          onClick: onDelete,
-                          quiet: true,
-                          type: "secondary",
-                        }}
-                        order={0}
-                      />
-                    {/if}
-                    {#if renderSaveButton}
-                      <BlockComponent
-                        type="button"
-                        props={{
-                          text: "Save",
-                          onClick: onSave,
-                          type: "cta",
-                        }}
-                        order={1}
-                      />
-                    {/if}
-                  </BlockComponent>
-                {/if}
-              </BlockComponent>
-            {/if}
-            <BlockComponent
-              type="fieldgroup"
-              props={{ labelPosition }}
-              order={1}
-            >
-              {#each fields as field, idx}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={{
-                      field,
-                      label: field,
-                      placeholder: field,
-                      disabled,
-                    }}
-                    order={idx}
-                  />
-                {/if}
-              {/each}
-            </BlockComponent>
-          </BlockComponent>
-        </BlockComponent>
-      </BlockComponent>
-    </BlockComponent>
-  {:else}
-    <Placeholder
-      text="Choose your table and add some fields to your form to get started"
-    />
-  {/if}
-</Block>
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
new file mode 100644
index 0000000000..9ec587519f
--- /dev/null
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -0,0 +1,101 @@
+<script>
+  import { getContext } from "svelte"
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "components/Block.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+  import InnerFormBlock from "./InnerFormBlock.svelte"
+
+  export let actionType
+  export let dataSource
+  export let size
+  export let disabled
+  export let fields
+  export let labelPosition
+  export let title
+  export let showSaveButton
+  export let showDeleteButton
+  export let rowId
+  export let actionUrl
+
+  const { fetchDatasourceSchema } = getContext("sdk")
+
+  let schema
+  let providerId
+  let repeaterId
+
+  $: fetchSchema(dataSource)
+  $: dataProvider = `{{ literal ${safe(providerId)} }}`
+  $: filter = [
+    {
+      field: "_id",
+      operator: "equal",
+      type: "string",
+      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
+      valueType: "Binding",
+    },
+  ]
+  // We could simply spread $$props into the inner form and append our
+  // additions, but that would create svelte warnings about unused props and
+  // make maintenance in future more confusing as we typically always have a
+  // proper mapping of schema settings to component exports, without having to
+  // search multiple files
+  $: innerProps = {
+    dataSource,
+    actionUrl,
+    actionType,
+    size,
+    disabled,
+    fields,
+    labelPosition,
+    title,
+    showSaveButton,
+    showDeleteButton,
+    schema,
+    repeaterId,
+  }
+
+  const fetchSchema = async () => {
+    schema = (await fetchDatasourceSchema(dataSource)) || {}
+  }
+</script>
+
+<Block>
+  {#if actionType === "Create"}
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "center",
+        vAlign: "stretch",
+      }}
+    >
+      <InnerFormBlock {...innerProps} />
+    </BlockComponent>
+  {:else}
+    <BlockComponent
+      type="dataprovider"
+      context="provider"
+      bind:id={providerId}
+      props={{
+        dataSource,
+        filter,
+        limit: 1,
+        paginate: false,
+      }}
+    >
+      <BlockComponent
+        type="repeater"
+        context="repeater"
+        bind:id={repeaterId}
+        props={{
+          dataProvider,
+          noRowsMessage: "We couldn't find a row to display",
+          direction: "column",
+          hAlign: "center",
+        }}
+      >
+        <InnerFormBlock {...innerProps} />
+      </BlockComponent>
+    </BlockComponent>
+  {/if}
+</Block>
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
new file mode 100644
index 0000000000..948584120b
--- /dev/null
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -0,0 +1,192 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Placeholder from "components/app/Placeholder.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+
+  export let dataSource
+  export let actionUrl
+  export let actionType
+  export let size
+  export let disabled
+  export let fields
+  export let labelPosition
+  export let title
+  export let showSaveButton
+  export let showDeleteButton
+  export let schema
+  export let repeaterId
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+  }
+
+  let formId
+
+  $: onSave = [
+    {
+      "##eventHandlerType": "Save Row",
+      parameters: {
+        providerId: formId,
+        tableId: dataSource?.tableId,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+  $: onDelete = [
+    {
+      "##eventHandlerType": "Delete Row",
+      parameters: {
+        confirm: true,
+        tableId: dataSource?.tableId,
+        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
+        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+
+  $: renderDeleteButton = showDeleteButton && actionType === "Update"
+  $: renderSaveButton = showSaveButton && actionType !== "View"
+  $: renderButtons = renderDeleteButton || renderSaveButton
+  $: renderHeader = renderButtons || title
+
+  const getComponentForField = field => {
+    if (!field || !schema?.[field]) {
+      return null
+    }
+    const type = schema[field].type
+    return FieldTypeToComponentMap[type]
+  }
+</script>
+
+{#if fields?.length}
+  <BlockComponent
+    type="form"
+    props={{
+      actionType: actionType === "Create" ? "Create" : "Update",
+      dataSource,
+      size,
+      disabled: disabled || actionType === "View",
+    }}
+    styles={{
+      normal: {
+        width: "600px",
+      },
+    }}
+    context="form"
+    bind:id={formId}
+  >
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "stretch",
+        vAlign: "top",
+        gap: "M",
+      }}
+    >
+      {#if renderHeader}
+        <BlockComponent
+          type="container"
+          props={{
+            direction: "row",
+            hAlign: "stretch",
+            vAlign: "center",
+            gap: "M",
+            wrap: true,
+          }}
+          order={0}
+        >
+          <BlockComponent
+            type="heading"
+            props={{ text: title || "" }}
+            order={0}
+          />
+          {#if renderButtons}
+            <BlockComponent
+              type="container"
+              props={{
+                direction: "row",
+                hAlign: "stretch",
+                vAlign: "center",
+                gap: "M",
+                wrap: true,
+              }}
+              order={1}
+            >
+              {#if renderDeleteButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    text: "Delete",
+                    onClick: onDelete,
+                    quiet: true,
+                    type: "secondary",
+                  }}
+                  order={0}
+                />
+              {/if}
+              {#if renderSaveButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    text: "Save",
+                    onClick: onSave,
+                    type: "cta",
+                  }}
+                  order={1}
+                />
+              {/if}
+            </BlockComponent>
+          {/if}
+        </BlockComponent>
+      {/if}
+      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+        {#each fields as field, idx}
+          {#if getComponentForField(field)}
+            <BlockComponent
+              type={getComponentForField(field)}
+              props={{
+                field,
+                label: field,
+                placeholder: field,
+                disabled,
+              }}
+              order={idx}
+            />
+          {/if}
+        {/each}
+      </BlockComponent>
+    </BlockComponent>
+  </BlockComponent>
+{:else}
+  <Placeholder
+    text="Choose your table and add some fields to your form to get started"
+  />
+{/if}
diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js
index 734bff2c0f..0f05890fef 100644
--- a/packages/client/src/components/app/blocks/index.js
+++ b/packages/client/src/components/app/blocks/index.js
@@ -1,5 +1,5 @@
 export { default as tableblock } from "./TableBlock.svelte"
 export { default as cardsblock } from "./CardsBlock.svelte"
 export { default as repeaterblock } from "./RepeaterBlock.svelte"
-export { default as formblock } from "./FormBlock.svelte"
+export { default as formblock } from "./form/FormBlock.svelte"
 export { default as chartblock } from "./ChartBlock.svelte"