fix: Form element

apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx

@@ -71,34 +71,35 @@ export const EditProductNameForm: React.FC<EditProductNameProps> = ({
   };
 
   return !isProductNameEditDisabled ? (
-    <Form {...form}>
-      <form className="w-full max-w-sm items-center space-y-2" onSubmit={form.handleSubmit(updateProduct)}>
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel htmlFor="name">What&apos;s your product called?</FormLabel>
-              <FormControl>
-                <Input
-                  type="text"
-                  id="name"
-                  {...field}
-                  placeholder="Product Name"
-                  autoComplete="off"
-                  required
-                  isInvalid={!!nameError}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <Form
+      {...form}
+      className="w-full max-w-sm items-center space-y-2"
+      onSubmit={form.handleSubmit(updateProduct)}>
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel htmlFor="name">What&apos;s your product called?</FormLabel>
+            <FormControl>
+              <Input
+                type="text"
+                id="name"
+                {...field}
+                placeholder="Product Name"
+                autoComplete="off"
+                required
+                isInvalid={!!nameError}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit" variant="darkCTA" size="sm" loading={isSubmitting} disabled={isSubmitting}>
-          Update
-        </Button>
-      </form>
+      <Button type="submit" variant="darkCTA" size="sm" loading={isSubmitting} disabled={isSubmitting}>
+        Update
+      </Button>
     </Form>
   ) : (
     <p className="text-sm text-red-700">Only Owners, Admins and Editors can perform this action.</p>

apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx

@@ -46,40 +46,39 @@ export const EditWaitingTimeForm: React.FC<EditWaitingTimeProps> = ({ product, e
   };
 
   return (
-    <Form {...form}>
-      <form
-        className="w-full max-w-sm items-center space-y-2"
-        onSubmit={form.handleSubmit(updateWaitingTime)}>
-        <FormField
-          control={form.control}
-          name="recontactDays"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel htmlFor="recontactDays">Wait X days before showing next survey:</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  id="recontactDays"
-                  {...field}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    if (value === "") {
-                      field.onChange("");
-                    }
+    <Form
+      {...form}
+      className="flex w-full max-w-sm flex-col space-y-4"
+      onSubmit={form.handleSubmit(updateWaitingTime)}>
+      <FormField
+        control={form.control}
+        name="recontactDays"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel htmlFor="recontactDays">Wait X days before showing next survey:</FormLabel>
+            <FormControl>
+              <Input
+                type="number"
+                id="recontactDays"
+                {...field}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (value === "") {
+                    field.onChange("");
+                  }
 
-                    field.onChange(parseInt(value, 10));
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+                  field.onChange(parseInt(value, 10));
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit" variant="darkCTA" size="sm">
-          Update
-        </Button>
-      </form>
+      <Button type="submit" variant="darkCTA" size="sm" className="w-fit">
+        Update
+      </Button>
     </Form>
   );
 };

apps/web/app/(app)/environments/[environmentId]/product/look/components/EditPlacementForm.tsx

@@ -68,126 +68,124 @@ export const EditPlacementForm = ({ product }: EditPlacementProps) => {
   };
 
   return (
-    <Form {...form}>
-      <form className="w-full items-center" onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex">
-          <FormField
-            control={form.control}
-            name="placement"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <RadioGroup
-                    {...field}
-                    onValueChange={(value) => {
-                      field.onChange(value);
-                    }}
-                    className="h-full">
-                    {placements.map((placement) => (
-                      <div key={placement.value} className="flex items-center space-x-2 whitespace-nowrap">
-                        <RadioGroupItem
-                          id={placement.value}
-                          value={placement.value}
-                          disabled={placement.disabled}
-                          checked={field.value === placement.value}
-                        />
-                        <Label htmlFor={placement.value} className="text-slate-900">
-                          {placement.name}
-                        </Label>
-                      </div>
-                    ))}
-                  </RadioGroup>
-                </FormControl>
-              </FormItem>
-            )}
-          />
+    <Form {...form} className="w-full items-center" onSubmit={form.handleSubmit(onSubmit)}>
+      <div className="flex">
+        <FormField
+          control={form.control}
+          name="placement"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <RadioGroup
+                  {...field}
+                  onValueChange={(value) => {
+                    field.onChange(value);
+                  }}
+                  className="h-full">
+                  {placements.map((placement) => (
+                    <div key={placement.value} className="flex items-center space-x-2 whitespace-nowrap">
+                      <RadioGroupItem
+                        id={placement.value}
+                        value={placement.value}
+                        disabled={placement.disabled}
+                        checked={field.value === placement.value}
+                      />
+                      <Label htmlFor={placement.value} className="text-slate-900">
+                        {placement.name}
+                      </Label>
+                    </div>
+                  ))}
+                </RadioGroup>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <div
+          className={cn(
+            clickOutsideClose ? "" : "cursor-not-allowed",
+            "relative ml-8 h-40 w-full rounded",
+            overlayStyle
+          )}>
           <div
             className={cn(
-              clickOutsideClose ? "" : "cursor-not-allowed",
-              "relative ml-8 h-40 w-full rounded",
-              overlayStyle
-            )}>
-            <div
-              className={cn(
-                "absolute h-16 w-16 cursor-default rounded bg-slate-700",
-                getPlacementStyle(currentPlacement)
-              )}></div>
-          </div>
+              "absolute h-16 w-16 cursor-default rounded bg-slate-700",
+              getPlacementStyle(currentPlacement)
+            )}></div>
         </div>
