strapi-plugin-hubspot 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.8.0 — 2026-08-29
+
+### Improved (builder UX pass, from a live session)
+- **The whole step card now selects the step** — the click target was the tiny
+  "Step N" text, which read as "step titles can't be edited". Inner controls
+  stop propagation, so field selection and the action buttons are unaffected.
+- Field panel gains the imported-but-invisible settings: **icon**, **answer
+  memory (persist)** and **CSS classes**; the step and form panels gain **CSS
+  classes** too.
+- **Form-level `class`** now exists end to end: content-type attribute, save,
+  public API, legacy import (it used to be silently dropped on migration).
+- **Duplicate** action on the forms list — every locale of the draft is
+  copied under a fresh slug.
+- Leaving the editor with unsaved changes now warns before the tab closes.
+- Cosmetics: the actions column no longer shows a raw translation key, and the
+  structure column pluralizes properly.
+
 ## 0.7.0 — 2026-08-29
 
 ### Added

package/dist/_chunks/{Forms-CKA6ukB6.mjs → Forms-77Mornxt.mjs}

@@ -3,11 +3,11 @@ import { useParams, useSearchParams, Link, useNavigate, Routes, Route } from "re
 import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Typography, Flex, Box, SingleSelect, SingleSelectOption, TextInput, IconButton, Button, Field, Checkbox, Divider, Combobox, ComboboxOption, Loader, Badge, Textarea, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
-import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown } from "@strapi/icons";
+import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown, Duplicate } from "@strapi/icons";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-FKsiOEPB.mjs";
-import { o as objectLabel } from "./objectLabels-DBKevJle.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BC0Od-Wl.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-LrCSAHoH.mjs";
+import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DccG2KbZ.mjs";
 const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
 const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
 const ConditionEditor = ({ condition, candidates, onChange }) => {
@@ -224,6 +224,43 @@ const FieldPanel = ({ field, candidates, problem, onChange }) => {
         children: t("panel.required", "Required")
       }
     ),
