diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
index a2741bf7625b3e..2b355232a47730 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.test.tsx
@@ -1,34 +1,64 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { render, screen } from "@testing-library/react";
+import { render, fireEvent, screen } from "@testing-library/react";
 import * as React from "react";
+import type { UseFormReturn } from "react-hook-form";
 import { FormProvider, useForm } from "react-hook-form";
+import { expect } from "vitest";
 
 import { getBookingFieldsWithSystemFields } from "../../../lib/getBookingFields";
 import { BookingFields } from "./BookingFields";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FormMethods = UseFormReturn<any>;
+
 const renderComponent = ({
   props: props,
   formDefaultValues,
 }: {
   props: Parameters<typeof BookingFields>[0];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formDefaultValues?: any;
 }) => {
+  let formMethods: UseFormReturn | undefined;
   const Wrapper = ({ children }: { children: React.ReactNode }) => {
     const form = useForm({
       defaultValues: formDefaultValues,
     });
+    formMethods = form;
     return (
       <TooltipProvider>
         <FormProvider {...form}>{children}</FormProvider>
       </TooltipProvider>
     );
   };
-  return render(<BookingFields {...props} />, { wrapper: Wrapper });
+  const result = render(<BookingFields {...props} />, { wrapper: Wrapper });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return { result, formMethods: formMethods! };
 };
 