+      </div>
 
-        {currentPlacement === "center" && (
-          <>
-            <div className="mt-6 space-y-2">
-              <FormField
-                control={form.control}
-                name="darkOverlay"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="font-semibold">Centered modal overlay color</FormLabel>
-                    <FormControl>
-                      <RadioGroup
-                        onValueChange={(value) => {
-                          field.onChange(value === "darkOverlay");
-                        }}
-                        className="flex space-x-4">
-                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                          <RadioGroupItem id="lightOverlay" value="lightOverlay" checked={!field.value} />
-                          <Label htmlFor="lightOverlay" className="text-slate-900">
-                            Light Overlay
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                          <RadioGroupItem id="darkOverlay" value="darkOverlay" checked={field.value} />
-                          <Label htmlFor="darkOverlay" className="text-slate-900">
-                            Dark Overlay
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </div>
-            <div className="mt-6 space-y-2">
-              <FormField
-                control={form.control}
-                name="clickOutsideClose"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="font-semibold">
-                      Allow users to exit by clicking outside the study
-                    </FormLabel>
-                    <FormControl>
-                      <RadioGroup
-                        onValueChange={(value) => {
-                          field.onChange(value === "allow");
-                        }}
-                        className="flex space-x-4">
-                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                          <RadioGroupItem id="disallow" value="disallow" checked={!field.value} />
-                          <Label htmlFor="disallow" className="text-slate-900">
-                            Don&apos;t Allow
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                          <RadioGroupItem id="allow" value="allow" checked={field.value} />
-                          <Label htmlFor="allow" className="text-slate-900">
-                            Allow
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </div>
-          </>
-        )}
+      {currentPlacement === "center" && (
+        <>
+          <div className="mt-6 space-y-2">
+            <FormField
+              control={form.control}
+              name="darkOverlay"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-semibold">Centered modal overlay color</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={(value) => {
+                        field.onChange(value === "darkOverlay");
+                      }}
+                      className="flex space-x-4">
+                      <div className="flex items-center space-x-2 whitespace-nowrap">
+                        <RadioGroupItem id="lightOverlay" value="lightOverlay" checked={!field.value} />
+                        <Label htmlFor="lightOverlay" className="text-slate-900">
+                          Light Overlay
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2 whitespace-nowrap">
+                        <RadioGroupItem id="darkOverlay" value="darkOverlay" checked={field.value} />
+                        <Label htmlFor="darkOverlay" className="text-slate-900">
+                          Dark Overlay
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="mt-6 space-y-2">
+            <FormField
+              control={form.control}
+              name="clickOutsideClose"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-semibold">
+                    Allow users to exit by clicking outside the study
+                  </FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={(value) => {
+                        field.onChange(value === "allow");
+                      }}
+                      className="flex space-x-4">
+                      <div className="flex items-center space-x-2 whitespace-nowrap">
+                        <RadioGroupItem id="disallow" value="disallow" checked={!field.value} />
+                        <Label htmlFor="disallow" className="text-slate-900">
+                          Don&apos;t Allow
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2 whitespace-nowrap">
+                        <RadioGroupItem id="allow" value="allow" checked={field.value} />
+                        <Label htmlFor="allow" className="text-slate-900">
+                          Allow
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+        </>
+      )}
 
-        <Button variant="darkCTA" className="mt-4" size="sm" loading={isSubmitting}>
-          Save
-        </Button>
-      </form>
+      <Button variant="darkCTA" className="mt-4 w-fit" size="sm" loading={isSubmitting}>
+        Save
+      </Button>
     </Form>
   );
 };

packages/ui/Form/index.tsx

@@ -9,6 +9,7 @@ import {
   FieldPath,
   FieldValues,
   FormProvider,
+  FormProviderProps,
   useFormContext,
 } from "react-hook-form";
 
@@ -16,7 +17,16 @@ import { cn } from "@formbricks/lib/cn";
 
 import { Label } from "../Label";
 
-const Form = FormProvider;
+type FormProps<TFieldValues extends FieldValues = FieldValues> = FormProviderProps<TFieldValues> &
+  React.FormHTMLAttributes<HTMLFormElement>;
+
+const Form = <TFieldValues extends FieldValues>({ children, ...props }: FormProps<TFieldValues>) => {
+  return (
+    <FormProvider {...props}>
+      <form {...props}>{children}</form>
+    </FormProvider>
+  );
+};
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,