フレームワーク別の導入

Vanilla HTML / Next.js / React / WordPress への CarePort フォーム導入方法

CarePort フォームは、フォームを表示する位置に置く <div> と、ページに 1 つ読み込む <script> の組み合わせで動作します。

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

<!-- ページに 1 つだけ。</body> 直前を推奨 -->
<script src="https://cdn.careport.app/v1/form.js" data-key="cp_live_xxxx"></script>

Vanilla HTML

表示したい位置に <div> を、</body> の直前に <script> を置きます。

<!doctype html>
<html lang="ja">
  <body>
    <h1>お問い合わせ</h1>

    <!-- ここにフォームが表示される -->
    <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>
  </body>
</html>

Next.js (App Router)

フォームを表示するページに <div> を置き、<script> は next/script で読み込みます。SSR 環境では <script> を直書きせず必ず next/script を使ってください。

// app/contact/page.tsx
import Script from 'next/script';

export default function ContactPage() {
  return (
    <>
      <h1>お問い合わせ</h1>

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

      <Script
        src="https://cdn.careport.app/v1/form.js"
        strategy="afterInteractive"
        data-key="cp_live_xxxxxxxxxxxxxxxx"
      />
    </>
  );
}

ヒント: data-careport-form / data-form-id は JSX でもそのまま属性として書けます（data-* は React で許可されています）。スクリプト読み込み後の自動初期化でマウントされます。

Next.js (Pages Router)

// pages/contact.tsx
import Script from 'next/script';

export default function Contact() {
  return (
    <>
      <div
        data-careport-form
        data-form-id="00000000-0000-0000-0000-000000000000"
      />
      <Script
        src="https://cdn.careport.app/v1/form.js"
        strategy="afterInteractive"
        data-key="cp_live_xxxxxxxxxxxxxxxx"
      />
    </>
  );
}

React (Vite / CRA)

<div> を JSX に置き、スクリプトは index.html に置くのが最もシンプルです。

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

// ContactForm.tsx
export function ContactForm() {
  return (
    <div
      data-careport-form
      data-form-id="00000000-0000-0000-0000-000000000000"
    />
  );
}

クライアントルーティングでフォームのあるページに後から遷移してくる場合（<div> が DOM に動的追加される場合）は、JavaScript API の CarePortForm.mount() で明示的にマウントできます。

import { useEffect, useRef } from 'react';

export function ContactForm() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 動的に追加された要素を手動マウント
    if (ref.current) {
      (window as any).CarePortForm?.mount(ref.current);
    }
  }, []);

  return (
    <div
      ref={ref}
      data-careport-form
      data-form-id="00000000-0000-0000-0000-000000000000"
    />
  );
}

補足: 各要素は二重マウントを防ぐため、一度マウントされると内部フラグが立ちます。mount() を複数回呼んでも安全です。

WordPress

「カスタム HTML」ブロック（または固定ページの HTML 編集）に <div> を貼り付け、<script> はテーマのフッター（footer.php の </body> 直前）またはヘッダー / フッター挿入プラグインで 1 回だけ読み込みます。

<!-- 投稿・固定ページのカスタム HTML ブロック -->
<div data-careport-form data-form-id="00000000-0000-0000-0000-000000000000"></div>

<!-- テーマフッター or 挿入プラグインに 1 回だけ -->
<script src="https://cdn.careport.app/v1/form.js" data-key="cp_live_xxxxxxxxxxxxxxxx"></script>

1 ページに複数のフォームを置く

<script> はページに 1 つで十分です。ページ内のすべての [data-careport-form] を自動検出してマウントするため、<div> を複数置けば複数フォームを表示できます。data-form-id を変えれば別々のフォームを出し分けられます。

<div data-careport-form data-form-id="11111111-1111-1111-1111-111111111111"></div>
<!-- 中略 -->
<div data-careport-form data-form-id="22222222-2222-2222-2222-222222222222"></div>

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

どの方法を選ぶか

状況	推奨
静的サイト・LP・WordPress	`<div>` + `<script>` 直書き（Vanilla）
Next.js	`<div>` 直書き + `next/script`（`strategy="afterInteractive"`）
React SPA で固定表示	`index.html` にスクリプト + JSX に `<div>`
React SPA で動的にページ遷移してくる	`CarePortForm.mount()` で手動マウント