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.

How an embedded Google form looks in an iframe

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!)

Step One

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.

Note: If you plan on using radio buttons or check boxes, you will need to use the old Google forms editor as the new one uses javascript for these input fields. To go back to the old editor, click the option on the bottom left of the screen.

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!

The Google form send dialogue

Grab the link to your form and open it up in another tab to preview your form.

Step Two

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

copy this form tag!

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.

How a Google form looks with no CSS

Fill out all of the fields, click submit, and check the results in Google Drive to make sure it posted correctly.

Response Google workbook

If all is well, and the form posts, we’ll now have to remove the redirect to the default Google ‘Thank you’ page…

Step Three

Change form redirect

There are a lot of ways to do this, but today we’ll keep it simple and use some very basic javascript. The first thing we have to do is to create a hidden iframe on the page with an id=“secret-frame” and a style=“display: none;” (to make it hidden). Then we change the target attribute on the form tag to match the id of the new iframe (<form target=“secret-frame”>). Adding a target to an on page element prevents the form from redirecting to the URL it’s posting to.

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!

Step Four

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!

The same form utilizing the bootstrap framework

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?

Web forms typically use front end HTML markup code that has input fields which POST (hence why it says POST in the form attributes) into usually a PHP(or javascript) file which does a bunch of stuff like adding things to databases, sending emails, etc. Since Google forms leaves the file the HTML form publishes public, we are able to strip out a lot of the markup and still post all of the information we need to the Google form response file.

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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.