最終更新日：
公開日：
ワークショップ
お問い合わせフォームを作る(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が、入力ページや確認ページの表示をスイッチするフラグになります。
その下の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
こちらの記事は役に立ちましたか？
コメントありがとうございます！
運営の参考にさせていただきます。
記事一覧
- お問い合わせフォームを作る (イントロダクション) お問い合わせフォームを作る
- お問い合わせフォームを作る(1) お問い合わせフォームの入力ページを作成する
- お問い合わせフォームを作る(2) フォームの確認ページ&完了ページを作成する
- お問い合わせフォームを作る(3) 自動返信メールの実装
- お問い合わせフォームを作る(4) 入力値の引き継ぎ
- お問い合わせフォームを作る(5) 入力値のサニタイズ
- お問い合わせフォームを作る(6) 入力値のバリデーション
- お問い合わせフォームを作る(7) 入力項目に合わせた様々なバリデーション
- お問い合わせフォームを作る(8) フォームにファイルアップロード機能をつける
- お問い合わせフォームを作る(9) アップロードしたファイルをメールに添付する
- お問い合わせフォームを作る(10) セッションでフォームの多重送信を防ぐ
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。