ダークモードの問い合わせフォーム

ページ上のスタイルで暗い色の問い合わせフォームです。システムフォントを使い、フォントファイルは読み込みません。

使うにはログイン

コピーする内容

このスターターは、ページ上のスタイルブロックに書いた、暗い配色の問い合わせフォームです。

フォントの並びは system-ui と Segoe UI です。スニペットはフォントファイルを読み込まず、フォントのホストも呼びません。

色はフォーム自身に指定しています。暗い背景、明るい文字、明るいボタンです。Formgong の CSS には依存しません。

このサイトのプレビューも同じ考え方で、サイト自身のスタイルシートを使っています。コピーする前にコントラストを確認できます。

送信は通常の HTML の POST です。暗い色は access_key、_lang、botcheck を変えません。

常に暗くするか、システムに従うか

最初のスニペットは常に暗い配色です。すでに暗いページで使うか、明るいページの中でもフォームを暗く保ちたいときに使ってください。

追加スニペットは既定では明るく、prefers-color-scheme: dark の中で同じ暗い色へ切り替わります。

このメディアクエリは、訪問者のシステム設定に従います。スニペットは切り替えボタンを追加しません。切り替えにはスクリプトと、保存された選択が必要だからです。

手動の切り替えが必要な場合は、サイトにすでにあるテーマの操作に任せてください。このフォームだけのために、食い違う第二の配色を足さないでください。

入力欄はフォントを継承します。@import はなく、別ドメインのスタイルシートへのリンクもありません。

配信と上限

ラベルは翻訳できます。フィールド名は name、email、phone、message のままにして、Telegram を短く保ってください。

ハニーポットは短いスタイルで、明るい配色でも暗い配色でも画面の外に残ります。

Turnstile は任意で、コメントアウトされています。サイトキーを貼るのは、フォームで Turnstile を有効にしたあとだけにしてください。

無料プランは月 300 件の送信を許可し、EU で 30 日保持し、Telegram をすぐ送り、メールは日次ダイジェストとして送ります。

運営者は Formgong です。サポートの宛先は support@formgong.com です。

プレビュー

フォームのコード

HTML

<style>
.fg-dark {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #e8eaef;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 12px;
  max-width: 32rem;
}
.fg-dark label { display: grid; gap: 4px; }
.fg-dark input, .fg-dark textarea {
  font: inherit;
  color: inherit;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 10px;
}
.fg-dark button {
  font: inherit;
  background: #e8eaef;
  color: #161b22;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
}
</style>
<form class="fg-dark" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" required></label>
  <label>電話番号 <input type="tel" name="phone" autocomplete="tel"></label>
  <label>メッセージ <textarea 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 type="submit">送信</button>
</form>

通常は明るい配色、システムのときだけ暗い配色

通常は明るい配色、システムのときだけ暗い配色

<style>
.fg-auto { font-family: system-ui, "Segoe UI", sans-serif; display: grid; gap: 12px; max-width: 32rem; }
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea, .fg-auto button { font: inherit; }
@media (prefers-color-scheme: dark) {
.fg-auto {
  font-family: system-ui, "Segoe UI", sans-serif;
  color: #e8eaef;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 12px;
  max-width: 32rem;
}
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea {
  font: inherit;
  color: inherit;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 10px;
}
.fg-auto button {
  font: inherit;
  background: #e8eaef;
  color: #161b22;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
}
}
</style>
<form class="fg-auto" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" required></label>
  <label>電話番号 <input type="tel" name="phone" autocomplete="tel"></label>
  <label>メッセージ <textarea 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 type="submit">送信</button>
</form>

よくある質問

サイトのダークテーマとぶつかりますか？

フォームは自分の背景を塗ります。暗いページでは、たいてい問題になりません。テーマがすでに入力欄を装飾している場合は、貼り付けたあとコントラストを確認してください。

ボタンにブランドの色を使えますか？

はい。スタイルブロックの中でボタンの背景を変えてください。第三者のブランド書体に合わせるためのフォントの読み込みは追加しないでください。

システムのスニペットは、明るく光ってから暗くなりますか？

最初は明るく、そのあとブラウザがメディアクエリを適用します。暗い色を選ぶ人には、二度目のリクエストなしで暗い規則が見えるはずです。

ダークモードでハニーポットは見えますか？

見えないはずです。1 ピクセルの箱で画面の外に置いてあります。フォームのスタイルを変えるときは、この規則を残してください。