PHPロードマップ｜WordPressにもつながるサーバー側プログラミングの入口
toshi
ToshiLab
PHPで簡単なお問い合わせフォームの形を作る｜入力からPOST送信・完了表示まで
toshi
記事内に商品プロモーションを含む場合があります
目次
- この回の到達目標
- 前回のPHP 3-3とのつながり
- お問い合わせフォームの流れを先に確認する
- 今回作るファイル
- まず完成形を確認する
- お問い合わせフォームの見た目を整える
- フォームをPOSTで送信する
- name属性がPHP側の受け取り名になる
- POSTされたときだけPHPの処理を動かす
- $_POSTで3つの値を受け取る
- trim()で前後の空白を取り除く
- 入力されているか確認する
- メールアドレスの形式も確認する
- エラーがなければ完了状態にする
- 受け取った値はそのままHTMLへ表示しない
- エラーがあるときはフォームをもう一度表示する
- 正常なら完了メッセージを表示する
- Laragonで実際に動かす
- 正常に送信できた場合
- 空欄のまま送信してみる
- requiredだけではなくPHPでも確認する理由
- このフォームは本番用ではない
- よくあるエラーと確認する場所
- PHP 3-4 学習チェック
- PHP 3-4の完成サンプルをダウンロード
- 第3章でできるようになったこと
- まとめ
- PHP 3章の流れ
- PHP 4章の流れ
この回の到達目標
PHP 3-4では、次の状態を目指します。
・名前、メールアドレス、お問い合わせ内容の入力欄を作れる
・フォームをPOSTで送信できる
・PHPの $_POST で3つの値を受け取れる
・入力されていない項目を確認できる
・受け取った値をHTMLへ表示するときに htmlspecialchars() を使える
・正常に送信されたら完了メッセージを表示できる
全部を暗記する必要はありません。
第3章で学んだ内容を組み合わせて、1つのフォームとして動かせれば十分です。
前回のPHP 3-3とのつながり
PHP 3-3では、GETとPOSTの違いを確認しました。
GETでは送信した値がURLへ付き、
PHPでは $_GET で受け取ります。
POSTでは送信した値がURLには表示されず、
PHPでは $_POST で受け取ります。
お問い合わせフォームでは、入力した内容をURLへ残したくありません。
そのため今回はPOSTを使います。
今回のフォームでは、
method=”post”
と
$_POST
がセットになります。
PHP 3-3で確認した内容が、そのまま今回のフォームにつながっています。
お問い合わせフォームの流れを先に確認する
コードを書く前に、今回作るものの流れを確認しておきましょう。
- フォームへ入力する
- 「送信する」を押す
- POSTでPHPへデータを送る
- PHPの $_POST で受け取る
- 入力内容を確認する
- 問題がなければ完了メッセージを表示する
今回の記事内画像ではメール送信を連想させる表現もありますが、
この記事のサンプルでは実際のメール送信処理までは行いません。
まずはPHPがフォームの値を受け取り、処理して、完了画面を表示するところまでを作ります。
今回作るファイル
Laragonの学習フォルダー内に、PHP 3-4用のフォルダーを作ります。
C:\laragon\www\toshilab-php\php-03-04\
中には2つのファイルを作ります。
php-03-04/
|
├── contact.php
|
└── style.css今回は、
contact.php
がフォームとPHP処理を担当し、
style.css
がフォームの見た目を担当します。
まず完成形を確認する
最初に、今回完成させる contact.php を確認します。
<?php
$name = '';
$email = '';
$message = '';
$errors = [];
$isSubmitted = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');
if ($name === '') {
$errors[] = 'お名前を入力してください。';
}
if ($email === '') {
$errors[] = 'メールアドレスを入力してください。';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = 'メールアドレスの形式を確認してください。';
}
if ($message === '') {
$errors[] = 'お問い合わせ内容を入力してください。';
}
if (empty($errors)) {
$isSubmitted = true;
}
}
$safeName = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
$safeEmail = htmlspecialchars($email, ENT_QUOTES, 'UTF-8');
$safeMessage = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="contact-container">
<?php if ($isSubmitted): ?>
<section class="contact-complete">
<h1>お問い合わせありがとうございます</h1>
<p>
入力内容を受け付けました。
</p>
<dl class="contact-result">
<dt>お名前</dt>
<dd><?php echo $safeName; ?></dd>
<dt>メールアドレス</dt>
<dd><?php echo $safeEmail; ?></dd>
<dt>お問い合わせ内容</dt>
<dd class="contact-message"><?php echo $safeMessage; ?></dd>
</dl>
<a href="contact.php" class="back-button">
フォームへ戻る
</a>
</section>
<?php else: ?>
<section class="contact-form-area">
<h1>お問い合わせフォーム</h1>
<p class="contact-lead">
必要事項を入力して「送信する」を押してください。
</p>
<?php if (!empty($errors)): ?>
<div class="error-box">
<p>入力内容を確認してください。</p>
<ul>
<?php foreach ($errors as $error): ?>
<li>
<?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<form action="" method="post">
<div class="form-group">
<label for="name">お名前</label>
<input
type="text"
id="name"
name="name"
value="<?php echo $safeName; ?>"
required
>
</div>
<div class="form-group">
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
value="<?php echo $safeEmail; ?>"
required
>
</div>
<div class="form-group">
<label for="message">お問い合わせ内容</label>
<textarea
id="message"
name="message"
rows="7"
required
><?php echo $safeMessage; ?></textarea>
</div>
<button type="submit">
送信する
</button>
</form>
</section>
<?php endif; ?>
</main>
</body>
</html>少し長く見えますが、一度に全部理解する必要はありません。
これから、
フォーム
↓
POST
↓
$_POST
↓
入力チェック
↓
完了表示
の順番に分解して見ていきます。
お問い合わせフォームの見た目を整える
今回はPHPの処理だけでなく、入力欄が見やすくなるようにCSSも用意します。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 16px;
background: #f8fafc;
color: #1f2937;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Noto Sans JP",
sans-serif;
line-height: 1.7;
}
.contact-container {
width: min(100%, 720px);
margin: 0 auto;
}
.contact-form-area,
.contact-complete {
padding: 32px;
border: 1px solid #ddd6fe;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(76, 29, 149, 0.08);
}
h1 {
margin: 0 0 16px;
color: #4c1d95;
font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.contact-lead {
margin-bottom: 28px;
}
.form-group {
margin-bottom: 22px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 700;
}
input,
textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #1f2937;
font: inherit;
}
input:focus,
textarea:focus {
border-color: #7c3aed;
outline: 3px solid #ede9fe;
}
textarea {
resize: vertical;
}
button,
.back-button {
display: inline-block;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #7c3aed;
color: #ffffff;
font: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
button:hover,
.back-button:hover {
opacity: 0.9;
}
.error-box {
margin-bottom: 24px;
padding: 16px 18px;
border: 1px solid #fecaca;
border-radius: 10px;
background: #fef2f2;
}
.error-box p {
margin-top: 0;
font-weight: 700;
}
.error-box ul {
margin-bottom: 0;
}
.contact-result {
margin: 28px 0;
}
.contact-result dt {
margin-top: 18px;
color: #6d28d9;
font-weight: 700;
}
.contact-result dd {
margin: 6px 0 0;
padding: 12px 14px;
border-radius: 8px;
background: #faf5ff;
}
.contact-message {
white-space: pre-wrap;
}
@media (max-width: 640px) {
body {
padding: 20px 12px;
}
.contact-form-area,
.contact-complete {
padding: 22px 18px;
}
button,
.back-button {
width: 100%;
text-align: center;
}
}CSSは、
style.css
として保存します。
今回のCSSはPHPの仕組みそのものには関係ありません。
フォームを見やすくして、入力結果を確認しやすくするためのデザインです。
フォームをPOSTで送信する
お問い合わせフォームの中心になる部分を見てみましょう。
<form action="" method="post">重要なのは、
method=”post”
です。
これによって、このフォームへ入力した値がPOSTで送信されます。
今回は、
action=””
としているため、送信すると同じ contact.php がもう一度実行されます。
1つのPHPファイルの中で、
フォームを表示する
↓
送信する
↓
PHPで受け取る
↓
結果を表示する
ところまで確認できます。
name属性がPHP側の受け取り名になる
お名前の入力欄には、
<input
type="text"
id="name"
name="name"
required
>と書いてあります。
ここで重要なのが、
name=”name”
です。
メールアドレスでは、
name=”email”
お問い合わせ内容では、
name=”message”
を使います。
PHP側では、このname属性を使って値を取り出します。
POSTされたときだけPHPの処理を動かす
contact.phpを最初に開いたときは、まだフォームは送信されていません。
そこで、
「POSTで送信されたときだけ処理する」
という条件を付けます。
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// POSTされたときの処理
}$_SERVER[‘REQUEST_METHOD’] には、ページへアクセスしたときのHTTPメソッドが入っています。
フォームからPOSTで送信された場合は、
POST
になります。
PHP 3-4では、
「送信ボタンが押されたあとだけ中の処理を実行するための確認」
という理解で大丈夫です。
$_POSTで3つの値を受け取る
POSTされたら、フォームから送られた値を受け取ります。
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');それぞれ、
$_POST[‘name’]
$_POST[‘email’]
$_POST[‘message’]
で受け取っています。
PHP 3-2とPHP 3-3で確認した $_POST が、ここで3項目になりました。
trim()で前後の空白を取り除く
今回は受け取った値に trim() を使っています。
たとえば、
「 Toshi 」
のように前後へ余計な空白が入力されていても、
「Toshi」
として扱いやすくなります。
今の段階では、
「入力された文字の前後を少し整える処理」
として覚えておけば十分です。
入力されているか確認する
お問い合わせフォームでは、何も入力されていない状態をそのまま完了扱いにはしたくありません。
そこで、空欄を確認します。
if ($name === '') {
$errors[] = 'お名前を入力してください。';
}
if ($email === '') {
$errors[] = 'メールアドレスを入力してください。';
}
if ($message === '') {
$errors[] = 'お問い合わせ内容を入力してください。';
}名前が空なら、
お名前を入力してください。
メールアドレスが空なら、
メールアドレスを入力してください。
というエラーを配列へ追加します。
お問い合わせ内容も同じです。
メールアドレスの形式も確認する
メールアドレスについては、空欄だけでなく形式も確認します。
if (
$email !== '' &&
!filter_var($email, FILTER_VALIDATE_EMAIL)
) {
$errors[] = 'メールアドレスの形式を確認してください。';
}filter_var() と FILTER_VALIDATE_EMAIL を使うことで、
入力された文字がメールアドレスとして扱える形式か
を確認できます。
PHP 3-4では、細かな仕組みを暗記する必要はありません。
「PHPにはメールアドレスの形式を確認する方法も用意されている」
ということが分かれば十分です。
エラーがなければ完了状態にする
入力チェックが終わったあと、
エラーが1つもなければ送信完了として扱います。
if (empty($errors)) {
$isSubmitted = true;
}今回は実際にメールを送信するわけではありません。
その代わり、
入力
↓
POST
↓
PHPで受け取り
↓
入力チェック
↓
完了
という流れが正常に動いたことを確認します。
受け取った値はそのままHTMLへ表示しない
フォームから送られた文字を画面へ表示するときは、今回も htmlspecialchars() を使います。
$safeName = htmlspecialchars(
$name,
ENT_QUOTES,
'UTF-8'
);
$safeEmail = htmlspecialchars(
$email,
ENT_QUOTES,
'UTF-8'
);
$safeMessage = htmlspecialchars(
$message,
ENT_QUOTES,
'UTF-8'
);これはPHP 3-2でも使いました。
フォームから受け取った文字をHTMLへ表示するときは、
htmlspecialchars()
を使う。
ここは繰り返し確認しておきましょう。
エラーがあるときはフォームをもう一度表示する
入力内容に問題があった場合は、完了画面へ進まずフォームを再表示します。
そのとき、エラー内容も表示します。
<?php if (!empty($errors)): ?>
<div class="error-box">
<p>入力内容を確認してください。</p>
<ul>
<?php foreach ($errors as $error): ?>
<li>
<?php echo htmlspecialchars(
$error,
ENT_QUOTES,
'UTF-8'
); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>ユーザーは、
「何を直せばよいのか」
を確認してから、もう一度送信できます。
正常なら完了メッセージを表示する
すべての項目に問題がなければ、完了画面へ切り替えます。
<?php if ($isSubmitted): ?>
<h1>お問い合わせありがとうございます</h1>
<?php else: ?>
<h1>お問い合わせフォーム</h1>
<?php endif; ?>今回は同じ contact.php の中で、
フォーム画面
と
完了画面
を切り替えています。
ここまで動けば、簡単なお問い合わせフォームの基本形は完成です。
Laragonで実際に動かす
2つのファイルを保存したら、Laragonを起動します。
ブラウザで次を開いてください。
http://localhost/toshilab-php/php-03-04/contact.php
フォームが表示されたら、
お名前
メールアドレス
お問い合わせ内容
を入力します。
たとえば、
お名前：
Toshi
メールアドレス：
toshi@example.com
お問い合わせ内容：
PHPのお問い合わせフォームを練習しています。
と入力します。
そのあと「送信する」をクリックしてください。
正常に送信できた場合
入力内容に問題がなければ、
お問い合わせありがとうございます
という完了メッセージが表示されます。
さらに、今回入力した内容も確認できます。
ここで、
フォームへ入力した値
↓
POST
↓
PHP
↓
画面へ表示
という流れがつながったことになります。
空欄のまま送信してみる
次は、あえて入力しない状態も確認してみましょう。
お名前を空欄にしたり、お問い合わせ内容を空欄にして送信します。
すると、
お名前を入力してください。
お問い合わせ内容を入力してください。
などのエラーが表示されます。
正常な場合だけでなく、
「正しく入力されていない場合を考える」
ところまで進んだのがPHP 3-4のポイントです。
requiredだけではなくPHPでも確認する理由
HTML側の入力欄には、
required
も指定しています。
requiredを使うと、ブラウザ側で空欄送信を防ぎやすくなります。
しかし、本番のフォームではHTML側の確認だけに頼りません。
PHP側でも入力内容を確認します。
HTML側：
入力しやすくするための確認
PHP側：
サーバーへ送られてきた値を実際に確認する
というように、両方で確認する考え方が大切です。
このフォームは本番用ではない
よくあるエラーと確認する場所
1. 送信しても何も変わらない
formのmethodを確認します。
method=”post”
になっているか確認してください。
PHP側では、
$_POST
を使います。
2. 入力した値を受け取れない
name属性を確認してください。
フォーム側が、
name=”email”
なら、
PHP側も、
$_POST[‘email’]
です。
文字が一致している必要があります。
3. CSSが反映されない
contact.phpとstyle.cssが同じフォルダーにあるか確認してください。
さらにcontact.phpのhead内に、
<link rel="stylesheet" href="style.css">が入っているか確認します。
4. PHPコードがそのまま文字で表示される
contact.phpをファイルから直接開くのではなく、Laragon経由で開きます。
http://localhost/toshilab-php/php-03-04/contact.php
からアクセスしてください。
5. メールが届かない
今回のサンプルは、実際のメールを送信していません。
フォームの入力内容をPHPが受け取り、正常なら完了メッセージを表示するところまでが今回の学習範囲です。
PHP 3-4 学習チェック
次の内容を確認してみましょう。
・お問い合わせフォームを表示できる
・method=”post” の意味が分かる
・name属性と $_POST の関係が分かる
・名前、メールアドレス、お問い合わせ内容をPHPで受け取れる
・空欄を確認できる
・htmlspecialchars() を使って表示できる
・正常なら完了メッセージへ切り替えられる
・今回のコードが学習用であり、そのまま本番用ではないことが分かる
すべて暗記できていなくても大丈夫です。
フォームへ入力した内容をPHPが受け取り、完了表示まで自分のパソコンで動かせたらPHP 3-4はクリアです。
PHP 3-4の完成サンプルをダウンロード
ここまで作ったお問い合わせフォームを、確認用の完成サンプルZIPとして用意しました。
ZIPには、PHPだけでなく、フォームの見た目を整えるCSSと、文字数カウンター用のJavaScriptも含まれています。
自分で書いたコードと見比べたいときや、うまく動かないときの確認用として利用してください。
【収録ファイル】
・contact.php
・config.php
・style.css
・script.js
・README.txt
・SECURITY-NOTE.txt
JavaScriptは、お問い合わせ内容の文字数を表示するための補助機能です。
JavaScriptを使用しなくても、PHPによるフォーム送信・入力チェック・完了表示の基本処理は動作します。
PHP 3-4 完成サンプルZIPをダウンロード第3章でできるようになったこと
第3章では、PHPでデータを動かすところまで進みました。
PHP 3-1では、
foreachで配列の中身を順番に処理しました。
PHP 3-2では、
HTMLフォームへ入力した文字をPOSTでPHPへ渡しました。
PHP 3-3では、
GETとPOSTの違いを確認しました。
そしてPHP 3-4では、
入力
↓
送信
↓
PHPで受け取る
↓
入力チェック
↓
完了表示
までを1つのお問い合わせフォームとして組み立てました。
最初から比べると、かなりWEBサイトらしい処理になっています。
これで第3章は完了です。
まとめ
PHP 3-4では、これまで学んできた内容を組み合わせて、簡単なお問い合わせフォームの形を作りました。
フォーム側では、
method=”post”
とname属性を使います。
PHP側では、
$_POST
で値を受け取ります。
さらに、空欄やメールアドレスの形式を確認し、問題がなければ完了画面を表示しました。
今回のフォームは本番用ではありませんが、
「フォームからPHPへデータが渡り、PHPがその値を処理する」
というWEBアプリケーションの基本的な流れを体験できました。
ここまでで、PHP第3章は終了です。
次の第4章では、これまで学んできたPHPがWordPressの中でどのように使われているのかを見ていきます。
PHP 3章の流れ
PHP 3章では、配列とフォーム処理を学びました。
- PHP 3-1：PHPのforeach。配列の中身を順番に表示する
- PHP 3-2：PHPフォームの基本。入力した文字を受け取る
- PHP 3-3：GETとPOSTの違い。フォーム送信の基本を整理する
- PHP 3-4：PHPで簡単なお問い合わせフォームの形を作る
PHP 4章の流れ
PHP 4章では、これまで学んだPHPをWordPressにつなげる考え方を学びます。
- PHP 4-1：PHPとWordPressの関係。テーマやfunctions.phpにつながる考え方
- PHP 4-2：WordPressテーマでPHPが使われる場所を見てみる
- PHP 4-3：PHPのinclude。共通パーツを読み込む考え方
- PHP 4-4：PHP学習の次に進む道。WordPress・Laravel・自作ツールへ
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
