PHPプログラミング

最終更新日：
公開日：

ワークショップ

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

入力値の引き継ぎ

ワークショップ「お問い合わせフォームを作成する」の第4回目は、確認ページから入力ページへ戻ったときに入力していた値を引き継げるようにします。

この記事のポイント

  • 確認ページから入力ページに戻ったときに入力値を受け渡しする
  • フォームに選択式の入力項目を追加する

目次

概要

前回はフォームによる自動返信メールを送信する機能を実装しました。
今回は、確認ページから入力ページへ戻ったときに一度フォームへ入力した値を引き継いでフォームを0から入力しなくても大丈夫なようにしていきます。

今回使用しているコードは、前回までに作成したものを使うことを前提としています。
前回のページ：vol.3 自動返信メールの実装
前回作成したコードはこちら：vol.3のサンプルコード – GitHub

現状のフォーム

入力ページに値が引き継がれないとき
入力ページに値が引き継がれないとき

現状は、確認ページから入力ページへ戻っても、今まで入力した値は引き継がれません。
これではフォームの入力が振り出しに戻ってしまうため、入力している側からすると非常にストレスに感じます。

改善後のフォーム

入力値の引き継ぎを設定したフォーム
入力値の引き継ぎを設定したフォーム

入力値を引き継ぐように設定すると、入力ページへ戻っても今まで入力した値が引き継がれるようになります。
こちらの方が断然便利で親切です。

肝心な入力値は既にPOSTパラメータで渡されるようになっているので、入力ページを改善して値の引き継ぎを設定していきましょう。

入力ページを改善する

「index.php」を開き、入力ページの箇所について2箇所の赤色のコード部分を追記してください。

Note

赤い箇所は追加するコードを、オレンジの箇所は修正しているコードを示します。

index.php

---- 省略 ----

<?php else: ?>

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="<?php if( !empty($_POST['your_name']) ){ echo $_POST['your_name']; } ?>">
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<input type="text" name="email" value="<?php if( !empty($_POST['email']) ){ echo $_POST['email']; } ?>">
	</div>
	<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>

<?php endif; ?>

input要素のvalue属性の中にif文を加えるだけです。

if文の中身は、該当する入力値(POSTパラメータ)が空じゃない場合のみ、入力値をvalue属性にセットしています。

通常のテキストフォームであれば以上で完了ですが、今回はフォームの種類を増やして、それぞれの値を引き継ぐように設定してみましょう。

フォームの種類を増やす

今までは氏名とメールアドレスのみでしたが、新しく4つの入力項目を追加します。
入力方法がそれぞれ異なる点にも注目してください。

  • 性別 – ラジオボタン
  • 年齢 – セレクト
  • お問い合わせ内容 – テキストボックス
  • プライバシーポリシーの同意 – チェックボックス

完成後のページイメージ

入力項目を増やす
入力項目を増やす

「index.php」の入力ページの部分に、次のHTMLコードを追加してください。

index.php

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="<?php if( !empty($_POST['your_name']) ){ echo $_POST['your_name']; } ?>">
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<input type="text" name="email" value="<?php if( !empty($_POST['email']) ){ echo $_POST['email']; } ?>">
	</div>
	<div class="element_wrap">
		<label>性別</label>
		<label for="gender_male"><input id="gender_male" type="radio" name="gender" value="male">男性</label>
		<label for="gender_female"><input id="gender_female" type="radio" name="gender" value="female">女性</label>
	</div>
	<div class="element_wrap">
		<label>年齢</label>
		<select name="age">
			<option value="">選択してください</option>
			<option value="1">〜19歳</option>
			<option value="2">20歳〜29歳</option>
			<option value="3">30歳〜39歳</option>
			<option value="4">40歳〜49歳</option>
			<option value="5">50歳〜59歳</option>
			<option value="6">60歳〜</option>
		</select>
	</div>
	<div class="element_wrap">
		<label>お問い合わせ内容</label>
		<textarea name="contact"></textarea>
	</div>
	<div class="element_wrap">
		<label for="agreement"><input id="agreement" type="checkbox" name="agreement" value="1">プライバシーポリシーに同意する</label>
	</div>
	<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>

スタイルシートも追記します。

index.php

<style rel="stylesheet" type="text/css">

---- 省略 ----

label[for=gender_male],
label[for=gender_female],
label[for=agreement] {
	margin-right: 10px;
	width: auto;
	font-weight: normal;
}

textarea[name=contact] {
	padding: 5px 10px;
	width: 60%;
	height: 100px;
	font-size: 86%;
	border: none;
	border-radius: 3px;
	background: #ddf0ff;
}
</style>

---- 省略 ----

確認ページを編集

入力ページに続き、確認ページにも変更を加えます。

index.php

---- 省略 ----

