お問い合わせフォーム｜入力画面に戻る - 未経験のwebサイト制作の勉強

入力画面に戻る

何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、この設定をするとしないではフォームの離脱率に非常に影響が出るので、設定しましょう。
今回は簡単なJavascriptを使った方法で、データを保持したまま入力画面に戻る機能をつけましょう。

inputタグの場合

<input value="前に戻る" onclick="history.back();" type="button">

buttonタグの場合

<button type="button" onclick="history.back()">戻る</button>

フォーム情報がない場合、入力画面に戻る

<?php
if( !(isset($_POST['name'])) ){
  header('Location:input.php');
  exit;
}
?>

確認画面に直接アクセスすると、POST変数の中身が空であるためエラーが表示されます。
上記のようにに記述すると、POST変数が空のときフォームページにリダイレクトされます。

isset関数

変数の中身があれば真、なければ偽を返す。
ビックリマーク（エクスクラメーション）の意味は「否定」ですが簡単に言えば「～ではない」という意味です。
なので、「!(isset)」という事は本来の isset関数の意味と真逆になり、変数の中身があれば偽、なければ真を返すようになるので、
name変数に値が無ければ、Locationで指定したURLにリダイレクトするという意味になります。

header()関数

header関数でLocation: URL指定すればリダイレクトできる
header()関数自体は他にもたくさんの用途がある

exit()関数

スクリプトを終了する

今回はinput.php→confirm.php→submit.php
というように3枚のファイルを使用したお問い合わせフォームを作ります。

input.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続していないフォーム｜入力画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>入力画面</h1>
<form action="confirm.php" method="post">
<dl>
<dt>お名前</dt><dd><input type="text" name="name" required placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt><dd><input type="email" name="email" required></dd>
<dt>お問い合わせ内容</dt><dd><textarea name="message" required cols="40" rows="5"></textarea></dd> 
</dl>
<p><input type="submit" value="確認画面へ"></p>
</form>
</div>
</body>
</html>

confirm.php

<?php
if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
 header('Location:input.php');
 exit;
}

$name = htmlspecialchars($_POST["name"], ENT_QUOTES);
$email = htmlspecialchars($_POST["email"], ENT_QUOTES);
$message = htmlspecialchars($_POST["message"], ENT_QUOTES);
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DBに接続していないフォーム｜確認画面</title>
<link rel="stylesheet" href="css/form.css">
</head>

<body>
<div class="container">
<h1>確認画面</h1>
<form>
<dl>
<dt>お名前</dt><dd><?php echo $name ?></dd>
<dt>メールアドレス</dt><dd><?php echo $email ?></dd>
<dt>お問い合わせ内容</dt><dd><?php echo $message ?></dd> 
</dl>
<p>
<input type="submit" value="送信">
<input type="button" value="戻る" onclick="history.back();">
</p>
</form>
</div>
</body>
</html>

form.css

@charset "utf-8";
/* CSS Document */

html,h1,p,dl,dt,dd {
margin:0;
padding:0;
}
.container {
max-width:600px;
margin:0 auto;
}
h1 {
padding:20px 0;
text-align:center;
}
dl {
display:flex;
flex-wrap:wrap;
margin-bottom:20px;
}
dt {
width:30%;
border:1px solid #333;
border-right:0;
box-sizing:border-box;
background:#AAA;
padding:10px;
font-weight:bold;
align-items: center;
}
dd{
width:70%;
border:1px solid #333;
box-sizing:border-box;
padding:10px;
}
dt:nth-of-type(n+2),dd:nth-of-type(n+2) {
border-top:0;
}