FormCheckout Forms

---
// FormCheckout, recovered from blurr-components.pages.dev
---

<section class="fco"> <div class="fco__inner"> <div class="fco__left"> <h2 class="fco__headline">Jouw bestelling</h2> <form class="fco__form" novalidate> <fieldset class="fco__fieldset"> <legend class="fco__legend">Contactgegevens</legend> <div class="fco__row"> <div class="fco__field"> <label class="fco__label" for="fco-voornaam">Voornaam</label> <input class="fco__input" id="fco-voornaam" type="text" placeholder="Emma" required> </div> <div class="fco__field"> <label class="fco__label" for="fco-achternaam">Achternaam</label> <input class="fco__input" id="fco-achternaam" type="text" placeholder="Bakker" required> </div> </div> <div class="fco__field"> <label class="fco__label" for="fco-email">E-mail</label> <input class="fco__input" id="fco-email" type="email" placeholder="emma@bedrijf.nl" required> </div> <div class="fco__field"> <label class="fco__label" for="fco-bedrijf">Bedrijfsnaam</label> <input class="fco__input" id="fco-bedrijf" type="text" placeholder="Mijn BV"> </div> </fieldset> <fieldset class="fco__fieldset"> <legend class="fco__legend">Factuuradres</legend> <div class="fco__field"> <label class="fco__label" for="fco-straat">Straat &amp; huisnummer</label> <input class="fco__input" id="fco-straat" type="text" placeholder="Keizersgracht 123" required> </div> <div class="fco__row"> <div class="fco__field"> <label class="fco__label" for="fco-postcode">Postcode</label> <input class="fco__input" id="fco-postcode" type="text" placeholder="1234 AB" required> </div> <div class="fco__field"> <label class="fco__label" for="fco-plaats">Plaats</label> <input class="fco__input" id="fco-plaats" type="text" placeholder="Amsterdam" required> </div> </div> </fieldset> <button class="fco__btn" type="submit">Bestelling plaatsen</button> </form> </div> <aside class="fco__summary"> <h3 class="fco__summary-title">Overzicht</h3> <ul class="fco__products"> <li class="fco__product"> <span class="fco__product-name">SEO Maandpakket, Starter</span> <span class="fco__product-price">€ 449 / mnd</span> </li><li class="fco__product"> <span class="fco__product-name">Google Ads beheer</span> <span class="fco__product-price">€ 299 / mnd</span> </li> </ul> <div class="fco__divider"></div> <div class="fco__note">Facturering per e-mail. Opzegging maandelijks mogelijk.</div> </aside> </div> </section>

<style>
.fco{background:#fff;padding:4rem 1.5rem}
.fco__inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
.fco__headline{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.75rem}
.fco__form{display:flex;flex-direction:column;gap:1.5rem}
.fco__fieldset{border:1.5px solid #ececec;border-radius:10px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.fco__legend{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent, #6366f1);padding:0 .4rem}
.fco__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fco__field{display:flex;flex-direction:column;gap:.35rem}
.fco__label{font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#666}
.fco__input{padding:.65rem .9rem;border:1.5px solid #e0e0e0;border-radius:7px;font-size:.93rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fco__input:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fco__btn{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .2s;width:100%}
.fco__btn:hover{opacity:.88}
.fco__summary{background:#f6f6fb;border-radius:12px;padding:1.5rem;position:sticky;top:2rem}
.fco__summary-title{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1rem}
.fco__products{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.fco__product{display:flex;justify-content:space-between;gap:.5rem;font-size:.88rem;color: #e8e8e8}
.fco__product-name{flex:1}
.fco__product-price{font-weight:600;white-space:nowrap}
.fco__divider{height:1px;background:#ddd;margin:1rem 0}
.fco__note{font-size:.8rem;color:#888;line-height:1.5}
.fco__inner,.fco__row{grid-template-columns:1fr}
</style>