New
Contact UsSimple Contact Form
A centred name, email and message form with inline validation and no chrome.
#contact#form#simple
3 frameworksBeginner
Loading…
An intro column with a response-time note beside the contact form.
<section class="mx-auto grid w-full max-w-5xl items-start gap-8 px-4 py-12 md:grid-cols-2 md:gap-12 sm:py-16">
<div class="md:pt-2">
<h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Let's talk</h2>
<p class="mt-3 text-base leading-relaxed text-gray-600 dark:text-gray-400">Whether it's a question, a project, or just feedback, drop us a line and a real person will get back to you.</p>
<p class="mt-4 inline-flex items-center gap-2 rounded-full bg-green-50 px-3 py-1 text-xs font-medium text-green-700 dark:bg-green-950 dark:text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-500" aria-hidden="true"></span>Typically replies within a day</p>
</div>
<form class="space-y-4">
<div>
<label for="ct-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input id="ct-name" name="name" type="text" autocomplete="name" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
</div>
<div>
<label for="ct-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input id="ct-email" name="email" type="email" autocomplete="email" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
</div>
<div>
<label for="ct-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="ct-message" name="message" rows="4" required class="mt-1.5 block w-full resize-y rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400"></textarea>
</div>
<button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Send message</button>
</form>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Let's talk' | Heading text for the card. |
description | string | - | Description |
note | string | - | A small qualifying line, such as what the price excludes. |
submitLabel | string | 'Send message' | Submit label |
onSubmit | (values: ContactFormValues) => void | - | Called with the form's values when it is submitted. |
className | string | - | Additional classes merged onto the root element. |
The left column pairs a headline, supporting copy and an optional `note` pill; the right holds the form. Both are props with sensible defaults. The grid collapses to one column below `md`, keeping the intro above the form in reading order.