フォーム Quick Start

CarePort 埋め込みフォームは、<div> と <script> タグの 2 行で、あなたのサイトに問い合わせフォームを追加できる機能です。ウィジェット（チャット）と同じく Shadow DOM で隔離されているため、既存サイトの CSS と干渉しません。

送信内容は CarePort のチケット・リードとして管理され、メール / Slack で通知を受け取れます。

5 分で動かす

1. フォームを作成する

CarePort 管理画面の 「フォーム」 から新規フォームを作成します。表示する項目（お名前・メールアドレスなど）や見た目は、後からカスタマイズできます。

2. 埋め込みコードを取得する

作成したフォームを開き、「埋め込み」 タブを表示します。次のような 2 行のスニペットが自動生成されます。

<div data-careport-form data-form-id="00000000-0000-0000-0000-000000000000"></div>
<script src="https://cdn.careport.app/v1/form.js" data-key="cp_live_xxxxxxxxxxxxxxxx"></script>

注意: 埋め込みコードの生成には API キーが必要です。スニペットに data-key が含まれていない場合は、まず 設定 > インテグレーション から API キーを発行してください。data-key が無いとフォームは表示されません。

3. サイトに貼り付ける

取得したスニペットを、フォームを表示したい場所に貼り付けます。

<div data-careport-form> … フォームを表示する位置に置きます
<script src=".../form.js"> … ページ内に 1 つあれば OK（</body> の直前を推奨）

4. 動作確認

ページを開くと、<div> を置いた位置に問い合わせフォームが表示されます。入力して送信すると、CarePort 管理画面のチケット / リードに届きます。

仕組み

スクリプトが読み込まれると、ページ内のすべての [data-careport-form] 要素を検出して自動でフォームをマウントします。追加の JavaScript は不要です。

Shadow DOM (closed) でレンダリングされ、ホストページの CSS と完全に分離されます
フォームの項目・文言・見た目は data-form-id をもとに API から取得されるため、管理画面で編集すれば再デプロイ不要で即反映されます
配色は colorScheme: 'auto' のとき、埋め込み先サイトの背景色を検出してライト / ダークを自動で切り替えます（カスタマイズ参照）
バンドルは IIFE 単一ファイルで、CDN（https://cdn.careport.app/v1/form.js）から配信されます

次のステップ

フレームワーク別の導入方法 — Vanilla / Next.js / React / WordPress / 複数フォーム
見た目のカスタマイズ — 配色・角丸・フォント・文言・項目
データ属性リファレンス — data-form-id などの属性と JavaScript API
アクセス解析（GA4 / GTM） — 送信成功イベントの計測・パラメータ追加
トラブルシューティング — 表示されない / スタイル / CSP