※この記事では、セキュリティとバリデーションについては書いていません。今セキュリティとバリデーションの記事を書いているのででき次第URLをこの記事に貼り付けます。

最近こんなツイートをしました。

よくあるお問い合わせフォームは

1 - 入力
2 - 確認
3 - 完了

の３つの画面が良く見かけるお問い合わせだと思います。

以下を行えば簡単に実装できます。

1 - ファイル作成
2 - 入力画面でファイル編集
3 - 確認画面でonClickで[戻る]ボタン
確認画面なので入力情報を持たせる
4 - 完了画面
— Tomoya (@div_tomo) August 17, 2023

これだけだと実装内容があまりわからないと思うので詳細をこの記事で書きました。

お問い合わせフォームなどで良く見かける

入力・確認・完了

画面を作成していきます。

手順

ファイルの作成

まずは [ inquiryフォルダ ] を作成してその中に [ input.phpファイル ] [ confirm.phpファイル ] [ thanks.phpファイル ] を作成してください。

inquiry
  |--> input.php
       confirm.php
       thanks.php

入力画面 input.php

input.php

<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>

<h1>お問い合わせ</h1>

<form method="POST" action="confirm.php">

    お名前
    <input type="text" name="name"><br>
    フリガナ
    <input type="text" name="kana"><br>
    メールアドレス
    <input type="email" name="email"><br>
    内容
    <textarea name="body"></textarea><br>

    <input type="submit" name="btn_confirm" value="確認する">

</form>

</body>
</html>

＜form method="POST" action="confirm.php"＞

method="POST" でPOST送信

action="confirm.php" で確認画面に遷移

＜input type="email" name="email"＞

type=”email” にすることでメールアドレスしか入力できないようになります。

＜input type="body" name="body"＞

input type="body" 内容を入力する際はbodyを利用しましょう。

＜input type="submit" name="btn_confirm" value="確認する"＞

input type=”submit” で確認ボタン作成

確認画面 confirm.php

confirm.php

<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>

<h1>確認画面</h1>

<form method="POST" action="thanks.php">

    お名前
    <?php echo $_POST['name']; ?><br>
    フリガナ
    <?php echo $_POST['kana']; ?><br>
    メールアドレス
    <?php echo $_POST['email']; ?><br>
    内容
    <?php echo $_POST['body']; ?><br>

    <input type="button" value="戻る" onClick="history.back()">
    <input type="submit" name="btn_submit" value="送信する">

</form>

</body>
</html>

確認画面なので入力された値をそのまま表示させていきます。

＜?php echo $_POST['name']; ?＞

<?php echo $_POST['name']; ?> phpを使うときは <?php 処理 ?> でphpを使うことができます。

echo $_POST['name']; でPOST送信された name(お名前) を表示

＜?php echo $_POST['kana']; ?＞

echo $_POST['kana']; でPOST送信された kana(フリガナ) を表示

＜?php echo $_POST['email']; ?＞

echo $_POST['email']; でPOST送信された email(メールアドレス) を表示

＜?php echo $_POST['body']; ?＞

echo $_POST['body']; でPOST送信された body(内容) を表示

JSで戻るボタン実装＜input type="button" value="戻る" onClick="history.back()"＞

onClick="history.back()" で前のページに値を残したまま戻る事ができます。

＜input type="submit" name="btn_submit" value="送信する"＞

input type=”submit” で送信ボタン作成

完了画面 thanks.php

thanks.php

<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>

<h1>完了画面</h1>

<p>送信が完了しました。</p>

</body>
</html>

完了画面では単純に「送信完了しました。」のみ表示