The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Redirect a Google Docs form to your custom 'thank you' page
RainLover
post Oct 11 2012, 10:59 AM
Post #1


Advanced Member
****

Group: Members
Posts: 198
Joined: 16-November 09
Member No.: 10,346



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2012, 01:24 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,625
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Oct 11 2012, 11:53 PM
Post #3


Advanced Member
****

Group: Members
Posts: 198
Joined: 16-November 09
Member No.: 10,346



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2012, 11:05 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,625
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2012, 03:51 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,625
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Oct 13 2012, 03:45 PM
Post #6


Advanced Member
****

Group: Members
Posts: 198
Joined: 16-November 09
Member No.: 10,346



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Roy4u
post Aug 29 2017, 04:10 AM
Post #7





Group: Members
Posts: 1
Joined: 29-August 17
Member No.: 26,485



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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2017 - 12:30 AM