Using Google Forms as Backend for Static Website


Google Forms is quite cool. Especially, it links to Google Spreadheet, which is basically a mini-database.
However, we are stuck with Google Forms UI, and we cannot do customized validations using our favourite libraries.
So we overkill and use all kinds of full stack platforms to develop a simple order form.

Not anymore. There is a simple hack to autopopulate your google forms and immediately submits the form.
All your user see is just a google form submission page that they can close.

First, create a google form.
Click Responses > Get pre-filled url.
*Google forms has rolled out a new version. You have to click on the running man on the bottom left to go back to the old form.

Click submit. You will get a link like below:

https://docs.google.com/forms/d/1KPUs7HRQDAWspAdydh84s9sgM7IEFqHkwZ-BE_FW9hc/viewform?entry.1118251165&entry.1465803323&entry.1601624496


Edit this link to

https://docs.google.com/forms/d/1KPUs7HRQDAWspAdydh84s9sgM7IEFqHkwZ-BE_FW9hc/viewform?entry.1118251165=value1&entry.1465803323=value2&entry.1601624496=value3

to auto-populate the google forms.

Further edit it to

https://docs.google.com/forms/d/1KPUs7HRQDAWspAdydh84s9sgM7IEFqHkwZ-BE_FW9hc/formResponse?entry.1118251165=value1&entry.1465803323=value2&entry.1601624496=value3

And now you have submitted the form.

All that is left is to create a frontend that does the validation for you and populate the entries accordingly.
And of course, you can change the google form back to the 2016 look after getting the pre-filled url.

Sample Form

Sample Question 1:

Sample Question 2:

Sample Question 3:


Check out the spreadsheet 'database' here.

Further Extensions:
Using Google Script, you can create all kind of cool things once you link your google forms to spreadsheet.
For instance, check out this code that allows you to automatically send a reply e-mail as someone submit their form
Auto Confirmation Email