Google form is one of the easiest ways to collect data. The collected data is preorganized and can be analyzed using various tools and add-ons.
Prequisite
You should be familiar with HTML forms at least. Having knowledge of JavaScript and fetch API will be great.
Need of custom front-end
There may be cases when you need a consistent design for your website. Although you can always create your form with a server and database but embedding Google form in your website can be much easier and economical.
Implementation
The very first requirement is to turn off the 'Require sign-in' sub-options in form settings.
Open your Google Form using the sharable link to extract the necessary information, it can be tricky at times.
- Open Browser DevTools (F12 or Ctrl+Shift+i for chrome)
Extracting Form Action URL
search for<form
get theaction
attribute of form. It looks like https://docs.google.com/forms/u/0/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponseExtracting
name
attribute(s)
Search for<input
in DevTools, you may find many input fields look for the one that looks like this.entry.294341084
Input fields for inputs like radio button etc. are not present initially you have to select any option which will create a corresponding hidden input element otherwise, simply remove the\_sentinel
formentry.100000084\_sentinel
without checking radio button.
Custom front-end can be created in either of the following ways.
- Only HTML forms: Easy way
- Fetch API + HTML forms: Better way
Only HTML form
Create an HTML form, set its action
attribute to previously extracted action URL
and method
attribute should be POST
.
Set name
attributes to corresponding input(s).
<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>
That's it add CSS to make it beautiful.
With this approach, on submission, you will be redirected to the Google Forms acknowledgment page. -_- not so cool. You can avoid this by using fetch API.
Fetch API + HTML form
Create a Form, can be same as above. Prevent default behaviour of form so as to use fetch API using javascript. You have to set Method to post, the header should be "Content-Type": "application/json"
. You may or may not set mode
to no-cors
it will throw an error on cors
mode but will work anyway.
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)); //promise based
});
//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;
}
The response from fetch post
request is not satisfactory, but it doesn't matter since it works. ;P
The advantage of using this approach over HTML forms is you have full control, the user won't be redirected to Google Form's acknowledgement page.
Checkout a working example here.
Considerations
- Custom Front End for the google forms can only be used to collect data.
- It will work only if ‘Require Sign-In’ is turned off in Google form settings.
- For Radio buttons, checkboxes etc. only exact values will be accepted, even a small spelling mistake will discard the answer for that particular question.
- Tricky and Time-Consuming
- Partial Response by the user if not handled properly, so frontend design should also validate user responses.
- Sections in google form can be submitted by a single
post
request. - Images can also be posted using this approach.
It may be a time-consuming task to create a custom frontend for a google form, but results can be worth the effort.
Top comments (4)
Exactly what I was looking for, thanks a lot! I think the custom form should also work with react formik...
Still works here, December 2021.
Works as of 2023, thx!
This method does not work anymore for me... First of all I had to look for the entry.XXXXX id in the http requests. They do not appear anymore in the source code. When I try to POST with all entries present, they appear empty in the google form responses