<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>
	<div class="element_wrap">
		<label>性別</label>
		<p><?php if( $_POST['gender'] === "male" ){ echo '男性'; }
		else{ echo '女性'; } ?></p>
	</div>
	<div class="element_wrap">
		<label>年齢</label>
		<p><?php if( $_POST['age'] === "1" ){ echo '〜19歳'; }
		elseif( $_POST['age'] === "2" ){ echo '20歳〜29歳'; }
		elseif( $_POST['age'] === "3" ){ echo '30歳〜39歳'; }
		elseif( $_POST['age'] === "4" ){ echo '40歳〜49歳'; }
		elseif( $_POST['age'] === "5" ){ echo '50歳〜59歳'; }
		elseif( $_POST['age'] === "6" ){ echo '60歳〜'; } ?></p>
	</div>
	<div class="element_wrap">
		<label>お問い合わせ内容</label>
		<p><?php echo nl2br($_POST['contact']); ?></p>
	</div>
	<div class="element_wrap">
		<label>プライバシーポリシーに同意する</label>
		<p><?php if( $_POST['agreement'] === "1" ){ echo '同意する'; }
		else{ echo '同意しない'; } ?></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']; ?>">
	<input type="hidden" name="gender" value="<?php echo $_POST['gender']; ?>">
	<input type="hidden" name="age" value="<?php echo $_POST['age']; ?>">
	<input type="hidden" name="contact" value="<?php echo $_POST['contact']; ?>">
	<input type="hidden" name="agreement" value="<?php echo $_POST['agreement']; ?>">
</form>

新しく追加した項目について、「お問い合わせ内容」以外は全て選択範囲が設定されているため、if文で入力値を判定しています。

お問い合わせ内容は「氏名」などと同じテキスト形式なので、echo関数で出力をします。
テキストボックスは入力値が複数行に渡る可能性もあるため、出力時にnl2br関数によって改行を有効にしておきます。

確認ページのブラウザ表示例
確認ページのブラウザ表示例

自動返信メールの本文を編集する

続いて、メール送信の本文テキストについても項目追加を反映していきます。

index.php

	// 本文を設定
	$auto_reply_text = "この度は、お問い合わせ頂き誠にありがとうございます。
下記の内容でお問い合わせを受け付けました。\n\n";
	$auto_reply_text .= "お問い合わせ日時：" . date("Y-m-d H:i") . "\n";
	$auto_reply_text .= "氏名：" . $_POST['your_name'] . "\n";
	$auto_reply_text .= "メールアドレス：" . $_POST['email'] . "\n";

	if( $_POST['gender'] === "male" ) {
		$auto_reply_text .= "性別：男性\n";
	} else {
		$auto_reply_text .= "性別：女性\n";
	}

	if( $_POST['age'] === "1" ){
		$auto_reply_text .= "年齢：〜19歳\n";
	} elseif ( $_POST['age'] === "2" ){
		$auto_reply_text .= "年齢：20歳〜29歳\n";
	} elseif ( $_POST['age'] === "3" ){
		$auto_reply_text .= "年齢：30歳〜39歳\n";
	} elseif ( $_POST['age'] === "4" ){
		$auto_reply_text .= "年齢：40歳〜49歳\n";
	} elseif( $_POST['age'] === "5" ){
		$auto_reply_text .= "年齢：50歳〜59歳\n";
	} elseif( $_POST['age'] === "6" ){
		$auto_reply_text .= "年齢：60歳〜\n";
	}

	$auto_reply_text .= "お問い合わせ内容：" . nl2br($_POST['contact']) . "\n\n";
	$auto_reply_text .= "GRAYCODE 事務局";

	// 自動返信メール送信
	mb_send_mail( $_POST['email'], $auto_reply_subject, $auto_reply_text, $header);

	// 運営側へ送るメールの件名
	$admin_reply_subject = "お問い合わせを受け付けました";
	
	// 本文を設定
	$admin_reply_text = "下記の内容でお問い合わせがありました。\n\n";
	$admin_reply_text .= "お問い合わせ日時：" . date("Y-m-d H:i") . "\n";
	$admin_reply_text .= "氏名：" . $_POST['your_name'] . "\n";
	$admin_reply_text .= "メールアドレス：" . $_POST['email'] . "\n";

	if( $_POST['gender'] === "male" ) {
		$admin_reply_text .= "性別：男性\n";
	} else {
		$admin_reply_text .= "性別：女性\n";
	}

	if( $_POST['age'] === "1" ){
		$admin_reply_text .= "年齢：〜19歳\n";
	} elseif ( $_POST['age'] === "2" ){
		$admin_reply_text .= "年齢：20歳〜29歳\n";
	} elseif ( $_POST['age'] === "3" ){
		$admin_reply_text .= "年齢：30歳〜39歳\n";
	} elseif ( $_POST['age'] === "4" ){
		$admin_reply_text .= "年齢：40歳〜49歳\n";
	} elseif( $_POST['age'] === "5" ){
		$admin_reply_text.= "年齢：50歳〜59歳\n";
	} elseif( $_POST['age'] === "6" ){
		$admin_reply_text.= "年齢：60歳〜\n";
	}

	$admin_reply_text .= "お問い合わせ内容：" . nl2br($_POST['contact']) . "\n\n";

	// 管理者へメール送信
	mb_send_mail( 'webmaster@gray-code.com', $admin_reply_subject, $admin_reply_text, $header);

