フォームを置いて表示する

まずはHTMLや設定を変更せず、同梱のお問い合わせフォームを表示します。WindowsはXAMPP、MacはMAMPの準備を先に済ませてください。

このページのゴール お問い合わせフォームが表示され、入力 → 確認 → 修正まで進めること。この段階では「送信する」は押しません。

1. ZIPを展開する

ダウンロードしたZIPを、Windowsでは右クリックして「すべて展開」、Macではダブルクリックして展開します。ZIPの中を直接編集せず、展開したフォルダを使ってください。

展開先で index-contact.php、form、PHPMailer を探します。さらに package などのフォルダに入っている場合は、その中を開きます。

2. htdocsに作業用フォルダを作る

Windowsのエクスプローラーで C:\xampp\htdocs を開き、その中に contact-demo というフォルダを作ります。htdocs はApacheがブラウザーへ渡すファイルを置く場所です。

見つけたフォーム一式を contact-demo の中へコピーします。まずは元の一式を残したまま、コピーで作業しましょう。

C:\xampp\htdocs\contact-demo\
├─ index-contact.php     ← この階層に直接置きます
├─ index-reservation.php などの見本
├─ form\                ← 中身もまとめてコピー
└─ PHPMailer\           ← 中身もまとめてコピー

contact-demo/package/index-contact.php のように1段深く置いた場合は、URLにも /package/ が必要になります。このガイドでは上の構成にそろえます。

3. ブラウザーでURLを開く

XAMPPのApacheを起動し、ブラウザー上部のアドレス欄に次を入力します。

http://localhost/contact-demo/index-contact.php

C:\xampp\htdocs\ の部分が http://localhost/ に対応します。URLには htdocs を含めません。

MacのMAMPでは、標準設定の場合 http://localhost:8888/contact-demo/index-contact.php です。

つまずいたら ダブルクリックや「Go Live」で開かず、上のURLを直接入力します。404・白い画面・PHPの文字が見える場合は表示・環境のトラブルを確認してください。

4. 入力して確認画面へ進む

1. お名前には「テスト」「太郎」などの架空の名前を入れます。
2. メールアドレスには、自分が受信を確認できるアドレスを入れます。
3. 種類を選び、件名は「動作確認」、本文は「フォームのテストです」などと入力します。
4. 必須項目と同意欄を確認し、「入力内容を確認する」を押します。
5. 確認画面に入力内容が表示されたら、「入力内容を修正」で戻ります。

戻った画面で内容が残っているか、1か所修正して再度確認できるかも試してください。ブラウザーの戻るボタンではなく、フォーム内の修正ボタンを使います。

5. 次回のために開く場所をそろえる

VS Codeで「ファイル」→「フォルダーを開く」から、コピー先の contact-demo を選びます。以降は、この中のファイルを編集して保存し、ブラウザーを再読み込みします。

ダウンロード元を編集してコピー先を表示すると、変更が反映されません。エディターで開いたフォルダと、localhostで表示しているフォルダをそろえましょう。

ここまでできたらOK 表示・確認・修正ができました。次ははじめてのメール送信で、宛先を設定して自分に送ってみましょう。