見た目のカスタマイズ
配色・角丸・フォント・文言・項目など、フォームの外観と内容を細かく調整する
フォームの見た目と内容は、すべて管理画面のフォームビルダーで設定します。data-form-id をもとに API から読み込まれるため、編集して保存すれば、サイトを再デプロイしなくても即座に反映されます。
ビルダーは左に設定パネル、右にライブプレビューが並び、設定タブは次の 4 つに分かれています。
| タブ | 役割 |
|---|---|
| 基本 | フォーム名・URL スラッグ・表示項目・送信後の動作 |
| デザイン | 配色・角丸・フォント |
| 文言 | タイトル・説明・ボタン文言・送信完了メッセージなど |
| スパム対策 | reCAPTCHA v3 の有効化 |
基本タブ
表示項目（フィールド）
フォームに表示する項目を選びます。各項目は 表示 / 非表示、必須 / 任意、ラベル、プレースホルダー を個別に設定できます。
| 項目キー | 既定ラベル | 既定の状態 |
|---|---|---|
name | お名前 | 表示・必須 |
email | メールアドレス | 表示・必須 |
phone | 電話番号 | 非表示 |
company | 会社名 | 非表示 |
subject | 件名 | 表示・任意 |
message | メッセージ | 表示・必須 |
補足: 項目はテンプレート化された 6 種類から選ぶ方式です（自由な項目追加は現バージョンでは非対応）。
送信後の動作
| 設定 | 説明 |
|---|---|
チケットとして管理（create_ticket） | 送信内容をチケット化し、チケット一覧で対応・通知を管理します |
リードとして管理（create_lead） | 送信者をリードとして記録します |
リダイレクト URL（redirect_url） | 送信完了後に指定 URL へ遷移させます（サンクスページなど）。空の場合は完了メッセージを表示します |
デザインタブ
配色モード（最重要）
colorScheme は「埋め込み先サイトにどう馴染ませるか」を決める最も重要な設定です。
| モード | 値 | 挙動 |
|---|---|---|
| サイトに従う（推奨） | auto | 埋め込み先の背景色を検出してライト / ダークを自動切替。背景色が取得できない場合は OS 設定（prefers-color-scheme）にフォールバック |
| ライト固定 | light | 常に明るいテーマで表示 |
| ダーク固定 | dark | 常に暗いテーマで表示 |
| 背景透過 | transparent | 背景を透過（ライトベースの文字色）。サイトの背景の上に直接溶け込ませたいとき |
仕組み（auto の背景検出）: フォーム要素から最大 10 階層まで親をたどり、最初に見つかった不透明な背景色の相対輝度（WCAG 定義）で明暗を判定します。透明な親はスキップされます。
アクセントカラー
accentColor（既定 #635BFF）。送信ボタンやフォーカスリングなどに使われる主役の色です。ブランドカラーに合わせてください。
パレット（地色）
ライト用と、ダーク用（dark / auto(暗時) で使用）の 2 系統を個別に設定できます。
| 項目 | 説明 | ライト既定 | ダーク既定 |
|---|---|---|---|
surfaceColor | カードの背景色 | #FFFFFF | #1E2130 |
textColor | 本文の文字色 | #1A1D27 | #F3F4F6 |
mutedColor | 補助テキスト（プレースホルダー等）の色 | #9CA3AF | #9CA3AF |
borderColor | 枠線の色 | #E5E7EB | #374151 |
ヒント: ダークパレットを未設定のまま
dark/auto(暗) を使うと、既定のダークパレットにフォールバックします。
角丸
要素ごとに角丸を指定できます。個別値が未指定の場合は共通の radius にフォールバックします。
| 項目 | 対象 | 既定 |
|---|---|---|
radius | 共通フォールバック | 12px |
cardRadius | フォームカード | 12px |
inputRadius | 入力欄 | 8px |
buttonRadius | 送信ボタン | 10px |
例:
buttonRadiusを999pxにするとピル型（丸い）ボタンになります。サイトのデザインに合わせて、四角め（4px）〜丸め（20px）まで調整してください。
フォント
| 項目 | 説明 | 既定 |
|---|---|---|
fontFamily | フォント。inherit（サイトに合わせる）を含むキュレート済み候補から選択 | inherit |
fontSize | 基本フォントサイズ | 14px |
titleWeight | 見出し（タイトル）の太さ：normal / medium / semibold / bold | bold |
fontFamily の選択肢には、サイトに合わせる（inherit）・システム標準・ゴシック体 / 明朝体・游ゴシック / 游明朝・ヒラギノ角ゴ・Noto Sans JP / Noto Serif JP などが含まれます。
補足:
fontFamily: 'inherit'の場合、Shadow DOM アタッチ前にホスト要素のfont-familyを読み取り、サイトのフォントを引き継ぎます。
文言タブ
カード内に表示するテキストを設定します。
| 項目 | 説明 | 既定 |
|---|---|---|
title | フォームのタイトル | お問い合わせ |
description | タイトル下の説明文 | （空） |
submitLabel | 送信ボタンの文言 | 送信する |
success_message | 送信完了後に表示するメッセージ | お問い合わせを受け付けました。担当者からご連絡いたします。 |
footnote | フォーム下部の注記（任意） | （空） |
privacy_url | プライバシーポリシーへのリンク URL（任意） | （空） |
補足:
redirect_url（基本タブ）を設定している場合は、送信後リダイレクトが優先され、success_messageは表示されません。
スパム対策タブ
reCAPTCHA v3 を有効化すると、送信のたびに人間らしさのスコアが検証されます。
- 低スコアの送信はサーバー側で
spam判定となり、受信箱ではspamステータスに振り分けられます（チケット / リード化や通知はスキップ） - スコアのしきい値はサーバー側で固定（0.5）で、画面からの調整は不要です
- 検証はフェイルオープン設計（reCAPTCHA に到達できない場合は送信をブロックしません）
詳しくは reCAPTCHA タブの説明とトラブルシューティングを参照してください。
言語
フォーム UI（バリデーションメッセージ等）の言語は、埋め込みスクリプトの data-lang 属性で切り替えます（ja / en、既定 ja）。詳細はデータ属性リファレンスを参照してください。