今回のコード追加に合わせ、「メールアドレス」の改行コードを「\n\n」から「\n」へ変更しています。

新しく追加した入力項目の値も引き継ぐように設定する

最後に、新しく追加した項目についても入力値が引き継がれるよう設定していきます。
POSTパラメータを使って設定する基本部分は共通ですが、if文を使うので少しだけ複雑になります。

index.php

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="<?php if( !empty($_POST['your_name']) ){ echo $_POST['your_name']; } ?>">
	</div>
	<div class="element_wrap">
		<label>メールアドレス</label>
		<input type="text" name="email" value="<?php if( !empty($_POST['email']) ){ echo $_POST['email']; } ?>">
	</div>
	<div class="element_wrap">
		<label>性別</label>
		<label for="gender_male"><input id="gender_male" type="radio" name="gender" value="male" <?php if( !empty($_POST['gender']) && $_POST['gender'] === "male" ){ echo 'checked'; } ?>>男性</label>
		<label for="gender_female"><input id="gender_female" type="radio" name="gender" value="female" <?php if( !empty($_POST['gender']) && $_POST['gender'] === "female" ){ echo 'checked'; } ?>>女性</label>
	</div>
	<div class="element_wrap">
		<label>年齢</label>
		<select name="age">
			<option value="">選択してください</option>
			<option value="1" <?php if( !empty($_POST['age']) && $_POST['age'] === "1" ){ echo 'selected'; } ?>>〜19歳</option>
			<option value="2" <?php if( !empty($_POST['age']) && $_POST['age'] === "2" ){ echo 'selected'; } ?>>20歳〜29歳</option>
			<option value="3" <?php if( !empty($_POST['age']) && $_POST['age'] === "3" ){ echo 'selected'; } ?>>30歳〜39歳</option>
			<option value="4" <?php if( !empty($_POST['age']) && $_POST['age'] === "4" ){ echo 'selected'; } ?>>40歳〜49歳</option>
			<option value="5" <?php if( !empty($_POST['age']) && $_POST['age'] === "5" ){ echo 'selected'; } ?>>50歳〜59歳</option>
			<option value="6" <?php if( !empty($_POST['age']) && $_POST['age'] === "6" ){ echo 'selected'; } ?>>60歳〜</option>
		</select>
	</div>
	<div class="element_wrap">
		<label>お問い合わせ内容</label>
		<textarea name="contact"><?php if( !empty($_POST['contact']) ){ echo $_POST['contact']; } ?></textarea>
	</div>
	<div class="element_wrap">
		<label for="agreement"><input id="agreement" type="checkbox" name="agreement" value="1" <?php if( !empty($_POST['agreement']) && $_POST['agreement'] === "1" ){ echo 'checked'; } ?>>プライバシーポリシーに同意する</label>
	</div>
	<input type="submit" name="btn_confirm" value="入力内容を確認する">
</form>

「性別」のラジオボタン、「プライバシーポリシーの同意」のチェックボックスに関しては、選択された値である場合はchecked属性を付与して選択状態を引き継ぎます。

「年齢」のセレクトは選択された値を持つ選択肢にのみselected属性を付与し、選択状態を引き継ぎます。

以上の3つの項目については、if文の条件式で「空ではない」ことを確認した上で、さらに入力値が選択肢の値と一致しているかを確認していることがポイント。

「お問い合わせ内容」はテキストなので入力値を出力すれば大丈夫ですが、複数行の可能性もあるので確認ページ同様にnl2br関数を使用します。

以上で入力値の引き継ぎは完了です。
次回は入力値のサニタイズを実装していきます。

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

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

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

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

記事一覧

  1. お問い合わせフォームを作る (イントロダクション) お問い合わせフォームを作る
  2. お問い合わせフォームを作る(1) お問い合わせフォームの入力ページを作成する
  3. お問い合わせフォームを作る(2) フォームの確認ページ&完了ページを作成する
  4. お問い合わせフォームを作る(3) 自動返信メールの実装
  5. お問い合わせフォームを作る(4) 入力値の引き継ぎ
  6. お問い合わせフォームを作る(5) 入力値のサニタイズ
  7. お問い合わせフォームを作る(6) 入力値のバリデーション
  8. お問い合わせフォームを作る(7) 入力項目に合わせた様々なバリデーション
  9. お問い合わせフォームを作る(8) フォームにファイルアップロード機能をつける
  10. お問い合わせフォームを作る(9) アップロードしたファイルをメールに添付する
  11. お問い合わせフォームを作る(10) セッションでフォームの多重送信を防ぐ
前のページへ 一覧に戻る 次のページへ