トラブルシューティング

フォームが表示されない

data-key が無い / 不正

<script> に data-key（cp_live_ または cp_test_ で始まる API キー）が付いていないと、フォームは表示されません。ブラウザの開発者ツールのコンソールに次のエラーが出ていないか確認してください。

[CarePort Form] data-key is required on the <script> element. Add data-key="cp_live_xxx" to the script tag.

API キーは管理画面の 設定 > インテグレーション で発行できます。

data-form-id が無い

フォーム表示要素に data-form-id が無い場合、次のエラーが出ます。

[CarePort Form] data-form-id is required on the host element

<div data-careport-form data-form-id="..."> の形で UUID を指定してください。

<div data-careport-form> がページに無い

<script> だけ貼っても、表示先の <div data-careport-form> がページに無いとフォームは描画されません。表示したい位置に <div> が置かれているか確認してください。

<div> を動的に追加している（SPA）

クライアントルーティングで後からフォーム要素を DOM に追加している場合、ページ読み込み時の自動初期化に間に合わないことがあります。CarePortForm.mount() で明示的にマウントしてください。

フォームが非公開（停止）になっている

管理画面でフォームが有効になっているか確認してください。停止中のフォームは表示されません。

見た目の崩れ・スタイル干渉

フォームは Shadow DOM (closed) 内に描画されるため、原則としてホストページの CSS の影響を受けません。逆に、サイト側の CSS でフォーム内部のスタイルを上書きすることもできません。見た目を変えたい場合はフォームビルダーのデザインタブで調整してください。

• 色が背景に溶けて見えない / 浮いて見える → 配色モードを確認してください。auto は親要素の背景色から明暗を判定します。意図と異なる場合は light / dark を固定するか、パレットを調整します
• フォントがサイトと合わない → fontFamily が inherit だとホストのフォントを継承します。特定フォントを使いたい場合はビルダーで明示的に選択してください

送信できない / スパム扱いになる

• 送信が spam 扱いになる → reCAPTCHA v3 を有効にしている場合、低スコアの送信は spam ステータスに振り分けられます。受信箱の spam を確認してください。正規の送信が誤判定される場合は、まず reCAPTCHA を一時的に無効化して切り分けます
• 通知が来ない → 送信が spam 判定されていないか、通知設定（メール / Slack）が有効かを確認してください

CSP（Content Security Policy）

サイトに CSP を設定している場合、次の許可が必要です。

reCAPTCHA v3 を有効にしている場合は、追加で次も許可してください。

それでも解決しない場合

ブラウザの開発者ツールの Console と Network タブを開き、form.js の読み込み（200 か）と API 呼び出しの状態、[CarePort Form] で始まるエラーを確認してください。これらの情報を添えてサポートにお問い合わせいただくと、調査がスムーズです。