データ属性リファレンス

CarePort フォームの div / script タグで指定できる data-* 属性と JavaScript API

CarePort フォームは、フォームを表示する <div> と、ページに 1 つ読み込む <script> の 2 要素で構成されます。それぞれに指定できる data-* 属性は次のとおりです。

`<div>`（フォーム表示要素）の属性

属性	必須	説明
`data-careport-form`	✅	フォームのマウント対象であることを示すマーカー。値は不要
`data-form-id`	✅	表示するフォームの ID（UUID）。管理画面のフォームごとに発行されます
`data-api-url`	—	API サーバー URL の上書き（通常は不要）

<div data-careport-form data-form-id="00000000-0000-0000-0000-000000000000"></div>

補足: data-form-id は <div> に付けるのが基本ですが、見つからない場合は <script> 側の data-form-id がフォールバックとして使われます。複数フォームを出し分けるときは必ず各 <div> に付けてください。

`<script>`（ローダー）の属性

属性	必須	説明	既定
`data-key`	✅	API キー（`cp_live_` または `cp_test_` で始まる）。この属性がないとフォームは表示されません	—
`data-lang`	—	フォーム UI の言語（`ja` / `en`）	`ja`
`data-api-url`	—	API サーバー URL の上書き（通常は不要）	`https://api.careport.app`
`data-ga-event`	—	送信成功時に発火する GA4 / GTM のイベント名	`careport_form_submit`
`data-ga-params`	—	イベントに追加する任意パラメータ（JSON・最大 22 個）	—
`data-ga`	—	`off` を指定すると送信時のアクセス解析イベントを無効化	（有効）

<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-lang="ja"
></script>

アクセス解析: 送信が成功すると、設置先サイトの GA4 / GTM へ自動でイベントを発火します（CarePort 側での計測 ID 設定は不要）。data-ga-event / data-ga-params / data-ga は <div> 側にも指定でき、その場合は <div> 側が優先されます。詳しくはアクセス解析（GA4 / GTM）を参照してください。

重要: フォームの見た目（色・角丸・フォント）や項目・文言は data 属性では指定しません。これらは管理画面のフォームビルダーで設定し、data-form-id をもとに読み込まれます。詳しくは見た目のカスタマイズを参照してください。

完全な例

<!-- フォームを表示したい位置 -->
<div data-careport-form data-form-id="00000000-0000-0000-0000-000000000000"></div>

<!-- ページに 1 つ -->
<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-lang="ja"
></script>

JavaScript API

スクリプト読み込み後、グローバルに window.CarePortForm が公開されます。SPA でフォーム要素を動的に DOM へ追加する場合に使います。

CarePortForm.mount(element)

指定した要素にフォームをマウントします。ページ読み込み時の自動初期化（すべての [data-careport-form] を検出）の後で追加された要素を、明示的にマウントしたいときに使用します。

const el = document.querySelector('[data-careport-form]');
if (el) {
  window.CarePortForm.mount(el);
}

API キー・言語・API URL は、ページ内の <script src=".../form.js"> の data 属性から自動で引き継がれます
各要素は二重マウントを防ぐ内部フラグを持つため、mount() を複数回呼んでも安全です（既にマウント済みの要素は無視されます）

CarePortForm.version

フォームウィジェットのバージョン文字列。

console.log(window.CarePortForm.version);

自動初期化のタイミング: スクリプトは DOMContentLoaded 時（既に読み込み済みなら即時）に、ページ内のすべての [data-careport-form] を検出してマウントします。静的に配置されたフォームは API 呼び出し不要で自動表示されます。