Question

I am trying to use Google Docs Form in a custom HTML page. So far I have generated a form online and extracted the <form> part from its source.

It works perfectly so far, except that it transfers the whole page to the confirmation page of Google.

What I would like to achieve is either:

1. not to transfer to the Google confirmation page but just display some small notification that the form has been submitted (for example using Colorbox)
2. or if it is not possible then at least make the confirmation window pup up in a new window with controlled dimensions

For explaining my idea

This is the link to the original form’s live page:
original form page

Here is the extracted form part:

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dG94WjlHTzljMHdMTEZ1ek1SY0c2NVE6MQ&amp;ifq" method="POST" id="ss-form">
    <label class="ss-q-title" for="entry_0">Sample Question 1</label>
    <label class="ss-q-help" for="entry_0"></label>
    <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <input type="submit" name="submit" value="Submit">
</form>

Is there any way to control how the submit action happens?

I know target="_blank" works for forms too, but I believe there must be more sophisticated control over what happens when someone clicks to the Submit button.

To sum up

I would like to display the form’s confirmation in Colorbox while sending the data to the Google back-end, without showing the Google front-end. Is there an easy way to solve this?

Answer 1

You mentioned Colorbox – that’s exactly what I use.

All you have to do is open the link to the original form page using the href parameter when you instantiate the Colorbox. Also when you’re opening outside pages you need to use iframe mode.

Example:

$.colorbox({href:"https://docs.google.com/spreadsheet/viewform?formkey=dG94WjlHTzljMHdMTEZ1ek1SY0c2NVE6MQ", iframe:true});

When you submit the form you’ll see google’s confirmation page within the Colorbox, and then user can easily close it. You should be able to give the colorbox a caption to instruct them if needed. (Using title: ?? Maybe?)