jQueryとPHPで作るお問い合わせフォーム

本記事では、jQueryを使用してお問い合わせフォームを作成する方法を紹介します。このフォームは、Vue.jsとPHPで作るお問い合わせフォームを基にしたものです。

使用技術とバージョン情報

  • jQuery: 3.6.4
  • Tailwind CSS: 3.x (CDN経由で最新バージョンを使用 ※テストは3.4.15)
  • PHP: 8.2.22
  • サーバー環境: エックスサーバー

フォームの特徴

  1. 3ステップ構成:
  • 入力画面: 名前、メールアドレス、お問い合わせ内容を入力。
  • 確認画面: 入力内容を確認して送信または修正が可能。
  • 完了画面: 問い合わせ送信完了のメッセージを表示。
  1. 入力チェック機能:
  • 名前、メールアドレス、お問い合わせ内容の必須チェック。
  • メールアドレス形式のバリデーション。
  1. レスポンシブ対応:
  • Tailwind CSSを活用して、PC・タブレット・スマートフォンでも見やすいデザイン。
  1. jQueryによる画面遷移:
  • ボタン操作で画面を切り替え、入力データを動的に表示。

フロントエンドの実装

以下は、jQueryを使用したフロントエンドのコードです。

index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery お問い合わせフォーム</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div id="form-wrapper" class="container mx-auto p-4 max-w-screen-md">
    <!-- 入力画面 -->
    <div id="input-screen" class="bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">お問い合わせフォーム</h1>
      <form id="contact-form">
        <div class="mb-4">
          <label for="name" class="block text-sm font-medium text-gray-700">名前:</label>
          <input type="text" id="name" name="name" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700">メールアドレス:</label>
          <input type="email" id="email" name="email" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <div class="mb-4">
          <label for="message" class="block text-sm font-medium text-gray-700">お問い合わせ内容:</label>
          <textarea id="message" name="message" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"></textarea>
        </div>
        <button type="button" id="to-confirm" class="w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
          確認画面へ
        </button>
      </form>
    </div>

    <!-- 確認画面 -->
    <div id="confirm-screen" class="hidden bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">内容の確認</h1>
      <p class="mb-2"><strong>名前:</strong> <span id="confirm-name"></span></p>
      <p class="mb-2"><strong>メールアドレス:</strong> <span id="confirm-email"></span></p>
      <p class="mb-4"><strong>お問い合わせ内容:</strong> <span id="confirm-message"></span></p>
      <div class="flex space-x-4">
        <button id="back-to-input" class="w-1/2 bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700">
          戻る
        </button>
        <button id="submit-form" class="w-1/2 bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
          送信する
        </button>
      </div>
    </div>

    <!-- 完了画面 -->
    <div id="complete-screen" class="hidden bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">送信が完了しました</h1>
      <p>お問い合わせいただきありがとうございます。</p>
      <button id="reset-form" class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
        フォームに戻る
      </button>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      // 確認画面へ移行
      $('#to-confirm').click(function () {
        const name = $('#name').val().trim();
        const email = $('#email').val().trim();
        const message = $('#message').val().trim();

        // メールアドレス形式の正規表現
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        // 入力チェック
        if (!name || !email || !message) {
          alert('全ての項目を入力してください。');
          return;
        }

        if (!emailRegex.test(email)) {
          alert('有効なメールアドレスを入力してください。');
          return;
        }

        $('#confirm-name').text(name);
        $('#confirm-email').text(email);
        $('#confirm-message').text(message);

        $('#input-screen').addClass('hidden');
        $('#confirm-screen').removeClass('hidden');
      });

      // 入力画面に戻る
      $('#back-to-input').click(function () {
        $('#confirm-screen').addClass('hidden');
        $('#input-screen').removeClass('hidden');
      });

      // フォーム送信
      $('#submit-form').click(function () {
        const formData = {
          name: $('#name').val(),
          email: $('#email').val(),
          message: $('#message').val(),
        };

        $.ajax({
          url: 'backend/contact.php',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(formData),
          success: function (response) {
            if (response.success) {
              $('#confirm-screen').addClass('hidden');
              $('#complete-screen').removeClass('hidden');
            } else {
              alert('送信に失敗しました: ' + (response.error || '不明なエラー'));
              $('#confirm-screen').addClass('hidden');
              $('#input-screen').removeClass('hidden');
            }
          },
          error: function () {
            alert('エラーが発生しました。');
            $('#confirm-screen').addClass('hidden');
            $('#input-screen').removeClass('hidden');
          }
        });
      });

      // フォームリセット
      $('#reset-form').click(function () {
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');

        $('#complete-screen').addClass('hidden');
        $('#input-screen').removeClass('hidden');
      });
    });
  </script>
</body>

</html>

バックエンドの実装

PHPでバックエンドを実装します。

contact.php

<?php
header('Content-Type: application/json');

$data = json_decode(file_get_contents('php://input'), true);

if (empty($data['name']) || empty($data['email']) || empty($data['message'])) {
    echo json_encode(['success' => false, 'error' => '入力内容が不完全です。']);
    exit;
}

// 管理者への通知メール
$toAdmin = 'admin@example.com'; // 仮の送信先アドレス
$subjectAdmin = 'お問い合わせフォームからのメッセージ';
$messageAdmin = "名前: {$data['name']}\nメールアドレス: {$data['email']}\nメッセージ: {$data['message']}";
$headersAdmin = 'From: noreply@example.com'; // 仮のFromアドレス

$mailToAdmin = mail($toAdmin, $subjectAdmin, $messageAdmin, $headersAdmin);

// 問い合わせ者への自動返信メール
$toUser = $data['email'];
$subjectUser = 'お問い合わせありがとうございます';
$messageUser = "{$data['name']} 様\n\nお問い合わせありがとうございます。\n以下の内容で受け付けました。\n----------------------\nお名前: {$data['name']}\nメールアドレス: {$data['email']}\nお問い合わせ内容:\n{$data['message']}\n----------------------\n\n担当者より折り返しご連絡いたします。";
$headersUser = 'From: noreply@example.com'; // 仮のFromアドレス

$mailToUser = mail($toUser, $subjectUser, $messageUser, $headersUser);

if ($mailToAdmin && $mailToUser) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'error' => 'メール送信に失敗しました。']);
}
スポンサーリンク

コメント

タイトルとURLをコピーしました