diff --git a/app/js/components/FormDrawer/index.tsx b/app/js/components/FormDrawer/index.tsx
index 03dca72c..3e0db1d4 100644
--- a/app/js/components/FormDrawer/index.tsx
+++ b/app/js/components/FormDrawer/index.tsx
@@ -5,7 +5,7 @@
 import useSubmit, { Options, Values } from '/js/hooks/useSubmit';
 import { Button, Form, FormInstance, FormProps, Space } from 'antd';
 import FlexDrawer, { FlexDrawerProps } from '/js/components/FlexDrawer';
-import React, { cloneElement, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { cloneElement, memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
 
 const { useForm } = Form;
 
@@ -21,6 +21,10 @@ type DrawerPicked =
 type FormOmitted = 'title' | 'onError';
 type SubmitPicked = 'query' | 'method' | 'notify' | 'normalize' | 'onError' | 'onSuccess' | 'onComplete';
 
+function createFormId(id: string): string {
+  return `form_${id.replace(/[^a-z_\d]/gi, '')}`;
+}
+
 export interface FormDrawerProps<V extends Values, R>
   extends Omit<FormProps<V>, FormOmitted>,
     Pick<Options<V, R>, SubmitPicked>,
@@ -50,6 +54,7 @@ function defaultExtra<V>(submitting: boolean, form: FormInstance<V>, onClose: ()
 }
 
 function FormDrawer<V extends Values, R>({
+  name,
   form,
   query,
   title,
@@ -77,6 +82,7 @@ function FormDrawer<V extends Values, R>({
   extra = defaultExtra,
   ...restProps
 }: FormDrawerProps<V, R>): React.ReactElement {
+  const id = useId();
   const [wrapForm] = useForm<V>(form);
   const [open, setOpen] = useState(false);
 
@@ -138,7 +144,7 @@ function FormDrawer<V extends Values, R>({
         extra={extra(submitting, wrapForm, onCloseHandler)}
         footer={footer?.(submitting, wrapForm, onCloseHandler)}
       >
-        <Form {...restProps} layout={layout} form={wrapForm} onFinish={onSubmit}>
+        <Form {...restProps} layout={layout} form={wrapForm} onFinish={onSubmit} name={name || createFormId(id)}>
           {children}
         </Form>
       </FlexDrawer>
diff --git a/app/js/hooks/createStyles.tsx b/app/js/hooks/createStyles.tsx
index ba782128..bf4b28b8 100644
--- a/app/js/hooks/createStyles.tsx
+++ b/app/js/hooks/createStyles.tsx
@@ -53,7 +53,7 @@ export interface Styles<C extends Components = Components> {
 export type Token<C extends Components = Components> = AliasToken & Pick<OverrideToken, C>;
 
 function createScopeId(id: string): string {
-  return `css-var-scope-${id.replace(/[^a-z\d]/gi, '')}`;
+  return `css-var-scope-${id.replace(/[^a-z_\d]/gi, '')}`;
 }
 
 function prefixToken(component: string, key: string): string {