HTMLフォームで送信する

Magic Form Cloud は、JavaScript を使わない素のHTMLフォームの送信（ネイティブPOST）を受け付けます。送信内容は公開中のフォーム定義でサーバー側で検証され、受け付けると完了ページか指定した移動先へ、受け付けられないとエラーページへ移動します。このページでは、送信先URL、name 属性の付け方、予約フィールド、接続元の確認、完了・エラー時の動作、各種制限を説明します。

送信先URL

• SITE_ID はサイトのID、contact はフォームの識別キーです。正確なURLはフォーム画面の「接続・公開履歴」にある「フォーム送信先（HTMLのaction）」に表示されます。
• リリース用のURLは、ツールから デプロイAPI でフォームを配置する場合に使います。手作業で設置する場合は使いません。
• 送信先URLをブラウザで直接開く（GET）と、「このURLはフォームの送信先です。フォームから送信してください。」と表示されます。

formタグ

<form action="https://form.magichtml.dev/f/SITE_ID/contact" method="post">

• method="post" を指定します。
• ファイル項目があるフォームでは enctype="multipart/form-data" が必須です。指定しないとブラウザはファイル名だけを文字列で送るため、「（項目名）のファイルを受け取れませんでした。フォームに enctype="multipart/form-data" を指定してください。」というエラーになります。
• ファイル項目がなければ enctype の指定は不要です。

name属性

入力欄の name 属性には、フォームの項目の識別キーをそのまま使います（大文字と小文字は区別されます）。

• 複数選択は、同じ name="キー[]" のチェックボックスを並べ、各 value に選択肢の値を入れます。
• ファイル項目は name="キー[]" とし、2件以上を受け付ける項目では multiple を付けます。name="キー" でも送信できます。
• 選択の未選択状態を用意する場合は <option value="">選択してください</option> を先頭に置きます。必須項目で空のまま送ると「（項目名）を選択してください。」になります。

定義にない名前は受け付けません

項目の定義にない name の値が送られると、「定義にない項目「（名前）」が含まれています。」というエラーになり、送信は保存されません。HTMLだけで新しい項目を増やすことはできません。先に管理画面で項目を追加して公開してください。

送信ボタンにも注意が必要です。<button name="submit"> のように名前を付けると、その値も送信されてエラーになります。送信ボタンには name を付けないか、_ で始まる名前にしてください。

予約フィールド

_ で始まる名前は予約されており、検証の前に取り除かれます（保存もされません）。意味を持つのは次の3つです。

• _hp は人に見えないようにします（例: <input type="text" name="_hp" tabindex="-1" autocomplete="off" hidden>）。
• _request_id がUUIDの形式でないと「送信IDが不正です。ページを再読み込みしてください。」になります。
• _version が現在の公開版と異なると「フォームが更新されています。再読み込みしてください。」になります。
• _request_id と _version を省略した場合は、現在の公開版（リリース用URLではリリースの公開版）に対して受け付け、重複判定は行いません。
• 上記以外の _ で始まる名前は、送られても無視されます。

接続元（Origin）の確認

送信元のページが、サイトに登録した接続元である必要があります。

• ブラウザが付ける Origin ヘッダーを確認します。Origin がない場合は Referer ヘッダーのオリジンを使います。
• そのオリジンがサイト設定の「許可する接続元」に含まれていなければ、「このページからの送信は許可されていません。」（403）になります。
• Origin: null の送信や、Origin と Referer のどちらもない送信も拒否されます。たとえば、HTMLファイルをローカルで直接開いて（file://）送信すると拒否されます。開発中は http://localhost:8000 のようなローカルサーバーから開き、そのオリジンを登録してください。
• リリース用URLでは、リリース作成時に指定したオリジンからの送信だけを受け付けます。

送信後の動作

完了時の移動先

フォーム画面「項目・設定」の「送信完了後」で設定します。

• 移動先を設定すると、そこへ移動します。https:// で始まるURL、または / で始まるパス（例: /thanks.html）を指定できます（2048文字まで）。開発用に http://localhost、http://127.0.0.1、http://[::1] のURLも指定できます。
• / で始まるパスは、送信元ページのオリジンを基準にします。https://example.com のページから送信した場合、/thanks.html は https://example.com/thanks.html になります。
• 移動先のURLにクエリパラメーターなどは付け加えません。
• 移動先が未設定の場合は、Magic Form Cloud の完了ページ（https://form.magichtml.dev/f/SITE_ID/contact/done）を表示します。完了ページには「完了メッセージ」（2000文字までのプレーンテキスト、改行は反映）を表示し、未設定なら「送信が完了しました。ありがとうございました。」と表示します。
• 303 で移動するため、完了ページを再読み込みしても再送信されません。

