HTML・CSS・PHPの役割

フォームの画面を作ることと、入力内容をメールで届けることは、別々の仕事です。この違いが分かると、設置の手順も理解しやすくなります。

このページのゴール なぜPHPを動かす環境が必要なのか、どのURLで確認すればよいのかが分かること。

見た目と、送信の仕事

ブラウザーはHTML・CSS・JavaScriptを扱えますが、PHPの処理はWebサーバー側で行います。FreelanceFormにはその処理が入っているので、自分で送信プログラムを作る必要はありません。

なぜXAMPPを使うの？

公開前に、自分のパソコンの中でフォームを試すためです。XAMPP（ザンプ）は、WebサーバーのApache（アパッチ）とPHPなどをまとめて用意できるソフトです。

XAMPPそのものが必須ではありません。必要なのはPHPが動く環境です。 このガイドでは、Windowsの方が同じ手順で進められるようXAMPPを使います。Macの手順はMAMPでの準備に分けています。

「ローカル環境」は自分のパソコンで確認する場所、「本番環境」はお客様がアクセスする公開サーバーのことです。

Live Serverで開けないのはなぜ？

VS CodeのLive Serverだけでは、PHPを実行できません。HTMLの表示ができても、PHPを使った確認画面や送信処理には別のPHPサーバーが必要です。Live Serverの公式説明も、PHPなどを動かすサーバーを別に用意する構成を案内しています。

まずはLive Serverの「Go Live」を使わず、XAMPPのApacheを起動して、ブラウザーのアドレス欄へ次を入力します。

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

localhost は「今使っている自分のパソコン」を指します。検索欄ではなく、ブラウザー上部のURLが表示されている欄へ入力してください。

HTMLをPHPファイルにしても、HTMLは書ける？

はい。.php の中にも、いつものHTMLを書けます。PHPのコードがある部分だけサーバーが処理し、ブラウザーにはその結果が届きます。PHP公式の入門説明でも、HTMLとPHPを一緒に書く例を確認できます。

ただし、ファイル名を .html から .php に変えるだけでフォームが完成するわけではありません。 フォーム本体、先頭のPHP、CSS、JavaScript、設定ファイルが必要です。

最初は完成済みの index-contact.php に、自分のサイトのヘッダー・フッターを加える方法で進めましょう。詳しくはサイトへの組み込みで説明します。

ここまでできたらOK 「PHPはサーバーで動く」「確認にはlocalhostのURLを使う」の2つが分かれば大丈夫です。Windowsの準備またはMacの準備へ進みましょう。