How I hacked a Google form

One of my valentines (the real thing is animated). The whole project includes 12 valentines and has amassed 7,000 pageviews. Not bad for a random whim!

I had a sudden burst of inspiration on my ride home early last week that ended up turning into the adorableness that is CSS Valentines. Because the idea was time-sensitive (I wanted it ready for Valentine’s Day on Friday), this project was a good exercise in taking something from idea to execution in relatively short order.

I also learned some cool new things along the way. Most of the valentines are animated using CSS 3. I found a little JavaScript to randomize the valentines on page load and refresh. And I played around with Facebook’s Open Graph meta tags. But the biggest challenge was setting up a simple, single-input submission form.

Sounds like it should have been a piece of cake, right? Well, not exactly. I was looking for a way to add some interactivity to the site by allowing visitors to suggest their own nerdy well wishes. I also wanted it to funnel nicely into a Google spreadsheet rather than have it send to my email or a base like Wufoo. The most plausible option seemed to be to set up a Google form, but upon first glance there was no way to style the form with my own CSS — something other services (like Wufoo) offer with a bit of effort.

I did some searching and asked a friend, but the answers that turned up all seemed like way too much work than a single-input form should require. That was when I refined my search queries and stumbled on the jackpot. A husband and wife dev team in Australia had posted on the exact topic I was struggling with. Without further ado, here is what I did with a lot of help from the post above.

Once you’ve created your form in Google Drive, click the “View live form” button under the menu bar:

From there, you can right-click and open up your developer tools (‘Inspect Element’). Look for the <form> element and copy everything inside and including the tags into your own html document. (I had already styled my submission page, but if you haven’t at this point, now is a great time to do it. Simply style the same way you would any other form.)

The key part here is the link between your submission page and the the spreadsheet created by the form in your Google Drive account. In your opening <form> tag, you’ll see something like this, which is the URL generated by your spreadsheet in Drive:

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">

Now what do you do about that ugly confirmation page? An easy code swap does the trick! Simply cut out the opening <form> tag I pasted above and copy this in its place:

<script type="text/javascript">var submitted=false;</script>

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

My form redirects back to the homepage after a user submits their contribution, but you could send it to a custom confirmation page that you’ve created or anywhere else you like! My submit page code can be seen here.

The Australian couple’s tutorial has added some great updates if you’re looking for a little more complexity with your form. New topics include: adding verification to your Google forms, fixing out-of-date source code, and a step-by-step process on multi-page forms.

Aside: We learned about the command line and pushing to GitHub this week, so my code is all there if you want to take a look under the hood!