静的サイトにお問い合わせフォームを設置する方法｜PHPと外部サービスの選び方
静的サイトへのお問い合わせフォーム設置を、PHP対応サーバーと外部サービスに分けて解説。公開先の確認、設置手順、送信エラーの切り分け、納品前のテストを整理します。
HTML・CSSでサイトは完成したのに、お問い合わせだけどう動かせばよいか分からない。そんなときは、先に公開先でPHPが動くか確認しましょう。PHPが使えるサーバーならサイト内に送信処理を置けます。静的ファイル専用のホスティングなら、外部フォームや別のバックエンドが必要です。
この記事は、WordPressを使わずに企業サイトや店舗サイトを制作する方に向けた設置ガイドです。フォームの見た目を作り直す前に、環境・送信・テストの順に判断できるよう整理します。
最初に確認するのは、HTMLではなく公開先の環境
「静的サイト」はページの作り方を表す言葉で、サーバーの機能まで決めるものではありません。HTML中心のサイトでも、PHP対応サーバーに置けばフォーム部分だけPHPで処理できます。一方、GitHub Pagesは静的サイトのホスティングで、PHPなどのサーバー側言語を実行できません。詳しくはGitHub Pagesの公式説明を確認してください。
- 公開先でPHPを実行できるか。必要な拡張機能やセッションが使えるか。
- SMTPなど、利用するメール送信方法が許可されているか。
- フォーム用ファイルと設定を安全に配置できるか。
- 公開後に設定を変更する担当者は誰か。
サーバーの契約名だけで判断せず、実際のプランや管理画面で確認します。クライアントからログイン情報を受け取る前でも、この四点を確認事項として送れば設計を進められます。
設置方法を三つに分けて選ぶ
| 方法 | 向いている条件 | 確認すること |
|---|---|---|
| 同じサーバーにPHPを置く | PHPが動き、サイトとデザインを揃えたい | 送信設定・更新・保守の担当 |
| 外部フォームへリンク・埋め込み | コードの運用を減らしたい | 表示仕様・利用条件・受信通知 |
| 別のバックエンドへ送信 | 静的ホスティングを維持して独自に実装したい | API・不正送信対策・障害対応 |
外部サービスを選ぶ場合は、独自デザインへの対応、データの保管先、通知先の変更方法、利用上限を比較します。無料か有料かだけでなく、納品先が自力で運用できるかまで含めて決めましょう。
PHP対応サーバーへ設置する手順
- 必要な項目と、入力・確認・完了の画面構成を決める。
- 送信処理を含むフォーム一式を、説明書どおりの構成で配置する。
- 管理者通知先、送信元、自動返信の文面を設定する。
- 公開サイトのメニューからフォームへのリンクを追加する。
- 公開URLで入力し、管理者通知と自動返信の受信まで確かめる。
既存ページへ移植するときに、フォームの入力欄だけをコピーすると、送信先やセッション、確認画面への遷移が欠けることがあります。まず一式の状態で動作を確認し、その後に共通ヘッダーやCSSを合わせると原因を切り分けやすくなります。
HTMLのactionはデータの送信先、methodは送信方法を指定します。これらを指定しても、受け取る側の処理がなければメールは送れません。仕組みはMDNのフォームデータ送信の解説で確認できます。
よくあるつまずきを症状から切り分ける
送信すると404になる：フォームの送信先パスとファイルの配置を確認します。トップ直下とサブフォルダ内では、相対パスの参照先が変わります。
PHPのコードが表示される：サーバー側でPHPとして処理されていない可能性があります。公開を続けず、ホスティングの対応状況を確認します。設定情報が露出した場合は、その情報の変更も必要です。
完了画面は出るがメールが届かない：表示だけでは受信成功は判断できません。通知先、送信エラー、SMTP設定、迷惑メールフォルダを順に確認します。詳しくはメールがGmailに届かない場合の確認手順をご覧ください。
納品前に、サブフォルダとスマートフォンでも確認する
ローカルで表示できるだけでは納品完了にできません。本番URLでのリンク、スマートフォンでの入力、必須項目のエラー、確認画面からの修正、自動返信への返信先を確認します。テストには管理できるアドレスと架空の入力情報を使い、実際の顧客情報は使用しません。
テスト内容を残しておくと、サーバー移転やメールアドレス変更後も同じ手順で点検できます。納品前チェックリストを使って、表示と受信を分けて記録しましょう。
FreelanceFormを使う場合の確認先
FreelanceFormはPHPで動くメールフォームです。静的ホスティングへファイルを置くだけで動く製品ではないため、まず導入ガイドの動作環境と契約サーバーを照合してください。条件が合えば、10デザインの見本からサイトに近いものを選べます。
入力項目やPHPの項目定義を変更する場合は、変更後に再度テストします。公開先を確かめ、送信まで動かし、最後に見た目を合わせる。この順序なら、初めての静的サイト案件でも作業範囲を把握しやすくなります。
