【第２回】PHPでお問い合わせフォームを作ろう！入力値の確認と値の保持の仕方

この記事からわかること

  • 前回の記事の続き
  • 入力値の確認画面
  • 強制的な画面遷移方法
  • 画面遷移時の値の保持と戻った時の処理

index

[open]

＼ アプリをリリースしました ／

みんなの誕生日

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

前回の記事：【自作】PHPでお問い合わせフォームを作ろう！コードと仕組みを徹底解説！

  1. ✔️ 入力フォームの作成(HTML)
  2. ✔️ 入力値のエスケープ処理と入力チェック(HTML+php)
  3. 入力値の確認
  4. メール本文(相手に自動送信用)を作成(php)
  5. メール本文(自分にお問い合わせ内容送信用)を作成(php)
  6. 実際にメールを送信する(php)

前回の記事でここまで終了しました。

今回は入力値の送信前の確認画面と戻った時の値の保持部分を作っていきたいと思います。

最初に実装すべきことを整理する

「入力値の確認」でやらなければいけないことは以下の通りです。

送信前の確認画面に遷移させる

前回の記事で「form.php」に以下のように記述しました。この部分の「エラー配列が空の場合」の処理を画面遷移させる処理に変更していきます。


if(isset($_POST['submit'])){  // #1

    // 〜〜〜〜〜〜〜〜〜〜〜
    // 先ほどのエスケープ処理

    // エラー配列がなければ異常なし
    if(count($errors) === 0){ // #2
      // echo "入力値に異常はありませんでした"; // ここをコメントアウトして編集する
      // ここに画面遷移処理を記述する
    }else{
      // エラー配列があればエラーを表示
      echo $errors['name'];
      echo $errors['title'];
      echo $errors['body'];
    } // #2
}  // #1
?>
<!DOCTYPE html>

画面を遷移させるのはheader関数を使用します。header関数はクライアントからサーバに送られる情報の一部に干渉することができる関数です。Locationヘッダにリダイレクト(遷移)したいURLを記述することで画面を強制的に遷移させることができます。


// 直接URLを記述するパターン
header('Location:https://www.○○○.com/Questionform/confirm.php');
// 保守性を高めURLを自動で生成するパターン
header('Location:https://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/confirm.php');

「$_SERVER['HTTP_HOST']」の部分が「www.○○○.com/」を取得し「dirname($_SERVER['PHP_SELF'])」が「Questionform/」を呼び出してくれています。

おすすめ記事：【PHP】ファイル名や絶対パスの取得方法！パスは汎用性の高いコードを記述しよう

今回は直接URLを記述する方式で記述しておきます。ローカル環境の場合は以下のように「http://localhost/」を本番環境の場合は任意のドメインURLに変更してください。


// echo "入力値に異常はありませんでした"; // ここをコメントアウトして編集する
// URLは「http」or「https」に注意
header('Location:http://localhost/Questionform/confirm.php');

これで入力エラーがない場合に画面を遷移させることができるようになりました。次は「入力値を遷移先のファイルに渡す方法」を解説していきます。

遷移させた時に値をconfirm.phpへ渡す

「confirm.php」への記述はまだです。「form.php」にもう少しコードを追加していきます。

入力値を渡すのは$_SESSIONの出番です。$_SESSIONはファイルが変わっても値を保持してくれるのでエスケープ処理をした入力値を$_SESSION['各名称']の中に格納していきましょう！

追加するのは2箇所です。ファイル上部にセッションを使用可能にするためのsession_startと$_SESSION['各名称']への格納処理です。


<?php 
// ファイルの1番上に⇩を記述
session_start();   // SESSIONを使うときは最初にスタートさせる

