Google Form Custom UI
ฝัง
- เผยแพร่เมื่อ 21 ส.ค. 2024
- Make your Google Form look like your website, or at least not like a Google Form. This video shows you how to take the information about a Google Form and use it to write your own custom HTML front-end. A little knowledge of HTML & CSS can help you make a beautiful front-end for your Google Form.
Was this helpful? Buy me a coffee.
www.buymeacoff...
For more information on HTML forms, form autocomplete, and CSS styling, visit W3C Schools:
www.w3schools....
www.w3schools....
www.w3schools....
Website: www.trabanttec...
Instagram: / trabanttech
Facebook: / trabanttech
LinkedIn: / trabant-technology-par...
Music by Coma-Media from Pixabay.
pixabay.com/mu...
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 10](http://i.ytimg.com/vi/8kldrPPsDZs/mqdefault.jpg)
![ง้อ (ALRIGHT) - FOURTH [ TEASER ]](http://i.ytimg.com/vi/ya6MBfo-Wvg/mqdefault.jpg)
For one of the best engineering companies, Google didn't make their docs clear here at all.
Kudos to you for making this so simple, they owe you a developer advocacy role
I got so annoyed with the lack of customization of the Google Forms, and I didn't think I was going to be able to grasp this at all. You SAVED me. I understand the basics now.
That's great to hear! I have created a lot of Google Forms and I found the lack of customization frustrating. Once I finally sorted out how this could be done, I hoped it could help others. Enjoy!
The clearest and most up-to-date tutorial out there. Many thanks!
Wasn't a tutorial I actually needed, but it was so well made I stayed to watch and learn anyways lol.
Thank you for your generosity and clear teaching on this simple, but needed skill and resources.
Thank you from the heart ❤, I couldn't thank you enough, I tried many time uselessly until I watch your tutorial ❤❤
That is great to hear. I am glad the video could be of some help to you.
Finally someone who made it look easy!
Thank you! I am glad the video was useful.
Thanks..now I can try and customize the look of form..🙏🏻
Super duper helpful. Thank you!!!
Thank u so much! Very helpful 🤝🏽🔥
You are the best! Thanks for this video!
Works, thanks so much!
Brother, I love you for this 💞 thank you so much. This helped a lot🤝
helped a lot thanks 🙏🏿🙏🏿
previously would have to create google script to do this. so much easier!!!!! why did i only find this now 😅
This made me laugh because I can empathize many times over. 😂
This tutorial is what human need. Realy simple. Thank you very much T_T
Any trick for uploading images / file attachments??
Very well explained! Thanks. Do you have any thoughts on how to get this to work with checkboxes on the Google Form? When I check the box on my customized HTML input field, the checked box does not result in checking the box on the Google Form.
Hey, sorry I am just seeing this. I have done checkboxes, radio buttons, etc but I haven't documented it. I actually hope to find time this week to create a quick video because you are far from the only one to ask.
th-cam.com/video/990Z4e6kmm8/w-d-xo.html
Can you customise the form response page? If not can you design your own gorm response page for the action? No point in having a nice form if the response page is the ugly google response page. Great demo though 👍🏻
I agree on all points!
th-cam.com/video/Q8t9CqdIY2Q/w-d-xo.htmlsi=khkSAvZ2gthXhFKK
@@trabanttechnologypartners3271 Perfect 👍🏻 Thanks for the tutorial, exactly what I was looking for.
Cool video. Does this work multi-select checkbox questions?
Awesome content! How can this work for a form with sections based on answers?
Muchas gracias, excelente, que mi Dios lo bendiga.
Gracias y de nada!
Hi, can u help. I did everything you said,but when I submit an entry into the form, the Google sheet says new response received, but doesn't shoe the entry in the sheets? Is google blocking,or did I miss a small code bit or sth.i will upload my code and screenshot. Thanks for anyone who can help
I have a weird error where only one field is being sent, all others fields are just ignored
Thanks for you about this vedio , but resulation that use in this vedio is very small and I can see what you writing in the Editor. Please if you can Capture same Vedio with better resulation. Again thans for all.
my data is not going to sheet. Error in google drive shown is "Sorry, unable to open the file at present.
Please check the address and try again."
What about the upload feature?
You can use the in your form to accept file uploads. I hope to cover this in a future video.
developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
Love it,
Couldn't I change the Google confirmation page, or not possible?
It is possible. Turns out, that is what everyone wants next so I made a video on how to handle creating a custom confirmation page and redirecting to it: th-cam.com/video/Q8t9CqdIY2Q/w-d-xo.html
Yes it's possible
Hi! I have question. Can you make same design if you have form with many sections and you should not make it foreach question. So website create for you, and if not then what is other option.
Thanks for this exposure. For the picture upload, it is not working as I have seen people ask this same question. I tried the answer , it did not work. I am thinking if we can get the name for the , I tried the title of the column where the file is to be uploaded, it did not work.
Hey there, I still haven't ever tried a file upload solution for this because I have not had the use case. In the few minutes of poking around I did, I recall seeing that Google isn't using the HTML form for file uploads, but instead is using their Drive services. This would mean this simple approach would not work.
Just an idea I haven't tried... you could write your HTML form in Google Apps Script which would be able to include a form and Google Drive API/Service functionality.
hello, how to do after input not redirect to google form?
Great question! I ended up making a follow-up video to address this exact thing.
th-cam.com/video/Q8t9CqdIY2Q/w-d-xo.html
Any ways to get file upload feature also in use?
Last time I looked, the only way I could pull that off with something that posted to Google Drive was to actually write it in Apps Script. That then led me to rewrite the whole thing in Apps Script and it moved so far away from this original idea that I didn't see it through (yet?).
What if i have to upload multiple images as answer of a question, how will that be captured?
Hey there, I still haven't ever tried a file upload solution for this because I have not had the use case. In the few minutes of poking around I did, I recall seeing that Google isn't using the HTML form for file uploads, but instead is using their Drive services. This would mean this simple approach would not work.
Just an idea I haven't tried... you could write your HTML form in Google Apps Script which would be able to include a form and Google Drive API/Service functionality.
How to get pre-filled values in the form from google sheet and embed in gmail body
Lets say I want to make a survey and ask for age and gender at the start, is it possible to review the responses based on age and gender later? If so, how?
Once you have that data in a response sheet, you can use a myriad of sheet functionalities or third party add-ons for data filtering and visualization. It could be as simple as individual sheets that import range from the response sheet based on the criteria you specify.
how to add and if i should add captcha for such form?
Could u pls upload a video regarding the google form "Add file " field in the custom html form
Good idea. I’ll try to find time to do that.
@@trabanttechnologypartners3271 is this possible? Really liked the video btw!
Im unable to get it to submit directly. seems like an error always pops up saying "There was a problem submitting your response". I than can submit on the google form without changing anything and it submits fine. Any suggestions?
Iam getting message unable to open file at this time please check the adress and try again
This doesn't work. When i put in Data , it doesn't show up in my form response or sheet
Sorry to hear you are having issues. I just tested my implementation and it still works so hopefully with a little perseverance you can figure out what you need to do differently. Good luck!
Thank you for your reply my sight is actually hosted on Google when I hit submit its it accepts a response but it does not show up in the Google sheet can I email you my screenshots and my HTML code @@trabanttechnologypartners3271
How can we add a dropdown??
This Is my code.maybe sth in the formating is wrong.maybe googlecis Playa hating...
i get an cors error i assume everyone else is getting that do and method not working anymore
Sorry to hear you are having issues. I just tried my implementation and it still works as expected. It might be worth another try to see if you can achieve success.
@@trabanttechnologypartners3271 my bad i added postget or something in the form
Hi@@trabanttechnologypartners3271
Firstly, thank you for this. I am new to do this and wanted to create a bespoke form for my website.
I wondered if you or anyone may help with something as I have spent the past 12hours trying to work out how to convert the CheckBox answers and Radio answers in my google form to show in my form responses? Any help would be really appreciated.
Thank you
Hey there, when someone else inquired about this previously, I provided this response and they verified it worked for them...
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
th-cam.com/video/990Z4e6kmm8/w-d-xo.html
how can we send the custom form to our responder if the html file and css is in storage only? thank you
If I understand you correctly, once you are done developing the files on local storage, you need to migrate them to a web server so that you have a URL you can provide.
If you do not have an existing web server, there are many free options. I found this list of ten free options: graygrids.com/blog/free-static-html-hosting-providers
@@trabanttechnologypartners3271 Thank you very much for the information. subscribed
Does this not work anymore? Submitting just sends me to the prefil page.
This does still work. Since the prefilled link page is never used in the custom code, there should be no redirect to that page. I would start by troubleshooting the URL used in the "action" of the form.
@@trabanttechnologypartners3271 that was my first thought as well. From what I can tell, it's correct. camelCase and everything :•) bummer that I can't get it working. But thanks for a good tutorial!
@@trabanttechnologypartners3271 I was wrong in saying it sent me to the prefill page though. I end up at /viewForm but nothing is filled in and no response is given.
Same here
Hi.does thisxwork if my site is hosted w Google. In other words, do i just embed the code and they will allow?can you post the final html codes for your custom ui and confirmation pages
Can you poste the final HTML Code
Yes,can u send the final code?
IS THIS SAFE ALSO HOW DO I UPLOAD IMAGES
It is safe. You can use the in your form to accept file uploads. I hope to cover this in a future video.
developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
Thx for the video i used this information to add some response to my survey