4つのSTEPで、サイトにフォームを設置する

目指すのは、自分のサイトからお問い合わせを受け取れる状態です。準備・表示・メール・公開の4つに分けて進めましょう。PHPを一から書く必要はなく、見本と設定を使って設置できます。

このページのゴール 公開したフォームから送信し、運営者への通知と入力者への自動返信を受け取ること。そこまでできれば、基本の設置は完了です。

設置完了まで、どれくらい？

時間は作業計画の目安です。サーバー・メールアカウントの準備状況によって前後します。新規契約の待ち時間や、大幅なデザイン変更は含みません。すでにできているSTEPは、その先から始められます。

STEP 1〜4の完了の目印

1. STEP 1：動かす準備をする — WindowsはXAMPP、MacはMAMPを用意。localhostの画面が開けたらOKです。
2. STEP 2：フォームを表示する — 見本をそのまま開き、入力 → 確認 → 修正ができたらOKです。
3. STEP 3：メールを届ける — 自分のアドレスでテスト送信。通知と自動返信が届いたらOKです。
4. STEP 4：自分のサイトに設置する — サイトに組み込み、公開サーバーへアップロード。公開URLからメールが届けば完了です！

見た目や項目の変更は、見本の動作を確認してから少しずつ進めると、つまずいた場所を見つけやすくなります。

用意するもの

MySQLなどのデータベースは、このフォームには不要です。 Node.jsやコマンド操作も、通常の設置・編集では必要ありません。

できること・別途用意するもの

お問い合わせ、予約希望、注文、採用応募など、10用途の入力ページを収録しています。入力内容の確認、修正、運営者への通知、自動返信を共通の仕組みで行います。見た目は10種類のデザインを参考に変更できます。

予約と注文は、希望内容を受け付けるフォームです。決済、在庫管理、予約枠の空き状況管理、予約の自動確定は含まれません。確定までの案内文は、実際の運用に合わせて用意してください。

公開用のサーバー、ドメイン、送信に使うメールアカウントは別途必要です。静的HTMLだけを置けるサービスでは、PHPの送信処理は動きません。

このマニュアルのファイル名の読み方

説明にある form/php/config/config.php は、フォーム一式を置いたフォルダから見た場所です。

たとえば一式を contact-demo に置いた場合は、contact-demo → form → php → config → config.php の順に開きます。斜線 / はフォルダの区切りです。

Windowsの説明では C:\xampp\htdocs\contact-demo を例にします。ダウンロードしたZIPの名前が違っていても、index-contact.php と form フォルダが見つかれば進められます。

すでに準備ができている方へ

• PHPが動く環境がある：フォームを表示するへ。
• メール送信まで確認できている：サイトへの組み込みへ。
• 表示できなくて困っている：表示・環境のトラブルへ。
• ファイル構成や必要なPHP機能を調べたい：設置仕様とファイルの役割へ。

ここまでできたらOK 作業の順番が分かれば準備完了です。次は「HTML・CSS・PHPの役割」で、PHPが必要な理由を見てみましょう。