"})," in our HTML."]}),` `,(0,h.jsx)(e.p,{children:"While it's always been possible to embed Google Forms into your website, we're not able to change the styling to match that of our website."}),` `,(0,h.jsx)(e.p,{children:"Before we get into the tutorial, you might be wondering why you'd want to embed a Google Form in your website when various other services exist:"}),` `,(0,h.jsxs)(e.ul,{children:[` `,(0,h.jsx)(e.li,{children:"Google Forms has Google Sheets integrations, so you can save all your form submissions on a spreadsheet. This makes it easier to analyze or share responses."}),` `,(0,h.jsx)(e.li,{children:"The biggest reason, according to me is that it's 100% free. There's no limit to the number of forms you can submit."}),` `]}),` `,(0,h.jsx)(e.p,{children:"If you do not want to do this, you can always work with Google App Scripts and Sheets."}),` `,(0,h.jsx)(r,{title:"This guide may look complex ...",children:(0,h.jsx)(e.p,{children:"But trust me, once you do it once, it's quite simple to do, really!"})}),` `,(0,h.jsx)(e.h2,{children:"1. Create your form"}),` `,(0,h.jsxs)(e.p,{children:["Head over to ",(0,h.jsx)(e.a,{href:"https://forms.new",children:"forms.new"})," to create a new form."]}),` `,(0,h.jsx)(e.p,{children:"In this example, I'm going to create a simple contact form which has four fields:"}),` `,(0,h.jsxs)(e.ul,{children:[` `,(0,h.jsxs)(e.li,{children:[(0,h.jsx)(e.strong,{children:"Name"})," (short answer text), ",(0,h.jsx)(e.em,{children:"required"})]}),` `,(0,h.jsxs)(e.li,{children:[(0,h.jsx)(e.strong,{children:"Message"})," (long answer text), ",(0,h.jsx)(e.em,{children:"required"})]}),` `,(0,h.jsxs)(e.li,{children:[(0,h.jsx)(e.strong,{children:"Phone number"})," (number answer text)"]}),` `,(0,h.jsxs)(e.li,{children:[(0,h.jsx)(e.strong,{children:"Rating"})," (radio checkboxes, 1 to 5)"]}),` `]}),` `,(0,h.jsx)(e.p,{children:"The Google form looks like this:"}),` `,` `,(0,h.jsx)(v,{src:C,width:534,height:770}),` `,(0,h.jsxs)(e.p,{children:["At this stage, it is possible to directly embed the form in your website using an ",(0,h.jsx)(e.code,{children:"iframe"}),'. You can get the the code to do so by pressing the "',(0,h.jsx)(e.strong,{children:"Send"}),'" button:']}),` `,` `,(0,h.jsx)(v,{src:O,width:690,height:489}),` `,(0,h.jsx)(e.p,{children:"While this may be fine, it may look out of place depending on the design of your website. We can do better."}),` `,(0,h.jsx)(e.h2,{children:"2. Find the form's submission URL"}),` `,` `,(0,h.jsxs)(e.p,{children:['First, find the link to your form. Do this by clicking on the "',(0,h.jsx)(e.strong,{children:"Preview"}),'" button (',(0,h.jsx)($.AiOutlineEye,{className:"inline"}),")"]}),` `,` `,(0,h.jsx)(v,{src:P,width:336,height:91}),` `,(0,h.jsx)(e.p,{children:"In my case, the URL of the form is https://docs.google.com/forms/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/viewform."}),` `,(0,h.jsx)(e.p,{children:`To get the form's submission URL, change the "viewform" to "formResponse". So the submission URL for this example is`}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-bash","data-language":"bash",children:`https://docs.google.com/forms/u/0/d/e/1FAIpQLSdQpUznw-tN64bOSBZejxeoyNTiqeofS_Oh6NZjmVCGqXixAA/formResponse `})}),` `,(0,h.jsx)(e.h2,{children:"3. Create the HTML form"}),` `,(0,h.jsx)(e.p,{children:'Create a form with the submission URL we found above, and with the method "POST":'}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`

