お問い合わせフォームの作り方

静的サイトを作っていて必ずぶつかるのが「お問い合わせフォーム、どうやって送信を受け取ればいいんだ」問題です。サーバーサイドの言語を使わない手作りのHTMLサイトだと、フォームを<form>タグで書いただけでは何も起きません。送信先のバックエンドが必要です。

この記事では、presto.pwを使って実際にお問い合わせフォームを設置するまでの手順を、制作者目線で説明します。

そもそも何が必要なのか

静的サイトにフォームを置くには、最低限これだけあれば動きます。

• フォームの送信を受け取ってくれるエンドポイント（バックエンド）
• そこに送信するための <form> タグ

presto.pwはこのバックエンド部分を肩代わりします。サーバーを自前で用意する必要も、PHPやNode.jsを書く必要もありません。

手順1: 管理画面でフォームを作る

presto.pwの管理画面(/dashboard/forms)で「新規作成」からフォームを定義します。フォームに含めたい項目（お名前、メールアドレス、お問い合わせ内容など）を設定すると、貼り付け用のHTMLスニペットが自動生成されます。

生成されたスニペットはそのままコピーして、自分のサイトのHTMLに貼り付けるだけで動きます。

<form action="https://api.presto.pw/api/forms/xxxxxxxx/submit" method="POST">
  <input type="text" name="name" placeholder="お名前" required>
  <input type="email" name="email" placeholder="メールアドレス" required>
  <textarea name="message" placeholder="お問い合わせ内容" required></textarea>
  <button type="submit">送信する</button>
</form>

サーバー側の実装は一切不要です。ここが一番のポイントです。

手順2: 許可オリジンを必ず設定する

ここが最初につまずきやすいポイントです。管理画面の「設定」で、フォームを設置するページのオリジン（例: https://example.com）を必ず許可リストに追加してください。

許可オリジンに登録されていないページから送信すると、403エラーで拒否されます。「スニペットを貼っただけなのに動かない」というときは、まずここを疑ってください。

手順3: 送信後の挙動を確認する

デフォルトのフォーム送信（<form>タグの素朴な送信）は、成功すると元のページに303リダイレクトで戻ります。バリデーションエラーがあった場合は422のエラーページが表示されます。

「エラーメッセージを自分のデザインで出したい」「ページ遷移せずに送信したい」という場合は、fetchやXHRで送信する方法もあります。Accept: application/jsonヘッダーを付けて送ると、422のフィールド別エラーをJSONで受け取れるので、ページ内にその場でエラー表示ができます。この方法の詳しい実装例はフォーム送信APIガイドにまとめています。

手順4: メール通知を設定する

フォームが送信されたときに通知メールを受け取りたい場合は、/dashboard/forms/mail-settingsでSMTP設定（ホスト・ポート・ユーザー・パスワード）を入力します。パスワードは暗号化して保存されるので安心してください。

自動返信メール（送信者への確認メール）も同じ画面から設定できます。問い合わせが来るたびに手動で返信する手間を減らせます。

制作者として気をつけたいポイント

• 許可オリジンの設定忘れが一番多いハマりどころです。本番公開後に動かなくなったら、まずここを確認してください
• 添付ファイルを受け付けたい場合、無料プランでは使えない機能なので、必要であれば有料プランへの切り替えを検討してください
• スパム対策が気になる場合は、隠しフィールド（ハニーポット）などをフォーム側に仕込む工夫も併用すると効果的です

presto.pwを使えば、サーバーを一切書かずに「動くお問い合わせフォーム」を静的サイトに設置できます。手順は「フォーム作成→スニペット貼り付け→許可オリジン設定」のたった3ステップです。

まだ試していない方は、ぜひ無料プランで実際に触ってみてください。