Post to google sheets from javascript
Okay - you can use google forms to write to google sheets, that's great but it gives you no ability to really customize the form: the style, size and the user experience.
I've found these great examples of how it's done...
See capture email for a live example.
<!DOCTYPE html>
<html>
<head><title>Minimal Signup form</title></head>
<body>
<h1>Minimal Signup form</h1>
<form id="gform" method="POST" action="https://script.google.com/macros/s/AKfycbxxknLpNqiFLPIJN4uJk9a1olIZVHigYHEn4ifur0_vK6WnB3NW/exec">
<div>name <input id="name" name="name" /></div>
<div>email <input id="email" name="email" type="email" required /></div>
<button>Sign up!</button>
</form>
<script type="text/javascript" src="form-handler.js"></script>
</body>
</html>
And form-handler.js is:
// Based on https://github.com/dwyl/html-form-send-email-via-google-script-without-server
// get all data in form and return object
function getFormData() {
var elements = document.getElementById("gform").elements; // all form elements
var fields = Object.keys(elements).map(function(k) {
if(elements[k].name !== undefined) {
return elements[k].name;
// special case for Edge's html collection
} else if(elements[k].length > 0) {
return elements[k].item(0).name;
}
}).filter(function(item, pos, self) {
return self.indexOf(item) == pos && item;
});
var data = {};
fields.forEach(function(k) {
data[k] = elements[k].value;
var str = ""; // declare empty string outside of loop to allow
// it to be appended to for each item in the loop
if(elements[k].type === "checkbox") { // special case for Edge's html collection
str = str + elements[k].checked + ", "; // take the string and append
// the current checked value to
// the end of it, along with
// a comma and a space
data[k] = str.slice(0, -2); // remove the last comma and space
// from the string to make the output
// prettier in the spreadsheet
} else if(elements[k].length) {
for(var i = 0; i < elements[k].length; i++) {
if(elements[k].item(i).checked) {
str = str + elements[k].item(i).value + ", "; // same as above
data[k] = str.slice(0, -2);
}
}
}
});
console.log(data);
log(data);
return data;
}
function handleFormSubmit(event) { // handles form submit withtout any jquery
event.preventDefault(); // we are submitting via xhr below
var data = getFormData(); // get the values submitted in the form
var url = event.target.action; //
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
console.log(xhr.status, xhr.statusText);
log(xhr.status);
log(xhr.statusText);
console.log(xhr.responseText);
log(xhr.responseText);
//document.getElementById('gform').style.display = 'none'; // hide form
//document.getElementById('thankyou_message').style.display = 'block';
return;
};
// url encode form data for sending as post data
var encoded = Object.keys(data).map(function(k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')
xhr.send(encoded);
}
function loaded() {
console.log('contact form submission handler loaded successfully');
// bind to the submit event of our form
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
function log(text) {
//document.getElementById("messages").value += text + "\n";
}