PHPプログラミング

最終更新日:
公開日:

ワークショップ

お問い合わせフォームを作る(2)

フォームの確認ページ&完了ページを作成する

ワークショップ「お問い合わせフォームを作る」の第2回では前回に続いて、フォームに入力した内容を確認するページと完了ページを作成していきます。

この記事のポイント

  • フォームの入力内容確認ページと完了ページを作成する
  • 受け取った$_POSTのデータから表示するページを切り替える

目次

概要

前回はお問い合わせフォームの入力ページを作成しました。
今回は確認ページと完了ページを作成していきます。

フォームの構成図と今回作成するページ
フォームの構成図と今回作成するページ

なお、今回使用するコードは前回までに作成したものを使うことを前提としています。
前回のページ:vol.1 フォームの基本構造を作成する
前回作成したコードはこちら:vol.1のサンプルコード – GitHub

確認ページを作成する

前回、フォームへ入力した値をダンプ出力して確認しました。

フォームの入力値をダンプ出力した例
フォームの入力値をダンプ出力した例

出力されたデータには、「氏名」であるyour_name、「メールアドレス」のemail、そして「入力内容を確認するボタン」のbtn_confirmが含まれています。
まずはこのデータを使って、ボタンが押されたことで確認ページへ進むロジックを書いていきましょう。

index.phpを開いて、次のコードを追加してください。
赤色の箇所が新しく追加するコードです。

index.php

<?php
var_dump($_POST);

// 変数の初期化
$page_flag = 0;

if( !empty($_POST['btn_confirm']) ) {

	$page_flag = 1;
}
?>

<!DOCTYPE>
<html lang="ja">
<head>
<title>お問い合わせフォーム</title>

--- HTMLコードが続く ---

変数$page_flagが、入力ページや確認ページの表示をスイッチするフラグになります。

ページを変数$page_flagの値でスイッチするイメージ図
ページを変数$page_flagの値でスイッチするイメージ図

その下のif文では、フォームデータの中に$_POST['btn_confirm']が含まれているかを、empty関数を使って判定しています。
もしこのデータが含まれていたら「入力内容を確認する」ボタンが押されたことになるので、確認ページへ進めるように$page_flagへ「1」をセットします。

続いて、表示部分をスイッチさせるためにif文を加えていきます。
h1要素以降に、次のコードを追加してください。

index.php

<body>
<h1>お問い合わせフォーム</h1>
<?php if( $page_flag === 1 ): ?>

// ここに確認ページが入る

<?php else: ?>

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="">
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<input type="text" name="email" value="">
	</div>
	<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>

<?php endif; ?>
</body>
</html>

前回までに作成した入力ページはelse文で囲みます。
続いて、確認ページのHTMLを追記します。

index.php

<?php if( $page_flag === 1 ): ?>

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<p><?php echo $_POST['your_name']; ?></p>
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<p><?php echo $_POST['email']; ?></p>
	</div>
	<input type="submit" name="btn_back" value="戻る">
	<input type="submit" name="btn_submit" value="送信">
	<input type="hidden" name="your_name" value="<?php echo $_POST['your_name']; ?>">
	<input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
</form>

<?php else: ?>

確認ページでは、「氏名」「メールアドレス」をそれぞれ「表示用」と「受け渡し用」の2種類に分けて出力しています。

表示用と受け渡し用
表示用と受け渡し用

以上で確認ページの追加は完了です。

完了ページを作成する

同じ要領で完了ページを追加していきます。

index.php

// 変数の初期化
$page_flag = 0;

if( !empty($_POST['btn_confirm']) ) {

	$page_flag = 1;

} elseif( !empty($_POST['btn_submit']) ) {

	$page_flag = 2;
}
?>

if文elseif文を追加し、条件式ではempty関数を使い、$_POST['btn_submit']の値が渡されているか確認を行います。
もし受け取っていた場合は、完了ページを表示するために$page_flagへ「2」をセット。

続いて、完了ページのHTMLを追加します。
完了ページはシンプルに受付完了メッセージを表示するだけです。

index.php

<?php if( $page_flag === 1 ): ?>

// 確認ページのHTML

<?php elseif( $page_flag === 2 ): ?>

<p>送信が完了しました。</p>

<?php else: ?>

// 入力ページのHTML

<?php endif; ?>

表示結果

完了ページの表示例
完了ページの表示例

$page_flagの値をチェックし、「2」の場合に完了ページを出力します。

確認ページで「戻るボタン」が押された場合ですが、この時はif文をスルーして$page_flagの値は「0」のままとなり、入力ページが表示されます。

ここまで、フォームで必要になる入力、確認、完了の3ページを用意し、表示するページを切り替える基本構造が完成しました。
次回は完了ページまで進んだ際に、フォームを入力してくれた方へ自動返信メールを送る機能を実装していきます。

今回作成したコードはこちら:vol.2のサンプルコード – GitHub

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。