if(isset($_POST['submit'])){  // #1
    // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

    if(count($errors) === 0){ // #2
      // エスケープ処理をして値を変数に格納済みの入力値
      $_SESSION['kinds']= $kinds; 
      $_SESSION['name'] = $name;
      $_SESSION['email']= $email;
      $_SESSION['title']= $title;
      $_SESSION['body'] = $body;

      // echo "入力値に異常はありませんでした"; // ここをコメントアウトして編集する
      // URLは「http」or「https」に注意
      header('Location:http://localhost/Questionform/confirm.php');
    }else{
      // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

これで入力値を$_SESSIONを介して「confirm.php」に渡すことができます。では次に「confirm.php」で入力値を受け取って表示させてみましょう。

渡された入力値を確認画面に表示する準備

ここからは「confirm.php」に記述していきます。まだ空なのでVS Codeの場合はhtml:5と入力してHTMLを補完入力しておきます。記述を終えたらbody内に以下の内容を記述していきます。


<div>
  <h2 >お問い合わせ内容確認</h2>  
  <table >
    <tr>
      <th>お問い合わせ種別</th>
      <td><?php echo $kinds ;?></td>
    </tr>
    <tr>
      <th>お名前</th>
      <td><?php echo $name ;?></td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td><?php echo $email ;?></td>
    </tr>
    <tr>
      <th>件名</th>
      <td><?php echo $title ;?></td>
    </tr>
    <tr>
      <th>内容</th>
      <td><?php echo nl2br($body);?></td>
    </tr>
  </table>
</div>

ここではtable要素の中に入力値を表示させていきます。先にphpも少し書いてしまいましたがまだこれでは表示されません。次は変数に渡された入力値を格納していきます。

※：nl2br関数は文字列内の改行コード(\nなど)をHTMLでの改行コード(<br>)に変換してくれる関数です。

SESSIONで受け取った入力値を変数に格納

ファイルが変わっても$_SESSION['各名称']はサーバーに保存され参照することができるので「confirm.php」内から参照するようにファイルの上部にphpで記述していきます。


<?php
session_start();   //SESSIONを使うときは最初にスタートさせる
if(isset($_SESSION['kinds'])){
  $kinds = $_SESSION['kinds'];
  $name = $_SESSION['name'];
  $email = $_SESSION['email'];
  $title = $_SESSION['title'];
  $body = $_SESSION['body'];
}
?>
<!DOCTYPE html>

ここでは最初にSESSIONの中に値があるか確認をして、あれば各値を変数に格納していきます。これで変数に値が格納されたので確認画面にも入力された値が表示されるようになりました。

確認画面を表示できたら今度は「送信ボタン」と内容を訂正できるように「戻るボタン」を設置しましょう。戻るボタンはa要素などで「form.php」に飛ばせば良いですがここで１つ注意点があります。

それは戻った時に現在の入力値を保持してあらかじめ入力された状態で「form.php」を表示するということです。

ではそのやり方を解説していきます。

送信ボタンと戻るボタンを作り戻った時に値を保持しよう

戻るボタン(a要素)のhref先は「form.php?action=edit」とします。URLの末尾に?をつければ$_GETの情報を記載できるのでした。


// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
    <tr>
      <th>内容</th>
      <td><?php echo nl2br($body); ?></td>
    </tr>
  </table>
  <p>こちらの内容で送信してもよろしいですか？</p>
  <!-- POSTの送信先はsend.phpであることに注意してください -->
  <form method="post" action="send.php">
    <input type="hidden" name="token" value="<?php echo $token ?>">
    <button type="submit" value="送信">送信</button>
    <a href="form.php?action=edit">戻る</a>
  </form>
</div>

これで「form.php」に遷移した際に$_GET['action']にeditが格納されます。

10行目にinput要素でtokenとありますがこれは第3回で解説します。

form.phpに戻って遷移した場合の処理

「confirm.php」から「form.php」に遷移(戻る)した場合のみ$_GET['action']に値があるのでそれをキーに分岐させるコードを記述します。再度「form.php」に追記していきます。

追記する場所はどこでも良いですが#1番のif文の下側に記述しておきましょう。


// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
  }  // #2
}  // #1

// confirm.phpから戻ってきたときに値を保持
if (isset($_GET) && isset($_GET['action']) && $_GET['action'] === 'edit') {
  $kinds = $_SESSION['kinds'];
  $name  = $_SESSION['name'];
  $email = $_SESSION['email'];
  $title = $_SESSION['title'];
  $body  = $_SESSION['body'];
}
?>

ここではif(isset($_GET) && $_GET['action'] === 'edit')で$_GETに値があるかの確認と値がeditであるかを確認します。

