パブリックAPI を使って外部フォームの送信データを CMS に保存する

更新日2026年8月19日

お問い合わせフォームやアンケートフォームなど、HTML フォームから送信されたデータを Re:Earth CMS に保存する方法を説明します。パブリックAPI を使うと、APIキーやインテグレーショントークンなしでフォームの内容を CMS に投稿できます。

サンプルコード

以下は、お問い合わせフォームのサンプルコードです。名前、コメントを CMS に送信して保存します。WORKSPACE_ID などの値や、fields のキーは、自分のモデルの設定に応じて変えてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Contact</title>
</head>
<body>
  <form id="contact-form">
    <label>Name<br><input type="text" name="name" required /></label><br>
    <label>Message<br><textarea name="comment" required></textarea></label><br>
    <button type="submit">Submit</button>
  </form>

  <script>
    const WORKSPACE_ID = "<workspace_id_or_alias>";
    const PROJECT_ID = "<project_id_or_alias>";
    const MODEL_ID = "<model_id_or_key>";

    const url = `https://api.cms.reearth.io/api/p/${WORKSPACE_ID}/${PROJECT_ID}/${MODEL_ID}/items`;

    document.getElementById("contact-form").addEventListener("submit", async (e) => {
      e.preventDefault();

      const formData = new FormData(e.target);

      const body = {
        fields: {
          name: formData.get("name"),
          comment: formData.get("comment"),
        },
      };

      const resp = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(body),
      });

      if (!resp.ok) {
        const text = await resp.text();
        throw new Error(`HTTP ${resp.status}: ${text}`);
      }

      alert("Submission complete.");
      e.target.reset();
    });
  </script>
</body>
</html>

実行結果

フォームに入力して送信すると、パブリックAPI 経由でアイテムが作成されます。

name・message の入力欄と Submit ボタンを持つお問い合わせフォーム

CMS の Content 画面を確認すると、送信内容が下書きステータスのアイテムとして保存されています。

Re:Earth CMS の Content 画面。フォームから送信された内容が下書きステータスのアイテムとして表示されている

アイテムを公開したい場合は、CMS の管理画面から公開操作を行うか、インテグレーションAPI を使ってデータを公開するを参照してください。

エンドポイントの詳細な仕様については、パブリックAPIリファレンスを参照してください。