エラーページ

エラーページは送信への応答としてそのまま表示されます（リダイレクトはしません）。

• 見出しは「送信できませんでした」です。
• 入力内容のエラーでは、問題のある項目すべてについて、項目名を含むメッセージ（例: 「メールアドレスのメール形式が不正です。」）を一覧で表示します。メッセージの一覧は 項目と入力ルール を参照してください。
• 「入力画面に戻る」ボタンはブラウザの「戻る」と同じ動作で、多くのブラウザでは入力した値が残ります。JavaScript が無効な環境では、ブラウザの戻る操作を案内します。
• 入力内容以外のエラーでは、次のような内容を表示します。

完了ページとエラーページは日本語のみで、デザインや文言を変更する設定はありません。独自の完了画面を使う場合は移動先を設定してください。

サイズの制限

• 1回の送信（リクエスト全体）は22MBまでです。超えると 413 になります。
• 添付ファイルは1ファイル10MBまでです。項目ごとにさらに小さい上限を設定できます。
• 1つのファイル項目で送れるファイル数は、既定で1件、設定で最大5件です。

合計で22MBを超える添付が必要なフォームは、フォームSDKの fetch モードを使ってください。ファイルを1件ずつ別のリクエストで送るため、この合計の制限を受けません。

送信回数の制限

フォームへの送信は、送信元のIPアドレスごとに1分あたり10回までです（JSONでの送信と合算）。超えると「送信が集中しています。」のエラーページ（429）になります。同じネットワークから多数の人が同時に送信する場合も、同じIPアドレスとして数えられます。

CSRFトークンとCookie

送信先はセッションやCookieを使わず、CSRFトークンも不要です。Magic Form Cloud はこの送信に対してCookieを設定しません。公開サイトのHTMLにAPIトークンなどの秘密情報を書く必要もありません。

重複送信

• フォームSDKを使わない場合、_request_id がないため重複判定はできません。ダブルクリックや「戻る」からの再送信は、それぞれ別の受付として保存され、メールもそれぞれ送られます。
• _request_id を付けた場合、同じIDで同じ内容の再送は、新しい受付もメールも作らずに完了ページへ移動します。
• 同じIDで内容が異なる送信は、「同じ送信IDで内容を変更することはできません。」（409）になります。

フォームSDKを読み込むと、送信IDの付与と送信中のボタン無効化を自動で行います。詳しくは フォームSDK を参照してください。

値の扱い

• 送られた文字列は、前後の空白も含めてそのまま保存します（空白の除去や、空文字の変換はしません）。
• 必須項目が空文字のときは「（項目名）を入力してください。」になります。必須でない項目は空のままで受け付けます。
• 必須項目の入力欄がHTMLにない（値が送られない）場合もエラーになります。
• 同意・はい／いいえ: チェックボックスは、チェックされていないとブラウザが値を送りません。値が送られなければ「いいえ」として扱います。値が空文字、0、false のときも「いいえ」、それ以外（on、1 など）は「はい」です。必須の「同意」項目が「いいえ」だと「（項目名）にチェックを入れてください。」になります。
• 複数選択: 何も選ばないと値が送られず、未選択として扱います。選んだ値は、送信順ではなく定義の選択肢の順に並べて保存します。
• 数値: 数値として読める文字列は数値として保存します。空欄は、必須でなければ未入力として受け付けます。
• ファイル: ファイルを選ばなかった入力欄（空のファイル）は無視します。

ほかのフォームサービスから移行するときの注意

• 入力欄の name は、項目の識別キー（英字で始まり、英数字・_・-）に合わせます。日本語の name は使えません。
• フォームにある入力欄はすべて、先に管理画面で項目として定義しておきます。
• 移行元のサービス用に置いていた _ で始まる隠し入力欄は無視されるため、残っていても送信は妨げませんが、ハニーポットとしては機能しません。_hp を使ってください。
• 移行元で設定していた送信元ページの登録の代わりに、サイト設定の「許可する接続元」にオリジンを登録します。
• 入力チェックはサーバー側でも必ず行われるため、HTMLやスクリプトのチェックを通り抜けた不正な値は保存されません。