ワークショップ

フォームを作る vol.4

入力値の引き継ぎ

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

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

この記事のポイント

  • ページとページの間で入力値を受け渡しする

目次

概要

前回はフォームによる自動返信メールを送信する機能を実装しました。
今回は、確認ページから入力ページへ戻ったときに入力値の引き継ぎを設定し、入力値の修正作業をよりスムーズに行えるようにしていきます。

今回使用しているコードは、前回までに作成したものを使うことを前提としています。
前回のページ: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文の条件式で「空ではない」ことを確認した上で、さらに入力値が選択肢の値と一致しているかを確認していることがポイント。

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

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

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

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