Custom Frontend for Google Form
Tags: javascript, html, frontend, googleform
Published: 2021-01-30 12:28:15

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) at least. Having knowledge of JavaScript and [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) 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.
![Google Form settings](https://dev-to-uploads.s3.amazonaws.com/i/5ehljhd5x7wj7x2ss8fp.JPG)

Open your Google Form using the sharable link to extract the necessary information, it can be tricky at times.
1. Open Browser DevTools (F12 or Ctrl+Shift+i for chrome)
2. Extracting Form Action URL
search for `<form`
![Extracting action URL](https://dev-to-uploads.s3.amazonaws.com/i/xm7zp3vjzy2hf7gdu5jm.JPG)
get the `action` attribute of form. It looks like https://docs.google.com/forms/u/0/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse 

3. Extracting `name` attribute(s)
Search for `<input` in DevTools, you may find many input fields look for the one that looks like this. `entry.294341084`
![Extracting name attributes](https://dev-to-uploads.s3.amazonaws.com/i/ovd3afl5bivi8oe5iqun.JPG)
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` form `entry.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).


```html
<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 css](https://dev-to-uploads.s3.amazonaws.com/i/dlpuwrhv8soj9ktrvulz.jpg)



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.


```javascript
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
![fetch api response](https://dev-to-uploads.s3.amazonaws.com/i/vrn86w0m1iupq0tc3bb1.JPG)


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.
{% jsfiddle https://jsfiddle.net/utkarsh48/bgc0fhs5/ result,js,html,css %}


### 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.