新着
お問い合わせSimple Contact Form
A centred name, email and message form with inline validation and no chrome.
#contact#form#simple
3 個のフレームワーク初級
Loading…
A compact two-field email and message form with no card or chrome.
<!-- Two fields, no card, no chrome. Still a real <label> per field. -->
<section class="mx-auto w-full max-w-sm px-4 py-10">
<h2 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">Drop us a line</h2>
<form class="mt-4 space-y-3">
<div>
<label for="cn-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input id="cn-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="cn-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="cn-message" name="message" rows="3" 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-gray-900 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-white dark:focus-visible:ring-offset-gray-900">Send</button>
</form>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | 'Drop us a line' | カードの見出しテキスト。 |
submitLabel | string | 'Send' | Submit label |
onSubmit | (values: MinimalContactValues) => void | - | 送信時にフォームの値とともに呼ばれます。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Just email and message, each with a real `<label>` and native validation, plus a neutral dark/light submit button. Ideal for a footer, a sidebar or a modal where a full contact form would be too heavy.