`})}),` `,(0,h.jsx)(e.p,{children:"Let's add the four fields now:"}),` `,(0,h.jsx)(e.h3,{children:"Name field (text input)"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Name `})}),` `,(0,h.jsx)(e.h3,{children:"Message field (textarea)"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Message `})}),` `,(0,h.jsx)(e.h3,{children:"Phone number (number input)"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Phone number `})}),` `,(0,h.jsx)(e.h3,{children:"Rating (checkbox input)"}),` `,(0,h.jsx)(e.p,{children:"Note that this one is slightly different."}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`

Rating

Worst (1)

Best (5)

`})}),` `,(0,h.jsx)(e.p,{children:"There are five options in the rating (1 being the worst, 5 being the best). Five different radio inputs and labels are required."}),` `,(0,h.jsx)(e.h3,{children:"Submit button"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:` `})}),` `,(0,h.jsx)(e.p,{children:"Now put all these inside the form."}),` `,(0,h.jsxs)("details",{children:[(0,h.jsx)("summary",{children:"Click here to see the full form."}),(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:` `})}),(0,h.jsx)(e.p,{children:"I'm using sections to make it easier to understand."})]}),` `,(0,h.jsxs)(e.p,{children:["But we can't submit the form just yet. For each input or textarea, we need to find the form's ",(0,h.jsx)(e.code,{children:"name"})," property."]}),` `,(0,h.jsx)(e.h2,{children:"4. Finding each input's name"}),` `,(0,h.jsxs)(e.p,{children:["Those of you who have worked with forms before may think that you can just inspect the HTML form and find the ",(0,h.jsx)(e.code,{children:"name"})," property for each input."]}),` `,(0,h.jsx)(e.p,{children:"You actually can't. This used to be possible, but it isn't anymore."}),` `,(0,h.jsxs)(e.p,{children:["Open the form again, the view the page's source (",(0,h.jsx)(e.code,{children:"cmd-alt-U"})," on Mac). Press ",(0,h.jsx)(e.code,{children:"cmd-F"})," and search for the text ",(0,h.jsx)(e.code,{children:"FB_PUBLIC_LOAD_DATA_"}),"."]}),` `,(0,h.jsx)(e.p,{children:"You will see something like this:"}),` `,` `,(0,h.jsx)(v,{src:U,width:718,height:522}),` `,(0,h.jsx)(e.p,{children:"The first part is important:"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-js","data-language":"js",children:`var FB_PUBLIC_LOAD_DATA_ = [null,[null,[[822815793,"Name",null,0,[[1703190952,null,1] ] ] ,[702392112,"Message",null,1,[[246314205,null,1] ] ] ,[873269195,"Phone number",null,0,[[1350082266,null,0,null,[[1,9,[""] ] ] ] ] ] ,[731731242,"Rating",null,5,[[1093513613,[["1"] ,["2"] ,["3"] ,["4"] ,["5"] ] ,0,["Worst","Best"] ] ] ] ] ... `})}),` `,(0,h.jsx)(e.p,{children:"Yes, I know this is confusing and intimidating, but you'll soon see its use."}),` `,(0,h.jsx)(e.p,{children:`I'm going to put it here again, but with only the useful information. I'm going to refer to these as the "Entry IDs":`}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-js","data-language":"js",children:`// all Entry IDs "Name" 1703190952 "Message" 246314205 "Phone number" 1350082266 "Rating" 1093513613 "1" "2" "3" "4" "5" `})}),` `,(0,h.jsxs)(e.p,{children:["What have I done here? Just take the string, and keep the 10 digit number found ",(0,h.jsx)(e.strong,{children:(0,h.jsx)(e.em,{children:"after"})})," it."]}),` `,(0,h.jsxs)(r,{title:"How exactly do you get the Entry IDs?",children:[(0,h.jsx)(e.p,{children:"Let's the take the first line as an example:"}),(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-js","data-language":"js",children:`[null,[null,[[822815793,"Name",null,0,[[1703190952,null,1] `})}),(0,h.jsxs)(e.ol,{children:[` `,(0,h.jsxs)(e.li,{children:["Take the ",(0,h.jsx)(e.strong,{children:"string"}),": ",(0,h.jsx)(e.code,{children:"Name"})]}),` `,(0,h.jsxs)(e.li,{children:["Take the ",(0,h.jsx)(e.strong,{children:"number"})," found ",(0,h.jsx)(e.em,{children:"after"})," the string: ",(0,h.jsx)(e.code,{children:"1703190952"})]}),` `]}),(0,h.jsx)(e.p,{children:"So we get this Entry ID:"}),(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-js","data-language":"js",children:`"Name" 1703190952 `})})]}),` `,(0,h.jsxs)(e.p,{children:["Can you see the pattern? ",(0,h.jsx)(e.strong,{children:"All strings are the field names on Google Forms"}),'. Note that the 5 strings under "Ratings" are the checkbox options (1 through 5).']}),` `,(0,h.jsx)(e.p,{children:"Now onto actually getting the input's name."}),` `,(0,h.jsxs)(e.p,{children:["Let's take the first field, ",(0,h.jsx)(e.strong,{children:"Name"})," for this example:"]}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:` Name `})}),` `,(0,h.jsx)(e.p,{children:"and the corresponding Entry ID:"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-js","data-language":"js",children:`// Entry ID for the name field "Name" 1703190952 `})}),` `,(0,h.jsxs)(e.p,{children:["The get the input's ",(0,h.jsx)(e.code,{children:"name"})," property, add ",(0,h.jsx)(e.code,{children:"entry."})," at the start of the Entry ID, like this: ",(0,h.jsx)(e.code,{children:"entry.1703190952"}),"."]}),` `,(0,h.jsx)(e.p,{children:"So the label and input looks like this now:"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Name `})}),` `,(0,h.jsxs)(e.p,{children:["Let's do the same for the Message field. The Entry ID is ",(0,h.jsx)(e.code,{children:"246314205"}),", so the label and textarea should look like this:"]}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Message `})}),` `,(0,h.jsx)(e.p,{children:"You can do the same with the phone number to get"}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`Phone number `})}),` `,(0,h.jsxs)(e.p,{children:["Last, we have the radio checkbox for Rating. The Entry ID is ",(0,h.jsx)(e.code,{children:"1093513613"}),", so we have to add ",(0,h.jsx)(e.code,{children:'name="entry.1093513613'})," to all the inputs:"]}),` `,(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:`

Rating

Worst (1)

... `})}),` `,(0,h.jsxs)("details",{children:[(0,h.jsx)("summary",{children:"Putting the completed form together, we get this (click to reveal)"}),(0,h.jsx)(e.pre,{children:(0,h.jsx)(e.code,{className:"language-html","data-language":"html",children:` `})})]}),` `,(0,h.jsx)(e.h2,{children:"5. Testing it out"}),` `,(0,h.jsx)(e.p,{children:"Let's try it out:"}),` `,` `,(0,h.jsx)(v,{src:G,width:699,height:670}),` `,(0,h.jsxs)(e.p,{children:["Hit ",(0,h.jsx)(e.strong,{children:"Submit"}),"."]}),` `,(0,h.jsxs)(e.p,{children:["Now go to the ",(0,h.jsx)(e.strong,{children:"Responses"})," section in your Google Form:"]}),` `,` `,(0,h.jsx)(v,{src:W,width:730,height:767}),` `,(0,h.jsx)(e.p,{children:"The response has been recorded! As you can see, they also have a pretty chart for the checkbox response!"}),` `,(0,h.jsx)(e.h2,{children:"Examples"}),` `,(0,h.jsxs)(e.p,{children:["I'm using this on two of my sites: ",(0,h.jsx)(e.a,{href:"https://nine-nine.now.sh/suggest",children:"nine-nine.now.sh"})," and ",(0,h.jsx)(e.a,{href:"http://nsr.now.sh/add",children:"nsr.now.sh"}),"."]})]})}}var v1=r1;function E(c,t){throw new Error("Expected "+(t?"component":"object")+" `"+c+"` to be defined: you likely forgot to import, pass, or provide it.")}return n1;})(); ;return Component;

HTML

Natively Embed Google Forms In Your Website