[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"blog-how-qr-codes-can-bring-more-traffic-to-web-forms":3},{"blogData":4,"relatedArticles":29},{"id":5,"title":6,"author":7,"authorImage":8,"authorProfile":9,"coverImg":10,"coverImgAlt":11,"createdAt":12,"description":13,"featured":14,"jsonld":15,"keywords":16,"metaDescription":17,"metaImage":18,"metaTitle":19,"publishedAt":20,"slug":21,"updatedAt":22,"__hash__":23,"body":24,"coverImgWidth":25,"coverImgHeight":26,"readingStats":27},"blog\u002Fblog\u002Fhow-qr-codes-can-bring-more-traffic-to-web-forms.md","How QR Codes Can Bring More Traffic To Your Online Forms & Surveys","Harish Kumar",null,"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_qr_codes_improve_web_form_traffic_ff6a309c07.png","an illustration of how qr codes improve web form traffic","2025-01-29T04:41:35.015Z","Learn how QR codes can boost your data collection by driving more traffic to your online forms and surveys.",false,[],"qr code generator,\nqr code scanner,\nweb forms,\nonline form,\nqr codes for online forms,","Let's explore how QR codes can be a game changer in helping you collect more data by increasing traffic to your online forms and surveys.",[],"How QR Codes Bring More Responses To Your Web Forms","2025-01-29T07:46:16.600Z","how-qr-codes-can-bring-more-traffic-to-web-forms","2025-01-30T04:55:41.727Z","74CqYX-HIGBt-bAdTQ7xMDbh9DBUfIMndgp0Zdk6jZk","\n![an illustration of how qr codes improve web form traffic](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_qr_codes_improve_web_form_traffic_ff6a309c07.png)\n\n>QR Codes can bring more entries to your web forms – this isn’t a statement anymore but a fact.\n\nThe application of QR codes has been seen in a variety of fields and industries. One of which is the business and corporate sector where **QR codes** are used to make customer contact easier. \n\nMeaning, that companies can use the technology to quickly complete surveys and know about what users want. As a consequence, they can market their products better, improve the quality of their offerings, and do much more.\n\nIn this post, let’s explore the role of QR codes in bringing more entries to your **[web forms](\u002Fblog\u002Fweb-forms-how-and-where-to-use-them-for-your-business\u002F)** so that you can connect better with your audience and make more sales.\n\n## What is a QR Code?\n**In 1998**, Quick Response (QR) codes were first introduced by a Japanese automobile company called **[Denso Waves](https:\u002F\u002Fdenso-x.com\u002Fstories\u002Fdenso-waves-revolutionary-invention-the-qr-code\u002F)** to mark each of their SKUs. Fundamentally, these are square boxes filled with a series of black-and-white pixels. With unique patterns encoded with strings of data. \n\nSo, when scanned, a QR code can open a URL link to the user’s device, which can lead them to a web form for quick entry of valuable data.\n\n### How does it Work?\nAfter learning a bit of background about QR codes, now is the time to learn the procedure to make and utilize QR codes to generate more responses from people.\n\n**1.) Find a QR Generator**\nThe first step is to find a solid QR code generator that can get the job done quickly. There are many online options available in this space, below are the few really good ones.\n\ni) **Editpad**: \nEditpad is primarily a note-taking application but offers a QR code generate which can generate QR Codes for all URLs.\n![a screenshot of qr code generator](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F6_ac3756ea95.png)\n**Source:** **\u003Ca href=\"https:\u002F\u002Fwww.editpad.org\u002Ftool\u002Fqr-code-generator\">Editpad.org's QR Code Generator\u003C\u002Fa>**\n\nii) **Formester**: \nFormester offers a built-in **[QR code generator](\u002Ffeatures\u002Fqr-code-generator\u002F)** to quickly generate QR codes for your Formester forms and Surveys.\n![a screenshot of formester's qr code generator](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F10_a7f2803193.png)\n\n**2.) Input your Content for Display**\nOnce on the mentioned free tool’s interface, enter the link, image, or any other content you want opened with the QR code. \n\nFor the sake of our demonstration, we will enter one web form’s URL that we generated with Formester. In this, we wanted users to answer a simple **Multiple-Choice Question (MCQ)** and note their entries to our database.\n![a screenshot of qr code generator](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F7_d00e89bea4.png)\n\n**Web form created from:** **\u003Ca href=\"https:\u002F\u002Fformester.com\u002F\">Formester\u003C\u002Fa>**\n\nUse the download button to save this QR code as a **PNG file** to your device; this will be helpful for the completion of the final step.\n\n**3.) Scan the Code to Ensure Success**\nFinally, we will proceed to scan this code with one of the free online tools we found. The QR code scanner by Imagetotext. info is a solid option here as it works without any jitters or lags and doesn’t have any **annoying pop-ups** like the other sites.\n\nUploading the generated QR code from your device’s local storage to the tool will result in the following window:\n![a screenshot of qr code scanner](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F8_e6331f8283.png)\n**Source:** **\u003Ca href=\"https:\u002F\u002Fwww.imagetotext.info\u002Fqr-code-scanner\">Imagetotext.info\u003C\u002Fa>**\n\nAs you can see, the scanner has accurately gathered the link which was given in the QR code. Clicking the URL will take the user to the form we created, allowing us to learn a bit more about their thoughts.\n![a screenshot of formester's online form](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F9_de48a4fc16.png)\n\n### Why QR Codes for Web Entries?\nSo far, we’ve shown the entire process of creating QR codes and scanning them to get web entries. \nBut, the real question still begs: ‘Why use QR codes for filling up web forms?’ Let’s answer this now, shall we?\n\n**1.) It is Convenient for Customers - Facilitates Faster Responses**\nCustomers don’t want to fill out paper forms anymore as they are boring and inconvenient. Nor do they want to manually type in a URL to fill a web form.\n\nWith QR scanners, web forms can quickly open up on all types of user devices without any manual interference required.\nHence, allowing you to easily **collect feedback**, and ask suggestions or other questions from the users regarding your brand.\n\n**2.) Provides Trackable Data**\nSince QR codes shift your customer base from offline to online mode, they provide you an opportunity to get trackable data. When a person scans a QR code, you get instant access to their location, the device they used, the time of scanning, and more.\n\nAll of this newly-gained information can be leveraged for creating targeted advertisements to better cater to the needs of the customers, hence, generating **more business** for the company.\n\n**3.) Delivers Reliable Functionality**\nIt is quite rare that a QR scanner ever fails to scan properly. This is because the technology associated with it is far more developed than its predecessor, barcodes. So, due to its high reliability, QR codes are often used to get entries into web forms.\n\n**4.) Encourages Immediate Action**\nAccording to **[ClearLine](https:\u002F\u002Fclearlineapps.com\u002Fblog\u002Fqr-code-statistics-for-2024-whats-driving-this-essential-technology\u002F)**, QR code scans have increased by 433% over the past two years. This is a testimony to their reliability and accessibility as QR codes encourage users to take immediate action to answer your **preferred call**. \n\nPeople are more likely to fill out a web form if it easily opens up on their smartphone, rather than remembering the link and doing it later. Using QR codes for web entries ensures that you get what you want without receiving any delays or resistance from the customers.\n\n**5.) Sets a Good Image to the Public (Looks Fancy!)**\nQR codes aren’t just good for getting quick responses from customers and maintaining healthy relationships with them. They are now a trend that businesses follow to keep their image in the public as more **tech-savvy and modernized**.\n\nWe know this sounds crazy, but implementation of a QR code to scan a Wi-Fi, or a menu at a restaurant can add to the overall customer experience and satisfaction.\n\n### Final Words\nQR codes are very effective for enhancing web form entries by simplifying the customer feedback process. These codes have gained traction across various industries due to their convenience, reliable functionality, and ability to elevate a business's public image. \n\nBy utilizing QR codes, companies can gather valuable insights quickly, implement better marketing strategies, and **improve customer engagement**.\n\n\n",1214,630,{"text":28},"6 min read",[30,49,68,176],{"title":31,"author":7,"authorImage":8,"authorProfile":9,"coverImg":32,"coverImgAlt":33,"createdAt":34,"description":35,"featured":14,"jsonld":36,"keywords":37,"metaDescription":38,"metaImage":39,"metaTitle":40,"publishedAt":41,"slug":42,"updatedAt":43,"__hash__":44,"body":45,"id":46,"coverImgWidth":25,"coverImgHeight":26,"readingStats":47},"How to Make a Feedback Form in HTML (with Code, CSS, and a Backend)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_to_make_feedback_form_in_html_c6203dc935.png","an illustration of how to make feedback form in html","2024-06-27T06:19:40.031Z","Learn how to create a feedback form in HTML with easy steps. Set up an HTML document, add form fields, style with CSS, and add JavaScript for validation. Test your form and start collecting feedback.",[],"feedback forms, fillable freedback form, how to make feedback form in html, style feedback form with css, feedback form html code","Build a working feedback form in HTML with copy-paste code, CSS styling, JavaScript validation, accessibility, and a backend that stores submissions without a server.",[],"How to Make a Feedback Form in HTML (Code, CSS, Validation, Backend)","2026-05-17T04:46:01.940Z","how-to-make-feedback-form-in-html","2026-05-17T04:46:01.948Z","wyyctYTKwdEs6QGo1-xhuZdxYoLFow0lRYEcN7glo1g","![an illustration of how to make feedback form in html](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_to_make_feedback_form_in_html_c6203dc935.png)\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-body a { text-decoration: none !important; }\n.fmstr-cmp-ffh-body {\n--c-bg-card: #ffffff;\n--c-bg-soft: #f9fafb;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-code-bg: #0f172a; --c-code-fg: #e2e8f0;\n--c-code-keyword: #a78bfa; --c-code-attr: #67e8f9; --c-code-string: #fcd34d; --c-code-comment: #64748b;\n--c-warn-bg: #fef3c7; --c-warn-fg: #92400e; --c-warn-edge: #fde68a;\n\nbackground: transparent; padding: 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body *, .fmstr-cmp-ffh-body *::before, .fmstr-cmp-ffh-body *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-body__container { max-width: 820px; margin: 0 auto; }\n\n.fmstr-cmp-ffh-body__intro p { font-size: 17px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 16px; }\n.fmstr-cmp-ffh-body__intro a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-ffh-body__intro a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-body__intro code { background: var(--c-tint); color: var(--c-violet-600); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; border: 1px solid var(--c-edge); }\n\n.fmstr-cmp-ffh-body__h2 {\nfont-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em;\nmargin: 40px 0 16px; color: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body__h3 {\nfont-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;\nmargin: 28px 0 12px; color: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body p { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 14px; }\n.fmstr-cmp-ffh-body p strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-ffh-body a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-body ul, .fmstr-cmp-ffh-body ol { margin: 0 0 16px; padding-left: 22px; }\n.fmstr-cmp-ffh-body li { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 6px 0; }\n.fmstr-cmp-ffh-body li strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body code { background: var(--c-tint); color: var(--c-violet-600); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; border: 1px solid var(--c-edge); }\n\n.fmstr-cmp-ffh-body__code {\nbackground: var(--c-code-bg); color: var(--c-code-fg);\nborder-radius: 12px; padding: 18px 20px; margin: 8px 0 18px;\noverflow-x: auto;\nfont-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-body__code pre { margin: 0; }\n.fmstr-cmp-ffh-body__code code {\nbackground: transparent !important; color: inherit !important; padding: 0; border: 0;\nfont-family: inherit !important; font-size: inherit;\n}\n.fmstr-cmp-ffh-body__code .kw { color: var(--c-code-keyword); }\n.fmstr-cmp-ffh-body__code .at { color: var(--c-code-attr); }\n.fmstr-cmp-ffh-body__code .st { color: var(--c-code-string); }\n.fmstr-cmp-ffh-body__code .cm { color: var(--c-code-comment); font-style: italic; }\n.fmstr-cmp-ffh-body__code .lang { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); margin: 0 0 12px; }\n\n.fmstr-cmp-ffh-body__note {\nmargin: 14px 0 18px; padding: 14px 18px;\nbackground: var(--c-bg-soft); border-left: 3px solid var(--c-violet-500);\nborder-radius: 8px; font-size: 15.5px; color: var(--c-fg-2); line-height: 1.6;\n}\n.fmstr-cmp-ffh-body__note strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body__note--warn { background: var(--c-warn-bg); border-left-color: var(--c-warn-fg); }\n.fmstr-cmp-ffh-body__note--warn strong { color: var(--c-warn-fg); }\n\n.fmstr-cmp-ffh-body__variants {\ndisplay: grid; grid-template-columns: 1fr; gap: 14px; margin: 12px 0 24px;\n}\n.fmstr-cmp-ffh-body__variant {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 14px;\npadding: 18px 22px;\n}\n.fmstr-cmp-ffh-body__variant h4 {\nfont-size: 16px; font-weight: 700; color: var(--c-fg-1);\nmargin: 0 0 8px; line-height: 1.35;\n}\n.fmstr-cmp-ffh-body__variant p { font-size: 15px; line-height: 1.65; color: var(--c-fg-2); margin: 0; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-body { padding: 16px; }\n.fmstr-cmp-ffh-body__intro p, .fmstr-cmp-ffh-body p, .fmstr-cmp-ffh-body li { font-size: 15.5px; }\n.fmstr-cmp-ffh-body__h2 { font-size: 24px; margin-top: 32px; }\n.fmstr-cmp-ffh-body__h3 { font-size: 18.5px; }\n.fmstr-cmp-ffh-body__code { padding: 14px 16px; font-size: 12.5px; border-radius: 10px; }\n.fmstr-cmp-ffh-body__variant { padding: 16px 18px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-body\" aria-label=\"How to make a feedback form in HTML\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__container\">\n\n\u003Cdiv class=\"fmstr-cmp-ffh-body__intro\">\n\u003Cp>A feedback form in HTML is twenty lines of markup, a bit of CSS, and one decision that trips up almost everyone: what happens after the user clicks Submit?\u003C\u002Fp>\n\u003Cp>This guide ships the full pattern. You'll get a working \u003Ccode><form>\u003C\u002Fcode> with name, email, and message fields, CSS that styles it without a framework, JavaScript validation that doesn't break keyboard users, and three honest options for the backend, including one that needs zero server code. Paste the snippets in order, swap the action URL, and you have a live feedback form on your site in about ten minutes.\u003C\u002Fp>\n\u003Cp>If you want to skip the code entirely, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F\">Formester's drag-and-drop builder\u003C\u002Fa> ships a feedback form you can \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fembed-forms\u002F\">embed in any HTML page\u003C\u002Fa> with one snippet. Keep reading for the hand-coded path.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">What a feedback form in HTML actually needs\u003C\u002Fh2>\n\u003Cp>Four pieces, in order:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>A \u003Ccode><form>\u003C\u002Fcode> element\u003C\u002Fstrong> with the right \u003Ccode>action\u003C\u002Fcode> and \u003Ccode>method\u003C\u002Fcode> so the browser knows where to send data.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Labeled inputs\u003C\u002Fstrong> for the fields you care about (name, email, rating, message), with \u003Ccode>name\u003C\u002Fcode> attributes so the server can read them.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Validation\u003C\u002Fstrong> on the client (for user experience) and on the server (for trust).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>A backend\u003C\u002Fstrong> that receives the submission, stores it, and ideally notifies you. This is the part most tutorials skip; it's the part you need most.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Below, each piece is a separate step with a copy-paste block. The last step is a single complete file you can save as \u003Ccode>feedback.html\u003C\u002Fcode> and open in a browser.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 1: Set up the HTML document\u003C\u002Fh2>\n\u003Cp>Save this as \u003Ccode>feedback.html\u003C\u002Fcode>. It's the shell every form goes inside.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">HTML\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Feedback Form<\u002Ftitle>\n<\u002Fhead>\n<body>\n  <h1>Tell us what you think<\u002Fh1>\n  <!-- form goes here -->\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Two small things that matter later: \u003Ccode>lang=\"en\"\u003C\u002Fcode> helps screen readers pick the right voice, and the viewport meta tag makes the form usable on phones.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 2: Add the form fields\u003C\u002Fh2>\n\u003Cp>Paste this inside \u003Ccode><body>\u003C\u002Fcode>, where the comment says \"form goes here\":\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">HTML\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><form id=\"feedback-form\" action=\"\u002Fsubmit-feedback\" method=\"post\" novalidate>\n  <div class=\"field\">\n    <label for=\"name\">Name<\u002Flabel>\n    <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" required>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"email\">Email<\u002Flabel>\n    <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" required>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"rating\">How was your experience?<\u002Flabel>\n    <select id=\"rating\" name=\"rating\" required>\n      <option value=\"\">Pick one<\u002Foption>\n      <option value=\"5\">Loved it<\u002Foption>\n      <option value=\"4\">Good<\u002Foption>\n      <option value=\"3\">Okay<\u002Foption>\n      <option value=\"2\">Not great<\u002Foption>\n      <option value=\"1\">Bad<\u002Foption>\n    <\u002Fselect>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"message\">Your feedback<\u002Flabel>\n    <textarea id=\"message\" name=\"message\" rows=\"5\" required><\u002Ftextarea>\n  <\u002Fdiv>\n\n  <button type=\"submit\">Send feedback<\u002Fbutton>\n<\u002Fform>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Three details that beginners miss:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Every input has a matching \u003Ccode><label for>\u003C\u002Fcode>.\u003C\u002Fstrong> Click the label, the input focuses. Screen readers read the label out loud. Skip this and the form fails accessibility and loses keyboard users.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>name\u003C\u002Fcode> attributes are not cosmetic.\u003C\u002Fstrong> The server reads submissions by \u003Ccode>name\u003C\u002Fcode>, so \u003Ccode>name=\"email\"\u003C\u002Fcode> is what makes the email value reach your inbox. Missing \u003Ccode>name\u003C\u002Fcode> = silent data loss.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>autocomplete=\"name\"\u003C\u002Fcode> and \u003Ccode>autocomplete=\"email\"\u003C\u002Fcode>\u003C\u002Fstrong> let browsers pre-fill from saved info. One line, measurable bump in completion.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__note\">\u003Cstrong>Note:\u003C\u002Fstrong> \u003Ccode>novalidate\u003C\u002Fcode> on the form tag turns off the browser's default error bubbles so you can show your own (covered in Step 4). Drop it if you want native validation only.\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 3: Style it with CSS\u003C\u002Fh2>\n\u003Cp>Paste this inside \u003Ccode><head>\u003C\u002Fcode> between \u003Ccode><title>\u003C\u002Fcode> and the closing \u003Ccode><\u002Fhead>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">CSS\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><style>\n  body {\n    font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n    background: #f7f7f9;\n    margin: 0;\n    padding: 40px 16px;\n    color: #1a1a1a;\n  }\n  h1 { font-size: 1.5rem; margin: 0 0 24px; text-align: center; }\n  form {\n    max-width: 480px;\n    margin: 0 auto;\n    background: #fff;\n    padding: 24px;\n    border-radius: 12px;\n    box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n  }\n  .field { margin-bottom: 16px; }\n  label {\n    display: block;\n    font-weight: 600;\n    font-size: 0.9rem;\n    margin-bottom: 6px;\n  }\n  input, select, textarea {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 10px 12px;\n    font: inherit;\n    border: 1px solid #d0d0d6;\n    border-radius: 8px;\n    background: #fff;\n  }\n  input:focus, select:focus, textarea:focus {\n    outline: 2px solid #5b6cff;\n    outline-offset: 1px;\n    border-color: #5b6cff;\n  }\n  input[aria-invalid=\"true\"],\n  select[aria-invalid=\"true\"],\n  textarea[aria-invalid=\"true\"] {\n    border-color: #d33;\n  }\n  .error {\n    display: block;\n    color: #d33;\n    font-size: 0.8rem;\n    margin-top: 4px;\n    min-height: 1em;\n  }\n  button {\n    width: 100%;\n    padding: 12px;\n    background: #5b6cff;\n    color: #fff;\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n  }\n  button:hover { background: #4a59e0; }\n<\u002Fstyle>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Two things this stylesheet does that the typical tutorial skips:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Keeps the focus outline visible. Default focus styles are ugly, so most tutorials remove them. Removing them breaks keyboard users. Replace, don't remove.\u003C\u002Fli>\n\u003Cli>Uses \u003Ccode>system-ui\u003C\u002Fcode> for fonts, so the form inherits the host site's native typography on macOS, Windows, iOS, and Android without shipping a font file.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 4: Add accessible JavaScript validation\u003C\u002Fh2>\n\u003Cp>The alert-on-submit pattern works but it's the worst possible UX. This version shows inline errors, marks invalid fields for screen readers with \u003Ccode>aria-invalid\u003C\u002Fcode>, and keeps focus where the user can fix the problem.\u003C\u002Fp>\n\u003Cp>Paste this right before \u003Ccode><\u002Fbody>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">JavaScript\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><script>\n  const form = document.getElementById('feedback-form');\n\n  function setError(input, message) {\n    input.setAttribute('aria-invalid', 'true');\n    let errorEl = input.parentElement.querySelector('.error');\n    if (!errorEl) {\n      errorEl = document.createElement('span');\n      errorEl.className = 'error';\n      errorEl.id = input.id + '-error';\n      input.parentElement.appendChild(errorEl);\n    }\n    errorEl.textContent = message;\n    input.setAttribute('aria-describedby', errorEl.id);\n  }\n\n  function clearError(input) {\n    input.setAttribute('aria-invalid', 'false');\n    const errorEl = input.parentElement.querySelector('.error');\n    if (errorEl) errorEl.textContent = '';\n  }\n\n  form.addEventListener('submit', function (event) {\n    let firstInvalid = null;\n\n    [...form.querySelectorAll('input, select, textarea')].forEach((input) => {\n      clearError(input);\n      if (!input.value.trim()) {\n        setError(input, 'This field is required.');\n        firstInvalid = firstInvalid || input;\n      } else if (input.type === 'email' && !\u002F^\\S+@\\S+\\.\\S+$\u002F.test(input.value)) {\n        setError(input, 'Enter a valid email address.');\n        firstInvalid = firstInvalid || input;\n      }\n    });\n\n    if (firstInvalid) {\n      event.preventDefault();\n      firstInvalid.focus();\n    }\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>What this does that the original snippet missed:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Sets \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> and \u003Ccode>aria-describedby\u003C\u002Fcode> so screen readers announce the error.\u003C\u002Fli>\n\u003Cli>Inserts the error message next to the field, not in a modal.\u003C\u002Fli>\n\u003Cli>Focuses the first invalid field on failed submit, so a keyboard user lands exactly where they need to fix.\u003C\u002Fli>\n\u003Cli>Doesn't trust the email regex to be perfect (it isn't); always re-validate on the server.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__note\">\u003Cstrong>Rule of thumb:\u003C\u002Fstrong> client-side validation is for UX. Server-side validation is for trust. Do both.\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 5: Test the form locally\u003C\u002Fh2>\n\u003Cp>Open \u003Ccode>feedback.html\u003C\u002Fcode> in a browser. Run this checklist:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Tab through every field with the keyboard. Focus should be visible at every stop.\u003C\u002Fli>\n\u003Cli>Try to submit empty. You should see inline error messages, focus should jump to the first empty field.\u003C\u002Fli>\n\u003Cli>Type a malformed email. You should see \"Enter a valid email address.\"\u003C\u002Fli>\n\u003Cli>Open the browser's network tab, submit a valid form. You should see a POST to \u003Ccode>\u002Fsubmit-feedback\u003C\u002Fcode>. That request will currently 404 because you don't have a backend yet. Step 6 fixes that.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you want to skip the backend setup entirely, the next step shows the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester HTML form backend\u003C\u002Fa> path: change one \u003Ccode>action\u003C\u002Fcode> attribute and your form starts collecting submissions.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\" id=\"step-6-backend\">Step 6: Wire up a backend that stores submissions\u003C\u002Fh2>\n\u003Cp>A feedback form without a backend is a dead form. The browser POSTs the data, the server returns 404, the user sees an error page, the feedback is gone. You have three real options, compared side-by-side below.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-back a { text-decoration: none !important; }\n.fmstr-cmp-ffh-back {\n--fmstr-cmp-ffh-back-bg-card: #ffffff;\n--fmstr-cmp-ffh-back-bg-code: #0f172a;\n--fmstr-cmp-ffh-back-fg-1: #101828;\n--fmstr-cmp-ffh-back-fg-2: #475467;\n--fmstr-cmp-ffh-back-fg-3: #697586;\n--fmstr-cmp-ffh-back-violet-500: #7f56d9;\n--fmstr-cmp-ffh-back-violet-600: #6941c6;\n--fmstr-cmp-ffh-back-tint: #f7f3ff;\n--fmstr-cmp-ffh-back-edge: #e4d7ff;\n--fmstr-cmp-ffh-back-border: #eaecf0;\n--fmstr-cmp-ffh-back-red: #dc2626;\n--fmstr-cmp-ffh-back-red-bg: #fef2f2;\n--fmstr-cmp-ffh-back-red-edge: #fecaca;\n--fmstr-cmp-ffh-back-amber: #d97706;\n--fmstr-cmp-ffh-back-amber-bg: #fffbeb;\n--fmstr-cmp-ffh-back-amber-edge: #fde68a;\n--fmstr-cmp-ffh-back-green: #15803d;\n--fmstr-cmp-ffh-back-green-bg: #f0fdf4;\n--fmstr-cmp-ffh-back-green-edge: #bbf7d0;\n--fmstr-cmp-ffh-back-code-fg: #e2e8f0;\n--fmstr-cmp-ffh-back-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-back-fg-1);\n}\n.fmstr-cmp-ffh-back *, .fmstr-cmp-ffh-back *::before, .fmstr-cmp-ffh-back *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-back__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-back__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-back__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-back-tint); color: var(--fmstr-cmp-ffh-back-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-back-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-back__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-back__intro { color: var(--fmstr-cmp-ffh-back-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-back__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }\n.fmstr-cmp-ffh-back__card {\nbackground: var(--fmstr-cmp-ffh-back-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-back-border);\nborder-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px;\nbox-shadow: var(--fmstr-cmp-ffh-back-shadow); position: relative;\n}\n.fmstr-cmp-ffh-back__card--red { border-top: 4px solid var(--fmstr-cmp-ffh-back-red); }\n.fmstr-cmp-ffh-back__card--amber { border-top: 4px solid var(--fmstr-cmp-ffh-back-amber); }\n.fmstr-cmp-ffh-back__card--green { border-top: 4px solid var(--fmstr-cmp-ffh-back-violet-500); background: linear-gradient(180deg, #fdfbff 0%, #fff 60%); }\n\n.fmstr-cmp-ffh-back__verdict {\ndisplay: inline-flex; align-items: center; gap: 8px; align-self: flex-start;\npadding: 5px 12px; border-radius: 9999px; font-size: 11.5px; font-weight: 700;\nletter-spacing: .04em; text-transform: uppercase;\n}\n.fmstr-cmp-ffh-back__verdict--red { background: var(--fmstr-cmp-ffh-back-red-bg); color: var(--fmstr-cmp-ffh-back-red); border: 1px solid var(--fmstr-cmp-ffh-back-red-edge); }\n.fmstr-cmp-ffh-back__verdict--amber { background: var(--fmstr-cmp-ffh-back-amber-bg); color: var(--fmstr-cmp-ffh-back-amber); border: 1px solid var(--fmstr-cmp-ffh-back-amber-edge); }\n.fmstr-cmp-ffh-back__verdict--green { background: var(--fmstr-cmp-ffh-back-tint); color: var(--fmstr-cmp-ffh-back-violet-600); border: 1px solid var(--fmstr-cmp-ffh-back-edge); }\n\n.fmstr-cmp-ffh-back__name { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--fmstr-cmp-ffh-back-fg-1); }\n.fmstr-cmp-ffh-back__sub { font-size: 13.5px; color: var(--fmstr-cmp-ffh-back-fg-3); margin: -8px 0 0; line-height: 1.5; }\n\n.fmstr-cmp-ffh-back__code {\nbackground: var(--fmstr-cmp-ffh-back-bg-code);\nborder-radius: 10px; padding: 14px 16px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 12px; line-height: 1.55;\ncolor: var(--fmstr-cmp-ffh-back-code-fg);\noverflow-x: auto; margin: 0; white-space: pre;\n}\n.fmstr-cmp-ffh-back__code code { font-family: inherit; }\n.fmstr-cmp-ffh-back__code .t { color: #f472b6; }\n.fmstr-cmp-ffh-back__code .a { color: #a5b4fc; }\n.fmstr-cmp-ffh-back__code .s { color: #86efac; }\n.fmstr-cmp-ffh-back__code .c { color: #64748b; font-style: italic; }\n\n.fmstr-cmp-ffh-back__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }\n.fmstr-cmp-ffh-back__row { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--fmstr-cmp-ffh-back-fg-2); }\n.fmstr-cmp-ffh-back__row::before {\ncontent: \"\"; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;\nbackground-repeat: no-repeat; background-position: center;\n}\n.fmstr-cmp-ffh-back__row--bad::before { background-color: var(--fmstr-cmp-ffh-back-red-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2 L8 8 M8 2 L2 8'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row--meh::before { background-color: var(--fmstr-cmp-ffh-back-amber-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5 L8 5'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row--good::before { background-color: var(--fmstr-cmp-ffh-back-green-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5 L4 7 L8 3'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row strong { color: var(--fmstr-cmp-ffh-back-fg-1); font-weight: 600; }\n\n.fmstr-cmp-ffh-back__cta {\nmargin-top: auto; padding-top: 4px;\ndisplay: inline-flex; align-items: center; gap: 8px;\ncolor: var(--fmstr-cmp-ffh-back-violet-600) !important;\nfont-weight: 600; font-size: 14.5px;\ntext-decoration: none !important;\n}\n.fmstr-cmp-ffh-back__cta:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-back { padding: 40px 16px; }\n.fmstr-cmp-ffh-back__card { padding: 22px; }\n.fmstr-cmp-ffh-back__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-back__code { font-size: 11.5px; padding: 12px 14px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-back\" aria-labelledby=\"fmstr-cmp-ffh-back-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-back__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-back__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__eyebrow\">Three honest paths\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-back__h2\" id=\"fmstr-cmp-ffh-back-h2\">What happens after the user clicks Submit\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-back__intro\">Without a backend, a feedback form is a dead form. The browser POSTs the data, the server returns 404, the user sees an error page. Here are the three real options, ranked by how much pain each one ships with.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-back__grid\">\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--red\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--red\">Don’t ship this\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 1: \u003Ccode>mailto:\u003C\u002Fcode>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">The \"no server\" hack that loses about half your submissions.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\"><!-- Opens the user's mail client -->\u003C\u002Fspan>\n\u003Cspan class=\"t\"><form\u003C\u002Fspan>\n\u003Cspan class=\"a\">action\u003C\u002Fspan>=\u003Cspan class=\"s\">\"mailto:you@example.com\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">method\u003C\u002Fspan>=\u003Cspan class=\"s\">\"post\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">enctype\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\u002Fplain\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>User-action required.\u003C\u002Fstrong> Browser opens a draft email. They have to click Send manually. Half won’t.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>Breaks on mobile.\u003C\u002Fstrong> Many phones have no configured mail client.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>Spam-filter bait.\u003C\u002Fstrong> Resulting messages are unsigned and easy to flag.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--amber\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--amber\">You’ll maintain it\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 2: Your own server\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">PHP, Node, or whatever you already run. Full control, full ownership.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\">\u002F\u002F minimal Node\u002FExpress receiver\u003C\u002Fspan>\napp.\u003Cspan class=\"t\">post\u003C\u002Fspan>(\u003Cspan class=\"s\">'\u002Fsubmit-feedback'\u003C\u002Fspan>, (req, res) => {\n\u003Cspan class=\"t\">const\u003C\u002Fspan> { name, email, message } = req.body;\n\u003Cspan class=\"t\">if\u003C\u002Fspan> (!validate(email)) \u003Cspan class=\"t\">return\u003C\u002Fspan> res.\u003Cspan class=\"t\">status\u003C\u002Fspan>(400);\ndb.\u003Cspan class=\"t\">insert\u003C\u002Fspan>({ name, email, message });\nres.\u003Cspan class=\"t\">redirect\u003C\u002Fspan>(\u003Cspan class=\"s\">'\u002Fthank-you'\u003C\u002Fspan>);\n});\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--meh\">\u003Cspan>\u003Cstrong>You own the server.\u003C\u002Fstrong> Hosting, TLS, scaling, uptime monitoring are yours.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--meh\">\u003Cspan>\u003Cstrong>Spam protection is on you.\u003C\u002Fstrong> Honeypot, rate limiting, CAPTCHA, all DIY.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Maximum control.\u003C\u002Fstrong> Custom logic, database, queues, webhooks however you want.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--green\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--green\">Skip the server\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 3: Formester HTML form backend\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">One \u003Ccode>action\u003C\u002Fcode> attribute swap. No server code, no infra.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\"><!-- The only change vs. Path 2 -->\u003C\u002Fspan>\n\u003Cspan class=\"t\"><form\u003C\u002Fspan>\n\u003Cspan class=\"a\">action\u003C\u002Fspan>=\u003Cspan class=\"s\">\"https:\u002F\u002Fapp.formester.com\u002F\u003C\u002Fspan>\n\u003Cspan class=\"s\">    api\u002Fv1\u002Fforms\u002FYOUR_ID\u002Fsubmissions\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">method\u003C\u002Fspan>=\u003Cspan class=\"s\">\"post\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Submissions land in the dashboard.\u003C\u002Fstrong> View, filter, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fexport-form-submission-pdf\u002F\">export to PDF\u003C\u002Fa>, push to Sheets\u002FSlack\u002FHubSpot.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Spam protection built in.\u003C\u002Fstrong> Honeypot plus \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">reCAPTCHA-style checks\u003C\u002Fa> on every submission.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Free with unlimited submissions.\u003C\u002Fstrong> Email notifications, dashboard, integrations included. Used by 56,000+ teams.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ca class=\"fmstr-cmp-ffh-back__cta\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">See the HTML form backend →\u003C\u002Fa>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-code a { text-decoration: none !important; }\n.fmstr-cmp-ffh-code {\n--fmstr-cmp-ffh-code-bg-card: #ffffff;\n--fmstr-cmp-ffh-code-bg-code: #0f172a;\n--fmstr-cmp-ffh-code-bg-preview: #f7f7f9;\n--fmstr-cmp-ffh-code-fg-1: #101828;\n--fmstr-cmp-ffh-code-fg-2: #475467;\n--fmstr-cmp-ffh-code-fg-3: #697586;\n--fmstr-cmp-ffh-code-violet-500: #7f56d9;\n--fmstr-cmp-ffh-code-violet-600: #6941c6;\n--fmstr-cmp-ffh-code-tint: #f7f3ff;\n--fmstr-cmp-ffh-code-edge: #e4d7ff;\n--fmstr-cmp-ffh-code-border: #eaecf0;\n--fmstr-cmp-ffh-code-code-fg: #e2e8f0;\n--fmstr-cmp-ffh-code-code-tag: #f472b6;\n--fmstr-cmp-ffh-code-code-attr: #a5b4fc;\n--fmstr-cmp-ffh-code-code-str: #86efac;\n--fmstr-cmp-ffh-code-code-comment: #64748b;\n--fmstr-cmp-ffh-code-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-code-fg-1);\n}\n.fmstr-cmp-ffh-code *, .fmstr-cmp-ffh-code *::before, .fmstr-cmp-ffh-code *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-code__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-code__head { max-width: 780px; margin: 0 0 32px; }\n.fmstr-cmp-ffh-code__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-code-tint); color: var(--fmstr-cmp-ffh-code-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-code-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-code__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-code__intro { color: var(--fmstr-cmp-ffh-code-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-code__grid {\ndisplay: grid; grid-template-columns: 1fr; gap: 0;\nbackground: var(--fmstr-cmp-ffh-code-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-code-border);\nborder-radius: 20px; overflow: hidden;\nbox-shadow: var(--fmstr-cmp-ffh-code-shadow);\n}\n\n.fmstr-cmp-ffh-code__preview-pane {\nbackground: var(--fmstr-cmp-ffh-code-bg-preview);\npadding: 28px 24px;\ndisplay: flex; flex-direction: column; gap: 14px;\nborder-bottom: 1px solid var(--fmstr-cmp-ffh-code-border);\n}\n.fmstr-cmp-ffh-code__preview-label {\nfont-size: 11px; font-weight: 700; letter-spacing: .08em;\ntext-transform: uppercase; color: var(--fmstr-cmp-ffh-code-fg-3);\ndisplay: flex; align-items: center; gap: 8px;\n}\n.fmstr-cmp-ffh-code__preview-label::before {\ncontent: \"\"; width: 8px; height: 8px; border-radius: 50%;\nbackground: #22c55e; flex-shrink: 0;\n}\n.fmstr-cmp-ffh-code__preview-form {\nbackground: #fff; padding: 22px 20px; border-radius: 12px;\nbox-shadow: 0 2px 12px rgba(0,0,0,0.06);\ndisplay: flex; flex-direction: column; gap: 14px;\n}\n.fmstr-cmp-ffh-code__preview-h { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-field { display: flex; flex-direction: column; gap: 6px; }\n.fmstr-cmp-ffh-code__preview-label-row { font-size: 12.5px; font-weight: 600; color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-input {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\n}\n.fmstr-cmp-ffh-code__preview-input--focus { outline: 2px solid var(--fmstr-cmp-ffh-code-violet-500); outline-offset: 1px; border-color: var(--fmstr-cmp-ffh-code-violet-500); color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-select {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\ndisplay: flex; justify-content: space-between; align-items: center;\n}\n.fmstr-cmp-ffh-code__preview-textarea {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\nmin-height: 54px;\n}\n.fmstr-cmp-ffh-code__preview-btn {\nbackground: var(--fmstr-cmp-ffh-code-violet-500); color: #fff;\npadding: 10px; border-radius: 8px; text-align: center;\nfont-weight: 600; font-size: 13px; margin-top: 4px;\n}\n.fmstr-cmp-ffh-code__preview-caption {\nfont-size: 12px; color: var(--fmstr-cmp-ffh-code-fg-3); line-height: 1.5; margin: 4px 0 0;\n}\n\n.fmstr-cmp-ffh-code__code-pane {\nbackground: var(--fmstr-cmp-ffh-code-bg-code);\nposition: relative; max-height: 560px;\ndisplay: flex; flex-direction: column;\n}\n.fmstr-cmp-ffh-code__code-header {\ndisplay: flex; align-items: center; justify-content: space-between;\npadding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);\ncolor: var(--fmstr-cmp-ffh-code-code-comment);\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 12px;\n}\n.fmstr-cmp-ffh-code__code-filename { display: flex; align-items: center; gap: 8px; }\n.fmstr-cmp-ffh-code__code-filename::before {\ncontent: \"\"; width: 10px; height: 10px; border-radius: 50%; background: #f87171;\nbox-shadow: 16px 0 0 #fbbf24, 32px 0 0 #34d399;\nmargin-right: 12px;\n}\n.fmstr-cmp-ffh-code__code-copy {\nbackground: rgba(127, 86, 217, 0.18) !important;\ncolor: #c4b5fd !important; border: 1px solid rgba(127, 86, 217, 0.4);\npadding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;\ncursor: pointer; font-family: ui-monospace, Menlo, Monaco, monospace;\ndisplay: inline-flex; align-items: center; gap: 6px;\n}\n.fmstr-cmp-ffh-code__code-copy:hover { background: rgba(127, 86, 217, 0.28) !important; }\n.fmstr-cmp-ffh-code__code-body {\nmargin: 0; padding: 18px 20px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 12.5px; line-height: 1.65;\ncolor: var(--fmstr-cmp-ffh-code-code-fg);\noverflow: auto; flex-grow: 1;\nwhite-space: pre;\nscrollbar-width: thin; scrollbar-color: rgba(167,139,250,.35) transparent;\n}\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar { width: 10px; height: 10px; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-track { background: transparent; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-thumb { background: rgba(167,139,250,.3); border-radius: 5px; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,.5); }\n.fmstr-cmp-ffh-code__code-body code { font-family: inherit; }\n.fmstr-cmp-ffh-code__tag { color: var(--fmstr-cmp-ffh-code-code-tag); }\n.fmstr-cmp-ffh-code__attr { color: var(--fmstr-cmp-ffh-code-code-attr); }\n.fmstr-cmp-ffh-code__str { color: var(--fmstr-cmp-ffh-code-code-str); }\n.fmstr-cmp-ffh-code__cmt { color: var(--fmstr-cmp-ffh-code-code-comment); font-style: italic; }\n\n.fmstr-cmp-ffh-code__foot {\nmargin: 20px auto 0; max-width: 780px; text-align: center;\ncolor: var(--fmstr-cmp-ffh-code-fg-3); font-size: 14.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-code__foot a { color: var(--fmstr-cmp-ffh-code-violet-600) !important; font-weight: 600; }\n.fmstr-cmp-ffh-code__foot a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-code { padding: 40px 16px; }\n.fmstr-cmp-ffh-code__grid { border-radius: 16px; }\n.fmstr-cmp-ffh-code__preview-pane { padding: 22px 18px; }\n.fmstr-cmp-ffh-code__code-pane { max-height: 420px; }\n.fmstr-cmp-ffh-code__code-body { font-size: 11.5px; padding: 14px 16px; }\n.fmstr-cmp-ffh-code__intro { font-size: 15.5px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-code\" aria-labelledby=\"fmstr-cmp-ffh-code-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__eyebrow\">Copy, paste, ship\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-code__h2\" id=\"fmstr-cmp-ffh-code-h2\">The complete feedback form, in one file\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-code__intro\">Structure, styling, and accessible JavaScript validation in a single working file. Save as \u003Ccode>feedback.html\u003C\u002Fcode>, swap the \u003Ccode>action\u003C\u002Fcode> URL, and the form is live.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-code__grid\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-pane\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-label\">Live preview\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-form\">\n\u003Ch3 class=\"fmstr-cmp-ffh-code__preview-h\">Tell us what you think\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Name\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-input\">Jane Doe\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Email\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-input fmstr-cmp-ffh-code__preview-input--focus\">jane@example.com\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">How was your experience?\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-select\">\u003Cspan>Loved it\u003C\u002Fspan>\u003Cspan>▾\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Your feedback\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-textarea\">The dashboard is fast and the export to PDF saved my week.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-btn\">Send feedback\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-ffh-code__preview-caption\">Rendered output. Keyboard-accessible focus ring on the active field, inline error slot ready, mobile-friendly layout.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-code__code-pane\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__code-header\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__code-filename\">feedback.html\u003C\u002Fspan>\n\u003Cbutton type=\"button\" class=\"fmstr-cmp-ffh-code__code-copy\" aria-label=\"Copy code\">Copy\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cpre class=\"fmstr-cmp-ffh-code__code-body\">\u003Ccode>\u003Cspan class=\"fmstr-cmp-ffh-code__cmt\"><!DOCTYPE html>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><html\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"en\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><head>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><meta\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">charset\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"UTF-8\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><meta\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"viewport\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">content\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"width=device-width, initial-scale=1.0\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><title>\u003C\u002Fspan>Feedback Form\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Ftitle>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><style>\u003C\u002Fspan>\nbody { font-family: system-ui, sans-serif; background: #f7f7f9; padding: 40px 16px; }\nform { max-width: 480px; margin: 0 auto; background: #fff; padding: 24px; border-radius: 12px; }\n.field { margin-bottom: 16px; }\nlabel { display: block; font-weight: 600; margin-bottom: 6px; }\ninput, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #d0d0d6; border-radius: 8px; box-sizing: border-box; }\ninput:focus, select:focus, textarea:focus { outline: 2px solid #5b6cff; border-color: #5b6cff; }\n[aria-invalid=\"true\"] { border-color: #d33; }\n.error { display: block; color: #d33; font-size: 0.8rem; margin-top: 4px; }\nbutton { width: 100%; padding: 12px; background: #5b6cff; color: #fff; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; }\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fstyle>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fhead>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><body>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><h1>\u003C\u002Fspan>Tell us what you think\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fh1>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><form\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"feedback-form\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">action\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"https:\u002F\u002Fapp.formester.com\u002Fapi\u002Fv1\u002Fforms\u002FYOUR_FORM_ID\u002Fsubmissions\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">method\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"post\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">novalidate\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Name\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><input\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Email\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><input\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>How was your experience?\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><select\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Pick one\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"5\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Loved it\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"3\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Okay\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"1\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Bad\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fselect>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Your feedback\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><textarea\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">rows\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"5\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">><\u002Ftextarea>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><button\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"submit\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Send feedback\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fbutton>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fform>\u003C\u002Fspan>\n\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><script>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__cmt\">\u002F\u002F Accessible inline validation: aria-invalid, aria-describedby, focus management\u003C\u002Fspan>\nconst form = document.getElementById(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'feedback-form'\u003C\u002Fspan>);\nform.addEventListener(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'submit'\u003C\u002Fspan>, (e) => {\nlet firstInvalid = null;\n[...form.querySelectorAll(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'input, select, textarea'\u003C\u002Fspan>)].forEach((input) => {\nconst valid = input.value.trim() && (input.type !== \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'email'\u003C\u002Fspan> || \u002F^\\S+@\\S+\\.\\S+$\u002F.test(input.value));\ninput.setAttribute(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'aria-invalid'\u003C\u002Fspan>, valid ? \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'false'\u003C\u002Fspan> : \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'true'\u003C\u002Fspan>);\nif (!valid && !firstInvalid) firstInvalid = input;\n});\nif (firstInvalid) { e.preventDefault(); firstInvalid.focus(); }\n});\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fscript>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fbody>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fhtml>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cp class=\"fmstr-cmp-ffh-code__foot\">The \u003Ccode>action\u003C\u002Fcode> URL above points to \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>. Replace \u003Ccode>YOUR_FORM_ID\u003C\u002Fcode> with your form’s ID, or point it at your own server. Everything else stays the same.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"fmstr-cmp-ffh-body\" aria-label=\"Common mistakes and variants\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__container\">\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Common mistakes that break feedback forms\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ccode>mailto:\u003C\u002Fcode> as the action.\u003C\u002Fstrong> Looks like the easy answer. Drops half your submissions because the user has to manually send the draft. Use a real backend.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Missing \u003Ccode>name\u003C\u002Fcode> attributes.\u003C\u002Fstrong> The form POSTs successfully but the server gets empty fields. \u003Ccode>id\u003C\u002Fcode> is for CSS and labels; \u003Ccode>name\u003C\u002Fcode> is what the server reads.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Removed focus outlines.\u003C\u002Fstrong> \u003Ccode>outline: none\u003C\u002Fcode> is the most copy-pasted CSS mistake on the web. It breaks keyboard navigation. Replace the outline; don't delete it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Client-side validation only.\u003C\u002Fstrong> A user with DevTools open can submit anything. Validate on the server too.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>No spam protection.\u003C\u002Fstrong> Public forms attract bots within hours. Add a honeypot field (a hidden input that bots fill and humans don't) or a CAPTCHA. \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">Formester's backend\u003C\u002Fa> does this automatically.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>No confirmation page or message.\u003C\u002Fstrong> The user submits, the page reloads, nothing visibly changes. They submit again. Add a \u003Ccode><p role=\"status\">Thanks, we got it<\u002Fp>\u003C\u002Fcode> or redirect to a thank-you page.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Variants of the feedback form\u003C\u002Fh2>\n\u003Cp>The base form covers most cases. Three common variants:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variants\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Customer feedback (with rating)\u003C\u002Fh4>\n\u003Cp>Add a 1-5 star scale instead of the dropdown. The \u003Ccode><input type=\"range\">\u003C\u002Fcode> works, but a row of radio buttons styled as stars is clearer for screen readers. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcustomer-feedback-form-31840\u002F\">customer feedback form template\u003C\u002Fa> ships this layout pre-built.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Product feedback (with feature picker)\u003C\u002Fh4>\n\u003Cp>Add a checkbox group: \"Which features did you use?\" with options like Onboarding, Search, Reporting. Use \u003Ccode><fieldset><legend>\u003C\u002Fcode> around the group so screen readers announce it as one question. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">feedback form templates library\u003C\u002Fa> has a fuller version.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Employee feedback (anonymous)\u003C\u002Fh4>\n\u003Cp>Drop the name and email fields entirely. Add a \"Department\" dropdown and a longer text area. If you collect this through Formester, turn off IP tracking in the form settings to keep submissions genuinely anonymous. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">employee feedback templates\u003C\u002Fa> are preconfigured for this.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-a11y a { text-decoration: none !important; }\n.fmstr-cmp-ffh-a11y {\n--fmstr-cmp-ffh-a11y-bg-card: #ffffff;\n--fmstr-cmp-ffh-a11y-bg-code: #0f172a;\n--fmstr-cmp-ffh-a11y-fg-1: #101828;\n--fmstr-cmp-ffh-a11y-fg-2: #475467;\n--fmstr-cmp-ffh-a11y-fg-3: #697586;\n--fmstr-cmp-ffh-a11y-violet-500: #7f56d9;\n--fmstr-cmp-ffh-a11y-violet-600: #6941c6;\n--fmstr-cmp-ffh-a11y-tint: #f7f3ff;\n--fmstr-cmp-ffh-a11y-edge: #e4d7ff;\n--fmstr-cmp-ffh-a11y-border: #eaecf0;\n--fmstr-cmp-ffh-a11y-red-bg: #fef2f2;\n--fmstr-cmp-ffh-a11y-red-edge: #fecaca;\n--fmstr-cmp-ffh-a11y-red: #b91c1c;\n--fmstr-cmp-ffh-a11y-green-bg: #f0fdf4;\n--fmstr-cmp-ffh-a11y-green-edge: #bbf7d0;\n--fmstr-cmp-ffh-a11y-green: #15803d;\n--fmstr-cmp-ffh-a11y-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-a11y-fg-1);\n}\n.fmstr-cmp-ffh-a11y *, .fmstr-cmp-ffh-a11y *::before, .fmstr-cmp-ffh-a11y *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-a11y__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-a11y__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-a11y__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-a11y-tint); color: var(--fmstr-cmp-ffh-a11y-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-a11y-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-a11y__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-a11y__intro { color: var(--fmstr-cmp-ffh-a11y-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-a11y__list { display: flex; flex-direction: column; gap: 16px; }\n.fmstr-cmp-ffh-a11y__item {\nbackground: var(--fmstr-cmp-ffh-a11y-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-a11y-border);\nborder-radius: 16px; padding: 22px 24px;\ndisplay: grid; grid-template-columns: 44px 1fr 1fr; gap: 20px; align-items: start;\nbox-shadow: var(--fmstr-cmp-ffh-a11y-shadow);\n}\n.fmstr-cmp-ffh-a11y__num {\nwidth: 36px; height: 36px; border-radius: 10px;\nbackground: var(--fmstr-cmp-ffh-a11y-tint);\ncolor: var(--fmstr-cmp-ffh-a11y-violet-600);\ndisplay: grid; place-items: center;\nfont-weight: 700; font-size: 15px;\nborder: 1px solid var(--fmstr-cmp-ffh-a11y-edge);\n}\n\n.fmstr-cmp-ffh-a11y__copy h3 {\nfont-size: 17px; font-weight: 600; letter-spacing: -.01em;\ncolor: var(--fmstr-cmp-ffh-a11y-fg-1); margin: 0 0 6px;\n}\n.fmstr-cmp-ffh-a11y__copy p { color: var(--fmstr-cmp-ffh-a11y-fg-2); font-size: 14.5px; line-height: 1.6; margin: 0; }\n.fmstr-cmp-ffh-a11y__copy strong { color: var(--fmstr-cmp-ffh-a11y-fg-1); font-weight: 600; }\n\n.fmstr-cmp-ffh-a11y__pair { display: flex; flex-direction: column; gap: 10px; }\n.fmstr-cmp-ffh-a11y__codebox {\nbackground: var(--fmstr-cmp-ffh-a11y-bg-code);\nborder-radius: 8px; padding: 10px 12px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 11.5px; line-height: 1.55;\ncolor: #e2e8f0; overflow-x: auto; margin: 0;\nwhite-space: pre; position: relative; padding-left: 50px;\n}\n.fmstr-cmp-ffh-a11y__codebox code { font-family: inherit; }\n.fmstr-cmp-ffh-a11y__codebox::before {\ncontent: \"\"; position: absolute; left: 10px; top: 11px;\nwidth: 14px; height: 14px; border-radius: 50%;\nbackground-repeat: no-repeat; background-position: center;\n}\n.fmstr-cmp-ffh-a11y__codebox--bad::before { background-color: var(--fmstr-cmp-ffh-a11y-red-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5 L6.5 6.5 M6.5 1.5 L1.5 6.5'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-a11y__codebox--good::before { background-color: var(--fmstr-cmp-ffh-a11y-green-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='9' height='9' viewBox='0 0 9 9' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 L3.5 6.5 L7 3'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-a11y__codebox-label {\nposition: absolute; top: 11px; left: 28px;\nfont-size: 9px; font-weight: 700; letter-spacing: .08em;\ntext-transform: uppercase;\n}\n.fmstr-cmp-ffh-a11y__codebox--bad .fmstr-cmp-ffh-a11y__codebox-label { color: var(--fmstr-cmp-ffh-a11y-red); }\n.fmstr-cmp-ffh-a11y__codebox--good .fmstr-cmp-ffh-a11y__codebox-label { color: var(--fmstr-cmp-ffh-a11y-green); }\n\n.fmstr-cmp-ffh-a11y__codebox .t { color: #f472b6; }\n.fmstr-cmp-ffh-a11y__codebox .a { color: #a5b4fc; }\n.fmstr-cmp-ffh-a11y__codebox .s { color: #86efac; }\n\n.fmstr-cmp-ffh-a11y__foot {\nmargin: 28px auto 0; max-width: 760px; text-align: center;\ncolor: var(--fmstr-cmp-ffh-a11y-fg-3); font-size: 14.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-a11y__foot a { color: var(--fmstr-cmp-ffh-a11y-violet-600) !important; font-weight: 600; }\n.fmstr-cmp-ffh-a11y__foot a:hover { text-decoration: underline !important; }\n\n@media (max-width: 880px) {\n.fmstr-cmp-ffh-a11y__item { grid-template-columns: 36px 1fr; gap: 16px; }\n.fmstr-cmp-ffh-a11y__pair { grid-column: 1 \u002F -1; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-a11y { padding: 40px 16px; }\n.fmstr-cmp-ffh-a11y__item { padding: 18px; border-radius: 14px; }\n.fmstr-cmp-ffh-a11y__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-a11y__codebox { font-size: 11px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-a11y\" aria-labelledby=\"fmstr-cmp-ffh-a11y-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-a11y__eyebrow\">Five flags worth catching\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-a11y__h2\" id=\"fmstr-cmp-ffh-a11y-h2\">Accessibility checklist for an HTML feedback form\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-a11y__intro\">Every item below is something keyboard and screen-reader users actually hit. Skip these and a measurable chunk of your audience can’t complete the form.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__list\">\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">1\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Pair every label with its input\u003C\u002Fh3>\n\u003Cp>The label’s \u003Ccode>for\u003C\u002Fcode> must match the input’s \u003Ccode>id\u003C\u002Fcode>. Click the label, focus the input. Screen readers announce the label out loud. Skip this and the form fails WCAG 2.1 and loses keyboard users.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label>\u003C\u002Fspan>Email\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label\u003C\u002Fspan> \u003Cspan class=\"a\">for\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Email\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">2\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Connect errors with \u003Ccode>aria-describedby\u003C\u002Fcode>\u003C\u002Fh3>\n\u003Cp>An invalid field needs \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> plus an \u003Ccode>aria-describedby\u003C\u002Fcode> that points at the visible error message. Screen readers then announce the error along with the field name on focus.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><span>\u003C\u002Fspan>Invalid email\u003Cspan class=\"t\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">aria-invalid\u003C\u002Fspan>=\u003Cspan class=\"s\">\"true\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">aria-describedby\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email-error\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><span\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email-error\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Invalid email\u003Cspan class=\"t\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">3\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Use \u003Ccode>autocomplete\u003C\u002Fcode> tokens\u003C\u002Fh3>\n\u003Cp>One line per field. Browsers prefill from saved info, password managers behave, and assistive tech recognizes the field’s purpose. Measurable lift in completion rate on mobile.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">4\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Keep focus outlines visible\u003C\u002Fh3>\n\u003Cp>\u003Ccode>outline: none\u003C\u002Fcode> is the single most-copied CSS mistake on the web. It breaks keyboard navigation. Replace the default outline, never delete it. The visible ring is how a sighted keyboard user knows where they are.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>input:focus { outline: none; }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>input:focus {\noutline: 2px solid #5b6cff;\noutline-offset: 1px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">5\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Mark required fields semantically\u003C\u002Fh3>\n\u003Cp>The native \u003Ccode>required\u003C\u002Fcode> attribute does two jobs at once: it tells the browser to block submission and tells screen readers the field is required. Don’t fake it with just a red asterisk in the label.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label>\u003C\u002Fspan>Email \u003Cspan class=\"t\"><span>\u003C\u002Fspan>*\u003Cspan class=\"t\"><\u002Fspan><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label\u003C\u002Fspan> \u003Cspan class=\"a\">for\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Email (required)\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">required\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\n\u003Cp class=\"fmstr-cmp-ffh-a11y__foot\">For edge cases (fieldsets, error summaries, custom controls), the \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FElements\u002Fform\">MDN \u003Ccode><form>\u003C\u002Fcode> reference\u003C\u002Fa> is the canonical source.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-faq a { text-decoration: none !important; }\n.fmstr-cmp-ffh-faq {\n--c-bg: #fafafb; --c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467;\n--c-violet-600: #6941c6; --c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0; --c-chip-bg: #f4f4f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-faq *, .fmstr-cmp-ffh-faq *::before, .fmstr-cmp-ffh-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-faq__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-faq__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); }\n.fmstr-cmp-ffh-faq__intro { color: #697586; font-size: 17px; line-height: 1.6; margin: 14px 0 28px; max-width: 760px; }\n.fmstr-cmp-ffh-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-ffh-faq__item {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; box-shadow: var(--c-shadow); overflow: hidden;\n}\n.fmstr-cmp-ffh-faq__item > summary {\npadding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 16.5px;\ncolor: var(--c-fg-1); display: flex; align-items: center; gap: 14px;\nlist-style: none;\n}\n.fmstr-cmp-ffh-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-ffh-faq__item > summary::before {\ncontent: \"\"; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;\nbackground-color: var(--c-chip-bg);\nbackground-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2375747f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'\u002F%3E%3C\u002Fsvg%3E\");\nbackground-repeat: no-repeat; background-position: center;\ntransition: transform .15s ease, background-color .15s ease;\n}\n.fmstr-cmp-ffh-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-ffh-faq__item[open] > summary { color: var(--c-violet-600); }\n.fmstr-cmp-ffh-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-ffh-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-ffh-faq__answer a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-faq__answer code {\nbackground: var(--c-chip-bg); padding: 1px 6px; border-radius: 4px;\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 13.5px;\ncolor: var(--c-violet-600);\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-faq { padding: 40px 16px; }\n.fmstr-cmp-ffh-faq__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-ffh-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-ffh-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-faq\" aria-labelledby=\"fmstr-cmp-ffh-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-ffh-faq__h2\" id=\"fmstr-cmp-ffh-faq-h2\">HTML feedback form FAQ\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-faq__intro\">Answers that mirror the FAQPage JSON-LD on the live page.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do you add a feedback form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Use a \u003Ccode><form>\u003C\u002Fcode> element with \u003Ccode>action\u003C\u002Fcode> set to your submission endpoint and \u003Ccode>method=\"post\"\u003C\u002Fcode>. Inside the form, add labeled \u003Ccode><input>\u003C\u002Fcode> and \u003Ccode><textarea>\u003C\u002Fcode> elements with \u003Ccode>name\u003C\u002Fcode> attributes. Style with CSS, validate with JavaScript, and point the \u003Ccode>action\u003C\u002Fcode> at a backend (your server, or a service like \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>). The complete copy-paste example above is the shortest working version.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I create a feedback form?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Decide what to ask (name, email, rating, open-ended feedback are the standard four). Write the HTML using a \u003Ccode><form>\u003C\u002Fcode> with one labeled input per question. Style it with CSS so it matches your site. Hook the \u003Ccode>action\u003C\u002Fcode> to a backend that stores submissions. The full process is the six steps above, or skip ahead to \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F\">Formester’s drag-and-drop builder\u003C\u002Fa> if you’d rather not write code.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I create an inquiry form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Same pattern as a feedback form, with different field labels. Swap \"How was your experience?\" for \"What are you interested in?\" and \"Your feedback\" for \"Your message.\" Keep the name, email, and submit-button structure identical. For a longer inquiry form with subject lines and contact preferences, the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fcontact-form-design-tips-best-practices-and-examples\u002F\">contact form design best practices guide\u003C\u002Fa> covers the patterns.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do you add a comment to a form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Two meanings. (1) An HTML comment for developers: \u003Ccode><!-- this is the feedback section -->\u003C\u002Fcode> between elements. (2) A user-facing comment field: a \u003Ccode><textarea>\u003C\u002Fcode> with a label like \"Your comments.\" If you want comments to be optional, leave off the \u003Ccode>required\u003C\u002Fcode> attribute. Use \u003Ccode>rows\u003C\u002Fcode> and \u003Ccode>cols\u003C\u002Fcode> (or CSS height) to size the box.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I add CSS to a feedback form?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Two options. Inline \u003Ccode><style>\u003C\u002Fcode> tags inside \u003Ccode><head>\u003C\u002Fcode> work fine for one-off pages. For any real site, link an external stylesheet with \u003Ccode><link rel=\"stylesheet\" href=\"styles.css\">\u003C\u002Fcode>. Style the \u003Ccode>form\u003C\u002Fcode>, \u003Ccode>label\u003C\u002Fcode>, \u003Ccode>input\u003C\u002Fcode>, \u003Ccode>textarea\u003C\u002Fcode>, and \u003Ccode>button\u003C\u002Fcode> selectors directly. Step 3 above ships a complete starter stylesheet you can paste, including focus rings and inline error styles.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I add JavaScript validation without breaking accessibility?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Use \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> on invalid fields, \u003Ccode>aria-describedby\u003C\u002Fcode> to point at the inline error message, and move focus to the first invalid field on submit failure. Avoid \u003Ccode>alert()\u003C\u002Fcode> boxes, they break screen-reader flow. The Step 4 JavaScript and the complete example above are accessibility-tested versions you can paste directly. Always re-validate on the server too, since a user with DevTools open can bypass client-side checks.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-vid a { text-decoration: none !important; }\n.fmstr-cmp-ffh-vid {\n--c-bg-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-vid *, .fmstr-cmp-ffh-vid *::before, .fmstr-cmp-ffh-vid *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-vid__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-vid__head { margin: 0 0 24px; }\n.fmstr-cmp-ffh-vid__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--c-tint); color: var(--c-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--c-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-vid__h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); }\n.fmstr-cmp-ffh-vid__sub { color: var(--c-fg-3); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }\n.fmstr-cmp-ffh-vid__frame {\nposition: relative; aspect-ratio: 16 \u002F 9; border-radius: 20px; overflow: hidden;\nbackground: var(--c-tint); border: 1px solid var(--c-border); box-shadow: var(--c-shadow);\n}\n.fmstr-cmp-ffh-vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\n.fmstr-cmp-ffh-vid__caption { color: var(--c-fg-3); font-size: 14px; line-height: 1.6; text-align: center; margin: 16px 0 0; }\n.fmstr-cmp-ffh-vid__caption a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-ffh-vid__caption a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-vid__caption code {\nbackground: var(--c-tint); padding: 1px 6px; border-radius: 4px;\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 13px;\ncolor: var(--c-violet-600);\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-vid { padding: 40px 16px; }\n.fmstr-cmp-ffh-vid__sub { font-size: 15px; }\n.fmstr-cmp-ffh-vid__frame { border-radius: 16px; }\n.fmstr-cmp-ffh-vid__caption { font-size: 13.5px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-vid\" aria-labelledby=\"fmstr-cmp-ffh-vid-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-vid__eyebrow\">Three-minute walkthrough\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-vid__h2\" id=\"fmstr-cmp-ffh-vid-h2\">Watch the full HTML feedback form built from scratch\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-vid__sub\">Structure, CSS, accessible validation, backend swap. All six steps in one short video.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__frame\">\n\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F8FC3c5Cv5ew\" title=\"How to make a feedback form in HTML\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-ffh-vid__caption\">Prefer reading? The full tutorial is below with copy-paste blocks. To skip the backend setup entirely, point the form’s \u003Ccode>action\u003C\u002Fcode> at \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-rel a { text-decoration: none !important; }\n.fmstr-cmp-ffh-rel {\n--c-bg: #f4f4f7; --c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-rel *, .fmstr-cmp-ffh-rel *::before, .fmstr-cmp-ffh-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-rel__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-rel__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-rel__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-rel__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n.fmstr-cmp-ffh-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-ffh-rel__card {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 14px;\ntext-decoration: none !important; color: inherit !important; transition: all .15s ease;\n}\n.fmstr-cmp-ffh-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-ffh-rel__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--c-tint); display: grid; place-items: center; flex-shrink: 0; font-size: 18px; border: 1px solid var(--c-edge); }\n.fmstr-cmp-ffh-rel__text { flex-grow: 1; }\n.fmstr-cmp-ffh-rel__text h4 { font-size: 14.5px; font-weight: 600; color: var(--c-fg-1); margin: 0; }\n.fmstr-cmp-ffh-rel__text small { font-size: 12.5px; color: var(--c-fg-3); display: block; margin-top: 2px; }\n.fmstr-cmp-ffh-rel__arrow { color: var(--c-violet-500); font-size: 18px; }\n\n@media (max-width: 880px) { .fmstr-cmp-ffh-rel__grid { grid-template-columns: 1fr 1fr; gap: 12px; } }\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-rel { padding: 40px 16px; }\n.fmstr-cmp-ffh-rel__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-rel__card { padding: 16px; gap: 12px; }\n}\n@media (max-width: 540px) { .fmstr-cmp-ffh-rel__grid { grid-template-columns: 1fr; gap: 12px; } }\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-rel\" aria-labelledby=\"fmstr-cmp-ffh-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-ffh-rel__h2\" id=\"fmstr-cmp-ffh-rel-h2\">More from Formester on HTML forms and feedback\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-rel__intro\">Pair this tutorial with the backend features, ready-made templates, and adjacent how-tos.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📥\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>HTML Form Backend\u003C\u002Fh4>\u003Csmall>One \u003Ccode>action\u003C\u002Fcode> swap, no server\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fembed-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🔗\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Embed Forms\u003C\u002Fh4>\u003Csmall>Drop a form into any HTML page\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🛡\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Spam Protection\u003C\u002Fh4>\u003Csmall>Honeypot + reCAPTCHA built in\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcustomer-feedback-form-31840\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">⭐\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Customer Feedback Form\u003C\u002Fh4>\u003Csmall>Pre-built template\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📄\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>All Feedback Templates\u003C\u002Fh4>\u003Csmall>Customer, product, employee\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-form-generator\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">✨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>AI Form Generator\u003C\u002Fh4>\u003Csmall>The no-code alternative\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-send-contact-form-data-to-google-sheets-free\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📋\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Send form data to Google Sheets\u003C\u002Fh4>\u003Csmall>Free, step-by-step\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fcontact-form-design-tips-best-practices-and-examples\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🎨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Contact form design tips\u003C\u002Fh4>\u003Csmall>Best practices and examples\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-build-spam-free-contact-forms-for-your-website\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🤖\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Build spam-free contact forms\u003C\u002Fh4>\u003Csmall>Stop bots before they hit your inbox\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n","blog\u002Fblog\u002Fhow-to-make-feedback-form-in-html.md",{"text":48},"16 min read",{"title":50,"author":7,"authorImage":8,"authorProfile":9,"coverImg":51,"coverImgAlt":52,"createdAt":53,"description":54,"featured":14,"jsonld":55,"keywords":56,"metaDescription":57,"metaImage":58,"metaTitle":59,"publishedAt":60,"slug":61,"updatedAt":62,"__hash__":63,"body":64,"id":65,"coverImgWidth":25,"coverImgHeight":26,"readingStats":66},"How to Create Sections in Google Forms (5 Steps + Conditional Redirect)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_blog_post_cover_about_how_to_create_form_sections_in_google_forms_e27f572001.png","a blog post cover about how to create form sections in google forms","2025-05-16T00:43:40.738Z","Easily add sections and set up answer-based redirects in Google Forms. Guide users through custom paths for better form engagement and clarity.\n\n\n\n\n\n\n\n\n",[],"how to create form sections in google forms,\nhow to add sections in google forms,\nhow to use conditional logic in google forms,\nhow to redirect users in google forms,","Add sections in Google Forms in 5 steps, then route respondents to different sections based on their answers. Screenshots + 60-second video. Free.",[],"How to Create Sections in Google Forms + Conditional Redirect (2026)","2026-06-05T03:35:16.000Z","how-create-form-sections-in-google-forms","2026-06-08T11:38:02.146Z","2-mqZ7BKisS8adBgQamhJzsJVNgK7cMTGWxL9YgQkRM","\u003Ciframe width=\"100%\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpuP1xvmSDBM?si=L-A2phe7CriAnpUw\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C\u002Fiframe>\n\n\u003Cstyle>\n.fmstr-cmp-tmpl-tldr a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-tldr {\n--c-card: #f7f3ff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-edge: #e4d7ff; --c-border: #d6c2f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\nbackground: transparent;\npadding: 28px 0 40px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\n}\n.fmstr-cmp-tmpl-tldr *, .fmstr-cmp-tmpl-tldr *::before, .fmstr-cmp-tmpl-tldr *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-tldr__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-tldr__card {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-left: 4px solid var(--c-violet-500);\nborder-radius: 14px;\npadding: 22px 26px;\nbox-shadow: var(--c-shadow);\ndisplay: flex; flex-direction: column; gap: 10px;\n}\n.fmstr-cmp-tmpl-tldr__label {\nfont-size: 12px !important;\nfont-weight: 700 !important;\nletter-spacing: 0.08em !important;\ntext-transform: uppercase;\ncolor: var(--c-violet-700) !important;\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\nmargin: 0 !important;\n}\n.fmstr-cmp-tmpl-tldr__label::before {\ncontent: \"\";\nwidth: 8px; height: 8px; border-radius: 9999px;\nbackground: var(--c-violet-500);\ndisplay: inline-block;\n}\n.fmstr-cmp-tmpl-tldr__body {\nfont-size: 16px !important;\nline-height: 1.65 !important;\ncolor: var(--c-fg-1);\nmargin: 0 !important;\nfont-weight: 500 !important;\n}\n.fmstr-cmp-tmpl-tldr__body strong { color: var(--c-violet-700); font-weight: 700; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-tmpl-tldr { padding: 20px 0 28px; }\n.fmstr-cmp-tmpl-tldr__card { padding: 18px 20px; }\n.fmstr-cmp-tmpl-tldr__body { font-size: 15px !important; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-tldr\" aria-labelledby=\"fmstr-cmp-tmpl-tldr-label\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-tldr__container\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-tldr__card\">\n\u003Cp class=\"fmstr-cmp-tmpl-tldr__label\" id=\"fmstr-cmp-tmpl-tldr-label\">Quick answer\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-tmpl-tldr__body\">To create sections in Google Forms, open your form, click the Add section button on the right toolbar, drag questions into the new section, name and describe each section, then add Go to section based on answer logic if you want conditional routing. The 5 steps below cover every option with screenshots and a 60-second video.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n.fmstr-cmp-tmpl-steps a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-steps {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\nbackground: transparent;\npadding: 48px 0;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\noverflow-x: hidden;\n}\n.fmstr-cmp-tmpl-steps *, .fmstr-cmp-tmpl-steps *::before, .fmstr-cmp-tmpl-steps *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-steps > *, .fmstr-cmp-tmpl-steps > * > * { min-width: 0; }\n.fmstr-cmp-tmpl-steps__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-steps__head { margin: 0 0 28px !important; }\n.fmstr-cmp-tmpl-steps__h2 {\nfont-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important;\nletter-spacing: -.02em !important; margin: 0 !important; color: var(--c-fg-1);\n}\n.fmstr-cmp-tmpl-steps__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 0 !important; }\n.fmstr-cmp-tmpl-steps__list {\ndisplay: flex; flex-direction: column; gap: 14px;\ncounter-reset: step-counter;\nmargin: 0; padding: 0; list-style: none;\n}\n.fmstr-cmp-tmpl-steps__item {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\npadding: 22px 24px;\nbox-shadow: var(--c-shadow);\ndisplay: flex; gap: 18px;\nalign-items: flex-start;\nmin-width: 0;\n}\n.fmstr-cmp-tmpl-steps__num {\nflex-shrink: 0;\nwidth: 38px; height: 38px; border-radius: 10px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\ncolor: var(--c-violet-700) !important;\nfont-weight: 800; font-size: 16px;\ndisplay: inline-flex; align-items: center; justify-content: center;\n}\n.fmstr-cmp-tmpl-steps__main { flex: 1; min-width: 0; }\n.fmstr-cmp-tmpl-steps__title {\nfont-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important;\ncolor: var(--c-fg-1); margin: 0 0 6px !important;\n}\n.fmstr-cmp-tmpl-steps__body {\nfont-size: 15px !important; line-height: 1.6 !important;\ncolor: var(--c-fg-2); margin: 0 !important;\n}\n\n@media (max-width: 540px) {\n.fmstr-cmp-tmpl-steps { padding: 36px 0; }\n.fmstr-cmp-tmpl-steps__item { padding: 18px 20px; gap: 14px; }\n.fmstr-cmp-tmpl-steps__num { width: 34px; height: 34px; font-size: 15px; }\n.fmstr-cmp-tmpl-steps__title { font-size: 16px !important; }\n.fmstr-cmp-tmpl-steps__body { font-size: 14.5px !important; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-steps\" aria-labelledby=\"fmstr-cmp-tmpl-steps-h2\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__container\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__head\">\n\u003Ch2 class=\"fmstr-cmp-tmpl-steps__h2\" id=\"fmstr-cmp-tmpl-steps-h2\">The 5-step setup with conditional routing\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__intro\">Splits a long form into pages and routes respondents to the right page based on their answers.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Col class=\"fmstr-cmp-tmpl-steps__list\">\n\n\u003Cli class=\"fmstr-cmp-tmpl-steps__item\">\n\u003Cspan class=\"fmstr-cmp-tmpl-steps__num\" aria-hidden=\"true\">1\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__main\">\n\u003Ch3 class=\"fmstr-cmp-tmpl-steps__title\">Add a new section\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">In the form editor, click the rightmost icon in the right-side toolbar (looks like two stacked rectangles). A new section appears below the current one.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-tmpl-steps__item\">\n\u003Cspan class=\"fmstr-cmp-tmpl-steps__num\" aria-hidden=\"true\">2\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__main\">\n\u003Ch3 class=\"fmstr-cmp-tmpl-steps__title\">Name and describe each section\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">Click the section title field, give it a descriptive name (e.g., 'For new customers'). Add a one-line description explaining what to expect in this section.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-tmpl-steps__item\">\n\u003Cspan class=\"fmstr-cmp-tmpl-steps__num\" aria-hidden=\"true\">3\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__main\">\n\u003Ch3 class=\"fmstr-cmp-tmpl-steps__title\">Drag or add questions to the new section\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">Click + to add new questions, or drag existing questions into the new section. Each question stays within its section in the live form.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-tmpl-steps__item\">\n\u003Cspan class=\"fmstr-cmp-tmpl-steps__num\" aria-hidden=\"true\">4\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__main\">\n\u003Ch3 class=\"fmstr-cmp-tmpl-steps__title\">Add Go to section based on answer (conditional routing)\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">On a multiple-choice question, click the three-dot menu and choose 'Go to section based on answer'. Map each answer to the section it should route to.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-tmpl-steps__item\">\n\u003Cspan class=\"fmstr-cmp-tmpl-steps__num\" aria-hidden=\"true\">5\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-tmpl-steps__main\">\n\u003Ch3 class=\"fmstr-cmp-tmpl-steps__title\">Test and share\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">Click the preview eye icon, walk through every branch, then click Send to share the link or embed code.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\n\n\n\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-gfs-body a { text-decoration: none !important; }\n.fmstr-cmp-gfs-body {\n--c-bg-card: #ffffff;\n--c-bg-soft: #f9fafb;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n\nbackground: transparent; padding: 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-gfs-body *, .fmstr-cmp-gfs-body *::before, .fmstr-cmp-gfs-body *::after { box-sizing: border-box; }\n.fmstr-cmp-gfs-body__container { max-width: 820px; margin: 0 auto; }\n\n.fmstr-cmp-gfs-body__sub { font-size: 17px; line-height: 1.6; color: var(--c-fg-3); font-style: italic; margin: 0 0 24px; }\n\n.fmstr-cmp-gfs-body__intro p { font-size: 17px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 16px; }\n.fmstr-cmp-gfs-body__intro a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-gfs-body__intro a:hover { text-decoration: underline !important; }\n\n.fmstr-cmp-gfs-body__h2 {\nfont-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em;\nmargin: 40px 0 16px; color: var(--c-fg-1);\n}\n.fmstr-cmp-gfs-body p { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 14px; }\n.fmstr-cmp-gfs-body p strong { color: var(--c-fg-1); }\n.fmstr-cmp-gfs-body a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-gfs-body a:hover { text-decoration: underline !important; }\n.fmstr-cmp-gfs-body ul, .fmstr-cmp-gfs-body ol { margin: 0 0 16px; padding-left: 22px; }\n.fmstr-cmp-gfs-body li { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 6px 0; }\n.fmstr-cmp-gfs-body li strong { color: var(--c-fg-1); }\n.fmstr-cmp-gfs-body code { background: var(--c-tint); color: var(--c-violet-600); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; border: 1px solid var(--c-edge); }\n\n.fmstr-cmp-gfs-body__callout {\nbackground: var(--c-bg-soft); border: 1px solid var(--c-border); border-left: 3px solid var(--c-violet-500);\nborder-radius: 8px; padding: 16px 20px; margin: 0 0 20px;\n}\n.fmstr-cmp-gfs-body__callout p { margin: 0; }\n.fmstr-cmp-gfs-body__callout p + p { margin-top: 8px; }\n\n.fmstr-cmp-gfs-body__decide-grid {\ndisplay: grid; grid-template-columns: 1fr 1fr; gap: 12px;\nmargin: 0 0 20px;\n}\n.fmstr-cmp-gfs-body__decide-card {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border);\nborder-radius: 12px; padding: 18px 20px;\n}\n.fmstr-cmp-gfs-body__decide-card h4 {\nfont-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--c-fg-1);\ndisplay: flex; align-items: center; gap: 8px;\n}\n.fmstr-cmp-gfs-body__decide-card ul { margin: 0; padding-left: 18px; }\n.fmstr-cmp-gfs-body__decide-card li { font-size: 14.5px; line-height: 1.55; margin: 4px 0; }\n.fmstr-cmp-gfs-body__decide-card--use h4 { color: var(--c-violet-600); }\n.fmstr-cmp-gfs-body__decide-card--skip h4 { color: var(--c-fg-2); }\n\n@media (max-width: 600px) {\n.fmstr-cmp-gfs-body { padding: 16px; }\n.fmstr-cmp-gfs-body__h2 { font-size: 22px; margin: 32px 0 14px; }\n.fmstr-cmp-gfs-body__intro p { font-size: 16px; }\n.fmstr-cmp-gfs-body p { font-size: 15.5px; }\n.fmstr-cmp-gfs-body__decide-grid { grid-template-columns: 1fr; gap: 10px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-gfs-body\" aria-label=\"How to create sections in Google Forms with conditional redirect\">\n\u003Cdiv class=\"fmstr-cmp-gfs-body__container\">\n\n\u003Cp class=\"fmstr-cmp-gfs-body__sub\">Split a long form into sections, then send respondents to the right section based on their answers. Takes 3 minutes.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-cmp-gfs-body__intro\">\n\u003Cp>To create sections in Google Forms, open your form, click the \u003Cstrong>Add section\u003C\u002Fstrong> button on the right toolbar, drag questions into the new section, name and describe each section, then add \u003Cstrong>Go to section based on answer\u003C\u002Fstrong> logic if you want conditional routing. The 5 steps below cover every option with screenshots and a 60-second video.\u003C\u002Fp>\n\u003Cp>Sections turn a single long form into a multi-page experience: cleaner UX for the respondent, more control for you. Add conditional routing on top and you can branch respondents down different paths based on their answers, the same way a quiz or a screening form does.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">When to use sections (and when to skip them)\u003C\u002Fh2>\n\u003Cp>Sections add overhead. Use them when the payoff is real.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-cmp-gfs-body__decide-grid\">\n\u003Cdiv class=\"fmstr-cmp-gfs-body__decide-card fmstr-cmp-gfs-body__decide-card--use\">\n\u003Ch4>Use sections when\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>The form is longer than 8-10 questions\u003C\u002Fli>\n\u003Cli>You want to branch respondents based on an early answer\u003C\u002Fli>\n\u003Cli>You're collecting different data from different roles (e.g., employer vs candidate)\u003C\u002Fli>\n\u003Cli>You want a clear progress indicator across logical groups\u003C\u002Fli>\n\u003Cli>The form has distinct phases (about you \u002F your needs \u002F next steps)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-gfs-body__decide-card fmstr-cmp-gfs-body__decide-card--skip\">\n\u003Ch4>Skip sections when\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>The form is under 5 questions\u003C\u002Fli>\n\u003Cli>Every respondent answers every question identically\u003C\u002Fli>\n\u003Cli>You want maximum completion rate (each section adds a click)\u003C\u002Fli>\n\u003Cli>You only need simple yes\u002Fno branching (a single conditional question can handle this without a new section)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Step 1: Open or create your form\u003C\u002Fh2>\n\u003Cp>Go to \u003Ca href=\"https:\u002F\u002Fforms.google.com\">forms.google.com\u003C\u002Fa> and either open an existing form or click \u003Cstrong>Blank\u003C\u002Fstrong> to start a new one.\u003C\u002Fp>\n\u003Cp>If you're building from scratch, add the first question or two to the default section before splitting. It's easier to drag questions into a new section than to invent a section's first question on the fly.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Step 2: Add a section\u003C\u002Fh2>\n\u003Cp>On the floating right toolbar, click the \u003Cstrong>Add section\u003C\u002Fstrong> button (the rightmost icon, two stacked rectangles). A new section appears below your current question.\u003C\u002Fp>\n\u003Cp>Give the section a title that names the phase of the form (for example, \"About your team\", \"Project details\", \"Next steps\"). Add a one-line description if the section opens with context the respondent needs before answering.\u003C\u002Fp>\n\u003Cp>Repeat to add as many sections as the form needs. Performance stays smooth up to roughly 20 sections; past that, consider a dedicated form builder.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Step 3: Add a multiple-choice question for routing\u003C\u002Fh2>\n\u003Cp>Conditional routing in Google Forms only works on \u003Cstrong>multiple-choice\u003C\u002Fstrong> or \u003Cstrong>dropdown\u003C\u002Fstrong> questions, not on short-answer or paragraph fields. Add the routing question early in the form, since it controls everything that follows.\u003C\u002Fp>\n\u003Cp>Example: a single-question section titled \"Which best describes you?\" with the options:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>I'm a customer\u003C\u002Fli>\n\u003Cli>I'm an investor\u003C\u002Fli>\n\u003Cli>I'm a job applicant\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Each option will route the respondent to a different section in the next step.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Step 4: Set up the redirect logic\u003C\u002Fh2>\n\u003Cp>Click the three-dot menu at the bottom-right of the multiple-choice question and choose \u003Cstrong>Go to section based on answer\u003C\u002Fstrong>. A small dropdown appears next to each answer option.\u003C\u002Fp>\n\u003Cp>For each option, pick the section the respondent should jump to. Options that go to \"Continue to next section\" follow the normal section order; options that go to a specific section skip everything in between.\u003C\u002Fp>\n\u003Cp>Map each option deliberately:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>I'm a customer\u003C\u002Fstrong> → Continue to next section (customer questions)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>I'm an investor\u003C\u002Fstrong> → Investor section\u003C\u002Fli>\n\u003Cli>\u003Cstrong>I'm a job applicant\u003C\u002Fstrong> → Job application section\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>For more advanced per-question logic that hides individual fields based on previous answers, Google Forms can't help, use Formester's \u003Ca href=\"\u002Ffeatures\u002Fconditional-logic\u002F\">conditional logic feature\u003C\u002Fa> instead.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Step 5: Add an ending section and test\u003C\u002Fh2>\n\u003Cp>At the bottom of each conditional path, add a final section that ends the form. Use the same final section for every path if you want all respondents to see the same thank-you message, or use unique final sections for path-specific next steps.\u003C\u002Fp>\n\u003Cp>Click the \u003Cstrong>preview\u003C\u002Fstrong> button (the eye icon top-right). Walk through each path to verify every option routes where you expect. Branching mistakes are easy to miss without a manual test pass.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Want a smarter alternative? Use Formester\u003C\u002Fh2>\n\u003Cp>If your form needs more than what Google Forms' section routing can handle, \u003Ca href=\"\u002F\">Formester\u003C\u002Fa> ships:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Unlimited sections\u003C\u002Fstrong> with no performance hit\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Per-question conditional logic\u003C\u002Fstrong>, hide or show individual fields, not just whole sections\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Multi-step UX\u003C\u002Fstrong> with a built-in progress bar\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Branded styling\u003C\u002Fstrong>, your colors, logo, and fonts\u003C\u002Fli>\n\u003Cli>\u003Cstrong>AI-assisted form building\u003C\u002Fstrong>, describe your form, get a complete draft in seconds via the \u003Ca href=\"\u002Fai-form-generator\u002F\">AI form generator\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The same multi-section survey takes 60 seconds to set up in Formester versus 10 minutes in Google Forms.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-gfs-body__h2\">Final thoughts\u003C\u002Fh2>\n\u003Cp>Sections turn a long Google Form into a structured experience, and conditional routing branches respondents down the right path based on their answers. The setup takes 3-5 minutes once you know where the buttons are.\u003C\u002Fp>\n\u003Cp>For longer or more dynamic forms, switch to Formester, same setup time, more flexibility, and no 20-section performance cliff. \u003Ca href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Try it free\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-gfs-faq a { text-decoration: none !important; }\n.fmstr-cmp-gfs-faq {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\n}\n.fmstr-cmp-gfs-faq *, .fmstr-cmp-gfs-faq *::before, .fmstr-cmp-gfs-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-gfs-faq__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-gfs-faq__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-gfs-faq__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 28px; text-align: left; }\n.fmstr-cmp-gfs-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-gfs-faq__item {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; box-shadow: var(--c-shadow); overflow: hidden;\n}\n.fmstr-cmp-gfs-faq__item summary {\nlist-style: none; cursor: pointer;\npadding: 18px 22px; font-size: 16.5px; font-weight: 600; color: var(--c-fg-1);\ndisplay: flex; align-items: center; justify-content: space-between; gap: 14px;\n}\n.fmstr-cmp-gfs-faq__item summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-gfs-faq__item summary::after {\ncontent: \"+\"; flex-shrink: 0;\nwidth: 24px; height: 24px; border-radius: 6px;\ndisplay: grid; place-items: center;\nbackground: var(--c-tint); color: var(--c-violet-600);\nfont-size: 16px; font-weight: 700; transition: transform .2s ease;\n}\n.fmstr-cmp-gfs-faq__item[open] summary::after { content: \"−\"; transform: rotate(180deg); }\n.fmstr-cmp-gfs-faq__answer {\npadding: 0 22px 18px;\nfont-size: 15.5px; line-height: 1.65; color: var(--c-fg-2);\n}\n.fmstr-cmp-gfs-faq__answer a { color: var(--c-violet-600) !important; font-weight: 500; }\n.fmstr-cmp-gfs-faq__answer a:hover { text-decoration: underline !important; }\n\n@media (max-width: 600px) {\n.fmstr-cmp-gfs-faq { padding: 40px 16px; }\n.fmstr-cmp-gfs-faq__item summary { padding: 16px 18px; font-size: 15.5px; }\n.fmstr-cmp-gfs-faq__answer { padding: 0 18px 16px; font-size: 15px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-gfs-faq\" aria-labelledby=\"fmstr-cmp-gfs-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-gfs-faq__h2\" id=\"fmstr-cmp-gfs-faq-h2\">Google Forms sections FAQ\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-gfs-faq__intro\">Answers that mirror the FAQPage JSON-LD on the live page.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>How do I add sections in Google Forms?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Open your form, click the Add section button (rightmost icon in the right-side toolbar), drag questions into the new section, name the section, and add a description. Repeat for each section.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>Can Google Forms route users to different sections based on answers?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Yes. In a multiple-choice question, click the three-dot menu, choose Go to section based on answer, and map each answer to a section. Different answers route the respondent to different parts of the form.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>How many sections can a Google Form have?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">There's no official limit but performance degrades past about 20 sections. For long branching forms with more than 15-20 sections, consider a dedicated form builder.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>Can I reorder sections in Google Forms?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Yes. Click the three-dot menu on the section header and choose Move section. Drag to the new position. All questions in that section move with it.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>How do I delete a section in Google Forms?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Click the three-dot menu on the section header and choose Delete section. You can either delete the section and all its questions, or merge the questions into the previous section.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>Can sections be conditional in Google Forms?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Sections themselves are not conditional, but you can route to or skip past sections using Go to section based on answer logic on multiple-choice or dropdown questions.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>What's the difference between sections and pages in Google Forms?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">In Google Forms, sections are pages, each section becomes a separate page in the live form. Respondents click Next to move between sections.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>Can I hide questions in Google Forms based on a section answer?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Google Forms can route to a different section based on an answer, but cannot conditionally hide individual questions within a section. For per-question conditional logic, use \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fconditional-logic\u002F\">Formester\u003C\u002Fa>.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>How do I share a Google Form with sections?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">Click Send in the top right, copy the link, and share. Sections are preserved automatically; respondents see each section in turn as they click Next.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-gfs-faq__item\">\n\u003Csummary>Is there a better alternative for forms with many sections?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-gfs-faq__answer\">\u003Ca href=\"https:\u002F\u002Fformester.com\u002F\">Formester\u003C\u002Fa> supports unlimited sections, per-question conditional logic, multi-step UX, and branded styling. Worth considering when Google Forms hits its routing limits.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-gfs-rel a { text-decoration: none !important; }\n.fmstr-cmp-gfs-rel {\n--c-bg: transparent;\n--c-card: #ffffff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-border: #eaecf0;\n\nbackground: var(--c-bg);\npadding: 8px 0 0;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-gfs-rel *, .fmstr-cmp-gfs-rel *::before, .fmstr-cmp-gfs-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-gfs-rel__container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }\n\n.fmstr-cmp-gfs-rel__head { margin: 0 0 28px; max-width: 760px; }\n.fmstr-cmp-gfs-rel__eyebrow {\ndisplay: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;\ncolor: var(--c-violet-600); background: #f4ebff;\npadding: 4px 10px; border-radius: 9999px; margin: 0 0 12px;\n}\n.fmstr-cmp-gfs-rel__h2 {\nfont-size: clamp(22px, 2.4vw, 28px) !important;\nfont-weight: 700 !important;\nline-height: 1.2 !important;\nletter-spacing: -.02em !important;\nmargin: 0 !important;\nmargin-top: 0 !important;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-gfs-rel__intro {\ncolor: var(--c-fg-3);\nfont-size: 15px !important;\nline-height: 1.5 !important;\nmargin: 8px 0 0 !important;\nmargin-bottom: 0 !important;\n}\n\n.fmstr-cmp-gfs-rel__grid {\ndisplay: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;\nalign-items: start;\nmargin: 0;\n}\n\n.fmstr-cmp-gfs-rel__card {\ndisplay: flex; align-items: center; gap: 12px;\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 12px;\npadding: 12px 14px;\ncolor: inherit !important; text-decoration: none !important;\ntransition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;\nmin-width: 0;\nposition: relative;\n}\n.fmstr-cmp-gfs-rel__card:hover {\nborder-color: #d6c5fa;\nbackground: #fbfaff;\nbox-shadow: 0 4px 16px rgba(105, 65, 198, 0.08);\ntransform: translateY(-1px);\n}\n\n.fmstr-cmp-gfs-rel__icon {\nflex-shrink: 0;\nwidth: 36px; height: 36px;\ndisplay: grid; place-items: center;\nbackground: linear-gradient(135deg, var(--c-tint) 0%, #efe4ff 100%);\nborder: 1px solid var(--c-edge);\nborder-radius: 8px;\ncolor: var(--c-violet-600);\n}\n.fmstr-cmp-gfs-rel__icon svg { width: 18px; height: 18px; }\n\n.fmstr-cmp-gfs-rel__text { flex: 1; min-width: 0; }\n.fmstr-cmp-gfs-rel__title {\nfont-size: 14.5px !important;\nfont-weight: 600 !important;\ncolor: var(--c-fg-1);\nline-height: 1.3 !important;\nmargin: 0 0 2px !important;\nmargin-top: 0 !important;\nletter-spacing: -.005em;\ndisplay: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;\noverflow: hidden;\n}\n.fmstr-cmp-gfs-rel__sub {\nfont-size: 12.5px !important;\nline-height: 1.4 !important;\ncolor: var(--c-fg-3);\nmargin: 0 !important;\nmargin-bottom: 0 !important;\ndisplay: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;\noverflow: hidden;\n}\n\n.fmstr-cmp-gfs-rel__arrow {\nflex-shrink: 0;\nwidth: 22px; height: 22px;\ndisplay: grid; place-items: center;\ncolor: var(--c-violet-600);\nfont-size: 14px; font-weight: 700;\ntransition: transform .15s ease;\n}\n.fmstr-cmp-gfs-rel__card:hover .fmstr-cmp-gfs-rel__arrow { transform: translateX(3px); }\n\n@media (max-width: 560px) {\n.fmstr-cmp-gfs-rel { padding: 8px 0 0; }\n.fmstr-cmp-gfs-rel__grid { grid-template-columns: 1fr; gap: 10px; }\n.fmstr-cmp-gfs-rel__card { padding: 12px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-gfs-rel\" aria-labelledby=\"fmstr-cmp-gfs-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__head\">\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__eyebrow\">More on Formester\u003C\u002Fdiv>\n\u003Ch2 class=\"fmstr-cmp-gfs-rel__h2\" id=\"fmstr-cmp-gfs-rel-h2\">Go farther than Google Forms sections\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-gfs-rel__intro\">Conditional logic, multi-step UX, and AI-assisted form building, all in one place.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fconditional-logic\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"6 3 6 21\"\u002F>\u003Cpolyline points=\"18 3 18 9\"\u002F>\u003Cpath d=\"M6 9c0 6 12 6 12 12\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Conditional logic\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Per-question branching\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-form-generator\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\"\u002F>\u003Cpath d=\"m14 7 3 3\"\u002F>\u003Cpath d=\"M5 6v4\"\u002F>\u003Cpath d=\"M19 14v4\"\u002F>\u003Cpath d=\"M10 2v2\"\u002F>\u003Cpath d=\"M7 8H3\"\u002F>\u003Cpath d=\"M21 16h-4\"\u002F>\u003Cpath d=\"M11 3H9\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">AI Form Generator\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Forms from one prompt\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-add-conditional-questions-in-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Conditional questions\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Section branching how-to\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-a-questionnaire-in-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\u002F>\u003Cpolyline points=\"14 2 14 8 20 8\"\u002F>\u003Cline x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\"\u002F>\u003Cline x1=\"9\" y1=\"17\" x2=\"15\" y2=\"17\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Questionnaire guide\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Step-by-step build\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-a-survey-in-google-forms-using-chat-gpt\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z\"\u002F>\u003Cpath d=\"M20 3v4\"\u002F>\u003Cpath d=\"M22 5h-4\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Survey with ChatGPT\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">AI-assisted survey build\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-a-poll-on-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 3v18h18\"\u002F>\u003Cpath d=\"M7 17V11\"\u002F>\u003Cpath d=\"M12 17V7\"\u002F>\u003Cpath d=\"M17 17v-4\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Poll in Google Forms\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Quick how-to\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-create-signup-sheets-in-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\u002F>\u003Cline x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\u002F>\u003Cline x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\u002F>\u003Cline x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Signup sheets\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Template plus walkthrough\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-ways-to-view-responses-in-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 3v16a2 2 0 0 0 2 2h16\"\u002F>\u003Cpath d=\"M7 16V8\"\u002F>\u003Cpath d=\"M12 16V4\"\u002F>\u003Cpath d=\"M17 16v-4\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">5 ways to view responses\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Summary, sheet, CSV\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-gfs-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fsurvey-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-gfs-rel__icon\" aria-hidden=\"true\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fsvg>\n\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-gfs-rel__text\">\n\u003Ch3 class=\"fmstr-cmp-gfs-rel__title\">Survey templates\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-gfs-rel__sub\">Browse the gallery\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-gfs-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003C!-- FAQPage -->\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n        { \"@type\": \"Question\", \"name\": \"How do I add sections in Google Forms?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Open your form, click the Add section button (rightmost icon in the right-side toolbar), drag questions into the new section, name the section, and add a description. Repeat for each section.\" } },\n        { \"@type\": \"Question\", \"name\": \"Can Google Forms route users to different sections based on answers?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes. In a multiple-choice question, click the three-dot menu, choose Go to section based on answer, and map each answer to a section. Different answers route the respondent to different parts of the form.\" } },\n        { \"@type\": \"Question\", \"name\": \"How many sections can a Google Form have?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"There's no official limit but performance degrades past about 20 sections. For long branching forms with more than 15-20 sections, consider a dedicated form builder.\" } },\n        { \"@type\": \"Question\", \"name\": \"Can I reorder sections in Google Forms?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Yes. Click the three-dot menu on the section header and choose Move section. Drag to the new position. All questions in that section move with it.\" } },\n        { \"@type\": \"Question\", \"name\": \"How do I delete a section in Google Forms?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Click the three-dot menu on the section header and choose Delete section. You can either delete the section and all its questions, or merge the questions into the previous section.\" } },\n        { \"@type\": \"Question\", \"name\": \"Can sections be conditional in Google Forms?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Sections themselves are not conditional, but you can route to or skip past sections using Go to section based on answer logic on multiple-choice or dropdown questions.\" } },\n        { \"@type\": \"Question\", \"name\": \"What's the difference between sections and pages in Google Forms?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"In Google Forms, sections are pages \\u2014 each section becomes a separate page in the live form. Respondents click Next to move between sections.\" } },\n        { \"@type\": \"Question\", \"name\": \"Can I hide questions in Google Forms based on a section answer?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Google Forms can route to a different section based on an answer, but cannot conditionally hide individual questions within a section. For per-question conditional logic, use Formester.\" } },\n        { \"@type\": \"Question\", \"name\": \"How do I share a Google Form with sections?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Click Send in the top right, copy the link, and share. Sections are preserved automatically; respondents see each section in turn as they click Next.\" } },\n        { \"@type\": \"Question\", \"name\": \"Is there a better alternative for forms with many sections?\", \"acceptedAnswer\": { \"@type\": \"Answer\", \"text\": \"Formester supports unlimited sections, per-question conditional logic, multi-step UX, and branded styling. Worth considering when Google Forms hits its routing limits.\" } }\n  ]\n}\n\u003C\u002Fscript>\n\n\n\u003C!-- Article -->\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"Article\",\n  \"headline\": \"How to Create Sections in Google Forms (5 Steps + Conditional Redirect)\",\n  \"description\": \"Add sections in Google Forms in 5 steps, then route respondents to different sections based on their answers. Screenshots + 60-second video. Free.\",\n  \"image\": \"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-create-form-sections-in-google-forms\u002Fpreview.png\",\n  \"author\": { \"@type\": \"Person\", \"name\": \"Harish Kumar\", \"url\": \"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F\" },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"Formester\", \"logo\": { \"@type\": \"ImageObject\", \"url\": \"https:\u002F\u002Fformester.com\u002Flogo.svg\" } },\n  \"datePublished\": \"2025-05-15\",\n  \"dateModified\": \"2026-05-29\"\n}\n\u003C\u002Fscript>\n\n\n\u003C!-- BreadcrumbList -->\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Fformester.com\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Blog\", \"item\": \"https:\u002F\u002Fformester.com\u002Fblog\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Form Sections in Google Forms\", \"item\": \"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-create-form-sections-in-google-forms\u002F\" }\n  ]\n}\n\u003C\u002Fscript>\n\n\n\u003C!-- VideoObject -->\n\u003Cscript type=\"application\u002Fld+json\">\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"VideoObject\",\n  \"name\": \"How to Create Sections in Google Forms (5 Steps + Conditional Redirect)\",\n  \"description\": \"Add sections in Google Forms in 5 steps, then route respondents to different sections based on their answers. Screenshots + 60-second video. Free.\",\n  \"thumbnailUrl\": \"https:\u002F\u002Fimg.youtube.com\u002Fvi\u002FpuP1xvmSDBM\u002Fmaxresdefault.jpg\",\n  \"uploadDate\": \"2025-05-15\",\n  \"contentUrl\": \"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=puP1xvmSDBM\",\n  \"embedUrl\": \"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpuP1xvmSDBM\"\n}\n\u003C\u002Fscript>\n","blog\u002Fblog\u002Fhow-create-form-sections-in-google-forms.md",{"text":67},"8 min read",{"title":69,"author":70,"authorImage":8,"authorProfile":71,"coverImg":72,"coverImgAlt":73,"createdAt":74,"description":75,"featured":14,"jsonld":76,"keywords":164,"metaDescription":97,"metaImage":165,"metaTitle":91,"publishedAt":166,"slug":167,"updatedAt":168,"__hash__":169,"body":170,"id":171,"coverImgWidth":172,"coverImgHeight":173,"readingStats":174},"How to Collect Email Addresses in Google Forms","Harsh Shah","https:\u002F\u002Flinkedin.com\u002Fin\u002Fharshshahseo","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fcollect_email_address_google_form_cover_448e30e1fd.png","Blog cover showing a laptop with a form email field marked by a green check, beside an envelope with a padlock","2026-08-25T07:43:20.603Z","Google Forms does not record email addresses until you switch the setting on. Here is where it lives, the difference between Verified and Responder input, who can see the addresses you collect, and how to get verified emails without forcing a Google sign-in.",[77],{"@context":78,"@graph":79},"https:\u002F\u002Fschema.org",[80,88,99,112,120,154],{"@id":81,"url":82,"logo":83,"name":86,"@type":87},"https:\u002F\u002Fformester.com\u002F#organization","https:\u002F\u002Fformester.com\u002F",{"url":84,"@type":85},"https:\u002F\u002Fformester.com\u002Flogo.png","ImageObject","Formester","Organization",{"@id":89,"url":90,"name":91,"@type":92,"isPartOf":93,"breadcrumb":94,"inLanguage":96,"description":97,"dateModified":98,"datePublished":98},"https:\u002F\u002Fformester.com\u002Fblog\u002Fcollect-email-address-google-form\u002F#webpage","https:\u002F\u002Fformester.com\u002Fblog\u002Fcollect-email-address-google-form\u002F","How to Collect Email Addresses in Google Forms | Formester","WebPage",{"@id":81},{"@id":95},"https:\u002F\u002Fformester.com\u002Fblog\u002Fcollect-email-address-google-form\u002F#breadcrumb","en-US","Collect email addresses in a Google Form in three clicks. What Verified and Responder input actually do, and which one forces a Google sign-in.","2026-08-25",{"@id":95,"@type":100,"itemListElement":101},"BreadcrumbList",[102,106,110],{"item":82,"name":103,"@type":104,"position":105},"Home","ListItem",1,{"item":107,"name":108,"@type":104,"position":109},"https:\u002F\u002Fformester.com\u002Fblog\u002F","Blog",2,{"item":90,"name":69,"@type":104,"position":111},3,{"@id":113,"@type":114,"image":72,"author":115,"headline":69,"keywords":117,"publisher":118,"inLanguage":96,"description":75,"dateModified":98,"datePublished":98,"mainEntityOfPage":119},"https:\u002F\u002Fformester.com\u002Fblog\u002Fcollect-email-address-google-form\u002F#article","BlogPosting",{"url":71,"name":70,"@type":116},"Person","collect email address google form, collect email addresses google forms, google form collect email address automatically, collect email address google form free, collect email addresses by default meaning, how to hide email in google form, google forms mailing list, google forms verified vs responder input, stop google form collecting email addresses",{"@id":81},{"@id":89},{"@id":121,"@type":122,"mainEntity":123},"https:\u002F\u002Fformester.com\u002Fblog\u002Fcollect-email-address-google-form\u002F#faq","FAQPage",[124,130,134,138,142,146,150],{"name":125,"@type":126,"acceptedAnswer":127},"What does it mean to collect email addresses in Google Forms?","Question",{"text":128,"@type":129},"It means the form records each respondent's email address alongside their answers, in its own column. The address comes either from the Google account someone is signed in with, or from what they type, depending on the mode you chose. It is switched off by default, so a form collects nothing until you change the setting.","Answer",{"name":131,"@type":126,"acceptedAnswer":132},"What is the difference between the Verified and Responder input settings?",{"text":133,"@type":129},"Verified takes the address from the Google account the respondent is signed in with, which means signing in is compulsory. The address cannot be mistyped or faked, because Google supplies it rather than the person. Responder input asks the respondent to type their address and needs no account at all. It reaches everybody, but nothing checks that the address is genuine or even spelled correctly.",{"name":135,"@type":126,"acceptedAnswer":136},"How do I stop a Google Form from collecting email addresses?",{"text":137,"@type":129},"In Settings, expand the Responses section. Set Collect email addresses back to Do not collect, and new submissions arrive without an address from that point on. Responses you have already received keep the addresses they captured, so switching it off is not retroactive.",{"name":139,"@type":126,"acceptedAnswer":140},"Can people see your email address on Google Forms?",{"text":141,"@type":129},"Other respondents cannot. Only people with edit access to the form or to the linked response spreadsheet can read the addresses collected. Respondents do not see the form owner's address while filling in a form either. It appears at the top when you preview your own form, which is a view only you get.",{"name":143,"@type":126,"acceptedAnswer":144},"Can Google Forms collect email addresses automatically?",{"text":145,"@type":129},"Yes, with the Verified mode. Google pulls the address from the signed-in account without the respondent typing anything, and the form will not accept a submission from someone who is not signed in. Responder input is the manual version, where the respondent enters the address themselves.",{"name":147,"@type":126,"acceptedAnswer":148},"Is collecting email addresses in Google Forms free?",{"text":149,"@type":129},"Yes. Both collection modes are part of the standard free Google Forms feature set, with no add-on or upgrade needed. What costs money is verifying that a typed address genuinely belongs to the person, which Google Forms only does by requiring a Google account.",{"name":151,"@type":126,"acceptedAnswer":152},"How do I hide an email address in a Google Form?",{"text":153,"@type":129},"There is no setting that collects an address while hiding it from your own response data, because collecting it and seeing it are the same switch. If you do not want the address, set the dropdown to Do not collect. To limit who else sees it, tighten the sharing permissions on the form and on its response spreadsheet.",{"@id":155,"url":82,"name":86,"@type":156,"offers":157,"operatingSystem":162,"applicationCategory":163},"https:\u002F\u002Fformester.com\u002F#software","SoftwareApplication",{"@type":158,"price":159,"description":160,"priceCurrency":161},"Offer","0","Free forever plan, no credit card required","USD","Web, iOS, Android","BusinessApplication","collect email address google form,collect email addresses google forms,google form collect email address automatically,collect email address google form free,collect email addresses by default meaning,how to hide email in google form,google forms mailing list,google forms verified vs responder input,stop google form collecting email addresses",[],"2026-08-26T05:25:30.352Z","collect-email-address-google-form","2026-08-26T05:25:30.357Z","p1J1jGC7ZyAbLoeU2qWIdwFQrtSjD85Sbdm5jq7RrkE","![Blog cover showing a laptop with a form email field marked by a green check, beside an envelope with a padlock](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fcollect_email_address_google_form_cover_448e30e1fd.png)\n\n\u003Cp style=\"font-size: inherit;\">Google Forms will not record anyone's email address unless you tell it to. The setting ships switched off, which catches out plenty of people who assumed every response arrived with a name attached.\u003C\u002Fp>\n\n\u003Cp>Switching it on takes about four seconds. Choosing between the two collection modes is the part worth a moment's thought, because one of them makes a Google account mandatory for every single respondent.\u003C\u002Fp>\n\n\u003Cblockquote>\u003Cp>The control sits under \u003Cstrong>Settings\u003C\u002Fstrong>, in the \u003Cstrong>Responses\u003C\u002Fstrong> section. \u003Cstrong>Verified\u003C\u002Fstrong> takes the address from the account someone is signed in with, and forces that sign-in. \u003Cstrong>Responder input\u003C\u002Fstrong> lets them type it, with no account needed and no check that it is real.\u003C\u002Fp>\u003C\u002Fblockquote>\n\n\u003Ch2>Where the setting lives\u003C\u002Fh2>\n\n\u003Cp>The email option is not in the question editor, which is where most people go looking. It sits in form-level settings, one section down.\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Click \u003Cstrong>Settings\u003C\u002Fstrong> in the top bar, beside Questions and Responses.\u003C\u002Fli>\n\u003Cli>Expand the \u003Cstrong>Responses\u003C\u002Fstrong> section.\u003C\u002Fli>\n\u003Cli>Open the \u003Cstrong>Collect email addresses\u003C\u002Fstrong> dropdown and pick a mode.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>Fresh out of the box it reads \u003Cstrong>Do not collect\u003C\u002Fstrong>. Look at the row directly beneath it: \u003Cstrong>Send responders a copy of their response\u003C\u002Fstrong> is greyed out, and Google spells out why with \u003Cem>Requires Collect email addresses\u003C\u002Fem>.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgforms_ce1_do_not_collect_default_e320bd5132.jpg\" alt=\"Google Forms Settings Responses section with Collect email addresses set to Do not collect and Send responders a copy greyed out\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cp>There is no save button. Your choice applies the moment you make it, and the form itself picks up a line confirming what changed.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgforms_ce0_collecting_notice_543285f277.png\" alt=\"Google Forms editor showing the notice this form is automatically collecting emails from all respondents with a Change settings link\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cp>That notice appears in the editor only. It is the quickest way to confirm collection is on without opening Settings a second time.\u003C\u002Fp>\n\n\u003Ch2>Verified or Responder input: which one should you pick?\u003C\u002Fh2>\n\n\u003Cp>Both modes put an address in your response sheet. What separates them is who vouches for that address.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgforms_ce2_three_options_3be2bc9e4a.jpg\" alt=\"Collect email addresses dropdown open in Google Forms showing Do not collect, Verified and Responder input\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth> \u003C\u002Fth>\u003Cth>Verified\u003C\u002Fth>\u003Cth>Responder input\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Where the address comes from\u003C\u002Ftd>\u003Ctd>The signed-in Google account\u003C\u002Ftd>\u003Ctd>Typed by the respondent\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Google account required\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Can it be mistyped\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Can someone enter an address that is not theirs\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Suits a public audience\u003C\u002Ftd>\u003Ctd>Only if everyone has a Google account\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\u003Cp>Choose \u003Cstrong>Verified\u003C\u002Fstrong> and Google states the cost right under the dropdown: \u003Cem>Respondents will be required to sign in to Google\u003C\u002Fem>.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgforms_ce3_verified_signin_064d490149.jpg\" alt=\"Collect email addresses set to Verified in Google Forms with the note respondents will be required to sign in to Google\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cp>That one line is the entire trade-off. Inside a school or a company already on Google Workspace, it buys you accurate addresses for nothing.\u003C\u002Fp>\n\n\u003Cp>On a public signup form it becomes a wall. Anyone without a Google account, or signed into the wrong one, stops there and never submits.\u003C\u002Fp>\n\n\u003Cp>Sign-in requirements ripple further than this one setting, and \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-enable-access-for-google-forms\u002F\">how form access works in Google Forms\u003C\u002Fa> covers the rest of them.\u003C\u002Fp>\n\n\u003Ch2>How to stop collecting email addresses\u003C\u002Fh2>\n\n\u003Cp>Set the same dropdown back to \u003Cstrong>Do not collect\u003C\u002Fstrong>. Responses already in your sheet keep the addresses they captured, so turning it off does not reach backwards.\u003C\u002Fp>\n\n\u003Cp>That detail matters if you promised anonymity partway through a survey.\u003C\u002Fp>\n\n\u003Cp>The setting alone will not get you there either, since a name or an employee ID question identifies someone just as well. Our guide to \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-anonymous-google-form-or-survey\u002F\">making a Google Form anonymous\u003C\u002Fa> covers the questions you need to strip out.\u003C\u002Fp>\n\n\u003Ch2>Can people see your email address on Google Forms?\u003C\u002Fh2>\n\n\u003Cp>Respondents cannot see each other's addresses. Response data is visible to people with edit access to the form or to the linked spreadsheet, and to nobody else.\u003C\u002Fp>\n\n\u003Cp>Your own address is a separate question. Respondents do not see the form owner's email while filling anything in, but it does show at the top when you preview your own form, which is what convinces people it is public.\u003C\u002Fp>\n\n\u003Cp>There is no toggle that collects an address and then hides it from your responses. Collection and visibility are the same switch, so if you need the submission without the identity, do not collect the address at all.\u003C\u002Fp>\n\n\u003Cp>What you can control is who else gets to read it. Response data inherits the sharing permissions of the form and its spreadsheet, so the fix for exposure is access control rather than a hide button.\u003C\u002Fp>\n\n\u003Ch2>Can you use the responses as a mailing list?\u003C\u002Fh2>\n\n\u003Cp>Yes, and it is the most common reason people turn the setting on in the first place.\u003C\u002Fp>\n\n\u003Cp>Addresses arrive in an Email address column alongside every other answer, ready to export. If responses are not reaching a spreadsheet yet, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-to-google-sheets\u002F\">connecting Google Forms to Google Sheets\u003C\u002Fa> sorts that out.\u003C\u002Fp>\n\n\u003Cp>Switching collection on also frees up the row underneath it, where you can send each respondent a receipt of what they submitted.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgforms_ce4_send_copy_options_ca06308d16.jpg\" alt=\"Send responders a copy of their response dropdown in Google Forms showing Off, When requested and Always\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>When requested\u003C\u002Fstrong> adds a checkbox to the form so respondents opt in to their own copy.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Always\u003C\u002Fstrong> sends the receipt on every submission, which is the closest Google Forms gets to a confirmation step.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Two cautions before you treat any of this as a subscriber list. Google Forms gives you no consent checkbox and no unsubscribe link, so an explicit opt-in question is on you to add, worded specifically enough that people know what they agreed to.\u003C\u002Fp>\n\n\u003Cp>If a mailing list is the actual goal, a purpose-built \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fnewsletter-signup-27615\u002F\">newsletter signup form\u003C\u002Fa> starts you closer than a repurposed survey.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-blog-cta\">\n\u003Cp>\u003Cstrong>Want addresses you can actually email?\u003C\u002Fstrong> Formester sends a one-time code to any address and only counts the submission once it checks out, with no Google account in the way.\u003C\u002Fp>\n\u003Cp>\u003Ca class=\"fmstr-blog-cta__btn\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Try it free\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp class=\"fmstr-blog-cta__meta\">Free plan available · No credit card · Email Verification on the Personal plan\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2>Where email collection in Google Forms runs out\u003C\u002Fh2>\n\n\u003Cp>Turning the setting on gets you a column of text. It does not get you a column of working addresses, and the distance between those two things is where most collected lists quietly fall apart.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>A typo sails straight through.\u003C\u002Fstrong> Responder input accepts anything shaped like an email, so \u003Cem>jhon@gmial.com\u003C\u002Fem> lands in your sheet looking perfectly respectable.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Nothing proves ownership.\u003C\u002Fstrong> Someone can type your address, a colleague's, or an invented one, and the submission counts all the same.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Deduplication needs sign-in.\u003C\u002Fstrong> The \u003Cem>Limit to 1 response\u003C\u002Fem> toggle sits under a heading that reads REQUIRES SIGN IN, so stopping repeat entries means making Verified compulsory.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Verified solves the first two problems by demanding a Google account, which is the trade the whole feature revolves around. Accuracy or reach, and you only get to pick one.\u003C\u002Fp>\n\n\u003Cp>Junk entries are a related headache once a form is public, and \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">form spam protection\u003C\u002Fa> deals with the bot side of it.\u003C\u002Fp>\n\n\u003Ch2>How to collect verified emails without a Google account\u003C\u002Fh2>\n\n\u003Cp>Formester handles this on the field rather than the form, and that is precisely why no Google account is involved. Verification attaches to the email question itself.\u003C\u002Fp>\n\n\u003Cp>Click the email field in the builder and open the \u003Cstrong>Advanced\u003C\u002Fstrong> tab.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fformester_f1_email_advanced_tab_301a477d61.jpg\" alt=\"Formester form builder with an email field selected and the Advanced tab open in the right panel\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cp>Three separate toggles live there, each aimed at a different one of the gaps above.\u003C\u002Fp>\n\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fformester_f2_unique_confirmation_validation_5b5778e6c4.png\" alt=\"Formester email field Advanced settings showing the Unique, Email Confirmation and Email Validation toggles\" loading=\"lazy\" style=\"width:100%;max-width:900px;height:auto;border-radius:8px;border:1px solid #e5e7eb;margin:16px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cstrong>Email Confirmation\u003C\u002Fstrong> emails a one-time code and only accepts the submission once the code matches. This is the ownership check Google Forms has no equivalent for without sign-in.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Email Validation\u003C\u002Fstrong> tests deliverability while the respondent is still on the form, so dead domains get caught before they reach your results.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Unique\u003C\u002Fstrong> allows one submission per address, and it does that without asking anyone to log in anywhere.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The code arrives by email and gets typed back into the form, so nobody leaves the page to hunt down a confirmation link. Our \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Femail-verification\u002F\">email verification feature page\u003C\u002Fa> walks through the full flow.\u003C\u002Fp>\n\n\u003Cp>One honest caveat. Email Verification is a Personal plan feature at $13 a month, or $12 a month billed annually, so it is not the free answer.\u003C\u002Fp>\n\n\u003Cp>If everyone filling in your form already sits on the same Google Workspace domain, Verified in Google Forms does an equivalent job at no cost. Use that instead.\u003C\u002Fp>\n\n\u003Cp>Paying for verification earns its keep when your audience is the general public, where a Google account cannot be assumed.\u003C\u002Fp>\n\n\u003Ch2>Frequently asked questions\u003C\u002Fh2>\n\n\u003Csection class=\"faq\">\n\u003Cdetails>\u003Csummary>What does it mean to collect email addresses in Google Forms?\u003C\u002Fsummary>\u003Cp>It means the form records each respondent's email address alongside their answers, in its own column. The address comes either from the Google account someone is signed in with, or from what they type, depending on the mode you chose.\u003C\u002Fp>\u003Cp>It is switched off by default, so a form collects nothing until you change the setting.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What is the difference between the Verified and Responder input settings?\u003C\u002Fsummary>\u003Cp>Verified takes the address from the Google account the respondent is signed in with, which means signing in is compulsory. The address cannot be mistyped or faked, because Google supplies it rather than the person.\u003C\u002Fp>\u003Cp>Responder input asks the respondent to type their address and needs no account at all. It reaches everybody, but nothing checks that the address is genuine or even spelled correctly.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I stop a Google Form from collecting email addresses?\u003C\u002Fsummary>\u003Cp>In Settings, expand the Responses section. Set Collect email addresses back to Do not collect, and new submissions arrive without an address from that point on.\u003C\u002Fp>\u003Cp>Responses you have already received keep the addresses they captured, so switching it off is not retroactive.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can people see your email address on Google Forms?\u003C\u002Fsummary>\u003Cp>Other respondents cannot. Only people with edit access to the form or to the linked response spreadsheet can read the addresses collected.\u003C\u002Fp>\u003Cp>Respondents do not see the form owner's address while filling in a form either. It appears at the top when you preview your own form, which is a view only you get.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can Google Forms collect email addresses automatically?\u003C\u002Fsummary>\u003Cp>Yes, with the Verified mode. Google pulls the address from the signed-in account without the respondent typing anything, and the form will not accept a submission from someone who is not signed in.\u003C\u002Fp>\u003Cp>Responder input is the manual version, where the respondent enters the address themselves.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Is collecting email addresses in Google Forms free?\u003C\u002Fsummary>\u003Cp>Yes. Both collection modes are part of the standard free Google Forms feature set, with no add-on or upgrade needed.\u003C\u002Fp>\u003Cp>What costs money is verifying that a typed address genuinely belongs to the person, which Google Forms only does by requiring a Google account.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I hide an email address in a Google Form?\u003C\u002Fsummary>\u003Cp>There is no setting that collects an address while hiding it from your own response data, because collecting it and seeing it are the same switch. If you do not want the address, set the dropdown to Do not collect.\u003C\u002Fp>\u003Cp>To limit who else sees it, tighten the sharing permissions on the form and on its response spreadsheet.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n\u003Ch2>Related reading\u003C\u002Fh2>\n\n\u003Cp>More on getting clean, usable data out of a form.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-build-spam-free-contact-forms-for-your-website\u002F\">\u003Cstrong>How to build spam-free contact forms\u003C\u002Fstrong>\u003C\u002Fa> - keeping bots and throwaway addresses out of a public form.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-tips-and-tricks\u002F\">\u003Cstrong>Google Forms tips and tricks\u003C\u002Fstrong>\u003C\u002Fa> - settings worth knowing beyond the response section.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fmailing-list-contact-form-6536\u002F\">\u003Cstrong>Mailing list contact form template\u003C\u002Fstrong>\u003C\u002Fa> - a signup form with consent wording already in place.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fwhy-formester-is-the-best-google-forms-alternative\u002F\">\u003Cstrong>Why teams move off Google Forms\u003C\u002Fstrong>\u003C\u002Fa> - an honest look at where it stops being the right tool.\u003C\u002Fli>\n\u003C\u002Ful>\n","blog\u002Fblog\u002Fcollect-email-address-google-form.md",2400,1350,{"text":175},"10 min read",{"title":177,"author":70,"authorImage":178,"authorProfile":179,"coverImg":180,"coverImgAlt":181,"createdAt":182,"description":183,"featured":14,"jsonld":184,"keywords":296,"metaDescription":183,"metaImage":297,"metaTitle":192,"publishedAt":182,"slug":298,"updatedAt":182,"__hash__":299,"body":300,"id":301,"coverImgWidth":172,"coverImgHeight":173,"readingStats":302},"Evaluation Forms in Google Forms (and Where Scoring Breaks)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F41fc6df7f8a7952a_harsh-shah.jpg","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharshshahseo\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F01107b1bf89ba68f_google-form-evaluation.jpg","Cover art for a guide to building evaluation forms in Google Forms","2026-08-27T00:00:00.000Z","Build an employee, course or skills evaluation in Google Forms using rating scales and grids, and see exactly where its scoring and anonymity run out.",[185],{"@context":78,"@graph":186},[187,189,197,202,231,270,294],{"@type":87,"@id":81,"url":82,"name":86,"logo":188},{"@type":85,"url":84},{"@type":92,"@id":190,"url":191,"name":192,"isPartOf":193,"breadcrumb":194,"inLanguage":96,"description":183,"datePublished":196,"dateModified":196},"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F#webpage","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F","Evaluation Forms in Google Forms: Full Guide",{"@id":81},{"@id":195},"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F#breadcrumb","2026-08-27",{"@type":100,"@id":195,"itemListElement":198},[199,200,201],{"@type":104,"position":105,"name":103,"item":82},{"@type":104,"position":109,"name":108,"item":107},{"@type":104,"position":111,"name":177,"item":191},{"@type":114,"@id":203,"headline":177,"image":180,"author":204,"publisher":205,"inLanguage":96,"description":183,"datePublished":196,"dateModified":196,"mainEntityOfPage":206,"about":207,"mentions":212,"citation":217},"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F#article",{"@type":116,"name":70,"url":179,"image":178},{"@id":81},{"@id":190},[208],{"@type":156,"name":209,"applicationCategory":163,"url":210,"operatingSystem":211},"Google Forms","https:\u002F\u002Fdocs.google.com\u002Fforms\u002F","Web",[213,214],{"@id":155},{"@type":156,"name":215,"applicationCategory":163,"url":216,"operatingSystem":211},"Google Sheets","https:\u002F\u002Fdocs.google.com\u002Fspreadsheets\u002F",[218,223,227],{"@type":92,"name":219,"url":220,"publisher":221},"Choose a type of question for your form","https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7322334",{"@type":87,"name":222},"Google",{"@type":92,"name":224,"url":225,"publisher":226},"Create & grade quizzes with Google Forms","https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7032287",{"@type":87,"name":222},{"@type":92,"name":228,"url":229,"publisher":230},"Publish & share your form with responders","https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F2839588",{"@type":87,"name":222},{"@type":122,"@id":232,"mainEntity":233},"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F#faq",[234,238,242,246,250,254,258,262,266],{"@type":126,"name":235,"acceptedAnswer":236},"How do I make an evaluation form in Google Forms?",{"@type":129,"text":237},"Use a Multiple choice grid for the criteria, with one row per criterion and one column per rating label. Add a Linear scale for an overall score and a Paragraph field for comments. Mark the grid and the scale required, and leave the comment optional.",{"@type":126,"name":239,"acceptedAnswer":240},"Can Google Forms score an evaluation automatically?",{"@type":129,"text":241},"No. Google Forms has no calculation field, so nothing adds, averages or weights answers across questions. Quiz mode assigns points through an answer key, and an evaluation has no correct answer for the key to hold. Any total is calculated in the linked Google Sheet.",{"@type":126,"name":243,"acceptedAnswer":244},"How do I weight criteria differently in a Google Forms evaluation?",{"@type":129,"text":245},"Not in the form. Link a Google Sheet and put the weighting into a SUMPRODUCT formula there, multiplying each criterion column by its weight and dividing by the total weight. The form stays a collection tool.",{"@type":126,"name":247,"acceptedAnswer":248},"Can a course evaluation be anonymous and still stop repeat submissions?",{"@type":129,"text":249},"Not in Google Forms. Limit to 1 response requires every respondent to sign in to a Google Account, per Google's own documentation, so anyone without an account is locked out and nobody reading the form believes it is anonymous. A builder with anonymous submissions plus IP-based duplicate control handles both at once.",{"@type":126,"name":251,"acceptedAnswer":252},"What question type is best for evaluation criteria?",{"@type":129,"text":253},"The Multiple choice grid. One grid covers every criterion on a single consistent scale, which keeps the form short and makes the responses easier to compare than a dozen separate questions.",{"@type":126,"name":255,"acceptedAnswer":256},"What is the rating scale range in Google Forms?",{"@type":129,"text":257},"A Linear scale starts at zero or one and ends on any whole number from 2 to 10, according to Google's question-type documentation. Most evaluation forms use 1 to 5, and both ends should be labelled because an unlabelled 3 means different things to different people.",{"@type":126,"name":259,"acceptedAnswer":260},"How do I evaluate Google Form responses once they arrive?",{"@type":129,"text":261},"The Summary tab charts each question separately, which suits a cohort-wide evaluation. For per-person review, use the linked Sheet and keep your weighted total in a formula beside the name column.",{"@type":126,"name":263,"acceptedAnswer":264},"Is there an evaluation form template in Google Forms?",{"@type":129,"text":265},"One. The native gallery ships Course Evaluation under Education. There is no employee performance review and no skills assessment template, so those are built from a blank form or copied from a previous cycle.",{"@type":126,"name":267,"acceptedAnswer":268},"Can respondents see their own evaluation score?",{"@type":129,"text":269},"No. Google Forms cannot display a computed score on a non-quiz form, and it cannot send one afterwards. Sharing a result means emailing it manually, or using a builder that can show a calculated outcome on the confirmation screen.",{"@type":271,"@id":272,"name":273,"description":274,"step":275},"HowTo","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-evaluation\u002F#howto","Build an evaluation form in Google Forms","Use a grid, a linear scale and a paragraph field to collect an evaluation, then calculate the total in the linked Google Sheet.",[276,280,283,286,290],{"@type":277,"position":105,"name":278,"text":279},"HowToStep","Pick the evaluation type","Decide whether you are running a performance review, a course evaluation or a skills assessment, because each one hits a different limit first.",{"@type":277,"position":109,"name":281,"text":282},"Add a Multiple choice grid","Rows are your criteria, columns are the rating labels, and one grid replaces a dozen separate questions.",{"@type":277,"position":111,"name":284,"text":285},"Add a Linear scale","Use 1 to 5 for a single overall rating and label both ends so the midpoint means one thing.",{"@type":277,"position":287,"name":288,"text":289},4,"Add a Paragraph field","Prompt the comment rather than leaving it blank, and keep it optional.",{"@type":277,"position":291,"name":292,"text":293},5,"Link a Google Sheet for the total","Google Forms cannot calculate, so put the weighted average in a SUMPRODUCT formula in the linked Sheet.",{"@type":156,"@id":155,"url":82,"name":86,"applicationCategory":163,"operatingSystem":162,"offers":295},{"@type":158,"price":159,"priceCurrency":161,"description":160},"google form evaluation,evaluation form google forms,employee evaluation google form,course evaluation google form,student evaluation google form,google form performance review,google forms rating scale,google form evaluation template",[],"google-form-evaluation","QkpdI38X_73ZRVI5VltzTVdDoZWfamvX2yPXTMnuork","\n![Cover art for a guide to building evaluation forms in Google Forms](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F01107b1bf89ba68f_google-form-evaluation.jpg)\n\n\u003Cp style=\"font-size: inherit;\">An evaluation form in Google Forms is a rating sheet: a set of criteria, a scale to score each one against, and a box for the comment people actually read afterwards. It suits a manager running a review cycle, or an instructor collecting course feedback at the end of term. Coaches use it too, for scoring things they can watch happen. Where it stops suiting you is the moment the evaluation needs a total, because Google Forms has no field that works one out.\u003C\u002Fp>\n\n\u003Cdiv class=\"tldr\">\n\u003Cp>\u003Cstrong>Key facts\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Google Forms will collect an evaluation. It will not score one. Build the criteria as a Multiple choice grid, add a Linear scale for the overall rating and a Paragraph field for comments, then work out any weighted total in the linked Google Sheet. On anonymity you get one or the other: an anonymous form, or one response per person.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>4 question types built for rating:\u003C\u002Fstrong> Linear scale, Rating, Multiple choice grid and Checkbox grid (\u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7322334\" target=\"_blank\" rel=\"noopener\">Google Docs Editors Help\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Linear scale range:\u003C\u002Fstrong> starts at zero or one, ends on any whole number from 2 to 10 (\u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7322334\" target=\"_blank\" rel=\"noopener\">Google Docs Editors Help\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Fields that calculate a total: none.\u003C\u002Fstrong> Points attach only to an answer key in quiz mode (\u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7032287\" target=\"_blank\" rel=\"noopener\">Google Docs Editors Help\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Native evaluation templates: 1.\u003C\u002Fstrong> Course Evaluation, under Education\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Blocking repeat submissions forces a Google sign-in\u003C\u002Fstrong>, so it cannot coexist with a genuinely anonymous form (\u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F2839588\" target=\"_blank\" rel=\"noopener\">Google Docs Editors Help\u003C\u002Fa>)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\n\u003Ch2>Which kind of evaluation form are you building?\u003C\u002Fh2>\n\n\u003Cp>Three jobs share the phrase, and they need different setups. The third column is the limit each one hits first, which is usually what sends people looking for another tool.\u003C\u002Fp>\n\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Kind\u003C\u002Fth>\u003Cth>Who fills it in\u003C\u002Fth>\u003Cth>Where it runs out\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#performance\">Performance or employee review\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>A manager rating one person against fixed criteria\u003C\u002Ftd>\u003Ctd>No weighting, so a critical criterion counts the same as a minor one\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#course\">Course or instructor evaluation\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>Many students rating one course anonymously\u003C\u002Ftd>\u003Ctd>Anonymous and one-response-per-student cannot both hold\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#skills\">Skills or athlete assessment\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>A coach or assessor scoring observable criteria\u003C\u002Ftd>\u003Ctd>No running total, so the score is worked out afterwards\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\n\u003Ch2 id=\"performance\">How do you build a performance or employee review in Google Forms?\u003C\u002Fh2>\n\n\u003Cp>One form per review cycle, one response per manager. Fix the criteria before it goes out. Put them in a single grid so every manager rates against the same labels, and keep the whole thing to one screen so it gets finished in the meeting rather than after it.\u003C\u002Fp>\n\u003Cp>The problem shows up when you read the results. Every criterion carries equal weight, so a missed deadline scores the same as an untidy desk. And if your review framework already says that accuracy matters three times as much as tidiness, you will find there is nowhere inside the form for that ratio to live, which leaves you accepting a flat average you do not believe in or rebuilding the arithmetic in a spreadsheet. Almost everyone rebuilds it.\u003C\u002Fp>\n\u003Cp>Which is why most teams end up doing the arithmetic in the Sheet and pasting the number back into their HR system by hand.\u003C\u002Fp>\n\n\u003Ch2 id=\"course\">How do you run a course or instructor evaluation in Google Forms?\u003C\u002Fh2>\n\n\u003Cp>One form shared with the whole cohort, answered anonymously, read as an aggregate. This is the use case Google Forms is genuinely good at: the \u003Cstrong>Summary\u003C\u002Fstrong> tab charts each question on its own, which is exactly how you want to read forty students rating the same six statements.\u003C\u002Fp>\n\u003Cp>The catch is response integrity. Leave the form open and one student can submit five times, which skews a cohort of forty badly. Lock it down with \u003Cstrong>Limit to 1 response\u003C\u002Fstrong> and you have just asked every student to sign in to a Google Account first, which nobody reads as anonymous. Instructors have been asking Google for a way out of this since at least 2020, in threads like \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fthread\u002F57816064\u002Flimit-a-google-form-to-one-answer-with-the-same-e-mail-without-their-needing-to-login-with-google\" target=\"_blank\" rel=\"noopener\">this one in the Docs Editors Community\u003C\u002Fa>, and the answer has not changed.\u003C\u002Fp>\n\u003Cp>Most departments pick anonymity and live with the occasional duplicate. That is the right call at forty students and the wrong one at four hundred.\u003C\u002Fp>\n\n\u003Ch2 id=\"skills\">How do you score a skills or athlete assessment in Google Forms?\u003C\u002Fh2>\n\n\u003Cp>You are filling this one in while the thing happens, usually on a phone, usually standing up. Grids suit that. The criteria are observable and the scale is short, and a phone taps through a grid far faster than it works through eight separate questions stacked down the screen.\u003C\u002Fp>\n\u003Cp>What breaks is the score. An assessment usually ends with a number that decides something: a placement, a squad, a pass mark. Google Forms records the individual ratings and hands you nothing that adds them up, so the assessor finishes the form and then opens a spreadsheet to find out what the result was. On a tryout with sixty athletes that gap is the whole job.\u003C\u002Fp>\n\u003Ch2 id=\"build-it\">Which question types should an evaluation form use?\u003C\u002Fh2>\n\n\u003Cp>Google's question-type documentation lists twelve options. You need three. The rest of the work is wording.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F6ca8739ac4a6f137_01-question-types.jpg\" alt=\"The Google Forms question type dropdown showing Linear scale, Rating, Multiple choice grid and Checkbox grid\" loading=\"lazy\" style=\"width:100%;max-width:240px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Multiple choice grid\u003C\u002Fstrong> for the criteria block. Rows are your criteria (communication, punctuality, accuracy and initiative). Columns are the rating labels. One grid replaces a dozen separate questions and keeps the scale consistent across all of them.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Linear scale\u003C\u002Fstrong> for a single overall rating. Google allows a scale starting at zero or one and ending anywhere from 2 to 10, so 1 to 5 is a choice rather than a default. Label both ends, because an unlabelled 3 means different things to different people.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Paragraph\u003C\u002Fstrong> for the comment. This is the field people actually read afterwards, so give it a prompt rather than leaving it blank: \"one thing to keep doing, one thing to change\" gets better answers than \"comments\".\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Set the grid and the overall scale to required. Leave the comment optional, or you will get \"n\u002Fa\" instead of nothing, which is worse because it looks like data.\u003C\u002Fp>\n\n\u003Ch2 id=\"scoring\">Can Google Forms score an evaluation automatically?\u003C\u002Fh2>\n\n\u003Cp>No. There is no calculation field anywhere in Google Forms, so nothing multiplies or averages across questions. This is the one fact that pushes evaluation forms out of Google Forms altogether, and you will usually discover it at the worst moment: the responses are in, the review meeting is tomorrow, and you are looking at forty rows with no total column anywhere in sight.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Quiz mode does not fill the gap.\u003C\u002Fstrong> Turning on \u003Cstrong>Make this a quiz\u003C\u002Fstrong> lets you build an \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F7032287\" target=\"_blank\" rel=\"noopener\">answer key\u003C\u002Fa> and attach points to the answers you mark correct. An evaluation has no correct answer, so there is nothing for the points to attach to.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Weighting is manual.\u003C\u002Fstrong> If accuracy matters three times as much as tidiness, that ratio lives in a spreadsheet formula, not in the form.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Respondents see nothing.\u003C\u002Fstrong> Google Forms cannot show a computed result on the confirmation screen of a non-quiz form, so the person being evaluated learns their score only if you email it.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Twelve question types, none of them arithmetic.\u003C\u002Fp>\n\n\u003Ch2 id=\"weighting\">How do you weight evaluation criteria in the linked Google Sheet?\u003C\u002Fh2>\n\n\u003Cp>Link a Sheet from the \u003Cstrong>Responses\u003C\u002Fstrong> tab and the weighting becomes a one-line formula. Each grid criterion arrives as its own column, so put your weights in a row above the data and let \u003Ccode>SUMPRODUCT\u003C\u002Fcode> do the arithmetic.\u003C\u002Fp>\n\u003Cp>With criteria in columns D to G and their weights sitting in \u003Ccode>$D$1:$G$1\u003C\u002Fcode>, the weighted score for the row is:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>What you want\u003C\u002Fth>\u003Cth>Formula\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Weighted total\u003C\u002Ftd>\u003Ctd>\u003Ccode>=SUMPRODUCT(D2:G2,$D$1:$G$1)\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Weighted average out of 5\u003C\u002Ftd>\u003Ctd>\u003Ccode>=SUMPRODUCT(D2:G2,$D$1:$G$1)\u002FSUM($D$1:$G$1)\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Flat average, no weighting\u003C\u002Ftd>\u003Ctd>\u003Ccode>=AVERAGE(D2:G2)\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>Two things to watch. Grid answers land as text labels, not numbers, so either label your columns 1 to 5 in the form or convert them in the Sheet before the formula will run. And new responses append below your formula rather than inheriting it, so wrap it in \u003Ccode>ARRAYFORMULA\u003C\u002Fcode> or the totals stop appearing after row two.\u003C\u002Fp>\n\u003Cp>Worth being clear-eyed about what this means: whoever owns the Sheet now owns the scoring rubric. Fine until they leave.\u003C\u002Fp>\n\n\u003Ch2 id=\"anonymity\">Can a course evaluation be anonymous and still block repeat submissions?\u003C\u002Fh2>\n\n\u003Cp>No, and this is the second reason evaluation forms leave Google Forms. Blocking repeats needs \u003Cstrong>Limit to 1 response\u003C\u002Fstrong>, and Google's documentation is explicit about the cost: to fill in the form, users must sign in to a Google Account.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F206638321548d07a_02-limit-1-response.jpg\" alt=\"The Google Forms Limit to 1 response setting sitting under a REQUIRES SIGN IN label\" loading=\"lazy\" style=\"width:100%;max-width:692px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\u003Cp>Google does add one nuance worth knowing: with \u003Cstrong>Collect email addresses\u003C\u002Fstrong> left off, it \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F2839588\" target=\"_blank\" rel=\"noopener\">does not record the usernames\u003C\u002Fa> of people who sign in. So the submission is not technically identified to you. It is still not anonymous in the way that matters, for two reasons. Anyone without a Google Account cannot respond at all, which quietly excludes part of your cohort. And a form that demands a login before it will accept honest feedback about a manager or an instructor does not get honest feedback, whatever the privacy notice says.\u003C\u002Fp>\n\u003Cp>The usual workaround is a private link plus trust. Fine for a friendly cohort, useless for a contested review.\u003C\u002Fp>\n\n\u003Ch2 id=\"template\">Is there an evaluation form template in Google Forms?\u003C\u002Fh2>\n\n\u003Cp>One, and only for the education use case. The native gallery ships \u003Cstrong>Course Evaluation\u003C\u002Fstrong> under Education, which gives you a rating grid and a comment box to edit down. There is no employee performance review template and no skills assessment template, so those start from a blank form or a copy of last cycle's.\u003C\u002Fp>\n\u003Cp>Copying last cycle's is the faster route and carries a trap: \u003Cstrong>Make a copy\u003C\u002Fstrong> duplicates the questions and settings and leaves the responses behind, which is what you want for a new cycle and a shock if you assumed the history travelled with it.\u003C\u002Fp>\n\u003Cp>One template out of the seventeen in the gallery, and it is pointed at courses rather than people.\u003C\u002Fp>\n\n\u003Ch2 id=\"reading-results\">How do you read evaluation results in Google Forms?\u003C\u002Fh2>\n\n\u003Cp>The \u003Cstrong>Summary\u003C\u002Fstrong> tab charts each question on its own. If you are reading a whole cohort that is exactly what you want. If you are reading one person, it is close to useless, because you cannot filter the summary down to a single evaluatee.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F3dd55cb5d7a19513_03-summary-tab.jpg\" alt=\"The Google Forms Summary tab charting one question at a time, with no way to filter to a single evaluatee\" loading=\"lazy\" style=\"width:100%;max-width:791px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\u003Cp>For anything per-person, work in the linked Sheet. Filter by the name column and keep the weighted total from the formula above beside it. The \u003Cstrong>Individual\u003C\u002Fstrong> tab will show you one submission at a time, which helps when you want to read a single manager's comments and not when you want to compare six of them.\u003C\u002Fp>\n\n\u003Cdiv class=\"better\">\n\u003Ch5>Why Formester's evaluation forms are the better choice\u003C\u002Fh5>\n\u003Cp>The scoring and the anonymity both stay inside the form.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Rating, scale and ranking answers roll up into \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fform-analytics\u002F\">per-question summaries\u003C\u002Fa> with filters, so you can look at one cohort or one reviewer without exporting\u003C\u002Fli>\n\u003Cli>Anonymous submissions that still block duplicates by IP, so honest feedback and one-response-per-person hold at the same time\u003C\u002Fli>\n\u003Cli>Start from the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcourse-evaluation-form-25364\u002F\">Course Evaluation Form\u003C\u002Fa> rather than building the criteria grid from scratch\u003C\u002Fli>\n\u003Cli>Conditional logic can skip whole criteria blocks that do not apply to a role (Personal plan)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fedc67da91f1110bf_summary-analytics.jpg\" alt=\"Formester's Summary tab showing per-question response breakdowns with Download all and Filters controls\" loading=\"lazy\" style=\"width:100%;max-width:848px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Ca class=\"btn\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Try Formester free\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"faq\">\n\u003Ch2>Google Forms evaluation FAQ\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>How do I make an evaluation form in Google Forms?\u003C\u002Fsummary>\u003Cp>Use a Multiple choice grid for the criteria, with one row per criterion and one column per rating label. Add a Linear scale for an overall score and a Paragraph field for comments. Mark the grid and the scale required, and leave the comment optional.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can Google Forms score an evaluation automatically?\u003C\u002Fsummary>\u003Cp>No. Google Forms has no calculation field, so nothing adds, averages or weights answers across questions. Quiz mode assigns points through an answer key, and an evaluation has no correct answer for the key to hold. Any total is calculated in the linked Google Sheet.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I weight criteria differently in a Google Forms evaluation?\u003C\u002Fsummary>\u003Cp>Not in the form. Link a Google Sheet and put the weighting into a SUMPRODUCT formula there, multiplying each criterion column by its weight and dividing by the total weight. The form stays a collection tool.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can a course evaluation be anonymous and still stop repeat submissions?\u003C\u002Fsummary>\u003Cp>Not in Google Forms. Limit to 1 response requires every respondent to sign in to a Google Account, per Google's own documentation, so anyone without an account is locked out and nobody reading the form believes it is anonymous. A builder with anonymous submissions plus IP-based duplicate control handles both at once.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What question type is best for evaluation criteria?\u003C\u002Fsummary>\u003Cp>The Multiple choice grid. One grid covers every criterion on a single consistent scale, which keeps the form short and makes the responses easier to compare than a dozen separate questions.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What is the rating scale range in Google Forms?\u003C\u002Fsummary>\u003Cp>A Linear scale starts at zero or one and ends on any whole number from 2 to 10, according to Google's question-type documentation. Most evaluation forms use 1 to 5, and both ends should be labelled because an unlabelled 3 means different things to different people.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I evaluate Google Form responses once they arrive?\u003C\u002Fsummary>\u003Cp>The Summary tab charts each question separately, which suits a cohort-wide evaluation. For per-person review, use the linked Sheet and keep your weighted total in a formula beside the name column.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Is there an evaluation form template in Google Forms?\u003C\u002Fsummary>\u003Cp>One. The native gallery ships Course Evaluation under Education. There is no employee performance review and no skills assessment template, so those are built from a blank form or copied from a previous cycle.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can respondents see their own evaluation score?\u003C\u002Fsummary>\u003Cp>No. Google Forms cannot display a computed score on a non-quiz form, and it cannot send one afterwards. Sharing a result means emailing it manually, or using a builder that can show a calculated outcome on the confirmation screen.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n\u003Ch2>Related reading\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-ways-to-view-responses-in-google-forms\u002F\">\u003Cstrong>View responses in Google Forms\u003C\u002Fstrong>\u003C\u002Fa> - the five places evaluation answers land, and which one to read.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fbest-google-forms-templates\u002F\">\u003Cstrong>All 17 Google Forms templates\u003C\u002Fstrong>\u003C\u002Fa> - including Course Evaluation, and what each one stops short of.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-anonymous-google-form-or-survey\u002F\">\u003Cstrong>Make an anonymous Google Form\u003C\u002Fstrong>\u003C\u002Fa> - the setting behind the anonymity trap above.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-add-conditional-questions-in-google-forms\u002F\">\u003Cstrong>Conditional questions in Google Forms\u003C\u002Fstrong>\u003C\u002Fa> - why criteria blocks cannot be skipped per role.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-send-copy-of-response\u002F\">\u003Cstrong>Send a copy of Google Form responses\u003C\u002Fstrong>\u003C\u002Fa> - how to get the evaluation back to the person who filled it in.\u003C\u002Fli>\n\u003C\u002Ful>\n","blog\u002Fblog\u002Fgoogle-form-evaluation.md",{"text":303},"12 min read",1788363426367]