お問い合わせフォームを作ってみる -実装編①：入力・確認・完了画面の作成-

HTML PHP

こんにちは、ユアサです。
前回までの記事では、お問い合わせフォームを作成していく上で実装したい入力項目やライブラリを紹介しました。今回はそれらを使って、土台の部分となってくる入力画面、確認画面、完了画面を作成していきたいと思います。
↓前回の記事 tech.arms-soft.co.jp

↓前々回の記事 tech.arms-soft.co.jp

画面表示

$page_flagという変数を作成し、どのボタンを押されたかで画面の表示をコントロールできるようにします。

<?php
// 変数初期化
$page_flag = 0;

if ( !empty($_POST['btn_confirm']) ){
    // btn_confirmが押された時に確認画面へ
    $page_flag = 1;
} elseif ( !empty($_POST['btn_submit']) ){
    // btn_submitが押された時に完了画面へ
    $page_flag = 2;
}
?>

<!DOCTYPE html>
// 略

入力画面

入力画面のHTML部分は、前々回の記事で書いたinput要素、select要素、textarea要素を使って氏名、メールアドレス、お問い合わせ内容と備考の入力項目を作成しました。
また「入力内容を確認する」ボタンクリック時、Valitronで入力内容のバリデーションを行いエラーメッセージの制御をするような仕様にする予定です。文字数制限のバリデーションなどを追加できればと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム 入力画面</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
<div>
<h1>お問い合わせフォーム</h1>

<?php if( $page_flag === 1 ): ?>
// ここに確認画面

<?php elseif( $page_flag === 2 ): ?>
// ここに完了画面

<?php else: ?>
<form method="post" action="">
    <div class="element_wrap">
        <label for="name">氏名</label>
        <input type="text" name="name" value="">
    </div>
    <div>
        <label for="mail">メールアドレス</label>
        <input type="text" name="mail" value="">
    </div>
    <div>
        <label for="contents">お問い合わせ内容</label>
        <select name="contents">
            <option value="contents1">内容①</option>
            <option value="contents2">内容②</option>
            <option value="contents3">内容③</option>
            <option value="contents4">内容④</option>
            <option value="contents5">内容⑤</option>
        </select>
    </div>
    <div>
        <label for="remarks">備考</label><br>
        <textarea rows="6" cols="100" name="remarks"></textarea>
    </div>
    <button type="submit" name="btn_confirm">入力内容を確認する</button>
</form>
<?php endif; ?>
</div>
</body>
</html>

確認画面

各入力項目で入力した値を引き継ぎ、表示させます。
表示の仕方に関しては現在検討中ですが、入力項目「お問い合わせ内容」で選択した内容の表示の仕様は若干工夫する必要があるかもしれません。
また「戻る」ボタンがクリックされた際、入力内容が保持された状態で入力画面に遷移する仕様にする予定です。

//略
<div>
<h1>お問い合わせフォーム</h1>

<?php if( $page_flag === 1 ): ?>
<form method="post" action="">
    <div class="element_wrap">
        <label>氏名</label>
        <p><?php echo $_POST['name']; ?></p>
    </div>
    <div class="element_wrap">
        <label>メールアドレス</label>
        <p><?php echo $_POST['mail']; ?></p>
    </div>
    <div>
        <label>お問い合わせ内容</label>
        <p><?php echo $_POST['contents']; ?></p>
    </div>
    <div>
        <label>備考</label>
        <p><?php echo $_POST['remarks']; ?></p>
    </div>

    <input type="submit" name="btn_back" value="戻る">
    <input type="submit" name="btn_submit" value="送信する">
</form>

完了画面

確認画面で「送信する」ボタンクリック時に遷移するページです。
確認画面から完了画面に遷移した際、PHPMailerで設定された仕様に沿って、入力画面で入力されたメールアドレスに自動返信メールが送信されるようにする予定です。

// 略
<div>
<h1>お問い合わせフォーム</h1>

<?php if( $page_flag === 1 ): ?>
// ここに確認画面

<?php elseif( $page_flag === 2 ): ?>
<p>送信が完了しました。</p>

<?php else: ?>
// ここに入力画面

まとめ

今回はHTMLで入力画面から完了画面までの土台作りをしました。
次回はPHPで入力値の受け渡しやPHPMailer、Valitronの設定などをして完成させる予定です。仕様によっては今回作成したものに若干修正が入るかもしれませんが、なるべくシンプルな内容にできればと考えています。
今回も最後まで読んでいただきありがとうございました（^人^）