Custom Frontend for Google Form

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.

1. Open Browser DevTools (F12 or Ctrl+Shift+i for chrome)

2. Extracting Form Action URL
   search for <form
   
   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
   
   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).

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