-describe("FormBuilderField", () => {
-  it("basic test", () => {
-    renderComponent({
+describe("BookingFields", () => {
+  it("should correctly render with location fields", () => {
+    const AttendeePhoneNumberOption = {
+      label: "attendee_phone_number",
+      value: "phone",
+    };
+
+    const OrganizerLinkOption = {
+      label: "https://google.com",
+      value: "link",
+    };
+
+    const locations = [
+      {
+        type: AttendeePhoneNumberOption.value,
+      },
+      {
+        link: "https://google.com",
+        type: OrganizerLinkOption.value,
+        displayLocationPublicly: true,
+      },
+    ];
+    const { formMethods } = renderComponent({
       props: {
         fields: getBookingFieldsWithSystemFields({
           disableGuests: false,
@@ -37,22 +67,115 @@ describe("FormBuilderField", () => {
           workflows: [],
           customInputs: [],
         }),
-        locations: [
-          {
-            type: "phone",
-          },
-          {
-            link: "https://google.com",
-            type: "link",
-            displayLocationPublicly: true,
-          },
-        ],
+        locations,
         isDynamicGroupBooking: false,
         bookingData: null,
       },
       formDefaultValues: {},
     });
-    screen.getByText("email_address");
-    screen.logTestingPlaygroundURL();
+
+    component.fillName({ value: "John Doe" });
+    component.fillEmail({ value: "john.doe@example.com" });
+    component.fillNotes({ value: "This is a note" });
+    expectScenarios.expectNameToBe({ value: "John Doe", formMethods });
+    expectScenarios.expectEmailToBe({ value: "john.doe@example.com", formMethods });
+    expectScenarios.expectNotesToBe({ value: "This is a note", formMethods });
+
+    component.fillRadioInputLocation({ label: AttendeePhoneNumberOption.label, inputValue: "+1234567890" });
+    expectScenarios.expectLocationToBe({
+      formMethods,
+      label: AttendeePhoneNumberOption.label,
+      toMatch: {
+        formattedValue: "+1 (234) 567-890",
+        value: { optionValue: "+1234567890", value: AttendeePhoneNumberOption.value },
+      },
+    });
+
+    component.fillRadioInputLocation({ label: OrganizerLinkOption.label });
+    expectScenarios.expectLocationToBe({
+      formMethods,
+      label: OrganizerLinkOption.label,
+      toMatch: {
+        formattedValue: "+1 (234) 567-890",
+        value: { optionValue: "", value: OrganizerLinkOption.value },
+      },
+    });
   });
 });
+
+const component = {
+  getName: ({ label = "your_name" }: { label?: string } = {}) =>
+    screen.getByRole("textbox", {
+      name: new RegExp(label),
+    }) as HTMLInputElement,
+  getEmail: () => screen.getByRole("textbox", { name: /email/i }) as HTMLInputElement,
+  getLocationRadioOption: ({ label }: { label: string }) =>
+    screen.getByRole("radio", { name: new RegExp(label) }) as HTMLInputElement,
+  getLocationRadioInput: ({ placeholder }: { placeholder: string }) =>
+    screen.getByPlaceholderText(placeholder) as HTMLInputElement,
+  getNotes: () => screen.getByRole("textbox", { name: /additional_notes/i }) as HTMLInputElement,
+  getGuests: () => screen.getByLabelText("guests"),
+  fillName: ({ value }: { value: string }) => {
+    fireEvent.change(component.getName(), { target: { value } });
+  },
+  fillEmail: ({ value }: { value: string }) => {
+    fireEvent.change(component.getEmail(), { target: { value } });
+  },
+  fillRadioInputLocation: ({ label, inputValue }: { label: string; inputValue?: string }) => {
+    fireEvent.click(component.getLocationRadioOption({ label }));
+
+    if (inputValue) {
+      let placeholder = label;
+      if (label === "attendee_phone_number") {
+        placeholder = "enter_phone_number";
+      } else {
+        // radioInput doesn't have a label, so we need to identify by placeholder
+        throw new Error("Tell me how to identify the placeholder for this location input");
+      }
+      fireEvent.change(component.getLocationRadioInput({ placeholder }), {
+        target: { value: inputValue },
+      });
+    }
+  },
+  fillNotes: ({ value }: { value: string }) => {
+    fireEvent.change(component.getNotes(), { target: { value } });
+  },
+};
+
+const expectScenarios = {
+  expectNameToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getName().value).toEqual(value);
+    expect(formMethods.getValues("responses.name")).toEqual(value);
+  },
+  expectEmailToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getEmail().value).toEqual(value);
+    expect(formMethods.getValues("responses.email")).toEqual(value);
+  },
+  expectLocationToBe: ({
+    formMethods,
+    label,
+    toMatch: { formattedValue, value },
+  }: {
+    label: string;
+    toMatch: {
+      formattedValue?: string;
+      value: {
+        optionValue: string;
+        value: string;
+      };
+    };
+    formMethods: FormMethods;
+  }) => {
+    expect(component.getLocationRadioOption({ label }).checked).toBe(true);
+    if (value.optionValue) {
+      expect(component.getLocationRadioInput({ placeholder: "enter_phone_number" }).value).toEqual(
+        formattedValue
+      );
+    }
+    expect(formMethods.getValues("responses.location")).toEqual(value);
+  },
+  expectNotesToBe: ({ value, formMethods }: { value: string; formMethods: FormMethods }) => {
+    expect(component.getNotes().value).toEqual(value);
+    expect(formMethods.getValues("responses.notes")).toEqual(value);
+  },
+};
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx
index ca3913c6826d04..8be7c1bf18a565 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookingFields.tsx
@@ -99,7 +99,6 @@ export const BookingFields = ({
 
           // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
           const options = getLocationOptionsForSelect(locations, t);
-          console.log({ options });
           options.forEach((option) => {
             const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];
             if (optionInput) {
@@ -133,7 +132,6 @@ export const BookingFields = ({
             };
           });
         }
-        console.log({ field });
 
         return (
           <FormBuilderField className="mb-4" field={{ ...field, hidden }} readOnly={readOnly} key={index} />
diff --git a/packages/features/bookings/lib/getLocationOptionsForSelect.ts b/packages/features/bookings/lib/getLocationOptionsForSelect.ts
index 37a99401721c3d..8a8963a0d41be9 100644
--- a/packages/features/bookings/lib/getLocationOptionsForSelect.ts
+++ b/packages/features/bookings/lib/getLocationOptionsForSelect.ts
@@ -9,7 +9,6 @@ export default function getLocationsOptionsForSelect(
   locations: LocationObject[],
   t: ReturnType<typeof useLocale>["t"]
 ) {
-  console.log({ locations: JSON.stringify(locations) });
   return locations
     .map((location) => {
       const eventLocation = getEventLocationType(location.type);
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index b2b430bb4ab5f0..af1b8c7dfc9d7a 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -97,16 +97,16 @@ type Component =
 export const Components: Record<FieldType, Component> = {
   text: {
     propsType: propsTypes.text,
-    factory: (props) => <Widgets.TextWidget noLabel={true} {...props} />,
+    factory: (props) => <Widgets.TextWidget id={props.name} noLabel={true} {...props} />,
   },
   textarea: {
     propsType: propsTypes.textarea,
     // TODO: Make rows configurable in the form builder
-    factory: (props) => <Widgets.TextAreaWidget rows={3} {...props} />,
+    factory: (props) => <Widgets.TextAreaWidget id={props.name} rows={3} {...props} />,
   },
   number: {
     propsType: propsTypes.number,
-    factory: (props) => <Widgets.NumberWidget noLabel={true} {...props} />,
+    factory: (props) => <Widgets.NumberWidget id={props.name} noLabel={true} {...props} />,
   },
   name: {
     propsType: propsTypes.name,
@@ -211,7 +211,7 @@ export const Components: Record<FieldType, Component> = {
       if (!props) {
         return <div />;
       }
-      return <Widgets.TextWidget type="email" noLabel={true} {...props} />;
+      return <Widgets.TextWidget type="email" id={props.name} noLabel={true} {...props} />;
     },
   },
   address: {
@@ -219,6 +219,7 @@ export const Components: Record<FieldType, Component> = {
     factory: (props) => {
       return (
         <AddressInput
+          id={props.name}
           onChange={(val) => {
             props.setValue(val);
           }}
@@ -247,6 +248,7 @@ export const Components: Record<FieldType, Component> = {
                 {value.map((field, index) => (
                   <li key={index}>
                     <EmailField
+                      id={`${props.name}.${index}`}
                       disabled={readOnly}
                       value={value[index]}
                       className={inputClassName}
@@ -318,7 +320,7 @@ export const Components: Record<FieldType, Component> = {
         ...props,
         listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
       };
-      return <Widgets.MultiSelectWidget {...newProps} />;
+      return <Widgets.MultiSelectWidget id={props.name} {...newProps} />;
     },
   },
   select: {
@@ -328,7 +330,7 @@ export const Components: Record<FieldType, Component> = {
         ...props,
         listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
       };
-      return <Widgets.SelectWidget {...newProps} />;
+      return <Widgets.SelectWidget id={props.name} {...newProps} />;
     },
   },
   checkbox: {
diff --git a/packages/features/form-builder/FormBuilder.test.tsx b/packages/features/form-builder/FormBuilder.test.tsx
index 82258ae8eed28a..0a7aeb5319e902 100644
--- a/packages/features/form-builder/FormBuilder.test.tsx
+++ b/packages/features/form-builder/FormBuilder.test.tsx
@@ -122,7 +122,6 @@ describe("FormBuilder", () => {
             return field.name === "location" ? true : false;
           },
         },
-        // TODO: May be we should get this from getBookingFields directly which tests more practical cases
         formDefaultValues: {
           fields: [getLocationBookingField()],
         },
diff --git a/packages/features/form-builder/FormBuilderField.test.tsx b/packages/features/form-builder/FormBuilderField.test.tsx
index 5f43cc5628d18b..ea804eb0e85ffb 100644
--- a/packages/features/form-builder/FormBuilderField.test.tsx
+++ b/packages/features/form-builder/FormBuilderField.test.tsx
@@ -1,10 +1,10 @@
-import { render } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import * as React from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
 import { vi } from "vitest";
 
 import { FormBuilderField } from "./FormBuilderField";
-import { getLocationBookingField } from "./testUtils";
 
 vi.mock("@formkit/auto-animate/react", () => ({
   useAutoAnimate: () => [null],
@@ -15,26 +15,70 @@ const renderComponent = ({
   formDefaultValues,
 }: {
   props: Parameters<typeof FormBuilderField>[0];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formDefaultValues?: any;
 }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let formMethods: UseFormReturn<any> | undefined;
   const Wrapper = ({ children }: { children: React.ReactNode }) => {
     const form = useForm({
       defaultValues: formDefaultValues,
     });
+    formMethods = form;
     return <FormProvider {...form}>{children}</FormProvider>;
   };
-  return render(<FormBuilderField {...props} />, { wrapper: Wrapper });
+  render(<FormBuilderField {...props} />, { wrapper: Wrapper });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return { formMethods: formMethods! };
 };
 
 describe("FormBuilderField", () => {
-  it("basic test", () => {
-    renderComponent({
+  it("verify a text type input field", () => {
+    const { formMethods } = renderComponent({
       props: {
-        field: getLocationBookingField(),
+        field: {
+          name: "textInput1",
+          type: "text",
+          label: "Text Input 1",
+          placeholder: "Enter text",
+        },
         readOnly: false,
         className: "",
       },
       formDefaultValues: {},
     });
+    expect(component.getFieldInput({ label: "Text Input 1" }).value).toEqual("");
+    component.fillFieldInput({ label: "Text Input 1", value: "test" });
+    expectScenario.toHaveFieldValue({
+      label: "Text Input 1",
+      identifier: "textInput1",
+      value: "test",
+      formMethods,
+    });
   });
 });
+
+const component = {
+  getFieldInput: ({ label }) => screen.getByRole("textbox", { name: label }) as HTMLInputElement,
+  fillFieldInput: ({ label, value }: { label: string; value: string }) => {
+    fireEvent.change(component.getFieldInput({ label }), { target: { value } });
+  },
+};
+
+const expectScenario = {
+  toHaveFieldValue: ({
+    identifier,
+    label,
+    value,
+    formMethods,
+  }: {
+    identifier: string;
+    label: string;
+    value: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formMethods: UseFormReturn<any>;
+  }) => {
+    expect(component.getFieldInput({ label }).value).toEqual(value);
+    expect(formMethods.getValues(`responses.${identifier}`)).toEqual(value);
+  },
+};
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index dbc16612054bcf..43b6326ca820bb 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -58,7 +58,6 @@ export const FormBuilderField = ({
     field,
     t
   );
-  console.log({ hidden, placeholder, label, noLabel, translatedDefaultLabel });
 
   return (
     <div data-fob-field-name={field.name} className={classNames(className, hidden ? "hidden" : "")}>
@@ -126,12 +125,14 @@ const WithLabel = ({
   field,
   children,
   readOnly,
+  htmlFor,
   noLabel = false,
 }: {
   field: Partial<RhfFormField>;
   readOnly: boolean;
   children: React.ReactNode;
   noLabel?: boolean;
+  htmlFor: string;
 }) => {
   const { t } = useLocale();
 
@@ -146,7 +147,7 @@ const WithLabel = ({
           field.type !== "multiemail" &&
           field.label && (
             <div className="mb-2 flex items-center">
-              <Label className="!mb-0 flex">
+              <Label className="!mb-0 flex" htmlFor={htmlFor}>
                 <span>{field.label}</span>
                 <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
                   {!readOnly && field.required ? "*" : ""}
@@ -245,7 +246,7 @@ export const ComponentForField = ({
   }
   if (componentConfig.propsType === "text") {
     return (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           placeholder={field.placeholder}
           minLength={field.minLength}
@@ -262,7 +263,7 @@ export const ComponentForField = ({
 
   if (componentConfig.propsType === "boolean") {
     return (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           name={field.name}
           label={field.label}
@@ -277,7 +278,7 @@ export const ComponentForField = ({
 
   if (componentConfig.propsType === "textList") {
     return (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           placeholder={field.placeholder}
           name={field.name}
@@ -296,7 +297,7 @@ export const ComponentForField = ({
     }
 
     return (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           readOnly={readOnly}
           value={value as string}
@@ -314,7 +315,7 @@ export const ComponentForField = ({
       throw new Error("Field options is not defined");
     }
     return (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           placeholder={field.placeholder}
           name={field.name}
@@ -338,7 +339,7 @@ export const ComponentForField = ({
     const options = field.options;
 
     return field.options.length ? (
-      <WithLabel field={field} readOnly={readOnly} noLabel={noLabel}>
+      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
         <componentConfig.factory
           placeholder={field.placeholder}
           readOnly={readOnly}
diff --git a/packages/ui/components/test-setup.ts b/packages/ui/components/test-setup.ts
index 36cbce484274b8..30e091db62974c 100644
--- a/packages/ui/components/test-setup.ts
+++ b/packages/ui/components/test-setup.ts
@@ -8,6 +8,16 @@ vi.mock("next-auth/react", () => ({
   },
 }));
 
+vi.mock("@calcom/ui", async (originalImport) => {
+  const original = (await originalImport()) as Record<string, unknown>;
+  // Dynamic imports of Components are not supported in Vitest. So, we use the non-lazy version of the components
+  return {
+    ...original,
+    PhoneInput: original.PhoneInputNonLazy,
+    AddressInput: original.AddressInputNonLazy,
+  };
+});
+
 vi.mock("@calcom/features/ee/organizations/hooks", () => ({
   useOrgBrandingValues() {
     return {};
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index a39b2f7417535b..05b221ee705042 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -147,6 +147,9 @@ export { ShellSubHeading } from "./components/layout";
 /** ⬇️ TODO - Move these to components */
 export { default as AddressInput } from "./form/AddressInputLazy";
 export { default as PhoneInput } from "./form/PhoneInputLazy";
+export { default as PhoneInputNonLazy } from "./form/PhoneInput";
+export { default as AddressInputNonLazy } from "./form/AddressInput";
+
 export { UnstyledSelect } from "./form/Select";
 
 export {