<!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>