問題がなければ変数に格納しておきます。第一回の時と同じ変数名を使っていますがバッティングすることはないので問題ありません。ややこしければ別の変数名にしておきましょう。

戻ってきた時に値をinput要素に渡す

第一回のform.phpのフォーム部分を少し変更していきます。


<div>
  <p>お問い合わせ種別</p>
  <!-- radio部分で変更したのは3箇所ともcheckedの部分です⇩ -->
  <input type="radio" name="kinds" value="質問" <?php if(isset($kinds)&&$kinds==="質問"){echo "checked";}else{echo "checked";}?> ><label>質問</label>
  <input type="radio" name="kinds" value="依頼" <?php if(isset($kinds)&&$kinds==="依頼"){echo "checked";}?> ><label>依頼</label>
  <input type="radio" name="kinds" value="その他" <?php if(isset($kinds)&&$kinds==="その他"){echo "checked";}?> ><label>その他</label>
</div>
<p >お名前</p>
  <!-- input部分で変更したのはvalueの部分です⇩ -->
<input type="text" name="name" value="<?php if(isset($name)){echo $name;} ?>" placeholder="お名前" required>
<p>メールアドレス</p>
<input type="email" name="email" value="<?php if(isset($email)){echo $email;} ?>" placeholder="メールアドレス" required>
<p>件名</p>
<input type="text" name="title" value="<?php if(isset($title)){echo $title;} ?>" placeholder="件名" required>
<p >内容</p>
  <!-- textareaのみvalueではなく要素の間なので注意してください⇩ -->
<textarea type="text" name="body"placeholder="お問い合わせ内容" rows="7" required><?php  if(isset($body)){echo $body;}?></textarea>

これで戻った時のみ各input要素の値が保持されるようになりました。逆に「form.php」に初めて訪れた時に値が空欄になっていることも確認してみてください。

今回はここまでにして次回は「メールの本文の作成方法と送信の仕方」を解説していきます！

今回のまとめ

記述したファイル

  1. form.php
  2. confirm.php

記述した内容

  1. 強制的な画面遷移(リダイレクト)の方法(form.php)
  2. 遷移後のconfirm.phpへのSESSIONによる値渡し(form.php)
  3. confirm.phpの確認画面のHTML(confirm.php)
  4. confirm.phpのSESSIONによる値の受け取り(confirm.php)
  5. 送信ボタンと戻るボタンの設置と値の保持の仕方(confirm.php)
  6. 戻った際の値の表示(form.php)

ご覧いただきありがとうございました！

第1回：【自作】PHPでお問い合わせフォームを作ろう！コードと仕組みを徹底解説！

第2回：【第２回】PHPでお問い合わせフォームを作ろう！入力値の確認と値の保持の仕方

第3回：【第3回】PHPでお問い合わせフォームを作ろう！メールの本文の作成方法と送信の仕方

第2回の全体のコード

form.php


<?php
session_start();

// 送信ボタンが押されたかどうか
if (isset($_POST['submit'])) { // #1

  // POSTされたデータをエスケープ処理して変数に格納
  $kinds = htmlspecialchars($_POST['kinds'], ENT_QUOTES | ENT_HTML5);
  $name  = htmlspecialchars($_POST['name'], ENT_QUOTES | ENT_HTML5);
  $email = htmlspecialchars($_POST['email'], ENT_QUOTES | ENT_HTML5);
  $title = htmlspecialchars($_POST['title'], ENT_QUOTES | ENT_HTML5);
  $body = htmlspecialchars($_POST['body'], ENT_QUOTES | ENT_HTML5);

  $errors = []; //エラー格納用配列
  if (trim($name) === '' || trim($name) === "　") {
    $errors['name'] = "名前を入力してください";
  }
  if (trim($title) === '' || trim($title) === "　") {
    $errors['title'] = "タイトルを入力してください";
  }
  if (trim($body) === '' || trim($body) === "　") {
    $errors['body'] = "内容を入力してください";
  }
  // エラー配列がなければ完了
  if (count($errors) === 0) { // #2
    $_SESSION['kinds'] = $kinds; //⇦エスケープ処理をして値を変数に格納済みの入力値
    $_SESSION['name'] = $name;
    $_SESSION['email'] = $email;
    $_SESSION['title'] = $title;
    $_SESSION['body'] = $body;
    // URLは「http」or「https」に注意
    header('Location:http://localhost/Questionform/confirm.php');
    // header('Location:http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/confirm.php');
  } else {   // #2
    // エラー配列があればエラーを表示
    echo $errors['name'];
    echo $errors['title'];
    echo $errors['body'];
  }  // #2
}  // #1

