WordPressにお問い合わせページを作成する(2)

お問い合わせページに確認ページ、完了ページを表示する

前回の「WordPressにお問い合わせページを作成する(1)」ではお問い合わせページの入力ページを作成しました。

前回作成したコード：GitHub

今回は引き続き、入力内容を確認するページと完了ページを作成していきます。

確認ページと完了ページはいずれも前回テーマフォルダに作成したpage-contact.phpに追記する形で実装していきます。

入力内容を確認するページを作成する

まずは入力内容を確認するページから作成していきます。
前回、入力ページで「送信内容の確認ボタン」を押すと入力された値がPOSTメソッドで送信されていて、スーパーグローバル変数$_POSTから参照できるところまで確認しました。
$_POSTにはフォームのHTML要素のname属性をキー、value属性を値とするペアの連想配列としてデータを参照することができます。

「送信内容の確認ボタン」もinput要素なので、type属性が「submit」になっている押されたボタンも$_POSTに含まれます。
今回はこのデータを使って、「送信内容の確認ボタン」が押されたら確認ページへの移動、そしてそれ以外のボタンだったら完了ページや入力ページに戻るなどの処理を加えていきましょう。

まずは「送信内容の確認ボタン」が押されたかを判定するために、page-contact.phpに以下のコードを追記してください。
変数$page_flagは表示するページの数値を入れて、1なら入力ページ、2なら確認ページ、3なら完了ページと数値によってどのページを表示するか切り替える処理を入れます。

page-contact.php

<?php

// 変数の初期化
$paeg_flag = 1;

if( isset($_POST['btn_confirm']) && $_POST['btn_confirm'] !== null ) {

	$page_flag = 2;
}

----- 省略　-----

if文では$_POSTに送信内容の確認ボタンが含まれているか確認しています。
もし含まれていたら入力ページからボタンを押して移動してきたと判定し、確認ページを表示するようにします。
また、2行目に書いていたvar_dump関数はコメントアウトするか削除しておいてください。

page-contact.php

<?php

// 変数の初期化
$paeg_flag = 1;

if( isset($_POST['btn_confirm']) && $_POST['btn_confirm'] !== null ) {

	$page_flag = 2;
}

get_header();

?>

----- 省略　-----

<article id="contact">
	<header>
		<h1>お問い合わせ</h1>
	</header>

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

		<p>送信内容をご確認いただき、よろしければ「送信」ボタンを押してください。</p>
		<form action="" method="post">
			<dl>
				<dt>お名前</dt>
				<dd><p><?php if( !empty($_POST['input_name']) ) { echo htmlspecialchars($_POST['input_name'], ENT_QUOTES); } ?></p></dd>
				<dt>メールアドレス</dt>
				<dd><p><?php if( !empty($_POST['input_email']) ) { echo htmlspecialchars($_POST['input_email'], ENT_QUOTES); } ?></p></dd>
				<dt>お問い合わせ内容</dt>
				<dd class="last"><p><?php if( !empty($_POST['input_content']) ) { echo nl2br(htmlspecialchars($_POST['input_content'], ENT_QUOTES)); } ?></p></dd>
			</dl>
			<div class="btn_area">
				<input type="submit" name="btn_back" value="修正する">
				<input type="submit" name="btn_submit" value="送信">
			</div>
			<input type="hidden" name="input_name" value="<?php if( !empty($_POST['input_name']) ) { echo htmlspecialchars($_POST['input_name'], ENT_QUOTES); } ?>">
			<input type="hidden" name="input_email" value="<?php if( !empty($_POST['input_email']) ) { echo htmlspecialchars($_POST['input_email'], ENT_QUOTES); } ?>">
			<input type="hidden" name="input_content" value="<?php if( !empty($_POST['input_content']) ) { echo htmlspecialchars($_POST['input_content'], ENT_QUOTES); } ?>">
		</form>
	
	<?php else: ?>

		<form action="" method="post">
			<dl>
				<dt>お名前</dt>
				<dd><input type="text" name="input_name" value=""></dd>
				<dt>メールアドレス</dt>
				<dd><input type="email" name="input_email" value=""></dd>
				<dt>お問い合わせ内容</dt>
				<dd>
					<textarea name="input_content"></textarea>
				</dd>
			</dl>
			<div class="btn_area">
				<input type="submit" name="btn_confirm" value="送信内容の確認">
			</div>
		</form>

	<?php endif; ?>
</article>

<?php get_footer(); ?>

ブラウザでお問い合わせページを開き、入力してボタンを押すと以下のような確認ページが表示されます。

フォームに入力していた値を出力するときは、事前にif文でempty関数を使って値があるか確認しています。
empty関数は値が空のときにtrueを返し、空でないときはfalseを返すため、ここでは反対に値があったときにtrueになるように関数の前に「!」を付けています。

echo関数から出力するときはhtmlspecialchars関数で入力値をエスケープしています。
もしHTMLやJavaScriptのコードが入力されていたとしても、この関数を使うと「<」を「&lt;」に変換することで通常の文字列として出力する役割があります。

確認ページでは入力されたデータを確認用で表示するのとは別に、input要素のtype属性「hidden」を3つ設置しています。
これらはデータの受け渡しのためだけに使うため、非表示の要素として使います。

完了ページを作成する

確認ページには「修正するボタン」と「送信ボタン」の2つを設置していますが、今はまだどちらのボタンを押しても入力ページに戻ってしまいます。
そこで、「送信ボタン」を押したら完了ページが表示されるようにコードを追記していきましょう。

