今回はWordPressなどに頼らず

自作のPHPコードでHTMLを編集して

お問い合わせフォームを作成していきます。

HTMLのrequired属性について

<input type="text" name="name" id="inputName" class="form-control" required autofocus>

HTMLではこのようにrequired属性を付与することで

空のメールを送信できないようにできます

しかしこれではセキュリティ上の観点からよろしくないのでサーバー側であるPHPでもしっかりテキスト内容を確認します。

入力欄にエラーがないかチェックできるようにする

一旦formタグにnovalidate属性を使用し

フォームの入力内容の検証を無効にしておきます。

<form action="" method="POST" novalidate>

まずお問い合わせの確認画面ですが

基本的にはaction=””とすることで元のページに返ってくるようにします

次にページトップに条件分岐を書きます

<?php
$error = [];
if($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($_POST['name'] === '') {
        $error['name'] = 'blank';
    }
}
?>

$error = [];で空の配列を定義します

if($_SERVER[‘REQUEST_METHOD’] === ‘POST’)は

表示しているページのメソッドがGETかPOSTかどうかを判定しています

記述ページか確認ページかということですね

if ($_POST[‘name’] === ”)もし名前が空であった場合

$error[‘name’] = ‘blank’;変数にblank（空）を代入します

そして名前欄の下に、、

  <?php if ($error['name'] === 'blank'): ?>
     <p class="error_msg">※お名前をご記入ください</p>
  <?php endif; ?>

これでさきに分岐した変数に応じてエラーメッセージが出ますね

しかし条件分岐で直接$_POST[‘name’]と渡すことはセキュリティ上良くないので

PHPの関数でフィルターをかけます

$post = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
    if ($post['name'] === '')

これでフィルターをかけた変数$postで同じ動きができます

filter_input_array(‘スーパーグローバル変数‘,’配列‘)

第一引数　＝　入力タイプを INPUT_GET、INPUT_POST、 INPUT_COOKIE、INPUT_SERVER か INPUT_ENV の何れかで指定します。これらは、$_GET（ゲット変数）、$_POST（ポスト変数）、$_COOKIE（グッキー変数）、$_SERVER（サーバー変数）、$_ENV（環境変数）のことです。

第二引数　＝　各データにどのようなフィルタを適応するかを定義する配列を指定します

HTMLのフォームやブラウザのURLなどから送信される POST変数 や GET変数、また、SESSION変数、SERVER変数 などのスーパーグローバル変数を一括でフィルタリングします。フィルタリングとは、対象の変数が存在するか、想定しているデータ型か、格納している値は想定している内容か、など、データ内容のチェックを行うことです。この関数を使用すると、大量のデータを取得する際に filter_input() を繰り返しコールする必要がなくなるので便利です。

エラーがあってページ遷移した時に入力内容を保持する

<input type="text" name="name" id="inputName" class="form-control" value="<?php echo htmlspecialchars($post['name']); ?>" required autofocus>

echo htmlspecialchars($post[‘name’]);をタグのvalue属性に入れることで入力内容が保持されます

これがテキストエリアの場合はvalue属性ではなくタグとタグの中に入れてあげる事で同じ結果を得られます

さて

ではここまでの内容をメールやお問い合わせ内容にも記述していきましょう

メールアドレスのバリデーションについて

メールアドレスに関しては

正しい書式で入力されていないという可能性も考慮するため条件を追加します

if ($post['email'] === '') {
        $error['email'] = 'blank';
    } else if (!filter_var($post['email'], FILTER_VALIDATE_EMAIL)) {
        $error['email'] = 'email';
    }

filter_varは第一引数にメールアドレス

第二引数にFILTER_VALIDATE_EMAILを指定することで入力された$post[‘email’]が妥当な e-mail アドレスかどうか判別してくれます

アドレスが間違っていた場合

falseになる関数なので、！を付ける事でtrueにしています

他にもバリデーションはあるようですが一旦ここまでにしておき

つづきは次回以降にします