let url = "https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse"; //action url
let form = document.querySelector("#form"); //form element
form.addEventListener("submit", (e) => {
e.preventDefault(); //prevent default behaviour
fetch(url, {
method: "POST",
mode: "no-cors",
header: {
'Content-Type': 'application/json'
},
body: getInputData()
})
.then(data => {
console.log(data);
alert("Form Submitted");
})
.catch(err => console.error(err));
});
//populating input data
function getInputData() {
let dataToPost = new FormData(); //formdata API
//fill name attributes to corresponding values
dataToPost.append("entry.294341084", document.querySelector("#inp1").value);
return dataToPost;
}
<article class="mid">
<p>
Only HTML form
</p>
<form method="post" action="https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse">
<label for="inp10">Write something</label>
<input type="text" name="entry.294341084" id="inp10">
<input type="submit" value="Submit">
</form>
<hr>
<p>
Fetch API + HTML form
</p>
<form method="post" id="form" action="https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse">
<label for="inp1">Write something</label>
<input type="text" name="entry.294341084" id="inp1">
<input type="submit" value="Submit">
</form>
</article>
article.mid {
font-family: sans-serif;
min-height: 400px;
min-width: 400px;
background: #def;
border: 1px dashed #89e;
margin: auto;
width: 400px;
position: relative;
}
hr{
margin: 4rem auto;
border: none;
}
p{
color: #89e;
text-align: center;
border-bottom: 1px dashed #89e;
}
label,
input {
text-align: center;
display: block;
padding: 0.25rem;
margin: 1rem auto;
color: #263db1;
outline: none;
border-radius: 1rem;
}
input {
border: 2px solid #263db1;
}
input[type="submit"] {
background-color: #263db1;
color: #eee;
border: 2px solid #89e;
padding: 0.5rem;
}