PHPお問い合わせフォームの作り方｜確認画面・メール送信付きサンプルコード

レベル: 上級 タグ: , , , , ,

PHP お問い合わせフォームの作り方｜確認画面・メール送信付きサンプルコード

PHPでお問い合わせフォームを作成する方法を解説します。
今回は、入力フォーム → 確認画面 → メール送信 → 送信完了画面 までの一連の流れをサンプルコード付きで紹介します。
初心者向けに分かりやすく解説するので、フォーム作成の参考にしてください！

📌サンプルページ

📌 完成イメージ

  1. index.php → ユーザーが入力するフォーム画面
  2. confirm.php → 入力内容を確認する画面
  3. thanks.php → メール送信後の完了画面

各ページ間では session を使ってデータを保持し、入力内容を confirm.php で確認後に thanks.php で送信します。

📌 1. フォームの作成 (index.php)

まずは、ユーザーが情報を入力するフォーム画面を作成します。

📜 コード: index.php

<?php
session_start();
$form_data = isset($_SESSION['form_data']) ? $_SESSION['form_data'] : [];
?>


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="contact.css">
  <title>お問い合わせフォーム</title>
  <style>
  .inline-group {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }

  .inline-group label {
    margin-left: 10px;
    margin-right: 20px;
  }

  .color-preview {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    margin-left: 10px;
  }
  </style>
  <script>
  function updateColorPreview() {
    var colorInput = document.getElementById('color');
    var colorPreview = document.getElementById('color-preview');
    colorPreview.style.backgroundColor = colorInput.value;
  }
  </script>
</head>

<body>
  <div class="container">
    <div class="form-wrapper">
      <div class="form-header">
        <h1>お問い合わせ</h1>
      </div>

      <form action="confirm.php" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          <label for="name">名前:</label>
          <input type="text" id="name" name="name" class="form-control" required
            value="<?php echo htmlspecialchars($form_data['name'] ?? ''); ?>">
        </div>

        <div class="form-group">
          <label for="email">メールアドレス:</label>
          <input type="email" id="email" name="email" class="form-control" required
            value="<?php echo htmlspecialchars($form_data['email'] ?? ''); ?>">
        </div>

        <div class="form-group">
          <label for="phone">電話番号:</label>
          <input type="tel" id="phone" name="phone" class="form-control"
            value="<?php echo htmlspecialchars($form_data['phone'] ?? ''); ?>">
        </div>

        <div class="form-group">
          <label for="purpose">お問い合わせの目的:</label>
          <select id="purpose" name="purpose" class="form-control">
            <option value="" disabled <?php echo empty($form_data['purpose']) ? 'selected' : ''; ?>>選択してください</option>
            <option value="feedback" <?php echo ($form_data['purpose'] ?? '') == 'feedback' ? 'selected' : ''; ?>>
              フィードバック</option>
            <option value="inquiry" <?php echo ($form_data['purpose'] ?? '') == 'inquiry' ? 'selected' : ''; ?>>
              一般的なお問い合わせ</option>
            <option value="support" <?php echo ($form_data['purpose'] ?? '') == 'support' ? 'selected' : ''; ?>>サポート依頼
            </option>
          </select>
        </div>

        <div class="form-group">
          <label for="date">希望する連絡日:</label>
          <input type="date" id="date" name="date" class="form-control"
            value="<?php echo htmlspecialchars($form_data['date'] ?? ''); ?>">
        </div>

        <div class="form-group">
          <label for="quantity">ご希望の数量:</label>
          <input type="number" id="quantity" name="quantity" class="form-control" min="1" max="100"
            value="<?php echo htmlspecialchars($form_data['quantity'] ?? ''); ?>">
        </div>

        <div class="form-group">
          <label for="color">お気に入りの色:</label>
          <input type="color" id="color" name="color" class="form-control"
            value="<?php echo htmlspecialchars($form_data['color'] ?? '#000000'); ?>" onchange="updateColorPreview()">
          <div id="color-preview" class="color-preview"
            style="background-color: <?php echo htmlspecialchars($form_data['color'] ?? '#000000'); ?>;"></div>
        </div>

        <div class="form-group">
          <label for="range">ご満足度:</label>
          <input type="range" id="range" name="range" class="form-control" min="0" max="10"
            value="<?php echo htmlspecialchars($form_data['range'] ?? '5'); ?>">
        </div>

        <div class="form-group">
          <label>連絡方法:</label>
          <div class="inline-group">
            <input type="radio" id="email" name="contact_method" value="email"
              <?php echo ($form_data['contact_method'] ?? 'email') == 'email' ? 'checked' : ''; ?>>
            <label for="email">メール</label>
            <input type="radio" id="phone" name="contact_method" value="phone"
              <?php echo ($form_data['contact_method'] ?? '') == 'phone' ? 'checked' : ''; ?>>
            <label for="phone">電話</label>
            <input type="radio" id="either" name="contact_method" value="either"
              <?php echo ($form_data['contact_method'] ?? '') == 'either' ? 'checked' : ''; ?>>
            <label for="either">どちらでも</label>
          </div>
        </div>

        <div class="form-group">
          <label>興味のあるトピック:</label>
          <div class="inline-group">
            <input type="checkbox" id="news" name="topics[]" value="news"
              <?php echo in_array('news', $form_data['topics'] ?? []) ? 'checked' : ''; ?>>
            <label for="news">ニュース</label>
            <input type="checkbox" id="updates" name="topics[]" value="updates"
              <?php echo in_array('updates', $form_data['topics'] ?? []) ? 'checked' : ''; ?>>
            <label for="updates">アップデート</label>
            <input type="checkbox" id="offers" name="topics[]" value="offers"
              <?php echo in_array('offers', $form_data['topics'] ?? []) ? 'checked' : ''; ?>>
            <label for="offers">特別オファー</label>
          </div>
        </div>

        <div class="form-group">
          <label for="message">メッセージ:</label>
          <textarea id="message" name="message" class="form-control"
            rows="4"><?php echo htmlspecialchars($form_data['message'] ?? ''); ?></textarea>
        </div>

        <div class="form-footer">
          <button type="submit" class="btn-submit">確認</button>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