// confirm.phpから戻ってきたときに値を保持
if (isset($_GET) && isset($_GET['action']) && $_GET['action'] === 'edit') {
  $kinds = $_SESSION['kinds'];
  $name  = $_SESSION['name'];
  $email = $_SESSION['email'];
  $title = $_SESSION['title'];
  $body  = $_SESSION['body'];
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form method="post" action="form.php">
    <div>
      <p>お問い合わせ種別</p>
      <input type="radio" name="kinds" value="質問" <?php if (isset($kinds) && $kinds === "質問") {echo "checked";} else {echo "checked";} ?>><label>質問</label>
      <input type="radio" name="kinds" value="依頼" <?php if (isset($kinds) && $kinds === "依頼") {echo "checked";} ?>><label>依頼</label>
      <input type="radio" name="kinds" value="その他" <?php if (isset($kinds) && $kinds === "その他") {echo "checked";} ?>><label>その他</label>
    </div>
    <p>お名前</p>
    <input type="text" name="name" value="<?php if (isset($name)) {echo $name;} ?>" placeholder="お名前" required>
    <p>メールアドレス</p>
    <input type="email" name="email" value="<?php if (isset($email)) {echo $email;} ?>" placeholder="メールアドレス" required>
    <p>件名</p>
    <input type="text" name="title" value="<?php if (isset($title)) {echo $title;} ?>" placeholder="件名" required>
    <p>内容</p>
    <textarea type="text" name="body" placeholder="お問い合わせ内容" rows="7" required><?php if (isset($body)) {echo $body;} ?></textarea><button type="submit" name="submit" value="確認">確認</button>
  </form>
</body>
</html>

confirm.php


<?php
session_start();   //SESSIONを使うときは最初にスタートさせる

if (isset($_SESSION['kinds'])) {
  $kinds = $_SESSION['kinds'];
  $name = $_SESSION['name'];
  $email = $_SESSION['email'];
  $title = $_SESSION['title'];
  $body = $_SESSION['body'];
}

?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h2>お問い合わせ内容確認</h2>
    <table>
      <tr>
        <th>お問い合わせ種別</th>
        <td><?php echo $kinds; ?></td>
      </tr>
      <tr>
        <th>お名前</th>
        <td><?php echo $name; ?></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><?php echo $email; ?></td>
      </tr>
      <tr>
        <th>件名</th>
        <td><?php echo $title; ?></td>
      </tr>
      <tr>
        <th>内容</th>
        <td><?php echo nl2br($body); ?></td>
      </tr>
    </table>
    <p>こちらの内容で送信してもよろしいですか？</p>
    <!-- POSTの送信先はsend.phpであることに注意してください -->
    <form method="post" action="send.php">
      <input type="hidden" name="token" value="<?php echo $token ?>">
      <button type="submit" value="送信">送信</button>
      <a href="form.php?action=edit">戻る</a>
    </form>
  </div>
</body>

</html>
php
Web制作phpjavascriptWordPressSwiftLaravelVue.jsgit/GitHubAWSLinuxAndroid

searchbox

スポンサー

ProFile

ame

趣味：読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

＼ アプリをリリースしました ／

みんなの誕生日

みんなの誕生日

友達や家族の誕生日を登録しておくと当日に通知が届きお知らせしてくれるiOSアプリです。

貸し借り管理アプリ

貸し借り管理アプリ

お金の貸し借りを管理するためのアプリです。貸借の色が分かれているので識別しやすく、使いやすさを求めてできるだけシンプルなUIにしています。一番人気のアプリです。

カシホン

カシホン

人に貸すことが多く、誰に貸したか忘れがちな本の貸し借りを記録できるアプリです。

Githubにて
iOSアプリのソースコードを公開中！

GitHub-みんなの誕生日
GitHub-貸し借り管理アプリ
GitHub-カシホン

New Article

index