Using Google Docs as a Form Processing Backend

Whenever you’re setting up any website, you usually have a few simple forms (email newsletter sign up, beta signups, contact forms, etc.) that you’ll use to get people’s information. In most of these cases, you usually want to set these forms up as quickly as possible with minimal effort.

However, this information is usually fairly important and needs to be easily accessible (especially if it’s a “request a demo” form for a B2B service). When we were designing the forms for the frontend Eventable website, we quickly learned that adding a few simple forms was going to require some custom work on our part.

For our case (especially since our entire backend runs on MongoDB), we didn’t want to have to deal with an additional set of calls to our database and then have to make some sort of web portal for our sales and marketing teams to read all the saved info.

To solve this issue, we came up with a pretty neat hack–use Google Docs as a write-only database to store submitted form data. The step-by-step is listed below…

The Setup

Go to Google Docs and create a new form with all the fields you want. I’m assuming you’ll already know this so I’m not going to walk you through it.
I’d recommend that you don’t set any fields as “required” as that may create issues during saving. If you really need required responses, handle it on the frontend with client-side javascript.
Once you’ve set everything up, go to the live form page where people can enter their responses.
Open up the DOM inspector of your choice (Firebug, Chrome Web Inspector, etc.) and navigate to the following:
```
html > body > div [class=“ss-form-container”] > div [class=“ss-form”]
```
Copy the entire form element and paste the HTML code into your website (you can later style this up as you want – just make sure that the names of all the inputs are kept the same).
Edit the form tag and change the target attribute from
```
target=“_self”
```
to
```
target=“submitter”
```

Once you’ve done that, all you have to do is create add the following element:

<iframe name=“submitter” src=“” style=“display:none;”></iframe>

And voila! You have an AJAX-like form processing that doesn’t require a page refresh/reload and you didn’t write a single line of JS.

How it works

It’s actually a fairly simple feature that goes often unused – every form element allows you to specify a target where you can send it for processing. By default, this is set to “_self” which is the current page that the form is sitting on. However, you can set the target to another element (specifically an iframe) and have the form send all its data there.

By keeping the iframe invisible (css display:none), the viewer never sees the other page being loaded and makes it seem like something done with JS. You can always make the iframe visible and see what the loaded page looks like.

With a little bit of client-side JS on top of this, you can read the iframe for an error/success message and show the user some relevant feedback after submitting the form.

Happy hacking!