📌 コード解説

✅ session_start(); で セッションを開始し、入力データを保持
✅ method="POST" でデータを confirm.php に送信
✅ htmlspecialchars() で XSS攻撃を防止

📌 2. 確認画面 (confirm.php)

次に、ユーザーが入力した情報を確認する画面を作成します。

📜 コード: confirm.php

<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $_SESSION['form_data'] = $_POST;

    if (isset($_FILES['file']) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
        $_SESSION['file_data'] = $_FILES['file']['name'];
    } else {
        $_SESSION['file_data'] = null;
    }
}

$form_data = $_SESSION['form_data'] ?? [];
$file_data = $_SESSION['file_data'] ?? '未アップロード';

// お問い合わせの目的オプション
$purpose_options = [
    'feedback' => 'フィードバック',
    'inquiry' => '一般的なお問い合わせ',
    'support' => 'サポート依頼'
];

$contact_method_options = [
    'email' => 'メール',
    'phone' => '電話',
    'either' => 'どちらでも'
];

$topics_options = [
    'news' => 'ニュース',
    'updates' => 'アップデート',
    'offers' => '特別オファー'
];
?>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="contact.css">
  <title>確認画面</title>
</head>

<body>
  <div class="container">
    <div class="form-wrapper">
      <h1>確認画面</h1>
      <p><strong>名前:</strong> <?php echo htmlspecialchars($form_data['name'] ?? '未入力'); ?></p>
      <p><strong>メールアドレス:</strong> <?php echo htmlspecialchars($form_data['email'] ?? '未入力'); ?></p>
      <p><strong>電話番号:</strong> <?php echo htmlspecialchars($form_data['phone'] ?? '未入力'); ?></p>
      <p><strong>お問い合わせの目的:</strong> <?php echo htmlspecialchars($purpose_options[$form_data['purpose']] ?? '未選択'); ?>
      </p>
      <p><strong>希望する連絡日:</strong> <?php echo htmlspecialchars($form_data['date'] ?? '未選択'); ?></p>
      <p><strong>ご希望の数量:</strong> <?php echo htmlspecialchars($form_data['quantity'] ?? '未入力'); ?></p>
      <p><strong>お気に入りの色:</strong> <span
          style="display:inline-block;width:30px;height:30px;background-color:<?php echo htmlspecialchars($form_data['color'] ?? '#000000'); ?>;"></span>
      </p>
      <p><strong>ご満足度:</strong> <?php echo htmlspecialchars($form_data['range'] ?? '未入力'); ?></p>
      <p><strong>連絡方法:</strong>
        <?php echo htmlspecialchars($contact_method_options[$form_data['contact_method']] ?? '未選択'); ?></p>
      <p><strong>興味のあるトピック:</strong>
        <?php 
        if (!empty($form_data['topics']) && is_array($form_data['topics'])) {
            $selected_topics = array_map(function($topic) use ($topics_options) {
                return $topics_options[$topic] ?? '不明なトピック';
            }, $form_data['topics']);
            echo htmlspecialchars(implode(", ", $selected_topics), ENT_QUOTES, 'UTF-8');
        } else {
            echo '選択なし';
        }
        ?>
      </p>
      <p><strong>メッセージ:</strong> <?php echo nl2br(htmlspecialchars($form_data['message'] ?? '未入力')); ?></p>

      <form action="thanks.php" method="POST">
        <button type="submit" class="btn-submit">送信</button>
      </form>
      <form action="index.php" method="GET">
        <button type="submit" class="btn-back">戻る</button>
      </form>
    </div>
  </div>
