diff --git a/frontend/app/contact/components/ContactForm.tsx b/frontend/app/contact/components/ContactForm.tsx
new file mode 100644
index 000000000000..b7c3b6f27e59
--- /dev/null
+++ b/frontend/app/contact/components/ContactForm.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { LuChevronRight } from "react-icons/lu";
+
+import Button from "@/lib/components/ui/Button";
+
+export const ContactForm = (): JSX.Element => {
+  const [email, setEmail] = useState<string>("");
+  const [message, setMessage] = useState<string>("");
+
+  const handleSubmit = () => {
+    console.log("submitting", email, message);
+  };
+
+  return (
+    <form className="flex flex-col gap-5 justify-stretch w-[80vw] max-w-xl">
+      <fieldset className="grid grid-cols-3 gap-2 w-full gap-y-5">
+        <label className="font-bold" htmlFor="email">
+          Work Email<sup>*</sup>:
+        </label>
+        <input
+          type="email"
+          id="email"
+          value={email}
+          onChange={(ev) => setEmail(ev.target.value)}
+          placeholder="jane@example.com"
+          className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
+          required
+        />
+        <label className="font-bold" htmlFor="message">
+          Question<sup>*</sup>:
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          rows={3}
+          onChange={(ev) => setMessage(ev.target.value)}
+          placeholder="How can we help you?"
+          className="col-span-2 bg-[#FCFAF6] rounded-md p-2"
+          required
+        ></textarea>
+      </fieldset>
+
+      <Button
+        onClick={handleSubmit}
+        className="self-end rounded-full bg-primary flex items-center justify-center gap-2 border-none hover:bg-primary/90"
+      >
+        Contact
+        <LuChevronRight size={24} />
+      </Button>
+    </form>
+  );
+};
diff --git a/frontend/app/contact/components/index.ts b/frontend/app/contact/components/index.ts
new file mode 100644
index 000000000000..a4415af406b6
--- /dev/null
+++ b/frontend/app/contact/components/index.ts
@@ -0,0 +1 @@
+export * from "./ContactForm";
diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index c3a5bda54139..dd73558a036d 100644
--- a/frontend/app/contact/page.tsx
+++ b/frontend/app/contact/page.tsx
@@ -2,6 +2,9 @@
 import { useFeatureIsOn } from "@growthbook/growthbook-react";
 import { redirect } from "next/navigation";
 
+import Card from "@/lib/components/ui/Card";
+
+import { ContactForm } from "./components";
 import {
   FooterSection,
   HomeHeader,
@@ -20,7 +23,12 @@ const ContactSalesPage = (): JSX.Element => {
       <HomeHeader color="black" />
 
       <main className="relative flex flex-col items-center">
-        TODO: The Form!
+        <Card className="flex flex-col items-center mb-2 p-10">
+          <h1 className="text-4xl font-semibold mb-10 text-center">
+            Speak to our <span className="text-primary">Sales team</span>
+          </h1>
+          <ContactForm />
+        </Card>
         <HomeSection bg="bg-[#FCFAF6]">
           <TestimonialsSection />
         </HomeSection>