New
Contact UsSimple Contact Form
A centred name, email and message form with inline validation and no chrome.
#contact#form#simple
3 frameworksBeginner
Loading…
The contact form inside a bordered, shadowed card centred on the page.
<section class="mx-auto w-full max-w-md px-4 py-12 sm:py-16">
<div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
<h2 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">Send us a message</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">We read every message and reply within one business day.</p>
<form class="mt-6 space-y-4">
<div>
<label for="cb-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input id="cb-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="cb-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input id="cb-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="cb-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="cb-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-950">Send message</button>
</form>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Send us a message' | Heading text for the card. |
description | string | - | Description |
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. |
A self-contained card with its own border, radius and shadow that sits equally well on a plain page or a busy one. Fields, labels and the submit button are the standard accessible set; `onSubmit` is a no-op you override.