Tailwindの問い合わせフォーム

ユーティリティクラスだけです。ページに Tailwind が既にある必要があります。このスニペットは CDN スクリプトもフォントも足しません。

使うにはログイン

コピーする内容

このスターターは、Tailwind のユーティリティクラスでマークアップした問い合わせフォームです。Formgong への通常の POST であることは変わりません。

スニペットは Tailwind を読み込みません。CDN スクリプトも追加せず、フォントも読み込みません。

ページかビルドに、すでに Tailwind が含まれている必要があります。クラスが無い場合でもフォームは送信されますが、スタイルのない見た目になります。

このページのプレビューは、欄が見えるように Formgong の CSS で描いています。Tailwind の描画ではありません。

見えるラベルはページの言語に従います。フィールド名は Telegram 向けに name、email、phone、message のままです。

クラスとダーク用の追加

入力欄は枠線、余白、小さな角丸を使います。ボタンは暗い背景と明るい文字です。独自のフォントファミリーはありません。

ダウンロードしたフォントを指すクラスは追加しないでください。サイトで既に使っているフォントで足ります。

追加スニペットは、文字、枠線、背景に dark: クラスを足します。Tailwind のビルドにダークモードがあるまで、これらは何もしません。

Tailwind のダークモードは、システムに従うことも、html 要素のクラスに従うこともあります。このテンプレートはそれを設定しません。クラスを足すだけです。

ダークモードを使わない場合は、最初のスニペットをコピーし、追加のほうは使わなくて構いません。

ハニーポットは Tailwind のクラスではなく、短い style 属性で視覚的に隠します。Tailwind が無くても隠れたままです。

HTML スターターと同じ送信

action、method、access_key、_lang、botcheck は素の HTML スターターと一致します。Tailwind はリクエストを変えません。

Turnstile は、有効にしてサイトキーを貼るまでコメントの中に残ります。プレースホルダ YOUR_TURNSTILE_SITE_KEY は本物のキーではありません。

無料プランでは Telegram はすぐ届き、メールは日次ダイジェストです。送信は 30 日残ります。月あたりの枠は 300 件です。

fk_your_access_key をダッシュボードのキーに置き換えるか、サインインした状態でこのページのボタンを使ってください。

運営者は Formgong です。製品についての質問は support@formgong.com へお送りください。

プレビュー

フォームのコード

HTML

<!-- このマークアップは、ページに Tailwind が既にある前提です。Tailwind も CDN もフォントも読み込みません。 -->
<form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label class="grid gap-1 text-sm"><span class="font-medium">お名前</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="text" name="name" autocomplete="name" required></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">メールアドレス</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="email" name="email" autocomplete="email" required></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">電話番号</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="tel" name="phone" autocomplete="tel"></label>
  <label class="grid gap-1 text-sm"><span class="font-medium">メッセージ</span><textarea class="w-full rounded-md border border-neutral-300 px-3 py-2" name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
任意です。このフォームで Turnstile をオンにしてから、このコメント記号を外し、サイトキーを貼ってください。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ja"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">送信</button>
</form>

Tailwind の dark: クラスを付けた同じ項目

Tailwind の dark: クラスを付けた同じ項目

<!-- このマークアップは、ページに Tailwind が既にある前提です。Tailwind も CDN もフォントも読み込みません。 -->
<form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4 dark:text-neutral-100">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">お名前</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="text" name="name" autocomplete="name" required></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">メールアドレス</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="email" name="email" autocomplete="email" required></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">電話番号</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="tel" name="phone" autocomplete="tel"></label>
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">メッセージ</span><textarea class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
任意です。このフォームで Turnstile をオンにしてから、このコメント記号を外し、サイトキーを貼ってください。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ja"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">送信</button>
</form>

よくある質問

Lovable や Bolt で動きますか？

多くの場合は動きます。それらのツールはすでに Tailwind を使っているためです。このハブの AI ビルダー向けスターターは、同じ規則を文章で述べたプロンプトです。

このスニペットで CDN から Tailwind を読み込めますか？

このテンプレートではそうしません。CDN スクリプトは第三者の依存であり、アプリがすでに Tailwind をビルドしているなら不要です。

プレビューが自分の色を使わないのはなぜですか？

プレビューは、あなたの Tailwind のビルドを見ることができません。Tailwind のあるページへコードをコピーすると、そこでユーティリティクラスが適用されます。

dark: クラスはページを強制的に暗くしますか？

いいえ。Tailwind のダークモードが有効なときだけ適用されます。別のダークモード用スターターは、Tailwind のないページ向けの素の CSS です。