Formgong

Vercelお問い合わせフォーム

Formgong team ·

Vercelのお問い合わせフォームに、サーバーレス関数もSMTPキーも要りません。Vercelに組み込みのフォーム製品はありません。静的サイトなら下のHTMLフォームを使い、Next.jsのページからは同じエンドポイントを使います。これがVercelのメール問い合わせフォームです。メールはFormgongが送ります。

Vercel
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" placeholder="山田 太郎" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>メッセージ <textarea name="message" placeholder="ご用件をご記入ください" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">送信</button>
</form>

Vercelでのフォームの仕組み

Vercelは静的ファイルとNext.jsをホストします。フォームの受信箱はありません。よくある追加は、メールAPIを呼ぶRoute HandlerかServer Actionです。サーバーのコード、秘密、実行のたびに課金され得る関数です。

静的エクスポートはその道をさらに狭くします。Next.jsは output: 'export' がServer Actionsに対応せず、そのモードのRoute Handlersはリクエストを読めないと書いています。ブラウザのPOSTは、どちらも要りません。

Vercelでの設定手順

  1. Formgongでフォームを作り、アクセスキーをコピーします。
  2. 静的サイトでは、Vercelが配信するページにHTMLフォームを貼ります。access_key、_lang、botcheck を置き、https://formgong.com/submit へ送ります。
  3. Next.jsでは app/api/contact/route.ts を足さず、SMTPのAPIも呼びません。クライアントのコンポーネントが同じURLへ fetch できます。コンポーネントはNext.jsのガイドを見てください。
  4. Vercelでデプロイします。送信はVercel Functionを実行しないので、関数の枠には入りません。本番ドメインでテストを送ります。
  5. Formgongの無料メールは日次のまとめです。1通ずつのメールはProからです。TelegramはFreeを含むすべてのプランで動きます。

FormgongとVercel Functionのどちら？

送信でデータベースを更新する、またはログインユーザーを確かめるなら、Route Handlerを書きます。

静的サイトやNext.jsの問い合わせにはFormgongを使います。SMTPを省け、output: 'export' も使えます。

よくある質問

Vercelに問い合わせフォームはありますか？

ありません。Vercel自身の案内は、この仕事にフォームのバックエンドを使います。プロジェクトにFormsのタブはありません。

ResendなしでVercelのメールフォームを送れますか？

はい。ページからFormgongへ送ります。メールはFormgongが送ります。VercelのプロジェクトにSMTPキーは置きません。

静的エクスポートでも動きますか？

はい。ブラウザがフォームを送ります。output: 'export' ではServer Actionsは使えませんが、ここでは関係ありません。

訪問者はページに留まれますか？

はい。Accept: application/json を付けて fetch し、JSONのメッセージを表示します。HTMLフォームはJavaScriptなしの道です。

無料ではじめる

すべてのプラットフォーム →