はじめに

Magic Form Cloud は、静的サイトに置いたHTMLフォームの送信先になるホスト型のフォームサービスです。<form action="…"> を書き換えるだけで使え、送信内容は公開中のフォーム定義でサーバー側で検証してから保存し、通知メールと自動返信を送ります。このページでは、アカウントの作成からフォームを設置して受付を確認するまでの流れを説明します。

できること

• HTMLフォームの受付: method="post" の素のHTMLフォームをそのまま受け付けます。JavaScript は不要です。
• サーバー側の検証: 必須・文字数・形式・選択肢・ファイル形式などを、公開中のフォーム定義に基づいて毎回サーバーで確認します。
• 受付データと添付ファイルの保存: 管理画面の受付一覧で確認・ダウンロードできます。
• メール: 管理者への通知メールと、送信者への自動返信を送ります。
• フォームSDK（任意）: スクリプトを1行読み込むと、送信前にサーバーと同じルールで入力チェックします。詳しくは フォームSDK を参照してください。
• API: フォーム定義の取得、JSONでの送信、管理API、デプロイAPIがあります。詳しくは API を参照してください。

利用の流れ

1. 招待からログイン

アカウントは招待制で、誰でも登録できる新規登録画面はありません。利用はサービス管理者から届く招待URLから始まります。

• 招待URLを開き、お名前・メールアドレス・パスワードを入力してアカウントを作成します。
• パスワードは英字と数字を含む12文字以上です。
• 招待URLは1回だけ使えます。有効期限（既定は24時間）を過ぎたURLや使用済みのURLは開けません。その場合は管理者に再発行を依頼してください。
• 2回目以降は https://form.magichtml.dev/login からログインします。ログイン後の管理画面は https://form.magichtml.dev/app です。
• パスワードの再設定は、サービス管理者へ連絡してください。ログイン中であれば「アカウント・API」画面から変更できます。

2. サイトを作成

管理画面（https://form.magichtml.dev/app）のサイト一覧で「＋ サイトを作成」を押し、サイト名（100文字まで）を入力します。サイトはフォームをまとめる単位で、接続元や受付データの保存期間をサイトごとに設定します。

3. 接続元（Origin）を登録

フォームを設置するWebサイトのオリジンを、サイト画面の「サイト設定・接続元」にある「許可する接続元（1行に1件）」に登録します。登録していないページからの送信は拒否されます。

• https://example.com のように、スキームとホスト（必要ならポート）だけを入力します。パスやクエリは含めません。
• https://example.com と https://www.example.com は別の接続元です。両方で使う場合は両方を登録します。
• http://localhost:8000 のような開発環境も登録できます。
• 登録できるのは20件までです。

同じ画面の「フォーム受付データの保存期間（日）」で、受付データを残す日数（1〜3650日、既定は90日）を設定します。期間を過ぎた受付は添付ファイルとともに毎日自動で削除されます。

4. フォームを作成し、項目を設定

サイト画面の「＋ フォームを作成」で、名前と識別キーを入力します。

• 識別キーは送信先URLの一部になります（例: contact）。英小文字で始まり、英小文字・数字・_・- を使えます（80文字まで）。
• 作成直後のフォームには「お名前（name）」「メールアドレス（email）」「お問い合わせ内容（message）」の3項目が必須項目として入っています。

フォーム画面の「項目・設定」で、項目、通知・自動返信、送信完了後の動作を設定し、「項目・設定の下書きを保存」を押します。項目の型とルールは 項目と入力ルール、メールは メール通知と自動返信 を参照してください。

5. 公開

フォーム画面上部の「保存済みの下書きを公開」を押すと、保存済みの下書きが公開され、送信を受け付けるようになります。公開中のフォームには「公開中」、まだ公開していないフォームには「未公開」と表示されます。

6. HTMLに設置

フォーム画面の「接続・公開履歴」に、設置に必要な情報があります。

SITE_ID はサイトごとのID（UUID）、contact はフォームの識別キーです。HTMLサンプルを貼り付けて、デザインを整えるのが手早い方法です。公開サイトのHTMLに管理用のAPIトークンを入れる必要はありません。

7. 受付一覧で確認

フォーム画面の「受付」に、受付日時・受付ID・メールの配信状況が新しい順に30件ずつ表示されます。「詳細 →」から、入力値、添付ファイルのダウンロード、送信されたメールの内容と配信状況を確認でき、配信に失敗したメールの再送もここから予約できます。受付データは詳細画面から削除することもできます。

下書きと公開版

フォームの内容は「下書き」と「公開版」に分かれています。

• 「項目・設定の下書きを保存」で保存されるのは下書きです。保存しても、公開中のフォームの動作は変わりません。
• 「保存済みの下書きを公開」を押すと、その時点の下書き（フォーム名・項目・メール設定・完了後の設定）が新しい公開版として固定されます。画面上で未保存の変更は公開されないので、先に保存してください。
• 送信の検証、保存、メールの内容は、受付時点の公開版の定義と設定で決まります。メール設定を変更した場合も、公開するまで反映されません。
• 公開版にはそれぞれID（UUID）があり、フォーム定義APIの version として返されます。
• 「接続・公開履歴」に公開履歴（直近20件）が表示されます。過去の版の「この版を公開」を押すと、その版に切り替わります。この操作で下書きは変わりません。
• 「公開停止」を押すと、フォーム定義の取得と送信ができなくなります（送信すると「フォームが見つかりません」と表示されます）。

項目を追加・削除・改名して公開したときは、設置したHTMLの name 属性も合わせて更新してください。定義にない名前の入力欄が送られると、送信は受け付けられません。

最小のHTML例

作成直後の3項目のまま公開したフォームは、次のHTMLで送信できます。SITE_ID を管理画面に表示されたサイトIDに置き換えてください。

<form action="https://form.magichtml.dev/f/SITE_ID/contact" method="post">
  <label>お名前 <input name="name"></label>
  <label>メールアドレス <input type="email" name="email"></label>
  <label>お問い合わせ内容 <textarea name="message"></textarea></label>
  <input type="text" name="_hp" tabindex="-1" autocomplete="off" hidden>
  <button>送信</button>
</form>

• name 属性はフォームの項目の識別キーと一致させます。
• _hp はスパム対策のハニーポット（人には見えない入力欄）です。
• 送信が受け付けられると、完了ページ（またはフォームで設定した移動先）に移動します。入力に誤りがあると、エラーの一覧ページが表示されます。

送信前に入力チェックをしたい場合は、<form> に data-magic-form を付けてSDKを読み込みます。

<form action="https://form.magichtml.dev/f/SITE_ID/contact" method="post" data-magic-form>
  <!-- 入力欄は上と同じ -->
</form>
<script src="https://cdn.jsdelivr.net/npm/@magichtml/form@0.1.1/magic-form.js" integrity="sha384-jSxe35HuXAjr/zPizWoeOFtWrvkIShOoXAQc6OWUyXGDtZ6OIfCaepb97ddWluev" crossorigin="anonymous" defer></script>

次に読むページ

• HTMLフォームで送信する: 送信先、name 属性、完了・エラー時の動作、制限
• フォームSDK: 送信前チェック、JSON送信モード、JavaScript API
• 項目と入力ルール: 項目の型、入力ルール、エラーメッセージ
• メール通知と自動返信: 通知先、差し込み、再送
• API: 公開API、管理API、デプロイAPI、書き出し