index.html
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
/>
</head>
<body>
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Data Entry Form</h1>
</div>
</div>
</section>
<form id="form" class="container m-4 pl-4" method="POST">
<div class="field">
<label class="label">First Name</label>
<div class="control">
<input
class="input"
type="text"
placeholder="Your First Name"
name="first_name"
/>
</div>
</div>
<div class="field">
<label class="label">Last Name</label>
<div class="control">
<input
class="input"
type="text"
placeholder="Your Last Name"
name="last_name"
/>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input
class="input"
type="email"
placeholder="Your Email"
name="email"
/>
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input
class="input"
type="password"
placeholder="Your Password"
name="password"
/>
</div>
</div>
<div class="field">
<label class="label">Date of Birth</label>
<div class="control">
<input
class="input"
type="date"
placeholder="Your Date of Birth"
name="dob"
/>
</div>
</div>
<div class="field">
<label class="label">Gender</label>
<div class="control">
<label class="radio">
<input type="radio" name="gender" value="male" /> Male
</label>
<label class="radio">
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
</div>
<div class="field">
<label class="label">Agree to Terms</label>
<div class="control">
<label class="checkbox">
<input type="checkbox" name="agreeToTerms" value="yes" /> I agree to
the terms and conditions
</label>
</div>
</div>
<div class="field">
<label class="label">Additional Information</label>
<div class="control">
<textarea
class="textarea"
placeholder="Any additional information"
name="notes"
></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit" id="submit-button">
Sign Up
</button>
</div>
<div class="control">
<button class="button is-danger">Cancel</button>
</div>
</div>
</form>
<div
id="message"
style="
display: none;
margin: 20px;
font-weight: bold;
color: green;
padding: 8px;
background-color: beige;
border-radius: 4px;
border-color: aquamarine;
"
></div>
<script>
document.getElementById("form").addEventListener("submit", function (e) {
e.preventDefault(); // Prevent the default form submission
document.getElementById("message").textContent = "Submitting..";
document.getElementById("message").style.display = "block";
document.getElementById("submit-button").disabled = true;
// Collect the form data
var formData = new FormData(this);
var keyValuePairs = [];
for (var pair of formData.entries()) {
keyValuePairs.push(pair[0] + "=" + pair[1]);
}
var formDataString = keyValuePairs.join("&");
// Send a POST request to your Google Apps Script
fetch(
"https://script.google.com/macros/s/AK......./exec", //change your api url
{
redirect: "follow",
method: "POST",
body: formDataString,
headers: {
"Content-Type": "text/plain;charset=utf-8",
},
}
)
.then(function (response) {
// Check if the request was successful
if (response) {
return response; // Assuming your script returns JSON response
} else {
throw new Error("Failed to submit the form.");
}
})
.then(function (data) {
// Display a success message
document.getElementById("message").textContent =
"Data submitted successfully!";
document.getElementById("message").style.display = "block";
document.getElementById("message").style.backgroundColor = "green";
document.getElementById("message").style.color = "beige";
document.getElementById("submit-button").disabled = false;
document.getElementById("form").reset();
setTimeout(function () {
document.getElementById("message").textContent = "";
document.getElementById("message").style.display = "none";
}, 2600);
})
.catch(function (error) {
// Handle errors, you can display an error message here
console.error(error);
document.getElementById("message").textContent =
"An error occurred while submitting the form.";
document.getElementById("message").style.display = "block";
});
});
</script>
</body>
</html>
code.gs
const DATA_ENTRY_SHEET_NAME = "Sheet1";
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(DATA_ENTRY_SHEET_NAME);
const doPost = (request = {}) => {
const { postData: { contents, type } = {} } = request;
var data = parseFormData(contents);
appendToGoogleSheet(data);
return ContentService.createTextOutput(contents).setMimeType(ContentService.MimeType.JSON);
};
function parseFormData(postData) {
var data = [];
var parameters = postData.split('&');
for (var i = 0; i < parameters.length; i++) {
var keyValue = parameters[i].split('=');
data[keyValue[0]] = decodeURIComponent(keyValue[1]);
}
return data;
}
function appendToGoogleSheet(data) {
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var rowData = headers.map(headerFld => data[headerFld]);
sheet.appendRow(rowData);
}
