แชร์โค้ดทำแบบฟอร์มติดต่อเรา contact us ด้วย web app : html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
    integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
    crossorigin="anonymous" />
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
</head>

<body>
  <div class="contact-container">
    <div class="contact-left">
      <h2 class="contact-left-heading">ติดต่อเรา</h2>

      <form id="myForm" onsubmit="submitForm()">
        <div class="form-element">
          <input type="text" id="contact-name" class="form-input" />
          <label for="contact-name">ชื่อ สกุล</label>
        </div>

        <div class="form-element">
          <input type="text" id="contact-email" class="form-input" />
          <label for="contact-email">อีเมลของท่าน</label>
        </div>

        <div class="form-element">
          <textarea
              name=""
              id="contact-message"
              cols="30"
              rows="10"
              class="form-input"
            ></textarea>
          <label for="contact-message">ข้อความ</label>
        </div>

        <input type="submit" class="form-btn" value="ส่ง" />
      </form>
    </div>
  <script>

    const formInputs = document.querySelectorAll(".form-input");

formInputs.forEach((formInput) => {
  let thisLabel = formInput.nextElementSibling;

  formInput.addEventListener("focus", () => {
    thisLabel.classList.add("active");
  });

  formInput.addEventListener("blur", () => {
    if (formInput.value === "") {
      thisLabel.classList.remove("active");
    }
  });
});
function submitForm(obj) { 
        event.preventDefault();
        var obj = {}
        obj.name = document.getElementById('contact-name').value
        obj.email = document.getElementById('contact-email').value
        obj.message = document.getElementById('contact-message').value
        google.script.run.withSuccessHandler(()=> {
          document.getElementById("myForm").reset()
              Swal.fire({
              position: 'center',
              icon: 'success',
              title: 'บันทึกข้อมูลของท่านเรียบร้อยแล้ว',
              showConfirmButton: false,
              timer: 1500
            })
            })
            .sendMail(obj);
    }

  </script>
   <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>

</html>
Tags:
ครูเค รักล้านนา

รักอิสระ รักสุขภาพ รักฟ้อนเจิงล้านนา

ใหม่กว่า เก่ากว่า