Custom Google Form Interface with ReactJs

In this blog, we will see how we can save/get the data from a contact form without a backend database functionality using Google Forms.

We will be moving forward with the ReactJs framework for building the interface.

So, first thing first: Create the form on Google Form. Make sure you add all the fields with their correct input values. In this tutorial, I will be adding three fields: email (short answer text), name (short answer text), and message(long answer text).

P.S: make sure you disable add automatic email in Google form and create an email field yourself this way, we can access the email field in our custom ReactJs Interface.

In the end, my Google form looks like this:

Now, we want to get the API call that actually saves the response in the Google Form response.
For that, we need to go to our form. We can do this by copying the form URL.

Inspect this form and go to the <form> element and copy the API call at the actions, like this:

For storing the responses from our custom interface to the Google Form response, we need to map our form field with the Google Forms. In short, we have to copy the name attribute of each form field that we created in the Google Form. This is how it is done:

• get the prefilled form link, like this:

• get the name attribute by inspecting the form

Cool, Half of the task this done here!

For integrating the Google Form API call to our custom interface we will follow the good old form handling in ReactJs.

The code for interface and integration can be found here:

P.S: it will show typeError due to a CORS issue caused by Google Form fetch API which we can’t change but, our form works just fine and saves response too!

That’s all! Thank you for reading😸

I would love to connect on Twitter and LinkedIn or you can drop me an email for any work related queries 🌍