Lead Capture Form

Form collecting contact details from prospects.

html

<form class="lead lead--detailed">
  <h2 class="lead__heading">See a live demo</h2>
  <label for="lead-name">Name</label>
  <input id="lead-name" type="text" name="name" required />
  <label for="lead-email">Work email</label>
  <input id="lead-email" type="email" name="email" required />
  <div class="lead__company">
    <label for="lead-company">Company</label>
    <input id="lead-company" type="text" name="company" />
  </div>
  <button type="submit" class="lead__submit" style="background:#241430;">Request a demo</button>
</form>
<style>
.lead { font: 15px system-ui, sans-serif; color: #241430; display: flex; flex-direction: column; gap: 8px; max-width: 320px; padding: 22px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }
.lead__heading { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.lead label { font-size: 13px; font-weight: 600; }
.lead input { font: inherit; padding: 9px 11px; border: 1px solid #24143033; border-radius: 8px; }
.lead__company { display: flex; flex-direction: column; gap: 8px; }
.lead--basic .lead__company { display: none; }
.lead__submit { margin-top: 10px; border: none; color: #FAF7F2; padding: 11px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.lead__submit:hover, .lead__submit:focus-visible { opacity: .9; }
</style>

tailwind

<form class="lead-tw lead-tw--detailed font-sans text-[15px] text-[#241430] flex flex-col gap-2 max-w-[320px] p-5.5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]">
  <h2 class="m-0 mb-2 text-lg font-bold">See a live demo</h2>
  <label for="lead-tw-name" class="text-[13px] font-semibold">Name</label>
  <input id="lead-tw-name" type="text" name="name" required class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg" />
  <label for="lead-tw-email" class="text-[13px] font-semibold">Work email</label>
  <input id="lead-tw-email" type="email" name="email" required class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg" />
  <div class="lead-tw__company flex flex-col gap-2">
    <label for="lead-tw-company" class="text-[13px] font-semibold">Company</label>
    <input id="lead-tw-company" type="text" name="company" class="font-sans px-2.5 py-2 border border-[#24143033] rounded-lg" />
  </div>
  <button type="submit" class="mt-2.5 border-0 text-[#FAF7F2] p-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90" style="background:#241430;">Request a demo</button>
</form>
<style>
.lead-tw--basic .lead-tw__company { display: none; }
</style>

react

export function LeadCaptureForm({
  heading = "See a live demo",
  submitText = "Request a demo",
  fieldSet = "detailed",
  accent = "#241430",
}) {
  return (
    <form style={{ font: "15px system-ui, sans-serif", color: "#241430", display: "flex", flexDirection: "column",
      gap: 8, maxWidth: 320, padding: 22, border: "1px solid #24143022", borderRadius: 14, background: "#FAF7F2" }}>
      <h2 style={{ margin: "0 0 8px", fontSize: 19, fontWeight: 700 }}>{heading}</h2>
      <label htmlFor="lead-name" style={{ fontSize: 13, fontWeight: 600 }}>Name</label>
      <input id="lead-name" type="text" name="name" required style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8 }} />
      <label htmlFor="lead-email" style={{ fontSize: 13, fontWeight: 600 }}>Work email</label>
      <input id="lead-email" type="email" name="email" required style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8 }} />
      {fieldSet === "detailed" && (
        <>
          <label htmlFor="lead-company" style={{ fontSize: 13, fontWeight: 600 }}>Company</label>
          <input id="lead-company" type="text" name="company" style={{ font: "inherit", padding: "9px 11px", border: "1px solid #24143033", borderRadius: 8 }} />
        </>
      )}
      <button type="submit" style={{ marginTop: 10, border: "none", color: "#FAF7F2", padding: 11, borderRadius: 8,
        fontWeight: 700, cursor: "pointer", background: accent }}>{submitText}</button>
    </form>
  );
}