From 3c39fa489572e1994a85cd825373e845a9f91a65 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Wed, 18 Mar 2026 13:42:20 -0400
Subject: [PATCH] Refactor FormLayout as styles only

---
 site/src/assets/styles/form.css                      | 12 ++++++++++++
 site/src/assets/styles/styles.css                    |  1 +
 .../pages/museum/gift-shop/checkout/payment.astro    |  3 +--
 .../pages/museum/gift-shop/checkout/shipping.astro   |  5 ++---
 site/src/pages/museum/login/index.astro              |  7 +++----
 site/src/pages/museum/register.astro                 |  5 ++---
 site/src/pages/museum/volunteer/index.astro          |  5 ++---
 7 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 site/src/assets/styles/form.css

diff --git a/site/src/assets/styles/form.css b/site/src/assets/styles/form.css
new file mode 100644
index 00000000..52e56f3e
--- /dev/null
+++ b/site/src/assets/styles/form.css
@@ -0,0 +1,12 @@
+main form:not([method]) {
+  > * {
+    display: block;
+    margin: 1rem 0;
+  }
+
+  & select,
+  & textarea,
+  & input:not([type="checkbox"], [type="radio"]) {
+    display: block;
+  }
+}
diff --git a/site/src/assets/styles/styles.css b/site/src/assets/styles/styles.css
index 6af51e65..e1581313 100644
--- a/site/src/assets/styles/styles.css
+++ b/site/src/assets/styles/styles.css
@@ -2,6 +2,7 @@
 @import url(fonts.css);
 @import url(root-and-body.css);
 @import url(headings.css);
+@import url(form.css);
 @import url(utilities.css);
 @import url(content-layout.css);
 @import url(form-elements.css);
diff --git a/site/src/pages/museum/gift-shop/checkout/payment.astro b/site/src/pages/museum/gift-shop/checkout/payment.astro
index c3500827..dde87b1f 100644
--- a/site/src/pages/museum/gift-shop/checkout/payment.astro
+++ b/site/src/pages/museum/gift-shop/checkout/payment.astro
@@ -1,7 +1,6 @@
 ---
 import Fixable from "@/components/Fixable.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import ShopLayout from "@/layouts/ShopLayout.astro";
 
 /** @breaklocation Gift Shop */
@@ -26,7 +25,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
      */
   }
   <Fixable
-    as={FormLayout}
+    as="form"
     broken={{ action: "../confirmation/" }}
     fixed={{ action: "../review/" }}
   >
diff --git a/site/src/pages/museum/gift-shop/checkout/shipping.astro b/site/src/pages/museum/gift-shop/checkout/shipping.astro
index 876d12c5..fa55673a 100644
--- a/site/src/pages/museum/gift-shop/checkout/shipping.astro
+++ b/site/src/pages/museum/gift-shop/checkout/shipping.astro
@@ -1,6 +1,5 @@
 ---
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import ShopLayout from "@/layouts/ShopLayout.astro";
 
 /** @breaklocation Gift Shop */
@@ -10,7 +9,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
 <ShopLayout title="Checkout">
   <h1>Checkout</h1>
   <FixableRegion><h2 slot="fixed">Shipping Information</h2></FixableRegion>
-  <FormLayout action="../payment/">
+  <form action="../payment/">
     <div id="error" class="error" role="alert" hidden></div>
     <input name="name" placeholder="Recipient Name" />
     <input name="street1" placeholder="Street Address" />
@@ -19,7 +18,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
     <input name="state" placeholder="State" />
     <input name="zip" placeholder="ZIP Code" />
     <button>Continue</button>
-  </FormLayout>
+  </form>
 </ShopLayout>
 
 <script>
diff --git a/site/src/pages/museum/login/index.astro b/site/src/pages/museum/login/index.astro
index 4fe5dffa..42fc89df 100644
--- a/site/src/pages/museum/login/index.astro
+++ b/site/src/pages/museum/login/index.astro
@@ -1,7 +1,6 @@
 ---
 import Fixable from "@/components/Fixable.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 import { museumBaseUrl } from "@/lib/constants";
 
@@ -12,7 +11,7 @@ import { museumBaseUrl } from "@/lib/constants";
 <Layout title="Sign In">
   <h1>Sign In</h1>
   <p id="registered" hidden>Registration successful. Please sign in below.</p>
-  <FormLayout class="form" action={`${museumBaseUrl}`}>
+  <form action={`${museumBaseUrl}`}>
     <Fixable
       as="p"
       id="error"
@@ -49,7 +48,7 @@ import { museumBaseUrl } from "@/lib/constants";
       </Fragment>
     </FixableRegion>
     <button>Submit</button>
-  </FormLayout>
+  </form>
   <p id="register">
     Don't have an account?
     <a href="../register/">Register</a>
@@ -106,7 +105,7 @@ import { museumBaseUrl } from "@/lib/constants";
 </script>
 
 <style>
-  .form {
+  form {
     margin: 10vh 0;
   }
 
diff --git a/site/src/pages/museum/register.astro b/site/src/pages/museum/register.astro
index c57e981f..8c24e283 100644
--- a/site/src/pages/museum/register.astro
+++ b/site/src/pages/museum/register.astro
@@ -1,6 +1,5 @@
 ---
 import Fixable from "@/components/Fixable.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 
 /** @breaklocation Register & Sign In */
@@ -9,7 +8,7 @@ import Layout from "@/layouts/Layout.astro";
 
 <Layout title="Create Account">
   <h1>Create Account</h1>
-  <FormLayout action="../login/">
+  <form action="../login/">
     <h2>Account Information</h2>
     <Fixable
       as="p"
@@ -142,7 +141,7 @@ import Layout from "@/layouts/Layout.astro";
       <input name="captcha" class="captcha" />
     </label>
     <button>Submit</button>
-  </FormLayout>
+  </form>
 </Layout>
 
 <script>
diff --git a/site/src/pages/museum/volunteer/index.astro b/site/src/pages/museum/volunteer/index.astro
index 0ea937a4..69bec3a5 100644
--- a/site/src/pages/museum/volunteer/index.astro
+++ b/site/src/pages/museum/volunteer/index.astro
@@ -1,7 +1,6 @@
 ---
 import ConditionalParent from "@/components/ConditionalParent.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getMode } from "@/lib/mode";
 
@@ -21,7 +20,7 @@ const isBroken = getMode() === "broken";
   <p id="sign-in-cta" hidden>
     Interested in volunteering? Please <a href="../login/">sign in</a> to apply.
   </p>
-  <FormLayout id="volunteer-form" action="thank-you/" hidden>
+  <form id="volunteer-form" action="thank-you/" hidden>
     <p>
       If you are interested in volunteering, please fill out the form below.
     </p>
@@ -146,7 +145,7 @@ const isBroken = getMode() === "broken";
       </ConditionalParent>
     </ConditionalParent>
     <button type="submit">Submit</button>
-  </FormLayout>
+  </form>
 </Layout>
 
 <script>