Help - Search - Members - Calendar
Full Version: Redirect a Google Docs form to your custom 'thank you' page
HTMLHelp Forums > Programming > Client-side Scripting
RainLover
Here's a Google Docs form:

CODE
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dE02TlBHQ2hnVVdkTE5ya0lBYXhaMlE6MQ&amp;ifq" method="POST" id="ss-form">
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">First name
<span class="ss-required-asterisk">*</span></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>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">Last name
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1"></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="Submit"></div></div></form>


And here's the spreadsheet that it feeds:
https://docs.google.com/spreadsheet/ccc?key...TE5ya0lBYXhaMlE

I wonder how to redirect the form to my own custom 'thank you' page on submission.
Thanks!
Christian J
You could open a second window/iframe with the Thank You, or load the Google page in that second window/iframe and redirect the form page on submit. Or you might edit/redirect the Google page, but I don't know if that's allowed.
RainLover
Thanks for the answer!

QUOTE
load the Google page in that second window/iframe and redirect the form page on submit.


I just found this:
http://www.morningcopy.com.au/tutorials/ho...e-google-forms/ >> step 9.

Is that what you mean or do you have a more straightforward approach?
Christian J
QUOTE(RainLover @ Oct 12 2012, 06:53 AM) *

Is that what you mean

Yes, but I can't say if the JS works reliably.

QUOTE
or do you have a more straightforward approach?

You could load the Google page in a iframe that's hidden with CSS, and then print a JS thank you message on the actual form page. Simplified example:

CODE
<iframe name="foo" src="page1.html">Inline frames must be supported by the browser.</iframe>

<form action="page2.html" target="foo"
onsubmit="this.innerHTML+='<p>Thank you!<\/p>';">
<input type="submit" value="Send">
</form>

A disadvantage is that the user gets no real confirmation that Google actually received the form submission, only that the form was submitted.
Christian J
QUOTE(Christian J @ Oct 12 2012, 06:05 PM) *

QUOTE(RainLover @ Oct 12 2012, 06:53 AM) *

Is that what you mean

Yes, but I can't say if the JS works reliably.

Actually, it seems that site's script only redirects the parent form page after the Google page has loaded in the iframe. I don't know if it's really necessary to wait for that: AFAIK it should be enough to send the form submission HTTP request to Google's server, OTOH maybe there's some Ajax scripting on the Google page that must run (I have no idea).
RainLover
QUOTE
A disadvantage is that the user gets no real confirmation that Google actually received the form submission, only that the form was submitted.

I can handle it with some JavaScript or jQuery form validation.

QUOTE
Actually, it seems that site's script only redirects the parent form page after the Google page has loaded in the iframe.

That's right. Then I guess we shouldn't change the form innerHTML and reset the fields on clicking the submit button -- we just hide the form:
http://dl.dropbox.com/u/4017788/Labs/sampl...-docs-form.html
Please let me know what you think.
Roy4u
Even I was struggling for custom thank you page so that I can track analytics goal and adwords conversion. Finally, some how I figured out and made a stand alone HTML page out of Google form with some tweeks in the code. Here is blog stating step by step process to have custom thank you page along with google spreadsheet collecting the lead data. http://getdigitalpro.com/lead-capture-mana...ee-google-form/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.