Google Form Custom UI Pt. 2 - Submission Confirmation Page
ฝัง
- เผยแพร่เมื่อ 21 ส.ค. 2024
- Make your Google Form look like your website, or at least not like a Google Form. This video shows you how to create a custom submission confirmation page for your customized Google Form. If you haven't yet built your custom UI for your Google Form, see my earlier video: • Google Form Custom UI
Was this helpful? Buy me a coffee.
www.buymeacoff...
For more information on CSS styling, visit W3C Schools:
www.w3schools....
Website: www.trabanttec...
Instagram: / trabanttech
Facebook: / trabanttech
LinkedIn: / trabant-technology-par...
Music by Coma-Media from Pixabay.
pixabay.com/mu...
You, sir, are a genius!!!
what an amazing video, just straight to the point thanks for this vid, i'm following you
without a doubt the best videos are in English, thanks for the contribution
you deserve a thousand more subscriber
Awsome video. Worked like magic. Many thanks
gracias, saludos desde Bolivia
Amazing ❤❤❤❤
Great vid. Our organization is using another technique of snapping QR codes to register guests as they arrive using google forms and google sheets. My question is, is there a way to customize the response instead of a stock "thanks for the submission" that but something like, "Mr. Jim Smith, Director of XYZ Company" etc so the reception staff can greet them by name? Forms API has methods like setCustomMessage() but I am not clear how to do it. Maybe an HTML response would be easier? It would need to query back to the Google Sheet with that guest's data I imagine. Thanks for your work.
Hey there, thanks for the kind words. I am just now seeing your question and I think you may have answered it yourself. If I were confronted with that use case, I would likely have the HTML handle the custom response with the entered form data.
The Forms API is great. I use the Google APIs and Apps Script on a daily basis, but it would be a whole new subject area to figure out if you do not know it already. To that end, people should always go with what they know if the results are the same and it works for them. Cheers!
amazing
you are awesome 🤩
but how did you add this to a google site? you can't embed it if the confirmation page is saved in your computer
Correct! You can develop locally but then when you want it accessible on the web, you will need to move the files to some publicly accessible storage. Luckily web server space is cheap and there are even free options. I often use a publicly accessible bucket in Google cloud storage under the same Google account as the Site when I find myself in similar situations. Then I grab the public URL of the file/page to embed from the Google Cloud Platform and embed that into the Site. This keeps things fairly simple and is very inexpensive storage.
What happens when there has been an error that you can't validate though?
As far as I can follow, the javascript will just see that you have submitted your post and output that your submission has been successful, but in reality it hasn't gone through if there were an error for some reason.
Is there a way to tackle this problem?
I did this and first video works. It brings me to the Submission Confirmed page but it doesn't show up as a response! I copied the exact code from the video too. But great job on the first video +1 sub
Sorry to hear you had issues. I have verified the code still functions. It is so easy to accidentally create errors if everything isn't correct. Hopefully you persevered and overcame whatever the obstacle was. Cheers!
@@trabanttechnologypartners3271 never did though
Is the point of this to direct the form's response to a hidden on the same page ... without leaving/reloading? If so, this doesn't appear to be working correctly. In your video it also changes the URL bar from demo-form.html to submission.html at around 11:48, rather than unhiding the with the submission response.
Hey there, just seeing this. I have verified it is still working correctly for me and others. To my mind, this video is about circumventing the default Google Forms confirmation page, which it does successfully.
Briefly, the way it works is by declaring a hidden frame in the code which contains the submission confirmation page, then leveraging the target attribute of the HTML form and a small amount of JavaScript to load the referenced frame. Then, the user is presented that frame containing the custom confirmation page on submission of the form, instead of the Google confirmation page that typically loads.
Cheers!
Hi, Thank you for this tutorial. I am trying out a similar custom submission page on google form submission, but I keep getting 404 error, with the requested url not found on this server.
Sorry to hear that you aren't having success. If you are getting a 404 error after you submit your form, meaning you are getting a 404 error when the confirmation page is supposed to be loaded, it just means your web browser cant find your submission confirmation page at the address you supplied. My best guess, based on this info, is that you should check your file path in your custom form code.
In my code, I used "{window.location='demo_confirm.html';}">
This video save my life. Thank you very much T_T
I am glad it was helpful, you're welcome!
great video man atb
Thanks 👍
thank you for this clear step tutorial. Does possible to make button/hyperlink go back to input another form responses?
thank you very much.
Yes you can! On your custom form submission confirmation html page, just add a link there. If you want to make it a button, you could do the following:
www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-link.html
Hi sir, thank you very much for your sharing. another question is how to write html code for key in multiple choice option? thank you.
I just posted a new video on this topic today. th-cam.com/video/990Z4e6kmm8/w-d-xo.html
What to do to upload an image from the form?
does anyone know how to work with checkboxes and radio inputs to achieve similar results?
Hey there, I tested some code real quick to verify this response is accurate. You create your form elements in Google just as you would with the others and then retrieve the element name. In the following example, my radio button element was named "entry.1070907521" and my checkbox element is "entry.501286439". As long as the values of your custom form match the values in your Google form, this will work. Cheers!
Pick something.
Option 1
Option 2
Pick more than one something.
Option A
Option B
Option C
Option D
@@trabanttechnologypartners3271 Thank you for a quick reply, it works!
Hi thnx for this tutorial. How to make a depend drop-down form from Google sheets data ?
You're welcome. I have not run into that need so I have not spent time looking for a solution. If I do, I will post it. Best of luck to you.
Hi, If I understood correctly, you are looking to use and customize a dropdown option in your form ? You can try the select tag for the drop down. An example would be
Choose the color
Yellow
Blue
Hope this helps.
Hey there, I have this code integrated into my google site, and I have the confirmation page on a separate subdirectory and I am struggling to link the submit button to said subdirectory. Any tips on how to set this up would be fantastic. 🙂
Hey there! Without seeing your code I am going to make an assumption that maybe there is an issue here with a relative link. You could examine your relative link if that is the case or change it to an absolute link which could resolve the issue if we are on the right path here.
Good external resource: www.seoquake.com/blog/relative-or-absolute-urls/#:~:text=The%20main%20difference%20between%20absolute,point%20within%20the%20same%20domain.
@@trabanttechnologypartners3271 I was using an absolute link and switched the window.location to a window.location.href, which didn't work. SO i tried leaving the code that prevented the default google form redirect, and using an onclick="window.location.href" which was also buggin out
My question is how to deploy your Custom UI?
You can move your files to any web hosting space you have available to you. If you do not have anything available to you already, there are plenty of low cost or free web hosting platforms. I typically just put random files like this in a publicly accessible bucket in the Google Cloud Platform. Reliable storage billed based on traffic.