diff --git a/console/src/components/form/AnnotationsForm.vue b/console/src/components/form/AnnotationsForm.vue
index 2bcdd80f0..a01c411a5 100644
--- a/console/src/components/form/AnnotationsForm.vue
+++ b/console/src/components/form/AnnotationsForm.vue
@@ -12,6 +12,7 @@ import type { AnnotationSetting } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { getValidationMessages } from "@formkit/validation";
 import { useThemeStore } from "@/stores/theme";
+import { randomUUID } from "@/utils/id";
 
 const themeStore = useThemeStore();
 
@@ -62,6 +63,8 @@ const handleFetchAnnotationSettings = async () => {
   }
 };
 
+const specFormId = `${randomUUID()}-specForm`;
+const customFormId = `${randomUUID()}-customForm`;
 const annotations = ref<{
   [key: string]: string;
 }>({});
@@ -134,8 +137,8 @@ onMounted(async () => {
 watch(
   () => props.value,
   (value) => {
-    reset("specForm");
-    reset("customForm");
+    reset(specFormId);
+    reset(customFormId);
     annotations.value = cloneDeep(props.value) || {};
     if (value) {
       handleProcessCustomAnnotations();
@@ -150,11 +153,11 @@ const customFormInvalid = ref(true);
 
 const handleSubmit = async () => {
   if (avaliableAnnotationSettings.value.length) {
-    submitForm("specForm");
+    submitForm(specFormId);
   } else {
     specFormInvalid.value = false;
   }
-  submitForm("customForm");
+  submitForm(customFormId);
   await nextTick();
 };
 
@@ -187,7 +190,7 @@ defineExpose({
   <div class="flex flex-col gap-3 divide-y divide-gray-100">
     <FormKit
       v-if="annotations && avaliableAnnotationSettings.length > 0"
-      id="specForm"
+      :id="specFormId"
       v-model="annotations"
       type="form"
       :preserve="true"
@@ -206,7 +209,7 @@ defineExpose({
     </FormKit>
     <FormKit
       v-if="annotations"
-      id="customForm"
+      :id="customFormId"
       type="form"
       :preserve="true"
       :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"