diff --git a/src/clients/add/NewClientForm.tsx b/src/clients/add/NewClientForm.tsx
index b27b2ce960..51441a1fe1 100644
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@@ -15,6 +15,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
+import { convertFormValuesToObject } from "../../util";
 import { toClient } from "../routes/Client";
 import { toClients } from "../routes/Clients";
 import { CapabilityConfig } from "./CapabilityConfig";
@@ -43,8 +44,15 @@ export default function NewClientForm() {
   const methods = useForm<ClientRepresentation>({ defaultValues: client });
 
   const save = async () => {
+    const attributes = client.attributes
+      ? convertFormValuesToObject(client.attributes)
+      : undefined;
+
     try {
-      const newClient = await adminClient.clients.create({ ...client });
+      const newClient = await adminClient.clients.create({
+        ...client,
+        attributes,
+      });
       addAlert(t("createSuccess"), AlertVariant.success);
       history.push(
         toClient({ realm, clientId: newClient.id, tab: "settings" })