[tutorial] HTML with google forms

this has been requested a decent amount, and i decided it's about time i should have made this.. here's how to use HTML with a google form, as seen on the register page of the s/i webring! (pictured below)

1. make your google form

can't do this without one after all. just make your google form and put all your questions, etc. whatever in there. it'll be different for every form based on what you want to do with it, but below is the one i'll be using for this example. i highly recommend to also have it connected to a google sheets thing for the form in case you actually plan to use the information for something, keeps it neat and organized.

2. autofill the google form to get everything you'll need for the input elements and get the url of the google form so the html form works

2a. form link

you can copy the link from the paperclip icon in the top bar. don't use the shorten link option for the link to fill out the form, it won't work. then, change "viewform" in the url to "formResponse". THIS IS CASE SENSITIVE!
after doing so, your link should look something like this, except everything between "/e/" and "/formResponse" is your own form id. this, again, is the one i'm using for my example.

2b. prefilled link

the order and selections don't matter, but i personally think it's a lot more easier when you type in the type of answer wanted in any text field
once this is done, copy the link. you should get a url that matches the following format by at least like 90% or so but with what you put in:

3. clean up the prefilled link to get the ids for each field

it should look something like this once you've cleaned it up, but of course with your own ids and whatever thing you put as the answers you will only need the parts like "entry.123456789", but it's better to keep the stuff after like shown above so you know which part each id is for

4. go ahead and make your html for the form, but don't put anything in the input element name attributes yet!

there are a few things required for this to work, but everything you need to know is below. follow along as needed! feel free to style everything with css any time though

4a. the form element itself

this is where you'll put all the stuff to be filled out inside. there's a bit to do for it though in order for everything to work. in the element, set the action attribute to be the url to the link from step 2a. it should look something like this!

4b.

make sure the input elements in the html match the types of responses you selected when making the google form (ex. if it's multiple choice, have the input type equal radio). also, make sure the value attributes for all input elements EXACTLY match what you have on the google form. once again, this is case sensitive! this is what i have for my form for this tutorial!

5. the main part, the name attribute of the input elements!

now we add the name attribute to the input elements, but we do it using the "entry.123456789" stuff from step 3. it needs to include the word "entry" with the dot after it to work.
the code for each input element (example used is text type) should look something like the following:
for multiple choice select radio inputs, checkbox inputs, or just about anything that doesn't allow typed responses, set the name attribute of all options to the same entry code like so:
radio input checkbox input

6. done!

test out your form!
as of right now, i don't think there's a way to came a custom screen for a response going through, so when a response is received, it'll redirect to the google forms screen.
you can view the form i made for the tutorial here. feel free to look at the source code for your own understanding!