このツイートについて詳しく解説していきます。
1ファイルでお問い合わせフォーム作る方法
— Tomoya (@div_tomo) August 19, 2023
単純にif文で制御$a = 0
だったら入力画面$a = 1
だったら確認画面$a = 2
だったら完了画面
こんな簡単にできます
この記事ではお問い合わせフォームの実装を行います。
セキュリティについての記事
【PHP】②お問い合わせフォーム セキュリティ
バリデーションについての記事
【PHP】③お問い合わせフォーム バリデーション
手順
ファイルを作成
- まず初めに [ formフォルダ ] を作成
- 次に [ input.phpファイル ] ファイルを作成
form
|
|----> input.php
if文で画面の切り替え
- はじめに初期値に利用する変数[
$pageFlag = 0;]を用意する
1-1. if文を使って [$pageFlag] の値が
1-2. ０だったら入力画面
1-3. １だったら確認画面
1-4. ２だったら完了画面 - 入力画面作成
- 確認画面作成
- 完了画面作成
- if文で画面の切り替え制御
の手順で進めていきます。
htmlの中にphpを書くには ＜?php ここに処理 ?＞ で書いていくことができます。
form > input.php
<?php
$pageFlag = 0;
// 入力画面の値が空では無かったら$pageFlagを１に変更
if(!empty($_POST['btn_confirm'])){
$pageFlag = 1;
}
// 送信画面の値が空では無かったら$pageFlagを２に変更
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>
<!-- 入力画面 -->
<?php if($pageFlag === 0) : ?>
<form method="POST" action="input.php">
氏名
<input type="text" name="name"><br>
メールアドレス
<input type="email" name="email"><br>
<input type="submit" name="btn_confirm" value="確認する">
</form>
<?php endif; ?>
<!-- 確認画面 -->
<?php if($pageFlag === 1) : ?>
<form method="POST" action="input.php">
氏名
<?php echo $_POST['name'] ;?>
<br>
メールアドレス
<?php echo $_POST['email'] ;?>
<br>
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="name" value="<?php echo $_POST['name'] ;?>">
<input type="hidden" name="email" value="<?php echo $_POST['email'] ;?>">
</form>
<?php endif; ?>
<!-- 完了画面 -->
<?php if($pageFlag === 2) : ?>
<p>送信が完了しました。</p>
<?php endif; ?>
</body>
</html>
コードの上から説明しています。
初期値を用意する
初期値に利用する変数[ $pageFlag = 0; ]を用意
if文で画面表示の切り替え
!empty() は空では無かったらという意味です。
$_POST['btn_confirm'] は入力画面の確認するボタンから値を持ってきていて
btn_confirm が空では無かったら $pageFlag = 1; に変更するように設定しています。
$_POST['btn_submit'] は確認画面の送信するボタンから値をもってきていて
btn_submit が空では無かったら $pageFlag = 2; に変更するように設定しています。
html内でのif文の説明
<?php if($pageFlag === 0) : ?>
<?php endif; ?>
[：]と書かれている箇所は PHP でいう [ { } ] です。
[｛ ] = [：]
[ ｝] = [ endif; ]
＜?php if($pageFlag === 0) : ?＞
$pageFlag が０だったら入力画面表示
＜form method="POST" action="input.php"＞
method="POST" でPOST送信
action="input.php" で確認画面に遷移
＜input type="email" name="email"＞
type=”email” にすることでメールアドレスしか入力できないようになります。
＜input type="submit" name="btn_confirm" value="確認する"＞
input type=”submit” で確認ボタン作成
name= がキー
value= がバリュー
＜?php if($pageFlag === 1) : ?＞
$pageFlag が１だったら確認画面表示
＜?php echo $_POST['name']; ?＞
<?php echo $_POST['name']; ?> phpを使うときは <?php 処理 ?> でphpを使うことができます。
echo $_POST['name']; でPOST送信された name(お名前) を表示
＜?php echo $_POST['email']; ?＞
echo $_POST['email']; でPOST送信された email(メールアドレス) を表示
＜input type="submit" name="btn_submit" value="送信する"＞
input type=”submit” で送信ボタン作成
name= がキー
value= がバリュー
送信時に値が消えないようにする
form の POST と GET 通信は一度通信すると値が消えてしまうという性質がありますので、値を残しておけるように type=”hidden” を指定してあげてます。
同じ値を残しておきたいので value には <?php echo $_POST['name'] ;?> このようにしてあげて、同じ値を残しています。
＜?php if($pageFlag === 2) : ?＞
$pageFlag が２だったら送信画面表示
戻るボタン作成
確認画面で入力内容を確認して間違いがあった場合のために戻るボタンを設置しておきます。
<?php
$pageFlag = 0;
// 入力画面の値が空では無かったら$pageFlagを１に変更
if(!empty($_POST['btn_confirm'])){
$pageFlag = 1;
}
// 送信画面の値が空では無かったら$pageFlagを２に変更
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>
<!-- 入力画面 -->
<?php if($pageFlag === 0) : ?>
<form method="POST" action="input.php">
氏名
<input type="text" name="name" value="<?php if(!empty($_POST['name'])){ echo $_POST['name'] ; } ?>"><br> <!-- 追加 -->
メールアドレス
<input type="email" name="email" value="<?php if(!empty($_POST['email'])){ echo $_POST['email'] ; } ?>"><br> <!-- 追加 -->
<input type="submit" name="btn_confirm" value="確認する">
</form>
<?php endif; ?>
<!-- 確認画面 -->
<?php if($pageFlag === 1) : ?>
<form method="POST" action="input.php">
氏名
<?php echo $_POST['name'] ;?>
<br>
メールアドレス
<?php echo $_POST['email'] ;?>
<br>
<input type="submit" name="back" value="戻る"> <!-- 追加 -->
<input type="submit" name="btn_submit" value="送信する">
<input type="hidden" name="name" value="<?php echo $_POST['name'] ;?>">
<input type="hidden" name="email" value="<?php echo $_POST['email'] ;?>">
</form>
<?php endif; ?>
<!-- 完了画面 -->
<?php if($pageFlag === 2) : ?>
<p>送信が完了しました。</p>
<?php endif; ?>
</body>
</html>
戻るボタン作成
戻るボタンを押すと、画面の判定で使っていたif文に $_POST[’back’] が無いので $pageFlag = 0; になり入力画面に戻る事ができます。
$pageFlag = 0;
// 入力画面の値が空では無かったら$pageFlagを１に変更
if(!empty($_POST['btn_confirm'])){
$pageFlag = 1;
}
// 送信画面の値が空では無かったら$pageFlagを２に変更
if(!empty($_POST['btn_submit'])){
$pageFlag = 2;
}
戻った時に入力画面に値を残したままにする
確認画面で以下のように type=”hidden” で値を隠して name=”name” で値を渡しているので入力画面にも echo $_POST['name'] を書いてあげれば入力した値を残したまま入力画面に戻ることができます。
氏名
<input type="text" name="name" value="<?php if(!empty($_POST['name'])){ echo $_POST['name'] ; } ?>"><br>
メールアドレス
<input type="email" name="email" value="<?php if(!empty($_POST['email'])){ echo $_POST['email'] ; } ?>"><br>
ちなみに value の中のif文は初期値 $_POST[] の値が無いので入力画面でエラーが起こらないようにif文で値が入っていたら表示するようにしています。
この流れでお問い合わせフォームのセキュリティについての記事を読む
【PHP】②お問い合わせフォーム セキュリティ