Avoid Databases by Hacking a Google Form
No PHP? no SQL? no problem!
As a novice front end web developer, one challenge that I face is convincing clients and employers that an SQL (or even a JSON) database is not always needed. When website traffic is only dozens of hits per day, it usually isn’t worth the time of setting up a database from scratch, the effort of maintaining PHP code, or the cost of using a third party tool. That’s where Google Forms comes in.
If you have never used Google Forms (or Google Drive for that matter), start. Google Forms is the easiest way to collect information from strangers on the internet and keep it in an easy to read/edit/manipulate spreadsheet. However, the native embedding function of a Google Form into a website is clunky at best.
Nobody with a professional website is going to want Google’s branding where a prospect, client, or friend would input data. So what can we do to get all of the goodness of a Google Form without any of the Google branding? By some simple HTML tomfoolery of course. (See the final product here if you’re as impatient as I am!)
Create your form
Start by heading to Google Drive and creating a new form. Their new form editor is sleek and makes it almost fun to create a good looking form. While the standard Google forms are now a lot prettier, we still don’t want the Google branding on our website.
Once you’ve created your form and it has all of the fields you want, (I’ll be asking for your name and sock preference) you’re ready to press send and push your form live!
Grab the link to your form and open it up in another tab to preview your form.
Grab the form HTML
Paste the form link into your browser and open up dev tools so that we can start getting into the nitty gritty markup code. In your dev tools, copy the form tag and paste that into your favorite code editor (I personally like Atom).
Once your code has been pasted into your code editor, add some html, header, & body tags, save it as an HTML file and run it in a browser to make sure everything is there. Go ahead and test your form to make sure it functions how it’s supposed to.
Fill out all of the fields, click submit, and check the results in Google Drive to make sure it posted correctly.
If all is well, and the form posts, we’ll now have to remove the redirect to the default Google ‘Thank you’ page…
Change form redirect
Now we’ll add a simple script to listen for when the submit button is pressed that will redirect to whatever page we want it to. See the code below for details.
If you’d rather the page not redirect and show an alert dialogue, use the code below instead
Either method will prevent the Google ‘Thank you’ page from appearing!
Styling the form
As you saw when testing, your form is going to look a little uhhh… ugly! But that’s okay! Because now we have full reign to customize how we want without any of the Google branding taking away from our website!
Personally, I like to strip away as much of the html tags as possible in the form and change the classes so that it functions with the Bootstrap framework.
One word of caution is to not tamper with any of the attributes other than ‘class’ in the input or form tags.
From here, I can paste this code onto any site I’m working on using that is using the Boostrap framework and immediately start collecting feedback from users on the site!
Now instead of having to manage a database, learn PHP or SQL, or deal with Google’s branding, you have a form on your site that functions well and posts to an easy to use spreadsheet!
Wrapping it all up
How exactly does this work?
So now what?
View the example here and go try it out for yourself! Build a website, implement a form and watch your Google spreadsheet fill up with responses! Ask me any questions in the comments and I appreciate any and all feedback!
Thank you for reading and try it out here!
Originally published on my blog at vlaservi.ch/blog