DEPLOYMENT GUIDE

静的サイトにお問い合わせフォームを設置する3つの方法

今の公開先で受け付けるか、外部サービスか、自前のAPIか

·読了 約6分

ポートフォリオに問い合わせフォームを足すとき、いまのサイトを移し替える必要はあるのでしょうか。フォームはHTMLで表示できます。公開先を変えるかどうかは、送信をどこで受け付け、受け付けた内容をどう扱うかで決まります。

この記事の内容

静的サイトにフォームを置く3つの方法

フォームの送信先 · 概念図
公開ページ入力欄を表示
受付先ホストの機能・外部サービス・自前APIのいずれか
担当者管理画面や通知で受け取る
静的ページを配る場所と、フォームを処理する場所を分けて考えます。
方法 向いているケース 先に確認すること
ホスティングのフォーム機能 今の公開先にフォーム受付があり、必要な通知や保存ができる 受付件数の上限、通知先、公開後の設定手順
外部フォームサービス 今の公開先を使い続けながら、受付を別サービスに任せたい 送信先URL、受付件数の上限、データの保存期間
自分のAPI 問い合わせの振り分けや社内ツール連携を自分で作りたい 入力チェック、迷惑送信対策、保存・通知の運用

どの方法でも、まず決めるのは入力内容を送る先です。たとえば次のHTMLでは、action が送信先、name が送信する項目の名前です。外部サービスや自前のAPIを使う場合は、送信先URLを置き換えます。公開先の受付機能を使う場合は、そのサービスの指定に従います。

Code
<form action="https://example.com/contact" method="POST">
  <label>返信先 <input name="email" type="email" required></label>
  <label>お問い合わせ <textarea name="message" required></textarea></label>
  <button type="submit">送信</button>
</form>

1. ホスティングのフォーム機能を使う

今の公開先にフォーム受付機能があるなら、必要な通知先とデータの保存方法を満たせるか確認します。公開後はテスト送信し、管理画面の受付記録と通知の到着をそれぞれ確かめます。

すでにNetlifyを使っている場合は、Netlify Formsが一例です。フォーム検出を有効にし、上の例の action を外し、公開用HTMLのフォームに name="contact" と data-netlify="true" を付けて再デプロイします。Netlify公式の設定手順

2. 外部フォームサービスへ送る

今の公開先に受付機能がない場合も、フォームを表示するページはそのまま使えます。外部フォームサービスが発行するURLを、上のHTMLの action に指定します。たとえばFormspreeでは、管理画面から自分のフォームのURLをコピーして使います。Formspree公式のHTMLフォーム設定

Code
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

契約前には、月間の送信上限、上限を超えた場合の扱い、管理画面に残るデータの保存期間を見ておきます。メールアドレスを受け取るなら、誰が閲覧でき、どこで削除できるかも確認しておくと運用を決めやすくなります。

3. 自分のAPIで受け付ける

問い合わせの振り分けや対応状況の管理が必要で、外部サービスの連携や保存条件では足りない場合は、自前のAPIが候補です。上のフォームなら、開始タグを <form action="https://api.example.com/contact" method="POST"> に変え、API側で application/x-www-form-urlencoded の本文を受け付けます。受付を保存して完了ページへリダイレクトし、受付の識別子を発行してから通知すると、メールが届かなかったときも管理画面で受付を確認できます。

自前APIでの受付 · 概念図
入力検証必須項目・長さ・連続送信を確認
受付を保存識別子を発行して完了を表示
通知担当者に知らせ、受付記録と照合
保存を先に行う設計では、通知に失敗しても受付の有無を確認できます。

HTMLの required は入力を助ける機能です。APIでも必須項目・長さを検証し、連続送信を制限します。メールサービスのAPIキーやDBのパスワードはAPI側の環境変数に置きます。別ドメインへ通常のHTMLフォームでPOSTする場合と、JavaScriptの fetch で別オリジンの応答を読む場合では必要な設定が異なります。後者ではAPI側で許可するオリジンを設定します。Fetch仕様のCORSプロトコル

自前APIを置く場合、KamuiDashでは静的なWebページと、Node.jsやPythonで動くWebサーバーを別々に公開できます。既存サイトをそのまま残し、受付APIだけをPaaSに配置する構成も取れます。KamuiDash公式のアプリケーション設定

公開したら、テスト送信で受付までたどる

公開URLで正常に送信できることを確かめ、完了表示、受付記録、通知まで確認します。必須欄を空にしたときはブラウザの入力チェックを見ます。自前APIでは、必須項目を抜いたデータや制限を超える長文をAPIへ直接送り、拒否されて受付が作られないことも確かめます。まずは今のホストで受付まで通せる方法を選び、保存や振り分けの要件に合わせて見直せます。

あわせて読みたい

GitHubから静的サイトやWeb APIを公開する方法は、KamuiDashのサイトから確認できます。 KamuiDash