確認ページの「送信ボタン」のname属性「btn_submit」が$_POSTに含まれていたら、$page_flagに3を設定して完了ページが表示されるようにします。
仕組み自体は確認ページの表示切り替えと同じです。

page-contact.php

<?php

// 変数の初期化
$paeg_flag = 1;

if( isset($_POST['btn_confirm']) && $_POST['btn_confirm'] !== null ) {

	$page_flag = 2;

} elseif( isset($_POST['btn_submit']) && $_POST['btn_submit'] !== null ) {

	$page_flag = 3;
}

get_header();

?>

----- 省略　-----

<article id="contact">
	<header>
		<h1>お問い合わせ</h1>
	</header>

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

		<p>送信内容をご確認いただき、よろしければ「送信」ボタンを押してください。</p>
		<form action="" method="post">
			<dl>
				<dt>お名前</dt>
				<dd><p><?php if( !empty($_POST['input_name']) ) { echo htmlspecialchars($_POST['input_name'], ENT_QUOTES); } ?></p></dd>
				<dt>メールアドレス</dt>
				<dd><p><?php if( !empty($_POST['input_email']) ) { echo htmlspecialchars($_POST['input_email'], ENT_QUOTES); } ?></p></dd>
				<dt>お問い合わせ内容</dt>
				<dd class="last"><p><?php if( !empty($_POST['input_content']) ) { echo nl2br(htmlspecialchars($_POST['input_content'], ENT_QUOTES)); } ?></p></dd>
			</dl>
			<div class="btn_area">
				<input type="submit" name="btn_back" value="修正する">
				<input type="submit" name="btn_submit" value="送信">
			</div>
			<input type="hidden" name="input_name" value="<?php if( !empty($_POST['input_name']) ) { echo htmlspecialchars($_POST['input_name'], ENT_QUOTES); } ?>">
			<input type="hidden" name="input_email" value="<?php if( !empty($_POST['input_email']) ) { echo htmlspecialchars($_POST['input_email'], ENT_QUOTES); } ?>">
			<input type="hidden" name="input_content" value="<?php if( !empty($_POST['input_content']) ) { echo htmlspecialchars($_POST['input_content'], ENT_QUOTES); } ?>">
			<input type="hidden" name="csrf_token" value="<?php if( !empty($_POST['csrf_token']) ){ echo htmlspecialchars($_POST['csrf_token'], ENT_QUOTES); } ?>">
		</form>

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

		<p>お問い合わせいただきありがとうございます。<br>受付が完了いたしました。</p>
		<div class="link_area">
			<a class="btn_back" href="/">トップページに戻る</a>
		</div>
	
	<?php else: ?>

		<form action="" method="post">
			<dl>
				<dt>お名前</dt>
				<dd><input type="text" name="input_name" value=""></dd>
				<dt>メールアドレス</dt>
				<dd><input type="email" name="input_email" value=""></dd>
				<dt>お問い合わせ内容</dt>
				<dd>
					<textarea name="input_content"></textarea>
				</dd>
			</dl>
			<div class="btn_area">
				<input type="submit" name="btn_confirm" value="送信内容の確認">
			</div>
		</form>

	<?php endif; ?>
</article>

<?php get_footer(); ?>

確認ページから送信ボタンを押すと、以下のように完了ページが表示されるようになります。

入力ページに入力した値を引き継ぐ

ここまででお問合せページの(1)入力ページ、(2)確認ページ、(3)完了ページの移動については用意できました。
(2)確認ページで「修正する」を押すと(1)入力ページに戻ることができますが、入力したデータが引き継がれません。
続いて、入力ページに戻ったときに入力していた値が反映されるように修正していきます。

入力ページのフォームに、以下のようにコードを追加していきます。
empty関数で入力値があるか確認し、htmlspecialchars関数で変換してから出力する流れは確認ページで使用したコードと共通です。

page-contact.php

<?php

----- 省略　-----

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

		<p>お問い合わせいただきありがとうございます。<br>受付が完了いたしました。</p>
		<div class="link_area">
			<a class="btn_back" href="/">トップページに戻る</a>
		</div>
	
	<?php else: ?>

		<form action="" method="post">
			<dl>
				<dt>お名前</dt>
				<dd><input type="text" name="input_name" value="<?php if( !empty($_POST['input_name']) ) { echo htmlspecialchars($_POST['input_name'], ENT_QUOTES); } ?>"></dd>
				<dt>メールアドレス</dt>
				<dd><input type="email" name="input_email" value="<?php if( !empty($_POST['input_email']) ) { echo htmlspecialchars($_POST['input_email'], ENT_QUOTES); } ?>"></dd>
				<dt>お問い合わせ内容</dt>
				<dd>
					<textarea name="input_content"><?php if( !empty($_POST['input_content']) ) { echo htmlspecialchars($_POST['input_content'], ENT_QUOTES); } ?></textarea>
				</dd>
			</dl>
			<div class="btn_area">
				<input type="submit" name="btn_confirm" value="送信内容の確認">
			</div>
		</form>

	<?php endif; ?>
</article>

<?php get_footer(); ?>

ブラウザで再度お問い合わせページを表示して、(1)入力ページから(2)確認ページを表示し、そこで「修正するボタン」を押してみてください。
入力していた値がフォームに引き継がれるようになりました。

ここまででお問い合わせページのページの切り替えは実装できました。
しかし現時点ではまだフォームに入力がなくてもページを進むことができてしまいます。
そこで次回は、フォームに入力があるかを確認するバリデーションの機能を実装していきましょう。

今回作成したコード：GitHub