+    /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.icon", "Icon") }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: field.icon ?? "",
+            placeholder: "i-lucide-building-2",
+            onChange: (e) => onChange({ icon: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.persist", "Answer memory") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: field.persist ?? "session",
+            onChange: (v) => onChange({ persist: v }),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "session", children: t("panel.persist-session", "This visit only") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "days30", children: t("panel.persist-days30", "30 days (non-identifying fields only)") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.class ?? "",
+          onChange: (e) => onChange({ class: e.target.value })
+        }
+      )
+    ] }),
     isChoice && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
       (field.options ?? []).map((option, index) => /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
@@ -370,6 +407,14 @@ const FormEditor = () => {
   const [feedback, setFeedback] = React.useState(null);
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const query = locale ? `?locale=${locale}` : "";
+  React.useEffect(() => {
+    if (!dirty) return void 0;
+    const warn = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
   React.useEffect(() => {
     get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
   }, [get]);
@@ -462,6 +507,7 @@ const FormEditor = () => {
           nextLabel: entry.nextLabel,
           submitLabel: entry.submitLabel,
           successMessage: entry.successMessage,
+          class: entry.class,
           definition
         }
       );
@@ -567,6 +613,8 @@ const FormEditor = () => {
             hasRadius: true,
             shadow: "tableShadow",
             padding: 4,
+            onClick: () => setSelection({ kind: "step", stepId: step.id }),
+            style: { cursor: "pointer" },
             borderColor: selection.kind === "step" && selection.stepId === step.id ? "primary600" : void 0,
             borderStyle: selection.kind === "step" && selection.stepId === step.id ? "solid" : void 0,
             borderWidth: selection.kind === "step" && selection.stepId === step.id ? "1px" : void 0,
@@ -589,7 +637,7 @@ const FormEditor = () => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
                   /* @__PURE__ */ jsx(
                     IconButton,
                     {
@@ -631,7 +679,10 @@ const FormEditor = () => {
                       background: isSelected ? "primary100" : "neutral100",
                       hasRadius: true,
                       padding: 3,
-                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setSelection({ kind: "field", fieldId: field.id });
+                      },
                       style: { cursor: "pointer" },
                       children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
                         /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
@@ -689,7 +740,8 @@ const FormEditor = () => {
                   {
                     variant: "tertiary",
                     startIcon: /* @__PURE__ */ jsx(Plus, {}),
-                    onClick: () => {
+                    onClick: (e) => {
+                      e.stopPropagation();
                       const field = newField(t("editor.new-field", "New field"));
                       patchStep(step.id, { fields: [...step.fields, field] });
                       setSelection({ kind: "field", fieldId: field.id });
@@ -746,6 +798,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: selectedStep.class ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
         /* @__PURE__ */ jsx(
           ConditionEditor,
@@ -819,6 +881,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: entry.class ?? "",
+              onChange: (e) => patchEntry({ class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
           "editor.form-hint",
           "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
@@ -878,6 +950,19 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const duplicate = async (row) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${PLUGIN_ID}/builder/forms/${row.documentId}/duplicate`
+      );
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.duplicate-error", "Could not duplicate the form."));
+      setBusy(false);
+    }
+  };
   const remove = async (row) => {
     if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
       return;
@@ -949,7 +1034,7 @@ const FormsList = () => {
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "") }) })
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
       /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs(
         Tr,
@@ -959,21 +1044,32 @@ const FormsList = () => {
           children: [
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: row.name }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.slug }) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}", {
               steps: row.steps,
               fields: row.fields
             }) }) }),
             /* @__PURE__ */ jsx(Td, { children: row.published ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
-            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                label: t("forms.delete", "Delete"),
-                onClick: () => remove(row),
-                disabled: busy,
-                children: /* @__PURE__ */ jsx(Trash, {})
-              }
-            ) })
+            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: t("forms.duplicate", "Duplicate"),
+                  onClick: () => duplicate(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Duplicate, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: t("forms.delete", "Delete"),
+                  onClick: () => remove(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }) })
           ]
         },
         row.documentId

package/dist/_chunks/{Forms-HMZbTk_B.js → Forms-B8kkPY0c.js}

@@ -7,9 +7,9 @@ const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-D2Q34BuH.js");
-const objectLabels = require("./objectLabels-LAQ0M6-a.js");
-const useHubspotSchema = require("./useHubspotSchema-C08qBAyy.js");
+const index$1 = require("./index-P7p8ASb6.js");
+const objectLabels = require("./objectLabels-Dn-zriuZ.js");
+const useHubspotSchema = require("./useHubspotSchema-BottzdRR.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -244,6 +244,43 @@ const FieldPanel = ({ field, candidates, problem, onChange }) => {
         children: t("panel.required", "Required")
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.icon", "Icon") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            value: field.icon ?? "",
+            placeholder: "i-lucide-building-2",
+            onChange: (e) => onChange({ icon: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.persist", "Answer memory") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.SingleSelect,
+          {
+            value: field.persist ?? "session",
+            onChange: (v) => onChange({ persist: v }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "session", children: t("panel.persist-session", "This visit only") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "days30", children: t("panel.persist-days30", "30 days (non-identifying fields only)") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          value: field.class ?? "",
+          onChange: (e) => onChange({ class: e.target.value })
+        }
+      )
+    ] }),
     isChoice && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
       (field.options ?? []).map((option, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
@@ -390,6 +427,14 @@ const FormEditor = () => {
   const [feedback, setFeedback] = React__namespace.useState(null);
   const t = (id, defaultMessage, values) => formatMessage({ id: index$1.getTranslation(id), defaultMessage }, values);
   const query = locale ? `?locale=${locale}` : "";
+  React__namespace.useEffect(() => {
+    if (!dirty) return void 0;
+    const warn = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
   React__namespace.useEffect(() => {
     get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
   }, [get]);
@@ -482,6 +527,7 @@ const FormEditor = () => {
           nextLabel: entry.nextLabel,
           submitLabel: entry.submitLabel,
           successMessage: entry.successMessage,
+          class: entry.class,
           definition
         }
       );
@@ -587,6 +633,8 @@ const FormEditor = () => {
             hasRadius: true,
             shadow: "tableShadow",
             padding: 4,
+            onClick: () => setSelection({ kind: "step", stepId: step.id }),
+            style: { cursor: "pointer" },
             borderColor: selection.kind === "step" && selection.stepId === step.id ? "primary600" : void 0,
             borderStyle: selection.kind === "step" && selection.stepId === step.id ? "solid" : void 0,
             borderWidth: selection.kind === "step" && selection.stepId === step.id ? "1px" : void 0,
@@ -609,7 +657,7 @@ const FormEditor = () => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.IconButton,
                     {
@@ -651,7 +699,10 @@ const FormEditor = () => {
                       background: isSelected ? "primary100" : "neutral100",
                       hasRadius: true,
                       padding: 3,
-                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setSelection({ kind: "field", fieldId: field.id });
+                      },
                       style: { cursor: "pointer" },
                       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
@@ -709,7 +760,8 @@ const FormEditor = () => {
                   {
                     variant: "tertiary",
                     startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                    onClick: () => {
+                    onClick: (e) => {
+                      e.stopPropagation();
                       const field = newField(t("editor.new-field", "New field"));
                       patchStep(step.id, { fields: [...step.fields, field] });
                       setSelection({ kind: "field", fieldId: field.id });
@@ -766,6 +818,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              value: selectedStep.class ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ConditionEditor,
@@ -839,6 +901,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              value: entry.class ?? "",
+              onChange: (e) => patchEntry({ class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t(
           "editor.form-hint",
           "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
@@ -898,6 +970,19 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const duplicate = async (row) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${index$1.PLUGIN_ID}/builder/forms/${row.documentId}/duplicate`
+      );
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.duplicate-error", "Could not duplicate the form."));
+      setBusy(false);
+    }
+  };
   const remove = async (row) => {
     if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
       return;
@@ -969,7 +1054,7 @@ const FormsList = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-actions", "") }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.Tr,
@@ -979,21 +1064,32 @@ const FormsList = () => {
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: row.name }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: row.slug }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: t("forms.structure", "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}", {
               steps: row.steps,
               fields: row.fields
             }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: row.published ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.IconButton,
-              {
-                label: t("forms.delete", "Delete"),
-                onClick: () => remove(row),
-                disabled: busy,
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  label: t("forms.duplicate", "Duplicate"),
+                  onClick: () => duplicate(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  label: t("forms.delete", "Delete"),
+                  onClick: () => remove(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                }
+              )
+            ] }) })
           ]
         },
         row.documentId

package/dist/_chunks/{HubspotFormInput-CKYRcNNU.mjs → HubspotFormInput-BVknnlmR.mjs}

@@ -3,7 +3,7 @@ import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, Combobox, ComboboxOption } from "@strapi/design-system";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID, g as getTranslation } from "./index-FKsiOEPB.mjs";
+import { P as PLUGIN_ID, g as getTranslation } from "./index-LrCSAHoH.mjs";
 const HubspotFormInput = React.forwardRef(
   ({ name, value, onChange, disabled, error, required, label, hint, labelAction }, ref) => {
     const { formatMessage } = useIntl();

package/dist/_chunks/{HubspotFormInput-BequMb12.js → HubspotFormInput-kx3LlQYF.js}

@@ -5,7 +5,7 @@ const React = require("react");
 const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-D2Q34BuH.js");
+const index$1 = require("./index-P7p8ASb6.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{HubspotObjectInput-V3uhGK8k.mjs → HubspotObjectInput-B-Y1PZ6c.mjs}

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, SingleSelect, SingleSelectOption } from "@strapi/design-system";
-import { g as getTranslation } from "./index-FKsiOEPB.mjs";
-import { o as objectLabel } from "./objectLabels-DBKevJle.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BC0Od-Wl.mjs";
+import { g as getTranslation } from "./index-LrCSAHoH.mjs";
+import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DccG2KbZ.mjs";
 const HubspotObjectInput = React.forwardRef(
   ({ name, value, onChange, disabled, error, required, label, hint, labelAction }, ref) => {
     const intl = useIntl();

package/dist/_chunks/{HubspotObjectInput-D-FGwsyS.js → HubspotObjectInput-BOO1PvOj.js}

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
-const index$1 = require("./index-D2Q34BuH.js");
-const objectLabels = require("./objectLabels-LAQ0M6-a.js");
-const useHubspotSchema = require("./useHubspotSchema-C08qBAyy.js");
+const index$1 = require("./index-P7p8ASb6.js");
+const objectLabels = require("./objectLabels-Dn-zriuZ.js");
+const useHubspotSchema = require("./useHubspotSchema-BottzdRR.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{HubspotPropertyInput-DrBsx9jQ.mjs → HubspotPropertyInput-Drxn_Ddt.mjs}

@@ -4,9 +4,9 @@ import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, Combobox, ComboboxOption, IconButton, Button, Typography, Link } from "@strapi/design-system";
 import { ArrowClockwise } from "@strapi/icons";
 import { useField } from "@strapi/strapi/admin";
-import { g as getTranslation } from "./index-FKsiOEPB.mjs";
-import { o as objectLabel } from "./objectLabels-DBKevJle.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BC0Od-Wl.mjs";
+import { g as getTranslation } from "./index-LrCSAHoH.mjs";
+import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DccG2KbZ.mjs";
 const oneLine = {
   display: "block",
   whiteSpace: "nowrap",

package/dist/_chunks/{HubspotPropertyInput-Dn1QvOcu.js → HubspotPropertyInput-awfD1opH.js}

@@ -6,9 +6,9 @@ const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-D2Q34BuH.js");
-const objectLabels = require("./objectLabels-LAQ0M6-a.js");
-const useHubspotSchema = require("./useHubspotSchema-C08qBAyy.js");
+const index$1 = require("./index-P7p8ASb6.js");
+const objectLabels = require("./objectLabels-Dn-zriuZ.js");
+const useHubspotSchema = require("./useHubspotSchema-BottzdRR.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{Settings-Cgp7M1Cv.js → Settings-BT1NhvxO.js}

@@ -5,9 +5,9 @@ const React = require("react");
 const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-D2Q34BuH.js");
+const index$1 = require("./index-P7p8ASb6.js");
 const reactRouterDom = require("react-router-dom");
-const objectLabels = require("./objectLabels-LAQ0M6-a.js");
+const objectLabels = require("./objectLabels-Dn-zriuZ.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{Settings-BjkNbyna.mjs → Settings-DrujhMxS.mjs}

@@ -3,9 +3,9 @@ import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Flex, Divider, Typography, Button, Box, Link, Badge, Loader, Field } from "@strapi/design-system";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-FKsiOEPB.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-LrCSAHoH.mjs";
 import { Link as Link$1 } from "react-router-dom";
-import { o as objectLabel } from "./objectLabels-DBKevJle.mjs";
+import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
 const AuditSection = ({ configured }) => {
   const intl = useIntl();
   const { formatMessage } = intl;

package/dist/_chunks/{en-D5Ch9YFo.js → en-B8adhJhO.js}

@@ -94,8 +94,8 @@ const en = {
   "forms.col-structure": "Structure",
   "forms.col-status": "Status",
   "forms.col-updated": "Updated",
-  "forms.col-actions": "",
-  "forms.structure": "{steps} steps · {fields} fields",
+  "forms.col-actions": "Actions",
+  "forms.structure": "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}",
   "forms.published": "Published",
   "forms.draft": "Draft",
   "forms.delete": "Delete",
@@ -199,6 +199,13 @@ const en = {
   "form-picker.placeholder": "Choose a form…",
   "form-picker.fallback": "Form slug",
   "form-picker.orphan": "{slug} — unknown form",
-  "form-picker.draft": "{name} ({slug}) — draft, not served yet"
+  "form-picker.draft": "{name} ({slug}) — draft, not served yet",
+  "forms.duplicate": "Duplicate",
+  "forms.duplicate-error": "Could not duplicate the form.",
+  "panel.icon": "Icon",
+  "panel.persist": "Answer memory",
+  "panel.persist-session": "This visit only",
+  "panel.persist-days30": "30 days (non-identifying fields only)",
+  "panel.class": "CSS classes"
 };
 exports.default = en;

package/dist/_chunks/{en-Cun5LoUP.mjs → en-BYKKi1LK.mjs}

@@ -92,8 +92,8 @@ const en = {
   "forms.col-structure": "Structure",
   "forms.col-status": "Status",
   "forms.col-updated": "Updated",
-  "forms.col-actions": "",
-  "forms.structure": "{steps} steps · {fields} fields",
+  "forms.col-actions": "Actions",
+  "forms.structure": "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}",
   "forms.published": "Published",
   "forms.draft": "Draft",
   "forms.delete": "Delete",
@@ -197,7 +197,14 @@ const en = {
   "form-picker.placeholder": "Choose a form…",
   "form-picker.fallback": "Form slug",
   "form-picker.orphan": "{slug} — unknown form",
-  "form-picker.draft": "{name} ({slug}) — draft, not served yet"
+  "form-picker.draft": "{name} ({slug}) — draft, not served yet",
+  "forms.duplicate": "Duplicate",
+  "forms.duplicate-error": "Could not duplicate the form.",
+  "panel.icon": "Icon",
+  "panel.persist": "Answer memory",
+  "panel.persist-session": "This visit only",
+  "panel.persist-days30": "30 days (non-identifying fields only)",
+  "panel.class": "CSS classes"
 };
 export {
   en as default

package/dist/_chunks/{fr-CqlhHltZ.js → fr-DnKtGXaB.js}

@@ -94,8 +94,8 @@ const fr = {
   "forms.col-structure": "Structure",
   "forms.col-status": "Statut",
   "forms.col-updated": "Modifié",
-  "forms.col-actions": "",
-  "forms.structure": "{steps} étapes · {fields} champs",
+  "forms.col-actions": "Actions",
+  "forms.structure": "{steps, plural, one {# étape} other {# étapes}} · {fields, plural, one {# champ} other {# champs}}",
   "forms.published": "Publié",
   "forms.draft": "Brouillon",
   "forms.delete": "Supprimer",
@@ -199,6 +199,13 @@ const fr = {
   "form-picker.placeholder": "Choisir un formulaire…",
   "form-picker.fallback": "Slug du formulaire",
   "form-picker.orphan": "{slug} — formulaire inconnu",
-  "form-picker.draft": "{name} ({slug}) — brouillon, pas encore servi"
+  "form-picker.draft": "{name} ({slug}) — brouillon, pas encore servi",
+  "forms.duplicate": "Dupliquer",
+  "forms.duplicate-error": "Impossible de dupliquer le formulaire.",
+  "panel.icon": "Icône",
+  "panel.persist": "Mémoire de la réponse",
+  "panel.persist-session": "Cette visite seulement",
+  "panel.persist-days30": "30 jours (champs non identifiants uniquement)",
+  "panel.class": "Classes CSS"
 };
 exports.default = fr;

package/dist/_chunks/{fr-ClOWflse.mjs → fr-DzgArgi3.mjs}

@@ -92,8 +92,8 @@ const fr = {
   "forms.col-structure": "Structure",
   "forms.col-status": "Statut",
   "forms.col-updated": "Modifié",
-  "forms.col-actions": "",
-  "forms.structure": "{steps} étapes · {fields} champs",
+  "forms.col-actions": "Actions",
+  "forms.structure": "{steps, plural, one {# étape} other {# étapes}} · {fields, plural, one {# champ} other {# champs}}",
   "forms.published": "Publié",
   "forms.draft": "Brouillon",
   "forms.delete": "Supprimer",
@@ -197,7 +197,14 @@ const fr = {
   "form-picker.placeholder": "Choisir un formulaire…",
   "form-picker.fallback": "Slug du formulaire",
   "form-picker.orphan": "{slug} — formulaire inconnu",
-  "form-picker.draft": "{name} ({slug}) — brouillon, pas encore servi"
+  "form-picker.draft": "{name} ({slug}) — brouillon, pas encore servi",
+  "forms.duplicate": "Dupliquer",
+  "forms.duplicate-error": "Impossible de dupliquer le formulaire.",
+  "panel.icon": "Icône",
+  "panel.persist": "Mémoire de la réponse",
+  "panel.persist-session": "Cette visite seulement",
+  "panel.persist-days30": "30 jours (champs non identifiants uniquement)",
+  "panel.class": "Classes CSS"
 };
 export {
   fr as default

package/dist/_chunks/{index-FKsiOEPB.mjs → index-LrCSAHoH.mjs}

@@ -25,7 +25,7 @@ const index = {
       icon: PaperPlane,
       intlLabel: { id: `${PLUGIN_ID}.menu.label`, defaultMessage: "HubSpot Forms" },
       permissions: [{ action: `plugin::${PLUGIN_ID}.forms`, subject: null }],
-      Component: async () => (await import("./Forms-CKA6ukB6.mjs")).default
+      Component: async () => (await import("./Forms-77Mornxt.mjs")).default
     });
     app.customFields.register({
       name: "property",
@@ -40,7 +40,7 @@ const index = {
         defaultMessage: "Picked from the portal's real properties"
       },
       components: {
-        Input: async () => import("./HubspotPropertyInput-DrBsx9jQ.mjs")
+        Input: async () => import("./HubspotPropertyInput-Drxn_Ddt.mjs")
       },
       // Exposed in the Content-Type Builder. Without this, `objectField` could
       // only be set by hand-editing schema.json — which is not how anyone
@@ -103,7 +103,7 @@ const index = {
         defaultMessage: "Picked from the portal's configured objects"
       },
       components: {
-        Input: async () => import("./HubspotObjectInput-V3uhGK8k.mjs")
+        Input: async () => import("./HubspotObjectInput-B-Y1PZ6c.mjs")
       }
     });
     app.customFields.register({
@@ -119,7 +119,7 @@ const index = {
         defaultMessage: "A form built in the HubSpot form builder, stored by slug"
       },
       components: {
-        Input: async () => import("./HubspotFormInput-CKYRcNNU.mjs")
+        Input: async () => import("./HubspotFormInput-BVknnlmR.mjs")
       }
     });
     app.createSettingSection(
@@ -135,7 +135,7 @@ const index = {
           // Mirrors the RBAC action registered server-side: a role without it
           // doesn't see the link at all — the routes refuse it anyway.
           permissions: [{ action: `plugin::${PLUGIN_ID}.settings`, subject: null }],
-          Component: async () => (await import("./Settings-BjkNbyna.mjs")).default
+          Component: async () => (await import("./Settings-DrujhMxS.mjs")).default
         }
       ]
     );
@@ -145,7 +145,7 @@ const index = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-Cun5LoUP.mjs"), "./translations/fr.json": () => import("./fr-ClOWflse.mjs") }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-BYKKi1LK.mjs"), "./translations/fr.json": () => import("./fr-DzgArgi3.mjs") }), `./translations/${locale}.json`, 3);
           return { data: prefixPluginTranslations(data), locale };
         } catch {
           return { data: {}, locale };

package/dist/_chunks/{index-D2Q34BuH.js → index-P7p8ASb6.js}

@@ -26,7 +26,7 @@ const index = {
       icon: icons.PaperPlane,
       intlLabel: { id: `${PLUGIN_ID}.menu.label`, defaultMessage: "HubSpot Forms" },
       permissions: [{ action: `plugin::${PLUGIN_ID}.forms`, subject: null }],
-      Component: async () => (await Promise.resolve().then(() => require("./Forms-HMZbTk_B.js"))).default
+      Component: async () => (await Promise.resolve().then(() => require("./Forms-B8kkPY0c.js"))).default
     });
     app.customFields.register({
       name: "property",
@@ -41,7 +41,7 @@ const index = {
         defaultMessage: "Picked from the portal's real properties"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./HubspotPropertyInput-Dn1QvOcu.js"))
+        Input: async () => Promise.resolve().then(() => require("./HubspotPropertyInput-awfD1opH.js"))
       },
       // Exposed in the Content-Type Builder. Without this, `objectField` could
       // only be set by hand-editing schema.json — which is not how anyone
@@ -104,7 +104,7 @@ const index = {
         defaultMessage: "Picked from the portal's configured objects"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./HubspotObjectInput-D-FGwsyS.js"))
+        Input: async () => Promise.resolve().then(() => require("./HubspotObjectInput-BOO1PvOj.js"))
       }
     });
     app.customFields.register({
@@ -120,7 +120,7 @@ const index = {
         defaultMessage: "A form built in the HubSpot form builder, stored by slug"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("./HubspotFormInput-BequMb12.js"))
+        Input: async () => Promise.resolve().then(() => require("./HubspotFormInput-kx3LlQYF.js"))
       }
     });
     app.createSettingSection(
@@ -136,7 +136,7 @@ const index = {
           // Mirrors the RBAC action registered server-side: a role without it
           // doesn't see the link at all — the routes refuse it anyway.
           permissions: [{ action: `plugin::${PLUGIN_ID}.settings`, subject: null }],
-          Component: async () => (await Promise.resolve().then(() => require("./Settings-Cgp7M1Cv.js"))).default
+          Component: async () => (await Promise.resolve().then(() => require("./Settings-BT1NhvxO.js"))).default
         }
       ]
     );
@@ -146,7 +146,7 @@ const index = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-D5Ch9YFo.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-CqlhHltZ.js")) }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-B8adhJhO.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-DnKtGXaB.js")) }), `./translations/${locale}.json`, 3);
           return { data: prefixPluginTranslations(data), locale };
         } catch {
           return { data: {}, locale };

package/dist/_chunks/{objectLabels-LAQ0M6-a.js → objectLabels-Dn-zriuZ.js}

@@ -1,5 +1,5 @@
 "use strict";
-const index = require("./index-D2Q34BuH.js");
+const index = require("./index-P7p8ASb6.js");
 const STANDARD = /* @__PURE__ */ new Set([
   "contact",
   "company",

package/dist/_chunks/{objectLabels-DBKevJle.mjs → objectLabels-yNrnTOBo.mjs}

@@ -1,4 +1,4 @@
-import { g as getTranslation } from "./index-FKsiOEPB.mjs";
+import { g as getTranslation } from "./index-LrCSAHoH.mjs";
 const STANDARD = /* @__PURE__ */ new Set([
   "contact",
   "company",

package/dist/_chunks/{useHubspotSchema-C08qBAyy.js → useHubspotSchema-BottzdRR.js}

@@ -1,7 +1,7 @@
 "use strict";
 const React = require("react");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-D2Q34BuH.js");
+const index = require("./index-P7p8ASb6.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{useHubspotSchema-BC0Od-Wl.mjs → useHubspotSchema-DccG2KbZ.mjs}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-FKsiOEPB.mjs";
+import { P as PLUGIN_ID } from "./index-LrCSAHoH.mjs";
 let cached = null;
 let inFlight = null;
 const listeners = /* @__PURE__ */ new Set();

package/dist/admin/index.js

@@ -1,4 +1,4 @@
 "use strict";
-const index = require("../_chunks/index-D2Q34BuH.js");
+const index = require("../_chunks/index-P7p8ASb6.js");
 require("@strapi/icons");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-FKsiOEPB.mjs";
+import { i } from "../_chunks/index-LrCSAHoH.mjs";
 import "@strapi/icons";
 export {
   i as default

package/dist/admin/src/builder/types.d.ts

@@ -55,6 +55,7 @@ export interface FormEntryDto {
     nextLabel?: string | null;
     submitLabel?: string | null;
     successMessage?: string | null;
+    class?: string | null;
     locale?: string | null;
     updatedAt?: string;
     definition: FormDefinition;

package/dist/server/index.js

@@ -397,6 +397,7 @@ const contentTypes = {
         nextLabel: localizedString(),
         submitLabel: localizedString(),
         successMessage: localizedString("text"),
+        class: { type: "string" },
         definition: {
           type: "json",
           required: true,
@@ -573,6 +574,7 @@ function publicForm(entry) {
     nextLabel: entry.nextLabel ?? null,
     submitLabel: entry.submitLabel ?? null,
     successMessage: entry.successMessage ?? null,
+    class: entry.class ?? null,
     locale: entry.locale ?? null,
     steps: (entry.definition?.steps ?? []).map((step) => ({
       ...step,
@@ -932,6 +934,7 @@ function convertLegacyForm(entry, map = {}) {
     nextLabel: entry.nextLabel ?? null,
     submitLabel: entry.submitLabel ?? null,
     successMessage: entry.successMessage ?? null,
+    class: entry.class ?? null,
     definition: { version: 1, steps }
   };
 }
@@ -943,7 +946,8 @@ const WRITABLE = [
   "subtitle",
   "nextLabel",
   "submitLabel",
-  "successMessage"
+  "successMessage",
+  "class"
 ];
 const slugify = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "form";
 function createFormsAdminController(strapi) {
@@ -962,6 +966,15 @@ function createFormsAdminController(strapi) {
       return null;
     }
   }
+  async function uniqueSlug(name) {
+    const base = slugify(name);
+    let slug = base;
+    for (let i = 2; ; i += 1) {
+      const clash = await documents().findFirst({ filters: { slug } });
+      if (!clash) return slug;
+      slug = `${base}-${i}`;
+    }
+  }
   function pickWritable(body) {
     const data = {};
     for (const key of WRITABLE) {
@@ -1027,13 +1040,7 @@ function createFormsAdminController(strapi) {
       const body = ctx.request.body ?? {};
       const name = typeof body.name === "string" ? body.name.trim() : "";
       if (!name) ctx.throw(400, "A form needs a name");
-      const base = slugify(name);
-      let slug = base;
-      for (let i = 2; ; i += 1) {
-        const clash = await documents().findFirst({ filters: { slug } });
-        if (!clash) break;
-        slug = `${base}-${i}`;
-      }
+      const slug = await uniqueSlug(name);
       let definition;
       try {
         definition = requireValidDefinition(ctx, body.definition);
@@ -1202,6 +1209,57 @@ function createFormsAdminController(strapi) {
       if (!targetId) ctx.throw(404, "Source entry not found");
       ctx.body = { documentId: targetId, locales: imported };
     },
+    /**
+     * Copies a form (every locale of its draft) into a new draft document —
+     * the quickest way to A/B a variant or to start from an existing form.
+     * Internal step/field ids are kept: they only need uniqueness per form.
+     */
+    async duplicate(ctx) {
+      const sourceId = ctx.params.documentId;
+      let locales = [void 0];
+      try {
+        const found = await strapi.plugin("i18n").service("locales").find();
+        if (Array.isArray(found) && found.length) {
+          locales = [...found].sort((a, b) => Number(b.isDefault ?? false) - Number(a.isDefault ?? false)).map((l) => l.code);
+        }
+      } catch {
+      }
+      let targetId = null;
+      let slug = null;
+      for (const locale of locales) {
+        const source = await documents().findOne({
+          documentId: sourceId,
+          locale,
+          status: "draft"
+        });
+        if (!source) continue;
+        const name = `${source.name} (2)`;
+        slug ??= await uniqueSlug(name);
+        const data = {
+          name,
+          slug,
+          title: source.title,
+          subtitle: source.subtitle,
+          nextLabel: source.nextLabel,
+          submitLabel: source.submitLabel,
+          successMessage: source.successMessage,
+          class: source.class,
+          definition: source.definition
+        };
+        if (targetId) {
+          const { slug: _slug, name: _name, ...localized } = data;
+          await documents().update({ documentId: targetId, locale, data: localized });
+        } else {
+          const created = await documents().create({
+            locale,
+            data
+          });
+          targetId = created.documentId;
+        }
+      }
+      if (!targetId) ctx.throw(404, "Form not found");
+      ctx.body = { documentId: targetId };
+    },
     async remove(ctx) {
       await documents().delete({
         documentId: ctx.params.documentId
@@ -1502,6 +1560,7 @@ const routes = {
       adminRoute("POST", "/builder/forms/:documentId/publish", "formsAdmin.publish", [FORMS_ACTION]),
       adminRoute("POST", "/builder/forms/:documentId/unpublish", "formsAdmin.unpublish", [FORMS_ACTION]),
       adminRoute("DELETE", "/builder/forms/:documentId", "formsAdmin.remove", [FORMS_ACTION]),
+      adminRoute("POST", "/builder/forms/:documentId/duplicate", "formsAdmin.duplicate", [FORMS_ACTION]),
       // No FORMS_ACTION: editors pick forms from the Content Manager, like
       // they pick properties — the builder itself stays gated.
       adminRoute("GET", "/forms-options", "formsAdmin.options"),

package/dist/server/index.mjs

@@ -396,6 +396,7 @@ const contentTypes = {
         nextLabel: localizedString(),
         submitLabel: localizedString(),
         successMessage: localizedString("text"),
+        class: { type: "string" },
         definition: {
           type: "json",
           required: true,
@@ -572,6 +573,7 @@ function publicForm(entry) {
     nextLabel: entry.nextLabel ?? null,
     submitLabel: entry.submitLabel ?? null,
     successMessage: entry.successMessage ?? null,
+    class: entry.class ?? null,
     locale: entry.locale ?? null,
     steps: (entry.definition?.steps ?? []).map((step) => ({
       ...step,
@@ -931,6 +933,7 @@ function convertLegacyForm(entry, map = {}) {
     nextLabel: entry.nextLabel ?? null,
     submitLabel: entry.submitLabel ?? null,
     successMessage: entry.successMessage ?? null,
+    class: entry.class ?? null,
     definition: { version: 1, steps }
   };
 }
@@ -942,7 +945,8 @@ const WRITABLE = [
   "subtitle",
   "nextLabel",
   "submitLabel",
-  "successMessage"
+  "successMessage",
+  "class"
 ];
 const slugify = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "form";
 function createFormsAdminController(strapi) {
@@ -961,6 +965,15 @@ function createFormsAdminController(strapi) {
       return null;
     }
   }
+  async function uniqueSlug(name) {
+    const base = slugify(name);
+    let slug = base;
+    for (let i = 2; ; i += 1) {
+      const clash = await documents().findFirst({ filters: { slug } });
+      if (!clash) return slug;
+      slug = `${base}-${i}`;
+    }
+  }
   function pickWritable(body) {
     const data = {};
     for (const key of WRITABLE) {
@@ -1026,13 +1039,7 @@ function createFormsAdminController(strapi) {
       const body = ctx.request.body ?? {};
       const name = typeof body.name === "string" ? body.name.trim() : "";
       if (!name) ctx.throw(400, "A form needs a name");
-      const base = slugify(name);
-      let slug = base;
-      for (let i = 2; ; i += 1) {
-        const clash = await documents().findFirst({ filters: { slug } });
-        if (!clash) break;
-        slug = `${base}-${i}`;
-      }
+      const slug = await uniqueSlug(name);
       let definition;
       try {
         definition = requireValidDefinition(ctx, body.definition);
@@ -1201,6 +1208,57 @@ function createFormsAdminController(strapi) {
       if (!targetId) ctx.throw(404, "Source entry not found");
       ctx.body = { documentId: targetId, locales: imported };
     },
+    /**
+     * Copies a form (every locale of its draft) into a new draft document —
+     * the quickest way to A/B a variant or to start from an existing form.
+     * Internal step/field ids are kept: they only need uniqueness per form.
+     */
+    async duplicate(ctx) {
+      const sourceId = ctx.params.documentId;
+      let locales = [void 0];
+      try {
+        const found = await strapi.plugin("i18n").service("locales").find();
+        if (Array.isArray(found) && found.length) {
+          locales = [...found].sort((a, b) => Number(b.isDefault ?? false) - Number(a.isDefault ?? false)).map((l) => l.code);
+        }
+      } catch {
+      }
+      let targetId = null;
+      let slug = null;
+      for (const locale of locales) {
+        const source = await documents().findOne({
+          documentId: sourceId,
+          locale,
+          status: "draft"
+        });
+        if (!source) continue;
+        const name = `${source.name} (2)`;
+        slug ??= await uniqueSlug(name);
+        const data = {
+          name,
+          slug,
+          title: source.title,
+          subtitle: source.subtitle,
+          nextLabel: source.nextLabel,
+          submitLabel: source.submitLabel,
+          successMessage: source.successMessage,
+          class: source.class,
+          definition: source.definition
+        };
+        if (targetId) {
+          const { slug: _slug, name: _name, ...localized } = data;
+          await documents().update({ documentId: targetId, locale, data: localized });
+        } else {
+          const created = await documents().create({
+            locale,
+            data
+          });
+          targetId = created.documentId;
+        }
+      }
+      if (!targetId) ctx.throw(404, "Form not found");
+      ctx.body = { documentId: targetId };
+    },
     async remove(ctx) {
       await documents().delete({
         documentId: ctx.params.documentId
@@ -1501,6 +1559,7 @@ const routes = {
       adminRoute("POST", "/builder/forms/:documentId/publish", "formsAdmin.publish", [FORMS_ACTION]),
       adminRoute("POST", "/builder/forms/:documentId/unpublish", "formsAdmin.unpublish", [FORMS_ACTION]),
       adminRoute("DELETE", "/builder/forms/:documentId", "formsAdmin.remove", [FORMS_ACTION]),
+      adminRoute("POST", "/builder/forms/:documentId/duplicate", "formsAdmin.duplicate", [FORMS_ACTION]),
       // No FORMS_ACTION: editors pick forms from the Content Manager, like
       // they pick properties — the builder itself stays gated.
       adminRoute("GET", "/forms-options", "formsAdmin.options"),

package/dist/server/src/content-types.d.ts

@@ -85,6 +85,9 @@ declare const _default: {
                         };
                     };
                 };
+                class: {
+                    type: string;
+                };
                 definition: {
                     type: string;
                     required: boolean;

package/dist/server/src/forms.d.ts

@@ -19,6 +19,7 @@ export interface FormEntry {
     nextLabel?: string | null;
     submitLabel?: string | null;
     successMessage?: string | null;
+    class?: string | null;
     locale?: string | null;
     definition: FormDefinition;
     [key: string]: unknown;
@@ -30,6 +31,7 @@ export interface PublicForm {
     nextLabel?: string | null;
     submitLabel?: string | null;
     successMessage?: string | null;
+    class?: string | null;
     locale?: string | null;
     steps: FormDefinition["steps"];
 }

package/dist/server/src/formsAdmin.d.ts

@@ -42,5 +42,11 @@ export declare function createFormsAdminController(strapi: Core.Strapi): {
      * published version, and never modifies the source.
      */
     runImport(ctx: Ctx): Promise<void>;
+    /**
+     * Copies a form (every locale of its draft) into a new draft document —
+     * the quickest way to A/B a variant or to start from an existing form.
+     * Internal step/field ids are kept: they only need uniqueness per form.
+     */
+    duplicate(ctx: Ctx): Promise<void>;
     remove(ctx: Ctx): Promise<void>;
 };

package/dist/server/src/importLegacy.d.ts

@@ -20,6 +20,7 @@ export interface ConvertedForm {
     nextLabel?: string | null;
     submitLabel?: string | null;
     successMessage?: string | null;
+    class?: string | null;
     definition: FormDefinition;
 }
 export declare function convertLegacyForm(entry: Record<string, unknown>, map?: ImportMap): ConvertedForm;

package/dist/server/src/index.d.ts

@@ -96,6 +96,9 @@ declare const _default: {
                             };
                         };
                     };
+                    class: {
+                        type: string;
+                    };
                     definition: {
                         type: string;
                         required: boolean;
@@ -253,6 +256,7 @@ declare const _default: {
             options(ctx: import("./formsAdmin").Ctx): Promise<void>;
             listSources(ctx: import("./formsAdmin").Ctx): Promise<void>;
             runImport(ctx: import("./formsAdmin").Ctx): Promise<void>;
+            duplicate(ctx: import("./formsAdmin").Ctx): Promise<void>;
             remove(ctx: import("./formsAdmin").Ctx): Promise<void>;
         };
         forms: ({ strapi }: {

package/dist/shared/types.d.ts

@@ -72,6 +72,8 @@ export interface PublicForm {
   nextLabel?: string | null;
   submitLabel?: string | null;
   successMessage?: string | null;
+  /** Extra utility classes on the form wrapper, for the host frontend. */
+  class?: string | null;
   locale?: string | null;
   steps: PublicFormStep[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-hubspot",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The form builder for HubSpot in Strapi — multi-step forms with conditional fields mapped to real CRM properties, a public submit pipeline with retries, and save-time mapping validation.",
   "keywords": [
     "strapi",