問い合わせフォームを作る

フォーム設置ガイド

管理画面でフォームを定義し、生成されたHTMLを静的サイトに貼り付けるまでの手順です。サーバーの用意やJavaScriptの実装は必要ありません。

1. サイトを作成する

管理画面の 設定 でサイトを作成します。許可オリジン に、フォームを設置するページのオリジンを必ず追加してください。ここに無いオリジンからの送信は拒否されます（403）。許可オリジンはフォーム > メール設定で設定します。

例: https://example.com
（プロトコル込み・末尾スラッシュなし。サブドメインは別オリジン扱いです）

2. フォームを定義する

Forms でフォームを作成します。テキスト・メールアドレス・テキストエリア・セレクト・チェックボックス・数値・ファイル添付のフィールドを自由に組み合わせられます。

確認方法: 送信後の挙動を選びます。「リダイレクト」でサンクスページの URLを指定するのがおすすめです。
ファイル添付は有料プランで利用できます。

3. スニペットを貼り付ける

フォームを保存すると、編集画面の下部に埋め込みスニペット（コピペ用の <form> HTML）が表示されます。これを静的サイトのHTMLにそのまま貼り付ければ設置完了です。

<form action="https://presto.pw/f/1024" method="POST">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>
  <!-- ハニーポット（スパム対策・削除しないでください） -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">
  <button type="submit">送信</button>
</form>

スニペットには ハニーポット（人間には見えない隠しフィールド）が含まれています。ボットがここに入力すると送信は静かに破棄されます。削除せずそのままお使いください。フィールド構成を変更したら、保存後にスニペットを貼り直してください。

4. 送信の挙動

通常の HTML フォーム POST では、送信成功後に管理画面で設定したリダイレクト URL（未指定なら元のページ）へ 303 リダイレクトされます。バリデーションエラー時は 422 の JSON ページが表示されます。

fetch で Accept: application/json を付けて送ると、422 のフィールド別エラーを JSON で受け取り、ページ内に表示できます。詳細はフォーム送信 API ガイドを参照してください。

5. メール通知と自動返信

通知メールはサイトごとのSMTP設定（お使いのメールサーバー）から送信されます。

フォーム > メール設定に SMTP ホスト・ポート・ユーザー・パスワードを入力して保存します（パスワードは暗号化して保存されます）。
テスト送信ボタンで疎通を確認します。
フォーム編集画面の 通知先メール に、送信内容を受け取るアドレスを設定します。
自動返信を使う場合は、フォーム編集画面の自動返信メールを有効にし、件名と本文を設定します。新規フォームでは件名・本文に初期値が入っています。本文には {{フィールド名}} で送信値を差し込めます（例: {{name}}様）。本文に {{allFields}} を書くと、送信内容の一覧を HTML メールに表示できます。返信先は、フォーム項目の「自動返信のメールアドレスとする」に指定した項目の入力値です。
自動返信の PR 文章（任意）では、控えメールの本文の下に載せるリッチテキストをフォームごとに設定できます。太字・見出し・リンク・画像に対応しています。画像は公開 URL（https://api.presto.pw/api/media/...）で埋め込まれます。 JPEG / PNG / GIF を推奨します。一部のメールクライアントでは初回表示時に「画像を表示」の操作が必要な場合があります。

SMTPが未設定でも、通知の送信に失敗しても、フォームの受付と保存は成功します。失敗した通知は送信データの「通知エラー」欄に記録され、管理画面で確認できます。

6. Slack / Discord / Webhook 通知（有料プラン）

フォーム > メール設定のWebhook 通知 に各 URL を設定すると、送信のたびに通知が届きます。

Slack: Incoming Webhook の URL
Discord: ウェブフック URL
汎用 Webhook: 送信内容の JSON を POST する URL

Webhook 通知は有料プランで利用できます。通知の送信に失敗しても、フォームの受付と保存は成功します。

7. プライバシーポリシー

フォーム > プライバシーポリシーでサイト単位の本文を保存・公開できます。公開すると、埋め込みスニペットに同意チェックとリンクが入ります。

公開 URL は https://presto.pw/p/{siteId} です。ブラウザで開くと HTML、fetch で Accept: application/json を付けると JSON で本文を取得できます。

const res = await fetch('https://presto.pw/p/SITE_ID', {
  headers: { Accept: 'application/json' },
})
const policy = await res.json()
// { siteName, body, updatedAt }

プライバシーポリシーを変更したら、フォーム編集画面のスニペットを貼り直してください。