Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Redirect a Google Docs form to your custom 'thank you' page
Posted by: RainLover Oct 11 2012, 10:59 AM
Here's a Google Docs form:
CODE
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dE02TlBHQ2hnVVdkTE5ya0lBYXhaMlE6MQ&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>
<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=0ApjOXzxlxbMhdE02TlBHQ2hnVVdkTE5ya0lBYXhaMlE
I wonder how to redirect the form to my own custom 'thank you' page on submission.
Thanks!
Posted by: Christian J Oct 11 2012, 01:24 PM
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.
Posted by: RainLover Oct 11 2012, 11:53 PM
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/how-to-style-google-forms/ >> step 9.
Is that what you mean or do you have a more straightforward approach?
Posted by: Christian J Oct 12 2012, 11:05 AM
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>
<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.
Posted by: Christian J Oct 12 2012, 03:51 PM
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).
Posted by: RainLover Oct 13 2012, 03:45 PM
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/sample-google-docs-form.html
Please let me know what you think.
Posted by: Roy4u Aug 29 2017, 04:10 AM
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-management-free-google-form/
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)