Google Forms Advanced (Custom Design with CSS) 2020
ฝัง
- เผยแพร่เมื่อ 22 ส.ค. 2024
- GITHUB REPOS:
github.com/mac... This is an updated video on how to create a custom Google form and apply your own HTML & CSS.
🔔 Please hit subscribe if you enjoyed this video - it really supports the channel:
bit.ly/2GbNa0A
LET'S CONNECT
📸 Instagram - / _adamthedev
💼 LinkedIn - / adamthedev
![[HOW TO] Add Google Forms to a website | CUSTOMISE HTML & CSS](http://i.ytimg.com/vi/0udw0nol6Po/mqdefault.jpg)
![[TH] 2024 PMSL SEA W1D5 | Fall | เก็บแต้มของจริง คือวันนี้](http://i.ytimg.com/vi/EciIAlCXg5k/mqdefault.jpg)
This was an awesome tutorial... Unfortunately, Google will now block the form for a terms of service violation if you use this method now.
I was very disappointed, I wanted to avoid using WP selection of forms.
Thanks for posting the up-to-date status of this method.. 👍
What you mean? It doesnt accept applying own HTML and CSS anymore?
For anyone having trouble finding the fields:
1. Populate all fields in the form
2. Search the DOM (in the developer tools, using CMD + F) for either the content you've entered or for: "entry.
3. You should see the hidden fields that have been populated with your content. Use these names as your 'name' property
I'm guessing Google is using JS to populate hidden fields.
I tried using the "jsname" but it is not working.Can you please help me with it?
@@Balagopal_Melemadathil the name inputs are hidden, you can inspect the form and search in console (entry)
@adamthedev can you be a bit more specific or possibly create a short video on where to find the input names now? I am having a hard time finding where they hid them now. Appreciate the work you do.
Scratch that.. I was able to find it. I think what people are not doing is using the right search feature in the console. People need to be sure that they are searching Command (control) + F. Not sure why they decided to hide them like this but at least they can be found.
@@northbayjoe Thanks man. I've updated to make it more clear.
I can't find “name” attribute while inspecting input elements of google form.
It does not work! It directs me to the form but does not submit, it takes me directly to the Google Forms form filled in, but without submitting.
Hello, When I try to inspect the element I did not find any name option! Any suggesction?
Ctrl + F find the
great video! quick question, how can I customize the thank you page so it can redirect to my domain?
Can you share us your solution pls?
I had the same issue today. This is kind of a workaround that worked for me.
//
var submitted=false;
I wish my teachers make something like this when we use google forms
Haha, maybe you can build it and show them??
adamthedev lol today was the last day of school, I’m 12 and you inspired me to make my own website. I’m currently working on a Covid tracker using react.js. Thanks 😊.
Wow!! that’s impressive that you’re interested in building websites and react already! Keep up the good work and no doubt you’ll be a pro soon 💪
And thanks for saying that I inspired you 👍👍
This is a great video. Could you guide me on how I could show a custom html page as output, once an embedded google form (google form embedded into HTML) is submitted?
I dont see a thing called name in the inspect menu..
Did you find any solution
Great work Adam. The form look great and simple to understand.
Glad you liked it! Thanks for your comment :)
Thank you for the tutorial.
Can you please tell me how to redirect to the custom "THANK YOU" page after submission?
you can add using jQuery
Superb Video searching for the solution for hours finally landed on this one
Thank You BOSS!!!
can your form also contains file upload item?
Thanks for this... Very helpful... Please make a separate video on how to handle dates. because i notice inputs for dd, mm, and yyyy are seperated. with different names. how can I handle that in html?
Hello. Do you know how I would submit a pre-populated entry on a google form on a website? Example: User types in a question into a form, then when clicking submit, it also submits their name into another form entry. I have the question and submit code working properly, but can't figure out how to pre-populate the 2nd form entry. Only the 'Question' form would be visible on the website, and the name would not be visible, but would show up in the form when submitted.
Thank you for your video, I can't find the entry name for a short answer, there is a alternative to call this field?
I found the solution, go to Get pre-filled link, in this page you can see all the name entry values.
@@davidurrego9538 Thanks a ton! It worked.
@@davidurrego9538 works in Agu 2021
Hi. The name="entry..." doesn't appear
Thanks very helpful. One question though, what about if one of the field is "upload a file" ? How do you manage to use the window of Google form to upload the file and have them go in your drive ?
I will look into this and see if I can find a solution. Sorry for the late reply.
@@adamthedev Hi looking forward to the field with "upload a file" and also for the field with "date"
Have you found a solution to upload files to Google Forms? i have same problem too
thanks
@@Sidoel_h Any solution sir? i am getting this error when the UPLOAD option is added - : "some questions still need some attention" even though I made a form with only this question (file upload)"
awesome video adam, really helped a lot, but even after hitting send/ submit its redirecting to google response, can change this.?
Thanks for this video! Soooo awesome!
Do you have any advice on creating question types that google forms does not support and saving it in sheets? I'm looking to create a question that has multiple answers that the user can specify (with text) amounts of each answer (google forms does not have this capability) and then hopefully save that information to the same google sheet as the rest of the survey questions!
I see that this html file is on your local machine. How do you make it such that you can share the form to other people to fill in like a google form link?
Great Video, We can probably style the Submited page also. But how do we link both pages?
Hi Adam
thanks for the importants tips and information explaining editing google form style
I have a little issue in this...
is it possible to redirect user to a custom link when submit the form?
best regard
Did you find a solution to the last line?
Hi, thank you for this, you are awesome. may I ask if I were to refresh the html page, how do I prevent it from going into the google form's form?
thank you for the video. my question is : this is a local file(form) how do you shared/send to others to fill the form? like google forms? or your intension is embed in a website
You will need to host your page on a web server... There are plenty of free hosting providers (or you could use something like GitHub Pages)
Great video, but can this be done if the form has sections?
Nice tutorial adam
Can you make tutorial edit style css after submission google form or redirect button submit to another page ?
Sure, I will do this video for my next Google form vid!
@@adamthedev This would be awesome!!!
@@tony4512 Did you find a solution for that?
@@francescoguaiana4820 No I have not, there are a few video out that but I was not able to follow them to be successful. Have you found a solution?
Great video. Good pace too. I wanted to know if you can redirect the form once it's submitted to a custom thank you page. Does this work in 2021? I am inspecting the google form and I don't see any reference to "name=" for the name input field.
Same problem here!
yes you can add custom page and custom alert box also
The issue i had was that it requires users that send to sign in to their google account instead of sending the form.
Great video mate, straight to the point and really helpfull, you're a craftman of this thing, cheers.
I have a question, can I embeded on a google site somehow?
Yes, I can.
@@joshuasweetman1863 for example if you want to show form you build using custom html or reside in another site, you cust copy the link and put it on your google site (insert->embed )
thanx , how to add many rows with one submit
And how to does the same for a form with file upload
yes i have same problem too
Thanks so much for this!
Doreen Aveni no problem 😀
unbelievably advanced
hey thanks for this amazing video
can you please share resources that you referred for making this i want to remove the success after submission page
i was searching form a long but unable to find
This is super helpful. DO you have any suggestion on how to do 3, 4 or more radio button. When I create 3 or more the form don't want to accept it for some reason. And I wanted to do a checklist, but have the same issue. I want to give people 5-7 options for both checkbox and radio buttons, but google form just give me error like"The question has changed. Please review your response." and I don't know whyyyy. Pls helpppppp
I am getting "TypeError: Failed to fetch' error as i submit the google form through an HTML page. Adm, can you please tell what could be the issue. Thank you !
I'm following the instruction in the comments and still cannot field the field names to enter into the code. Anyone have any idea?
I am also not able to find the name fields as shown. Specifically the name="emailAddress" and name="entry.1239871232" etc. fields. Any chance google's HTML changed in the last few months?
I see that Google was changed structure of forms
TO FIND HIDDEN FIELDS. Watch my new video: th-cam.com/video/0udw0nol6Po/w-d-xo.html
damn, didn't knew about it. cool
What if we want to upload an image?
Hello,
How to make google form in which after clicking on submit botton user will be automatically redirected to my website URL.
Thank you. Very helpful 👍🏻
thank you for your effort it s very helpful
Hi guys. It's a way to get a form working. Just wanted to ask if spam can be fought off with some way. Can you add a captcha or honey pot. I don't like the redirect on submit either.
This video is amazing, Thanks a lot
How to auto styling inputs in G sheets because it write in agley format
Hello brother, I couldn't find the name and mail id in the inspect element which I have to paste in my Html form.
What to do?please
how to stop redirect to response page after submission
gag koool I’m not sure it’s possible. I’ve tried using Ajax to send the request but they have CORS disabled. I'll look into it more as there may be a way
Not sure if you still need this, but my work around was creating a thank-you.html page that simply said thanks for submitting. And I also included a button to link back to the home page. But I added the following line right above the section we would add the form action link: var submitted=false;
@@wendyeatworld Great advice, thank you. Just copying your code didn't work for me. You have to also edit your form's target and onsubmit(target="hidden_" onsubmit="submitted=true;"). There is all info needed: stackoverflow.com/questions/6077054/old-google-form-redirect-after-submission
I can't find the name of input!! Help me! There is no name attribute only aria-label and jsname!
How do I prevent the original google form from showing up right after I click send message?
Found it very helpful
Thanks
I think the html and css for form data to submit in google forms is very easy the main point is if user after submitting data refered to the Google page So Thats not helpful..
Tell the method to Show the Users message (your message hass been successfully sent) on the Same page Or own page not To refer to Google..
Is this only work in my PC or same working when open with link from any PC ?????
Anyone know how to make my row descriptions quit truncating when using the Checkbox Grid? I'd like to make the overall form wide enough, or cause the text in each row to wrap.
I can't find any name value of my from! how can I get the name value?
can we use this type of form multiple times to submit data ??
Hi, I have managed to complete the steps, when submiting the form it says it's not possible to open the file, to check the address.. do you know why?
I've shared the file in the drive for anybody with the link to be able to see it, and as far as I'm aware the code is all well written..
would this process work for multi page forms with question logic ?
Can you use an html editor to add hyperlink-embedded text into Google Form questions?
Good job 💪🏻
Hi Adam, really great video, however how after submit I have two options edit the form and submit another response, is there any way I can customise this i.e. bring submit another response before edit response option ?
You can remove that from the settings of your google form.
duuude you're mad good
really nice
Hey brother can ya please make a tutorial like this one only but in this we should select the answer.. but in that the teacher should give some questions and we have the blank space to write the answer.. and yeah after submission teacher should know who scored how much marks ... please can you make it?
Hi, great !! how to avoid a form attack using your google form ?
Is the repo deleted? I can't find the gform repo
there´s an option in google form which allow you collect email address, how to get it and show it in the html. Thanks for your help!
I've just made a new video showing how to find the hidden fields: th-cam.com/video/0udw0nol6Po/w-d-xo.html :) Hope this answers your question
How if the Google form containing multiple pages.?
Good. But this don't work anymore T-T.... Google replaced the names for new jsname that only works with a complicated js to copy.
after submitting, it should be stick to form page. Anyone know how to do it??
I will look into this today!
@@adamthedev I got the solution, Thank you!!
You should have shared it
Sir please teach about how to add file upload system. really urgent for me. Please!
I bet! you want that option free like many lol
Hi Adam,
I'm trying to input datetime field entry in my project, when I inspect the google form page it shows multiple name entries for day, month, year, hours etc..
When I view the index.html page on my end it does not give me multiple inputs to match it with the form. Any suggestions??
I guess u can use this code in HTML page for date month and year
JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029
for multiple entries only use the common entry that will appear in the name
not able to find the name fields as shown, only "jsname" so this way isn't work actually (04 sep 20)
but "entry.######" stored in some js script block
@@VictorVankov I cannot find "entry.######" at all. What did you find it? Thank you!
@@VictorVankov Oh, fount it. What a pain!
@@iklimbov1 cmd/ctrl+F but i think now it handled by JS so need another clue
@@VictorVankov I was able to get the fields by doing the following. Fill in the form's fields. Click anywhere on the form and go "inspect". In the Elements tab press ctrl+f. Search for "entry."
how about image? is it also using entry.1010101010?
The form html code is different now. Need update!
Can this be embeded to google sites?
Hi! I'm new to this, I'm studying this because I need it for work. Can I also do this using google app script?
yes
How to deploy your custom Google Forms ?
Hi! Thank you so much for this! Can you please post a 2022 update. It looks like name is being hidden now. For example, now only the following appear: . name no longer showing. Love your content. Gracias!
It's actually there. I just used them on my project.
The CSS wont work for me
Thank you for this tutorial! The attribute "name" in the HTML of Form is no longer present. Can you please update the content?
do you found a solution ?
@@matg795 No because Google no longer made this available. I'm now using Forminator pro to create customized forms for my clients.
how can i upload a file ?
thankss
How to customize the thank you page?
using jQuery you can add custom thank you page and alert box as well
شكرا لك
i am not able to send the data of the radio button inputs! please help
hello, how do I make this work once i've uploaded it to a domain? it works when im coding it and checking it through the live server, but once it's uploaded, the results don't appear in google forms/sheets :( pls help
That's strange. Open up your Google Chrome developer tools, click send and check there aren't any errors
Sir I'll just appriciate if you could help me out. It's really urgent. may be in 5hours i have to do it. it's my client's project.!
I need to add file upload feature but can't find!
developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file this may help
@@adamthedev sir i know these stuff but google use their custom input field for uploading file
Is it possible to have this upload an image?
I haven't tried this yet. I guess it should be, using type="file" although you'd need to make sure that your validation aligns with Googles or the file may get rejected and it'll throw an error. I'll try it out
Is there any way to redirect to my website after link submit?
did you find a solution for that?
@@francescoguaiana4820 no
i have solution
@@Sidoel_h Share please
Does this still works?
Technically Yes... But Google will disable the form after submitting to it.
pls give me the html source :(
SO SICK DUDE!
I couldn't find the entry for my form
forms.gle/xwkAkQjVgpueBKHY7
this is my url
@@mparijatchandra1537 I had the same problem - cmd f to search for "entry" - they're listed at the bottom in order of your form.
@@abagaelshrader8483 sorry I didn't get that could you please elaborate
@@bhagyamsfirejourney The "entry.8940328950" is no longer listed up with the code (at least it wasn't in my browser), like the video says above. They were listed as a group of entries down at the bottom of the HTML file (e.g. 4 boxes to enter locations = 4 (entry.4934208) codes located near the bottom of the HTML file. To find that, just search (cmd f) the word "entry".
@@abagaelshrader8483 Awesome! Thank you!
how come I can't find the entry name?
Kelly what type of field is it?
The same problem 🙁
@@shaliqmohammed1599 What type of field is it?
Name, email...
Short answer text, long answer text
Now i didn't find entry number
Please read pinned comment
ok bro i go another way to find entry number
@@vinayairamathota6304 Nice! How did you do it?