PHPプログラミング

ベストプラクティス

フォームを作る vol.2

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

  • このエントリーをはてなブックマークに追加

フォームを作成するシリーズ記事の第2段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。

目次

  1. #  概要
  2. #  確認ページの作成
  3. #  完了ページの作成

概要

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

前回作成したファイルはこちら:ダウンロード(約0.9KB)

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

確認ページの作成

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

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

出力されたデータには、「氏名」であるyour_name、「メールアドレス」のemmail、そして「入力内容を確認するボタン」の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の値でスイッチするイメージ図

その下の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ページを用意し、表示をスイッチする基本構造が完成しました。
次回は完了ページまで進んだ際に、フォームを入力してくれた方へ自動返信メールを送る機能を実装していきます。

今回作成したファイル:ダウンロード(約1.1KB)

  • このエントリーをはてなブックマークに追加