neno-tech/code.gs

## code.gs
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function sendMail(obj) {
Logger.log(obj)
  var message = obj.message
  var email = obj.email
  var name = obj.name
  MailApp.sendEmail('xxx', 'มีผู้ติดต่อจากเว็บบล็อกเกอร์', '\n อีเมลผู้ติดต่อ: ' + email + '\n ชื่อผู้ติดต่อ: ' + name + '\n ข้อความที่ติดต่อ: ' + message)

}

## css.html
<style>
  * {
    font-family: "Prompt", sans-serif;
  margin: 0;
}

.contact-container {

  display: flex;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  color: #F44A28;
  padding: 48px 16px;
}

.contact-container .contact-left {
  background: #1087FF;
  padding: 32px 24px;
  border-radius: 48px 0 5px 5px;
  box-shadow: 0 5px 16px -2px rgba(0, 0, 0, 0.2);
}

.contact-container h2 {
  margin-top: 8px;
  margin-bottom: 32px;
  font-size: 22px;
}

.contact-container h2.contact-left-heading {
  color: #fff;
}

.contact-container .contact-left .form-element .form-input {
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  margin-bottom: 24px;
  border-radius: 4px;
  box-shadow: 0 5px 8px -2px rgba(0, 0, 0, 0.2);
  /* font-family: "Roboto", sans-serif; */
}

.contact-container .contact-left .form-element {
  position: relative;
}

.contact-container .contact-left .form-element label {
  position: absolute;
  left: 16px;
  transform: translateY(12px);
  font-size: 14px;
  color: #777;
  transition: all 300ms;
}

.contact-container .contact-left .form-element label.active {
  background: #F44A28;
  transform: translate(-8px, -16px);
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 13px;
}

.contact-container .contact-left .form-btn {
  background: #F44A28;
  border: 0;
  color: #fff;
  padding: 10px 48px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 5px 8px -2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 300ms;
}

.contact-container .contact-left .form-btn:hover {
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .contact-container {
    flex-direction: column;
    padding: 0 32px;
  }

  .contact-container .contact-left {
    border-radius: 0;
    width: 100%;
    padding: 16px 60px;
  }

}

  </style>

## index.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>
	function doGet() {
	return HtmlService.createTemplateFromFile('index')
	.evaluate()
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
	}
	function sendMail(obj) {
	Logger.log(obj)
	var message = obj.message
	var email = obj.email
	var name = obj.name
	MailApp.sendEmail('xxx', 'มีผู้ติดต่อจากเว็บบล็อกเกอร์', '\n อีเมลผู้ติดต่อ: ' + email + '\n ชื่อผู้ติดต่อ: ' + name + '\n ข้อความที่ติดต่อ: ' + message)

	}
	<style>
	* {
	font-family: "Prompt", sans-serif;
	margin: 0;
	}

	.contact-container {

	display: flex;
	align-items: center;
	max-width: 800px;
	margin: 0 auto;
	color: #F44A28;
	padding: 48px 16px;
	}

	.contact-container .contact-left {
	background: #1087FF;
	padding: 32px 24px;
	border-radius: 48px 0 5px 5px;
	box-shadow: 0 5px 16px -2px rgba(0, 0, 0, 0.2);
	}

	.contact-container h2 {
	margin-top: 8px;
	margin-bottom: 32px;
	font-size: 22px;
	}

	.contact-container h2.contact-left-heading {
	color: #fff;
	}

	.contact-container .contact-left .form-element .form-input {
	padding: 12px 16px;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	box-shadow: 0 5px 8px -2px rgba(0, 0, 0, 0.2);
	/* font-family: "Roboto", sans-serif; */
	}

	.contact-container .contact-left .form-element {
	position: relative;
	}

	.contact-container .contact-left .form-element label {
	position: absolute;
	left: 16px;
	transform: translateY(12px);
	font-size: 14px;
	color: #777;
	transition: all 300ms;
	}

	.contact-container .contact-left .form-element label.active {
	background: #F44A28;
	transform: translate(-8px, -16px);
	color: #fff;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 13px;
	}

	.contact-container .contact-left .form-btn {
	background: #F44A28;
	border: 0;
	color: #fff;
	padding: 10px 48px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 14px;
	box-shadow: 0 5px 8px -2px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 300ms;
	}

	.contact-container .contact-left .form-btn:hover {
	transform: scale(1.05);
	}

	@media (max-width: 600px) {
	.contact-container {
	flex-direction: column;
	padding: 0 32px;
	}

	.contact-container .contact-left {
	border-radius: 0;
	width: 100%;
	padding: 16px 60px;
	}

	}

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