</body>

</html>

📌 コード解説

✅ $_SESSION['form_data'] = $_POST; で フォームデータをセッションに保存
✅ 入力データを htmlspecialchars() でサニタイズ
✅ thanks.php への送信ボタンと、index.php に戻るボタンを設置

📌 3. メール送信・完了画面 (thanks.php)

最後に、メールを送信し、送信完了メッセージを表示 します。

📜 コード: thanks.php

<?php
session_start();

// セッションにフォームデータが存在しない場合はindex.phpにリダイレクト
if (!isset($_SESSION['form_data'])) {
    session_write_close();
    header('Location: index.php');
    exit();
}

// フォームデータを取得
$form_data = $_SESSION['form_data'] ?? [];
$file_data = $_SESSION['file_data'] ?? '未アップロード';

// **お問い合わせの目的オプション（日本語）**
$purpose_options = [
    'feedback' => 'フィードバック',
    'inquiry' => '一般的なお問い合わせ',
    'support' => 'サポート依頼'
];

// **興味のあるトピックオプション（日本語）**
$topics_options = [
    'news' => 'ニュース',
    'updates' => 'アップデート',
    'offers' => '特別オファー'
];

// **お問い合わせの目的を日本語に変換**
$purpose_jp = $purpose_options[$form_data['purpose']] ?? '未選択';

// **興味のあるトピックを日本語に変換**
$topics_jp = '選択なし';
if (!empty($form_data['topics']) && is_array($form_data['topics'])) {
    $selected_topics = array_map(function($topic) use ($topics_options) {
        return $topics_options[$topic] ?? '不明なトピック';
    }, $form_data['topics']);
    $topics_jp = implode(", ", $selected_topics);
}

// **メール送信の準備**
$to = "test@sample.com"; // **受信者のメールアドレス**
$subject = "お問い合わせフォームからのメッセージ";
$headers = "From: test@sample.com\r\n" . // **受信者のメールアドレス**
           "Reply-To: " . $form_data['email'] . "\r\n" .
           "Content-Type: text/plain; charset=UTF-8\r\n";

