Call to action — Contact form

A contact invitation and alternate email beside a compact form card. Use it when readers need to send a short enquiry.

ReactHTML

1440 × 900

Component.tsx32 lines

export default function CtaContactForm() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto grid max-w-6xl gap-12 px-6 py-16 sm:py-24 md:grid-cols-2 md:gap-16">
        <div>
          <p className="flex items-center gap-2 text-sm font-medium text-neutral-500">
          <span aria-hidden="true" className="size-2 rounded-full border border-neutral-900 bg-neutral-900 forced-colors:border-[CanvasText] forced-colors:bg-[CanvasText]"></span>
          Taking new projects
        </p>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that invites a short enquiry</h2>
        <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that describes what to include and who will help with the next step.</p>
        <p className="mt-8 text-base text-neutral-600">Alternative contact for a short question</p>
        <a href="mailto:name@example.com" className="mt-2 inline-block font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">name@example.com</a>
      </div>
      <form action="#" method="get" className="rounded-lg border border-neutral-200 bg-white p-6">
        <div>
          <label htmlFor="cta-contact-form-email" className="mb-2 block text-sm font-medium">Email</label>
          <input id="cta-contact-form-email" name="email" type="email" autoComplete="email" required placeholder="name@example.com" className="h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        </div>
        <div className="mt-6">
          <label htmlFor="cta-contact-form-message" className="mb-2 block text-sm font-medium">Message</label>
          <textarea id="cta-contact-form-message" name="message" required rows={4} placeholder="A short description of what you need" aria-describedby="cta-contact-form-hint" className="min-h-32 w-full resize-y rounded-md border border-neutral-300 bg-white p-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"></textarea>
        </div>
        <div className="mt-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <p id="cta-contact-form-hint" className="text-sm text-neutral-500">Reply-time hint that sets expectations</p>
          <button type="submit" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 shrink-0">Send enquiry</button>
        </div>
      </form>
    </div>
  </section>
  )
}

Pattern notes

When to use: Use for a short enquiry with an alternative contact path. Choose cta-email-signup for a one-field subscription. Variations: add a name field, replace the status with reply hours, or link to a scheduling page beside the form.
Hierarchy: The section headline is 30px, increasing to 36px at 640px, semibold with tracking-tight and balanced wrapping. Read visible availability text, h2, 18px lede, alternate email link, then labelled Email and Message controls and submit. Slots: availability 5 words, title 8, lede 25, alternate contact 10, reply hint 10, submit 3. The status dot is decorative and the textarea references the hint.
Responsive: Below 768px the card follows the copy with a 48px gap and submit is full width. At 768px columns begin. Below 1024px hint and button stack with 16px gaps; from 1024px they share a justified row. Heading and vertical section padding step at 640px.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. At 768px two equal columns use a 64px gap. The left status line combines an 8px dot with 14px text and an 8px gap, followed by heading after 16px, lede after 24px and alternate contact after 32px. A rounded-lg bordered white form card has 24px padding and 24px field gaps. Its textarea is at least 128px tall. The reply hint and submit row follows by 24px.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. The email link changes neutral-900 to neutral-600 on hover. Email input is 40px tall; textarea uses 12px padding, rounded-md and neutral-300 border, with vertical resizing. Both are required and use native validation. The status has visible text and a forced-colors border.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Status dot + availability       ┌──────────────────────────┐ │
│ Heading for the next step       │Email                     │ │
│ Supporting lede                 │[Email address          ] │ │
│                                 │Message                   │ │
│ Alternative contact             │[Message                ] │ │
│ [name@example.com]              │[                       ] │ │
│                                 │Reply hint  [Send]        │ │
│                                 └──────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious

Call to action — Contact form

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Card with image

Call to action — Centred with actions