diff --git a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
index 9db2b83a5..3c2d950e3 100644
--- a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
+++ b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx
@@ -9,17 +9,11 @@ import { PageLayout } from "../page-layout";
 import { SettingCard, SettingSwitch } from "@/components/settings";
 import { useAdminApp } from "../use-admin-app";
 import { Alert } from "@/components/ui/alert";
-import { FormDialog } from "@/components/form-dialog";
-import { InputField } from "@/components/form-fields";
+import { SmartFormDialog } from "@/components/form-dialog";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { ActionCell } from "@/components/data-table/elements/cells";
 import Typography from "@/components/ui/typography";
 
-export const domainFormSchema = yup.object({
-  domain: yup.string().matches(/^https?:\/\//, "Domain must start with http:// or https://").url("Domain must a valid URL").required(),
-  handlerPath: yup.string().matches(/^\//, "Handler path must start with /").required(),
-});
-
 function EditDialog(props: { 
   open?: boolean,
   onOpenChange?: (open: boolean) => void,
@@ -29,34 +23,37 @@ function EditDialog(props: {
   type: 'update' | 'create',
   editIndex?: number,
 }) {
-  const defaultValues = useMemo(() => {
-    if (props.editIndex !== undefined) {
-      const domain = props.domains[props.editIndex];
-      return domain;
-    } else {
-      return { domain: '', handlerPath: '/handler' };
-    }
-  }, [props.editIndex, props.domains]);
-
   const domainFormSchema = yup.object({
+    makeSureAlert: yup.mixed().meta({
+      stackFormFieldRender: () => (
+        <Alert>
+          Make sure this is a trusted domain or a URL that you control.
+        </Alert>
+      ),
+    }),
     domain: yup.string()
       .matches(/^https?:\/\//, "Domain must start with http:// or https://")
       .url("Domain must a valid URL")
       .notOneOf(props.domains
         .filter((_, i) => i !== props.editIndex)
         .map(({ domain }) => domain), "Domain already exists")
-      .required(),
+      .required()
+      .label("Domain with protocol")
+      .meta({
+        stackFormFieldPlaceholder: "https://example.com",
+      }),
     handlerPath: yup.string()
       .matches(/^\//, "Handler path must start with /")
-      .required(),
+      .required()
+      .label("Handler path")
+      .default("/handler"),
   });
 
-  return <FormDialog
+  return <SmartFormDialog
     open={props.open}
     onOpenChange={props.onOpenChange}
     trigger={props.trigger}
     title={(props.type === 'create' ? "Create" : "Update") + " domain and handler"}
-    defaultValues={defaultValues}
     formSchema={domainFormSchema}
     okButton={{ label: props.type === 'create' ? "Create" : "Save" }}
     onSubmit={async (values) => {
@@ -85,29 +82,6 @@ function EditDialog(props: {
         });
       }
     }}
-    render={(form) => (
-      <>
-        <Alert>
-          Make sure this is a trusted domain or a URL that you control.
-        </Alert>
-
-        <InputField
-          control={form.control}
-          name="domain"
-          label="Domain (http:// or https://)"
-          placeholder="https://example.com"
-          required
-        />
-          
-        <InputField
-          control={form.control}
-          name="handlerPath"
-          label="Handler path"
-          placeholder="/handler"
-          required
-        />
-      </>
-    )}
   />;
 }
 
diff --git a/packages/stack-server/src/components/smart-form.tsx b/packages/stack-server/src/components/smart-form.tsx
index 0f122433d..339731b3d 100644
--- a/packages/stack-server/src/components/smart-form.tsx
+++ b/packages/stack-server/src/components/smart-form.tsx
@@ -13,6 +13,7 @@ import { DateField, InputField } from "./form-fields";
 declare module 'yup' {
   export interface CustomSchemaMetadata {
     stackFormFieldRender?: (props: { control: ReturnType<typeof useForm>['control'], name: string, label: string, disabled: boolean }) => React.ReactNode,
+    stackFormFieldPlaceholder?: string,
   }
 }
 
@@ -68,8 +69,12 @@ function SmartFormField(props: {
     name: props.id,
     label: ("label" in props.description ? props.description.label : null) ?? props.id,
     disabled: props.disabled,
-    required:  !("optional" in props.description && props.description.optional) && (!("default" in props.description) || props.description.default === undefined),
+    required: !("optional" in props.description && props.description.optional),
+    placeholder: "meta" in props.description && props.description.meta?.stackFormFieldPlaceholder !== undefined ? props.description.meta?.stackFormFieldPlaceholder :
+      "default" in props.description ? (typeof props.description.default === "string" ? `Eg.: ${props.description.default}` : undefined) : undefined,
+    defaultValue: "default" in props.description ? props.description.default : undefined,
   };
+  console.log(usualProps, props);
 
   if ("meta" in props.description) {
     const meta = props.description.meta;