<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>お問い合わせフォーム</title>

  <style>

    body {

      font-family: sans-serif;

      padding: 2em;

      background-color: #f0f8ff;

    }

    form {

      background: #fff;

      padding: 1.5em;

      border-radius: 8px;

      box-shadow: 0 0 10px rgba(0,0,0,0.1);

      max-width: 500px;

      margin: auto;

    }

    input, textarea {

      width: 100%;

      margin-bottom: 1em;

      padding: 0.8em;

      border: 1px solid #ccc;

      border-radius: 4px;

    }

    button {

      padding: 0.8em 1.5em;

      background-color: #0078D4;

      color: white;

      border: none;

      border-radius: 4px;

      cursor: pointer;

    }

    #thankYouMessage {

      display: none;

      margin-top: 2em;

      padding: 1em;

      background-color: #e6ffe6;

      border: 1px solid #00aa00;

      border-radius: 4px;

      color: #006600;

      max-width: 500px;

      margin: auto;

      text-align: center;

    }

    .footer {

      text-align: center;

      margin-top: 2em;

      font-size: 0.9em;

      color: #555;

    }

  </style>

</head>

<body>


  <h1 style="text-align:center;">お問い合わせフォーム</h1>


  <form id="contactForm">

    <label>お吊前</label>

    <input name="name" type="text" required />


    <label>メールアドレス</label>

    <input name="email" type="email" required />


    <label>お問い合わせ内容</label>

    <textarea name="message" rows="5" required></textarea>


    <button type="submit">送信</button>

  </form>


  <div id="thankYouMessage">

    ✅ ご送信ありがとうございます！<br>

    メールが正常に送信されました。

  </div>


  <div class="footer">

    
    <a href="index.html">戻る</a>

  </div>


  <script>

    document.getElementById("contactForm").addEventListener("submit", function(e) {

      e.preventDefault();


      const form = e.target;

      const data = new URLSearchParams();

      data.append("name", form.elements["name"].value);

      data.append("email", form.elements["email"].value);

      data.append("message", form.elements["message"].value);


      fetch("https://script.google.com/macros/s/AKfycbwLgE82tqOZhz1nh_zfa38aJi6HMgii4d2C5_12GEkq7GfHnwtb5Ed00LfOhpqMbTJG/exec", {

        method: "POST",

        headers: {

          "Content-Type": "application/x-www-form-urlencoded"

        },

        body: data

      })

      .then(response => response.text())

      .then(text => {

        if (text.includes("送信成功")) {

          document.getElementById("thankYouMessage").style.display = "block";

          form.reset();

        } else {

          alert("送信に失敗しました。内容は保持されています。");

        }

      })

      .catch(error => {

        alert("送信中にエラーが発生しました。内容は保持されています。");

        console.error("送信エラー:", error);

      });

    });

  </script>


</body>

</html>