SheetData
input.html
<!DOCTYPE html>
<html>
<head>
<title>User Data Form</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
/********* colored toast sweetalert2 *********/
.colored-toast.swal2-icon-success {
background-color: #a5dc86 !important;
}
.colored-toast.swal2-icon-error {
background-color: #f27474 !important;
}
.colored-toast.swal2-icon-warning {
background-color: #f8bb86 !important;
}
.colored-toast.swal2-icon-info {
background-color: #3fc3ee !important;
}
.colored-toast.swal2-icon-question {
background-color: #87adbd !important;
}
.colored-toast .swal2-title {
color: white;
}
.colored-toast .swal2-close {
color: white;
}
.colored-toast .swal2-html-container {
color: white;
}
</style>
</head>
<body class="container mt-5">
<center>
<h2>Register to get the 2025 New Year's Bonus.</h2>
<form id="userForm" onsubmit="submitForm(event)" class=" row">
<div class="mb-3 col-md-6 text-start">
<label for="fullName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" required />
</div>
<div class="mb-3 col-md-6 text-start">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required />
</div>
<div class="mb-3 col-md-6 text-start">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" required />
</div>
<div class="mb-3 col-md-6 text-start">
<label for="country" class="form-label">Country</label>
<input type="text" class="form-control" id="country" required />
</div>
<input id="latitude" type="hidden"/>
<input id="longitude" type="hidden"/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</center>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
getLocation()
});
// Retrieve the coordinates of the place.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
document.getElementById("latitude").value = position.coords.latitude;
document.getElementById("longitude").value = position.coords.longitude;
});
} else {
alertPopup({ message: "Geolocation is not supported by this browser.", icon: "error" });
}
}
// Record data
function submitForm(e) {
e.preventDefault();
const formData = {
fullName: document.getElementById("fullName").value,
email: document.getElementById("email").value,
city: document.getElementById("city").value,
country: document.getElementById("country").value,
latitude: document.getElementById("latitude").value,
longitude: document.getElementById("longitude").value,
};
google.script.run
.withSuccessHandler((response) => {
if (response.success) {
alertPopup(response);
document.getElementById("userForm").reset();
} else {
alertPopup({ message: "Failed to save data!", icon: "error" });
}
})
.saveUserData(formData);
}
// Notification pop-up
function alertPopup(obj){ //console.log(obj)
Swal.fire({
toast: true,
title: obj.message,
icon: obj.icon,
iconColor: 'white',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
customClass: {
popup: 'colored-toast',
},
});
}
</script>
</body>
</html>
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.setTitle("Project Kru Chian")
.setFaviconUrl("https://semicon.github.io/img/logo2small.png")
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
function saveUserData(data) {
const response = Maps.newGeocoder().setRegion('en').setLanguage('en').reverseGeocode(data.latitude,data.longitude);
const location = response.results[0].formatted_address;
const located = location.replaceAll(" ", "+").replaceAll("/", "%2F")
const mapUrl = createGoogleMapsLink(data.latitude,data.longitude); //`https://www.google.com/maps/place/${located}`
Logger.log(located)
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SheetData");
sheet.appendRow([
data.fullName || "",
data.email || "",
data.city || "",
data.country || "",
data.latitude || "",
data.longitude || "",
new Date(),
location,
mapUrl
]);
return { success: true, message: "Data saved successfully!", icon: "success" };
}
function createGoogleMapsLink(latitude, longitude) {
// Link for pin in Google Maps
const googleMapsLink = `https://www.google.com/maps?q=${latitude},${longitude}`;
return googleMapsLink;
}