// **メール本文（日本語で送信）**
$message = "名前: {$form_data['name']}\n" .
           "メールアドレス: {$form_data['email']}\n" .
           "電話番号: {$form_data['phone']}\n" .
           "お問い合わせの目的: $purpose_jp\n" .
           "希望する連絡日: {$form_data['date']}\n" .
           "ご希望の数量: {$form_data['quantity']}\n" .
           "お気に入りの色: {$form_data['color']}\n" .
           "ご満足度: {$form_data['range']}\n" .
           "連絡方法: {$form_data['contact_method']}\n" .
           "興味のあるトピック: $topics_jp\n" .
           "メッセージ:\n{$form_data['message']}";

// **メール送信**
$mail_success = mail($to, $subject, $message, $headers);

// **セッションデータを削除**
session_unset();
session_destroy();
?>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="contact.css">
  <title>送信完了</title>
</head>

<body>
  <div class="container">
    <div class="form-wrapper">
      <h1>送信完了</h1>
      <p>お問い合わせいただきありがとうございます。</p>
      <?php if ($mail_success): ?>
      <p>担当者よりご連絡いたしますので、しばらくお待ちください。</p>
      <?php else: ?>
      <p>申し訳ありませんが、メールの送信に失敗しました。もう一度お試しください。</p>
      <?php endif; ?>

      <div class="form-footer">
        <form action="index.php" method="GET">
          <button type="submit">トップページへ戻る</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

📌 コード解説

✅ $_SESSION['form_data'] がない場合は index.php にリダイレクト
✅ mail() 関数を使い、入力データをメール送信
✅ メール送信後に session_unset(); session_destroy(); で セッションを削除

下記コードを変更してから、テストサーバーにアップしてメールアドレスを変更して動作確認してみましょう。

$to = “test@sample.com”; // 受信者のメールアドレス
$subject = “お問い合わせフォームからのメッセージ”;
$headers = “From: test@sample.com\r\n” . // 受信者のメールアドレス

🎯 まとめ

ステップ解説
index.php (フォーム入力画面)ユーザーが入力し、confirm.php にデータ送信
confirm.php (確認画面)入力内容を表示し、thanks.php に送信
thanks.php (送信完了画面)メール送信後、完了メッセージを表示

🚀 これでお問い合わせフォームが完成！

✅ フォーム入力 → 確認画面 → メール送信 → 完了画面 の流れが実装できました！
📢 このコードを活用し、自分のサイトにお問い合わせフォームを実装してみましょう！ 🚀✨

✅ Githubサンプルコード

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。

関連記事

VortexSpin：アニメーションでサイトにダイナミズムを加える

VortexSpin：アニメーションでサイトにダイナミズムを加える

VortexSpinアニメーション：幻想的な回転効果でウェブデザインを強化 ウェブデザインにおいて、ユーザーの注意を引くためには視覚的なエフェクトが非常に重要です。その中でも、回転や渦巻きの動きは強力…

続きを読む →
CSS設計完全ガイド｜BEM・OOCSS・SMACSS・FLOCSSの違いと使い方を徹底解説

CSS設計完全ガイド｜BEM・OOCSS・SMACSS・FLOCSSの違いと使い方を徹底解説

1. はじめに（導入） CSS設計がなぜ重要かを解説。ポイント： 2. CSS設計とは？ CSS設計の目的と必要性について解説。 3. BEM（Block, Element, Modifier） BE…

続きを読む →
PHPで安全なコンタクトフォームを作成｜CSRF・XSS対策と基本コード解説

PHPで安全なコンタクトフォームを作成｜CSRF・XSS対策と基本コード解説

1. 導入：なぜ安全なコンタクトフォームが必要なのか？ 2. 完成イメージ：セキュリティ対策を加えたPHPフォームの概要 3. コードの実装：PHPで安全なコンタクトフォーム 3.1 HTMLフォーム…

続きを読む →