PHPで確認画面付きお問い合わせフォームを作る方法【サンプルコード付き】

php

PHPで確認画面付きお問い合わせフォームを作る方法

PHPで確認画面付きのお問い合わせフォームを作る方法を紹介します。入力した内容を確認画面でチェックしてから送信でき、送信後はCSVファイルへ保存するサンプルです。お問い合わせフォームや申し込みフォーム、資料請求フォームなどを手軽に作成したい場合に利用できます。

関連記事：
PHPでお問い合わせフォームを作る方法【サンプルコード付き】
PHPでメール送信フォームを作る方法【サンプルコード付き】
PHPでAjaxお問い合わせフォームを作る方法【サンプルコード付き】
PHPでサンクスページ付きお問い合わせフォームを作る方法【サンプルコード付き】
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

確認画面付きお問い合わせフォーム
お名前
メールアドレス
お問い合わせ内容
お問い合わせを受け付けました。

コードをコピーして使おう！

<?php
// 入力値・状態管理用の変数を初期化します
$name = '';
$email = '';
$message = '';
$error = '';
$page = 'input';
$csv_file = 'data.csv';

// フォーム送信時の処理を行います
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  $name = trim($_POST['name'] ?? '');
  $email = trim($_POST['email'] ?? '');
  $message = trim($_POST['message'] ?? '');
  $action = $_POST['action'] ?? '';

  // 入力内容をチェックします
  if ($name === '' || $email === '' || $message === '') {
    $error = 'すべての項目を入力してください。';
    $page = 'input';
  } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $error = 'メールアドレスの形式が正しくありません。';
    $page = 'input';
  } elseif ($action === 'confirm') {
    $page = 'confirm';
  } elseif ($action === 'send') {

    // CSVファイルへお問い合わせ内容を追記保存します
    $fp = fopen($csv_file, 'a');

    if ($fp) {
      fputcsv($fp, [
        date('Y-m-d H:i:s'),
        $name,
        $email,
        $message
      ]);
      fclose($fp);
      $page = 'complete';
    } else {
      $error = 'CSVファイルに書き込めませんでした。';
      $page = 'input';
    }

  }
}

// HTMLエスケープ用の関数です
function h($value) {
  return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>確認画面付きお問い合わせフォーム</title>

  <!-- デザイン用CSS -->
  <style>
    .php-contact-form-confirm_wrap{
      max-width:600px;
      margin:40px auto;
      padding:24px;
      border:1px solid #e5e7eb;
      border-radius:18px;
      background:#f8fafc;
      font-family:sans-serif;
    }

    .php-contact-form-confirm_title{
      font-size:22px;
      font-weight:700;
      margin-bottom:20px;
    }

    .php-contact-form-confirm_field{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom:14px;
    }

    .php-contact-form-confirm_label{
      font-weight:700;
    }

    .php-contact-form-confirm_input,
    .php-contact-form-confirm_textarea{
      width:100%;
      box-sizing:border-box;
      padding:12px;
      border:1px solid #d1d5db;
      border-radius:10px;
    }

    .php-contact-form-confirm_textarea{
      min-height:130px;
      resize:vertical;
    }

    .php-contact-form-confirm_btn{
      width:100%;
      height:46px;
      border:none;
      border-radius:10px;
      background:#0b6bff;
      color:#fff;
      font-weight:700;
      cursor:pointer;
    }

    .php-contact-form-confirm_back{
      margin-top:10px;
      background:#64748b;
    }

    .php-contact-form-confirm_error{
      margin-bottom:16px;
      padding:12px;
      border:1px solid #fecaca;
      border-radius:10px;
      background:#fef2f2;
      color:#b91c1c;
    }

    .php-contact-form-confirm_complete{
      padding:14px;
      border:1px solid #bbf7d0;
      border-radius:12px;
      background:#f0fdf4;
      color:#15803d;
    }
  </style>
</head>
<body>

  <div class="php-contact-form-confirm_wrap">

    <div class="php-contact-form-confirm_title">
      確認画面付きお問い合わせフォーム
    </div>

    <?php if ($error !== ''): ?>
      <div class="php-contact-form-confirm_error">
        <?= h($error) ?>
      </div>
    <?php endif; ?>

    <?php if ($page === 'input'): ?>

      <!-- 入力フォーム -->
      <form method="post">

        <div class="php-contact-form-confirm_field">
          <label class="php-contact-form-confirm_label">お名前</label>
          <input class="php-contact-form-confirm_input" type="text" name="name" value="<?= h($name) ?>">
        </div>

        <div class="php-contact-form-confirm_field">
          <label class="php-contact-form-confirm_label">メールアドレス</label>
          <input class="php-contact-form-confirm_input" type="email" name="email" value="<?= h($email) ?>">
        </div>

        <div class="php-contact-form-confirm_field">
          <label class="php-contact-form-confirm_label">お問い合わせ内容</label>
          <textarea class="php-contact-form-confirm_textarea" name="message"><?= h($message) ?></textarea>
        </div>

        <button class="php-contact-form-confirm_btn" type="submit" name="action" value="confirm">
          確認画面へ
        </button>

      </form>

    <?php elseif ($page === 'confirm'): ?>

      <!-- 確認画面 -->
      <form method="post">

        <div class="php-contact-form-confirm_field">
          <strong>お名前</strong>
          <div><?= h($name) ?></div>
        </div>

        <div class="php-contact-form-confirm_field">
          <strong>メールアドレス</strong>
          <div><?= h($email) ?></div>
        </div>

        <div class="php-contact-form-confirm_field">
          <strong>お問い合わせ内容</strong>
          <div><?= nl2br(h($message)) ?></div>
        </div>

        <input type="hidden" name="name" value="<?= h($name) ?>">
        <input type="hidden" name="email" value="<?= h($email) ?>">
        <input type="hidden" name="message" value="<?= h($message) ?>">

        <button class="php-contact-form-confirm_btn" type="submit" name="action" value="send">
          送信する
        </button>

        <button class="php-contact-form-confirm_btn php-contact-form-confirm_back" type="submit" name="action" value="back">
          入力に戻る
        </button>

      </form>

    <?php else: ?>

      <!-- 送信完了画面 -->
      <div class="php-contact-form-confirm_complete">
        お問い合わせを受け付けました。
      </div>

    <?php endif; ?>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、index.php と data.csv を同じフォルダに配置して使用します。お問い合わせ内容は確認画面を経由したあと、送信時に data.csv へ追記保存されます。 

sample/

├── index.php
└── data.csv

index.php と data.csv を同じフォルダへ配置し、ブラウザから index.php にアクセスしてください。data.csv は事前に作成し、1行目に date,name,email,message を記述しておくと管理しやすくなります。

コメント