[{"data":1,"prerenderedAt":214},["ShallowReactive",2],{"blog-formester-recognized-as-top-form-builder":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\u002Fformester-recognized-as-top-form-builder.md","Formester Named as Top Form Builder by Research.com","Harish Kumar",null,"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_13_71765c1455.png","a blog post cover about Formester's recognition as a top business software by Research.com","2025-06-12T17:43:13.282Z","Formester has been recognized by Research.com as a top business tool. Learn how Formester helps you build smarter forms, automate workflows, and stay competitive.",false,[],"formester,\nform builder,\nno code form builder,\nai form builder,\nresearch.com,\ntop survey software,\n","Formester has been recognized by Research.com as a top business tool. Learn how it helps you build smarter forms, automate workflows, and more.",[],"Formester Recognized as a Top Form Builder by Research.com","2025-06-12T17:54:28.363Z","formester-recognized-as-top-form-builder","2025-06-12T17:54:28.373Z","AtYYBDX8Xeq6NrrUPlfaSpZEYIkmYW2hNLYr2XMG_6A","![a blog post cover about Formester's recognition as a top business software by Research.com](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_13_71765c1455.png)\n\nWe’re excited to announce that **[Formester](\u002F)** has been recognized by **\u003Ca href=\"https:\u002F\u002Fresearch.com\u002Fsoftware\u002Fbest-survey-software\">Research.com\u003C\u002Fa>** as one of the top software tools for business users. \n\nThis recognition confirms what our users already know Formester makes it easy to create smart, high-performing forms without writing a **single line of code**.\n\nFormester stands out as a reliable, no-code form builder and automation platform that’s designed to help teams move faster, collect better data, and work more efficiently.\n\n## Why This Recognition Matters\nResearch.com is a trusted source for software rankings, based on in-depth research, expert reviews, and real user feedback. Getting featured means Formester is not only trusted by teams worldwide, it’s also proven to deliver real business value.\n\n### More Than Just a Form Builder\nFormester goes beyond basic forms. According to the Research.com **[Formester review](https:\u002F\u002Fresearch.com\u002Fsoftware\u002Freviews\u002Fformester-review)**, it is a full-fledged platform for digital interaction, automation, and data collection. \n\nIt gives you full control over how you collect, manage, and act on data. Whether you're creating simple contact forms or complex multi-step surveys, Formester makes it easy for anyone marketers, HR teams, sales, customer support to build exactly what they need, fast.\n\n- Drag-and-drop builder that anyone can use\n\n- Fully responsive forms that look great on any device\n\n- Built-in templates to help you get started instantly\n\n- Real-time publishing for quick launches\n\nNo developers. No delays. Just smart forms that work.\n\n### Smart Automation That Saves Time\nWhat happens after someone submits a form? With Formester, you decide.\n\nTurn your form into a workflow engine:\n\n- Send instant notifications\n\n- Assign tasks\n\n- Transfer data\n\n- Trigger follow-ups\n\n- Route requests to the right team\n\nUse **[conditional logic](\u002Ffeatures\u002Fconditional-logic\u002F)** and branching to make forms react to responses, show or hide questions, skip pages, or perform calculations based on what people choose.\n\nPlus, Formester integrates with your favorite tools like Zapier, Make (Integromat), CRMs, and more. Webhooks let you push data anywhere, so your workflows stay connected and efficient.\n\n### Built for Speed, Accuracy, and Scale\nIn fast-paced environments like sales, healthcare, or customer service, every second counts. Formester ensures that every submission is tracked, responded to, and routed correctly automatically.\n\n- No more missed entries\n\n- No manual sorting\n\n- No copy-pasting into spreadsheets\n\nInstead, your team gets instant access to clean, structured data.\n\n### Collaboration That Works for Teams\n**[Formester is built for teamwork](\u002Ffeatures\u002Fcollaborative-forms\u002F)**. Give your team role-based access to manage forms, track submissions, and review analytics without compromising control or security.\n\n- Share access with editors, viewers, and admins\n\n- Collaborate together on the same form submission.\n\n- Provide access on a granular level.\n\nPerfect for remote teams, agencies, and growing organizations.\n\n### Get Actionable Insights, Not Just Responses\nFormester comes with built-in analytics to help you understand how your forms perform.\n\n- Track submissions, conversion rates, and drop-offs\n\n- See where users stop or click away\n\n- Monitor completion times and geo-location data\n\nNeed deeper analysis? Easily export data or connect to BI tools and dashboards. Formester makes it simple to turn raw responses into real decisions.\n\n### Built to Fit Any Industry or Team\nFrom startups to enterprises, Formester adapts to your needs. Whether you're in healthcare, education, SaaS, e-commerce, or government, Formester helps you simplify your data collection.\n\n**Use Formester to:**\n\n- Onboard clients or employees\n\n- Collect patient intake forms\n\n- Run course feedback surveys\n\n- Capture qualified leads\n\n- Process internal requests\n\nWith **[prebuilt templates](\u002Ftemplates\u002F)**, white-label options, custom themes, and embedded forms, Formester feels like a natural part of your brand without extra dev work.\n\n### Shaping the Future of No-Code Automation\nFormester isn’t just keeping up with digital trends, it’s driving them. Our mission is to help every team, regardless of size or skill, unlock the power of automation and data without needing code.\n\nBeing featured by Research.com reinforces our vision: Empower businesses to do more with less, and move faster without friction.\n\n### Try Formester Today\nWant to create better forms and smarter workflows without the usual headaches? **[Formester is ready when you are](https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up)**.\nStart building in minutes and discover how easy it is to scale your processes, boost productivity, and deliver seamless user experiences.\n",1214,630,{"text":28},"4 min read",[30,144,163,180],{"title":31,"author":7,"authorImage":8,"authorProfile":9,"coverImg":32,"coverImgAlt":33,"createdAt":34,"description":35,"featured":14,"jsonld":36,"keywords":134,"metaDescription":35,"metaImage":135,"metaTitle":42,"publishedAt":136,"slug":137,"updatedAt":138,"__hash__":139,"body":140,"id":141,"coverImgWidth":25,"coverImgHeight":26,"readingStats":142},"Free Secret Santa Questionnaire: 20 Questions, a PDF, and Template You Can Send in Two Clicks","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FBlog_Cover_Images_8660dfc645.png","an illustration of free secret santa questionnaire","2024-07-26T03:07:44.538Z","Free Secret Santa questionnaire with 20 questions, a PDF download, and template you can send to your team. Variants for coworkers, adults, kids, and family.",[37],{"@graph":38,"@context":133},[39,51,66,72,102],{"@id":40,"url":41,"name":42,"@type":43,"headline":31,"isPartOf":44,"breadcrumb":46,"description":48,"dateModified":49,"datePublished":50},"https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F#webpage","https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F","Secret Santa Questionnaire: 20 Free Questions, PDF, and Template","WebPage",{"@id":45},"https:\u002F\u002Fformester.com\u002F#organization",{"@id":47},"https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F#breadcrumb","Free Secret Santa questionnaire with 20 questions, a PDF download, and template you can send to your team. Variants for coworkers, adults, kids, and family., Fill out this form to get started, Fill out this form to get started","2026-05-14","2024-10-07",{"@id":47,"@type":52,"itemListElement":53},"BreadcrumbList",[54,59,63],{"item":55,"name":56,"@type":57,"position":58},"https:\u002F\u002Fformester.com\u002F","Home","ListItem",1,{"item":60,"name":61,"@type":57,"position":62},"https:\u002F\u002Fformester.com\u002Fblog\u002F","Blog",2,{"item":41,"name":64,"@type":57,"position":65},"Secret Santa Questionnaire",3,{"@id":67,"@type":68,"author":69,"headline":31,"publisher":70,"description":48,"dateModified":49,"datePublished":50,"mainEntityOfPage":71},"https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F#article","BlogPosting",{"@id":45},{"@id":45},{"@id":40},{"@id":73,"@type":74,"mainEntity":75},"https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F#faq","FAQPage",[76,82,86,90,94,98],{"name":77,"@type":78,"acceptedAnswer":79},"What is a Secret Santa questionnaire?","Question",{"text":80,"@type":81},"A short form (typically 6 to 12 questions) that each Secret Santa participant fills out before the draw. The answers cover gift preferences, allergies, dislikes, sizing, and budget hints, and they go to the gifter so the recipient doesn’t end up with something they’ll never use.","Answer",{"name":83,"@type":78,"acceptedAnswer":84},"How many questions should a Secret Santa questionnaire have?",{"text":85,"@type":81},"Six to twelve for coworker and family exchanges, where most people fill it out on a phone in under three minutes. Up to twenty for friend group exchanges where you want detail. More than twenty and response rates collapse.",{"name":87,"@type":78,"acceptedAnswer":88},"What budget should we set for a workplace Secret Santa?",{"text":89,"@type":81},"$15 to $30 per person is the typical US workplace range according to a \u003Ca href=\"https:\u002F\u002Fwww.expresspros.com\u002Fnewsroom\u002Fnews-releases\u002Fnews-releases\u002F2025\u002F12\u002Fbehind-the-holiday-glow-56-percent-of-employees-feel-gift-giving-pressure-and-nearly-half-say-it-hurts-their-wallet\">December 2025 Express Employment and Harris Poll survey\u003C\u002Fa>. Lower if the team is junior or financially mixed; higher (up to $50) for smaller teams or senior groups where it’s culturally expected.",{"name":91,"@type":78,"acceptedAnswer":92},"How do I send a Secret Santa questionnaire to a remote team?",{"text":93,"@type":81},"Use an online template at a shareable link, not a PDF or a Google Doc. Paste the link into Slack, Microsoft Teams, WhatsApp, or an email thread. The Formester \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsecret-santa-questionnaire-17483\u002F\">Secret Santa template\u003C\u002Fa> gives you a link in 90 seconds, supports anonymous responses, and lands everything in one dashboard.",{"name":95,"@type":78,"acceptedAnswer":96},"Can I print the Secret Santa questionnaire instead of sending it online?",{"text":97,"@type":81},"Yes. Download the printable PDF bundle on this page; it has five themed pages (standard, coworkers, adults, kids, family). Print as many as you need.",{"name":99,"@type":78,"acceptedAnswer":100},"Can I use Google Forms for a Secret Santa questionnaire?",{"text":101,"@type":81},"Yes, with caveats. Google Forms works for small groups and people inside the same Google Workspace. It struggles with anonymity (you have to manually turn off email collection and trust people not to add their name), conditional logic (it’s clunky), and branding (you get a Workspace logo, no custom design). The comparison table above lays out where each option wins.\u003Cbr>\u003Cbr>Ready to simplify your Secret Santa gift exchange? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\u002F\">Sign up for Formester today\u003C\u002Fa>\u003C\u002Fstrong> and create your first Secret Santa questionnaire in minutes. Enjoy the premium features for free and make this holiday season fun and stress-free for everyone involved!\u003Cbr>\u003Cbr>A good Secret Santa questionnaire can make gift exchanges more fun for everyone by eliminating the guesswork. By asking the right questions, you ensure that each participant receives something they truly appreciate. Use these 20 questions to make your Secret Santa questionnaire perfect. Have a joyful holiday season with thoughtful gift-giving.\u003Cbr>\u003Cbr>Remember, the key to a successful Secret Santa is in the details. The more you know about each other, the better the gifts will be. Happy gifting!\u003Cbr>\u003Cbr>×![](https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F)",{"@id":103,"@type":104,"itemListElement":105},"https:\u002F\u002Fformester.com\u002Fblog\u002Fsecret-santa-questionnaire\u002F#itemlist","ItemList",[106,108,110,112,115,118,121,124,127,130],{"name":107,"@type":57,"position":58},"Why Use a Secret Santa Questionnaire?",{"name":109,"@type":57,"position":62},"20 Secret Santa questionnaire questions, grouped by what they tell your gifter",{"name":111,"@type":57,"position":65},"How to share your Secret Santa questionnaire in five minutes (online or printed)",{"name":113,"@type":57,"position":114},"Send it via Formester and skip the paper trail entirely",4,{"name":116,"@type":57,"position":117},"Why Use Formester?",5,{"name":119,"@type":57,"position":120},"Google Forms, printable PDF, or Formester template. Which one fits your Secret Santa?",6,{"name":122,"@type":57,"position":123},"How to Get Started with Formester",7,{"name":125,"@type":57,"position":126},"Secret Santa questionnaire FAQ",8,{"name":128,"@type":57,"position":129},"Related Blogs",9,{"name":131,"@type":57,"position":132},"Ready to build your perfect form?",10,"https:\u002F\u002Fschema.org","secret santa questionnaire, secret santa, secret santa questions, secret santa questions",[],"2026-05-13T04:32:37.161Z","secret-santa-questionnaire","2026-05-18T05:54:24.934Z","uy0ueCYvFAD-SGsxxjbIzH_sax6r6xIG6KFnmLJYFhU","![an illustration of secret santa](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FBlog_Cover_Images_8660dfc645.png)\n\nA Secret Santa questionnaire is a short form each participant fills out so their gifter has enough specific information to skip the guesswork. Most go unused. \n\nThe British Heart Foundation found that [32% of UK Secret Santa participant](https:\u002F\u002Fwww.bhf.org.uk\u002Fwhat-we-do\u002Fnews-from-the-bhf\u002Fnews-archive\u002F2024\u002Fdecember\u002Fone-in-three-brits-admit-to-never-using-their-secret-santa-gifts)s never use the gift they received, and a 2021 Mastercard [survey](https:\u002F\u002Fwww.mastercard.com\u002Fnews\u002Feurope\u002Fen-uk\u002Fnewsroom\u002Fpress-releases\u002Fen-gb\u002F2021\u002Fnovember\u002Fwhat-do-brits-really-think-of-secret-santa\u002F) found 79% won't admit it. \n\nThe fix is boring and unglamorous: ask the right 8 to 12 questions, get the answers in one place, hand them to the gifter.\n\nThis page gives you three ways to do that. Fifty questions you can copy, grouped by what they actually tell your gifter. \n\nA printable PDF you can hand around the office. And an online template you can send via Slack, email, or WhatsApp in two clicks, so the responses land back in one shared spreadsheet instead of fifteen scattered DMs.\n\n\n## Why Use a Secret Santa Questionnaire?\n\nA Secret Santa questionnaire helps people understand what others like and don't like. This makes it easier to pick out meaningful gifts. It ensures everyone receives something they appreciate, creating a better experience for all involved.\n\n## 20 Secret Santa questionnaire questions, grouped by what they tell your gifter\n\u003Ciframe src=\"https:\u002F\u002Fzzpcecep.formester.com\u002Ff\u002F9d5a5458-a54f-4a49-98d8-bf3eb4d2eaca\" width=\"100%\" height=\"592.5\">\u003C\u002Fiframe>\n\n1. **What is your favorite color?**\n   This helps gift-givers choose items in a color the recipient loves.\n\n2. **Do you have any allergies?**\n   It's crucial to avoid any allergens, especially if you're considering food or scented products.\n\n3. **What are your hobbies?**\n Knowing someone's hobbies can lead to personalized gifts, like knitting supplies for a knitter. For the creatively inclined, using platforms such as **\u003Ca href=\"https:\u002F\u002Fwww.mixbook.com\u002F\">Mixbook\u003C\u002Fa>** offers a delightful way to capture and share memories with customized designs and themes.\n\n4. **Do you prefer sweet or savory snacks?**\n   This simple question helps narrow down snack options.\n\n5. **What is your favorite type of music?**\n   This can help if you're considering buying music-related gifts or memorabilia.\n\n6. **Do you have a favorite movie or TV show?**\n   Gifts related to their favorite shows or movies are always a hit.\n\n7. **Are you a coffee or tea person?**\n   This can guide you in choosing between coffee-related gifts or a variety of teas.\n\n8. **What is your favorite book or author?**\n   Perfect for choosing a book or literary-themed gift.\n\n9. **Do you have any favorite sports teams?**\n   Sports merchandise is a great gift for fans.\n\n10. **What is your favorite holiday?**\n    This can inspire themed gifts related to their favorite time of year.\n\n11. **Do you have any pets?**\n    Gifts for pets or pet-themed items can be a nice touch.\n\n12. **What is your favorite type of cuisine?**\n    This can help with choosing food-related gifts or even restaurant gift cards.\n\n13. **Are there any particular scents you love or hate?**\n    Important for choosing candles, lotions, or other scented products.\n\n14. **Do you collect anything?**\n    Knowing about any collections can lead to very special and appreciated gifts.\n\n15. **What is your clothing size (if you feel comfortable sharing)?**\n    Useful for clothing or accessory gifts, but make this optional.\n\n16. **What is one thing you always carry with you?**\n    This can inspire practical gifts that fit into their daily routine.\n\n17. **Do you have any dietary restrictions?**\n    Crucial for choosing food items, ensuring they are suitable.\n\n18. **What is your favorite way to relax?**\n    Gifts that help them relax, like bath products or a cozy blanket, are always appreciated.\n\n19. **Do you prefer experiences or physical gifts?**\n    Some people might prefer a ticket to an event or a class over a physical item.\n\n20. **Is there something specific you’re hoping to receive?**\n    This gives participants a direct hint and helps ensure everyone is happy with their gift.\n    \n\n\n    \n\n## How to share your Secret Santa questionnaire in five minutes (online or printed)\n\n### If you're going online (recommended for remote and hybrid teams)\n\n1. Open the Formester Secret Santa template at [\u002Ftemplates\u002Fsecret-santa-questionnaire-17483\u002F](\u002Ftemplates\u002Fsecret-santa-questionnaire-17483\u002F). Click \"Use template.\"\n2. Edit the questions you want, delete the ones you don't. Drag-and-drop builder, no setup. ([drag-and-drop form builder](\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F))\n3. Set the form to anonymous if your team is sensitive, or named if you're matching gifters later. Turn on [conditional logic](\u002Ffeatures\u002Fconditional-logic\u002F) if you want different questions for kids vs. adults in a family group.\n4. Hit \"Share.\" Paste the link into Slack, Microsoft Teams, WhatsApp, or an email thread. Responses land in one dashboard you can sort, filter, and export to a spreadsheet.\n5. When all responses are in, share each Santa their assigned person's answers privately. Done.\n\n### If you're going printed (recommended for in-office, family, or school gift exchanges)\n\n1. Download the printable PDF [insert link to PDF asset]. One file, multiple themed pages inside (standard, coworkers, adults, kids, family).\n2. Print as many copies as you have participants.\n3. Hand them out at the kickoff meeting, party, or class. Give people three days to return them.\n4. Collect the filled forms in a folder, photograph or scan each one, and hand each Santa their assigned person's sheet.\n5. Set a budget before the draw. The [Express Employment \u002F Harris Poll December 2025 survey](https:\u002F\u002Fwww.expresspros.com\u002Fnewsroom\u002Fnews-releases\u002Fnews-releases\u002F2025\u002F12\u002Fbehind-the-holiday-glow-56-percent-of-employees-feel-gift-giving-pressure-and-nearly-half-say-it-hurts-their-wallet) put the typical US workplace Secret Santa [budget at $15 to $30 per person](https:\u002F\u002Fflavor365.com\u002Fsetting-the-perfect-secret-santa-budget-a-complete-guide\u002F); pick one number and stick to it.\n\n## Send it via Formester and skip the paper trail entirely\n\nFormester is a free online form builder. If you don't want to chase printed forms, photograph them, and re-type the answers into a spreadsheet, use the [Secret Santa template](\u002Ftemplates\u002Fsecret-santa-questionnaire-17483\u002F) and skip all of it. \n\nThe form takes 90 seconds to set up, lives at a shareable link, accepts responses anonymously if you want, and stores everything in one dashboard you can sort by participant and export when you're done.\n\n## Why Use Formester?\n\n1. **User-Friendly Interface**: Formester's drag-and-drop interface allows you to create professional forms quickly without any technical skills.\n2. **Customization**: Customize your questionnaire with various fields and question types to get the exact information you need.\n3. **Integrations**: Formester seamlessly integrates with tools like Google Sheets, allowing you to collect and analyze responses effortlessly. This ensures you have all the data in one place and can easily share it with participants.\n4. **Automations**: Set up email notifications or integrate with other tools to automate tasks, saving you time and ensuring everyone is informed.\n5. **Security**: Ensure that all responses are securely collected and stored, maintaining participants' privacy.\n\n\u003Cstyle>\n  @import url('https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap');\n  .fmstr-cmp-ssq-cmp {\n    --c-bg-section: #f4f4f7; --c-bg-card: #ffffff;\n    --c-bg-tint: #f7f3ff; --c-bg-edge: #e4d7ff; --c-bg-row: #fafafb;\n    --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n    --c-violet-600: #6941c6;\n    --c-border: #eaecf0;\n    --c-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\n    background: transparent; padding: 56px 24px;\n    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;\n    color: var(--c-fg-1);\n  }\n  .fmstr-cmp-ssq-cmp *, .fmstr-cmp-ssq-cmp *::before, .fmstr-cmp-ssq-cmp *::after { box-sizing: border-box; }\n  .fmstr-cmp-ssq-cmp__container { max-width: 1180px; margin: 0 auto; }\n  .fmstr-cmp-ssq-cmp__eyebrow {\n    display: inline-block; padding: 5px 12px; border-radius: 9999px;\n    background: var(--c-bg-tint); color: var(--c-violet-600);\n    font-size: 12px; font-weight: 600; letter-spacing: .04em;\n    text-transform: uppercase; border: 1px solid var(--c-bg-edge); margin: 0 0 14px;\n  }\n  .fmstr-cmp-ssq-cmp__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n  .fmstr-cmp-ssq-cmp__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; max-width: 820px; margin: 14px auto 28px; }\n  .fmstr-cmp-ssq-cmp__card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; box-shadow: var(--c-shadow); }\n  .fmstr-cmp-ssq-cmp__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }\n  .fmstr-cmp-ssq-cmp__table th, .fmstr-cmp-ssq-cmp__table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border); }\n  .fmstr-cmp-ssq-cmp__table thead th { background: var(--c-bg-tint); color: var(--c-violet-600); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; }\n  .fmstr-cmp-ssq-cmp__table tbody th { font-weight: 600; color: var(--c-fg-1); background: var(--c-bg-row); width: 22%; }\n  .fmstr-cmp-ssq-cmp__table tbody td { color: var(--c-fg-2); }\n  .fmstr-cmp-ssq-cmp__table tbody tr:last-child th, .fmstr-cmp-ssq-cmp__table tbody tr:last-child td { border-bottom: 0; }\n  .fmstr-cmp-ssq-cmp__table a { color: var(--c-violet-600); text-decoration: none; }\n  .fmstr-cmp-ssq-cmp__table a:hover { text-decoration: underline; }\n  .fmstr-cmp-ssq-cmp__close { margin-top: 20px; font-size: 15px; color: var(--c-fg-3); line-height: 1.6; max-width: 880px; }\n\n  @media (max-width: 760px) {\n    .fmstr-cmp-ssq-cmp__table thead { display: none; }\n    .fmstr-cmp-ssq-cmp__table tbody th { width: 100%; display: block; background: var(--c-bg-tint); }\n    .fmstr-cmp-ssq-cmp__table tbody td { display: block; }\n    .fmstr-cmp-ssq-cmp__table tbody td::before { content: attr(data-h) \": \"; font-weight: 600; color: var(--c-fg-1); }\n  }\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ssq-cmp\" aria-labelledby=\"fmstr-cmp-ssq-cmp-h2\">\n  \u003Cdiv class=\"fmstr-cmp-ssq-cmp__container\">\n    \u003Cspan class=\"fmstr-cmp-ssq-cmp__eyebrow\">Pick the right format\u003C\u002Fspan>\n    \u003Ch2 class=\"fmstr-cmp-ssq-cmp__h2\" id=\"fmstr-cmp-ssq-cmp-h2\">Google Forms, printable PDF, or Formester template. Which one fits your Secret Santa?\u003C\u002Fh2>\n    \u003Cp class=\"fmstr-cmp-ssq-cmp__intro\">The three workflows handle the same job differently. Anonymity, distribution, and downstream sorting are where they split.\u003C\u002Fp>\n    \u003Cdiv class=\"fmstr-cmp-ssq-cmp__card\">\n      \u003Ctable class=\"fmstr-cmp-ssq-cmp__table\">\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Dimension\u003C\u002Fth>\n            \u003Cth>Google Forms\u003C\u002Fth>\n            \u003Cth>Printable PDF\u003C\u002Fth>\n            \u003Cth>Formester template\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth>Setup time\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">15 minutes (start from blank)\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Zero (download and print)\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">90 seconds (open template, edit, share)\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Anonymous responses\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Manual workaround (don’t collect email)\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Yes by default (no signature)\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Yes, native toggle\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Sharing route\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Public link or restricted to Google Workspace\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Hand in person\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Link in Slack, Teams, WhatsApp, or email\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Where responses land\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Google Sheets\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Paper folder\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Dashboard, exportable to CSV\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Editing the form later\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Yes\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Reprint everything\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Yes, live edit\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Conditional questions (kids vs adults)\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Manual; messy\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Print two versions\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Built-in \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fconditional-logic\u002F\">conditional logic\u003C\u002Fa>\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth>Branding\u003C\u002Fth>\u003Ctd data-h=\"Google Forms\">Workspace logo upload\u003C\u002Ftd>\u003Ctd data-h=\"Printable PDF\">Whatever you printed\u003C\u002Ftd>\u003Ctd data-h=\"Formester\">Full \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fbranding-kit\u002F\">branding kit\u003C\u002Fa>\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n    \u003Cp class=\"fmstr-cmp-ssq-cmp__close\">A 12-person remote team uses the Formester template, gets responses in 24 hours, exports the CSV, and splits Santas in a single afternoon. A 30-person in-office team prints the bundled PDF, hands it out at the kickoff lunch, and collects them by Friday. A 6-person friend group uses Google Forms because someone already had it open.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n## How to Get Started with Formester\n\n1. **Sign Up for Free**: Visit [Formester](https:\u002F\u002Fformester.com) and sign up for a free account.\n2. **Create Your Questionnaire**: Use the drag-and-drop form builder to create your Secret Santa questionnaire. Add all the questions you need, customize the design, and set up any integrations you require.\n3. **Distribute Your Form**: Share the form link with your participants via email, social media, or any other platform.\n4. **Collect and Manage Responses**: Monitor the responses in real-time, organize the data, and share anonymized answers with the participants.\n\n\u003Cstyle>\n  @import url('https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@300;400;500;600;700&display=swap');\n  .fmstr-cmp-ssq-faq {\n    --c-bg: #fafafb; --c-card: #ffffff;\n    --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n    --c-violet-600: #6941c6; --c-tint: #f7f3ff; --c-chip-bg: #f4f4f7;\n    --c-border: #eaecf0; --c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\n    background: transparent; padding: 56px 24px;\n    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;\n    color: var(--c-fg-1);\n  }\n  .fmstr-cmp-ssq-faq *, .fmstr-cmp-ssq-faq *::before, .fmstr-cmp-ssq-faq *::after { box-sizing: border-box; }\n  .fmstr-cmp-ssq-faq__container { max-width: 820px; margin: 0 auto; }\n  .fmstr-cmp-ssq-faq__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-align: center; margin: 0; }\n  .fmstr-cmp-ssq-faq__intro { color: var(--c-fg-3); text-align: center; font-size: 17px; line-height: 1.6; margin: 14px auto 28px; }\n  .fmstr-cmp-ssq-faq__list { display: flex; flex-direction: column; gap: 12px; }\n  .fmstr-cmp-ssq-faq__item { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--c-shadow); overflow: hidden; }\n  .fmstr-cmp-ssq-faq__item > summary {\n    padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 16.5px;\n    color: var(--c-fg-1); display: flex; align-items: center; gap: 14px; list-style: none;\n  }\n  .fmstr-cmp-ssq-faq__item > summary::-webkit-details-marker { display: none; }\n  .fmstr-cmp-ssq-faq__item > summary::before {\n    content: \"\"; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;\n    background-color: var(--c-chip-bg);\n    background-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\");\n    background-repeat: no-repeat; background-position: center;\n    transition: transform .15s ease, background-color .15s ease;\n  }\n  .fmstr-cmp-ssq-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n  .fmstr-cmp-ssq-faq__item[open] > summary { color: var(--c-violet-600); }\n  .fmstr-cmp-ssq-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n  .fmstr-cmp-ssq-faq__answer a { color: var(--c-violet-600); text-decoration: none; }\n  .fmstr-cmp-ssq-faq__answer a:hover { text-decoration: underline; }\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ssq-faq\" aria-labelledby=\"fmstr-cmp-ssq-faq-h2\">\n  \u003Cdiv class=\"fmstr-cmp-ssq-faq__container\">\n    \u003Ch2 class=\"fmstr-cmp-ssq-faq__h2\" id=\"fmstr-cmp-ssq-faq-h2\">Secret Santa questionnaire FAQ\u003C\u002Fh2>\n    \u003Cp class=\"fmstr-cmp-ssq-faq__intro\">\u003C\u002Fp>\n    \u003Cdiv class=\"fmstr-cmp-ssq-faq__list\">\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>What is a Secret Santa questionnaire?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">A short form (typically 6 to 12 questions) that each Secret Santa participant fills out before the draw. The answers cover gift preferences, allergies, dislikes, sizing, and budget hints, and they go to the gifter so the recipient doesn’t end up with something they’ll never use.\u003C\u002Fdiv>\u003C\u002Fdetails>\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>How many questions should a Secret Santa questionnaire have?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">Six to twelve for coworker and family exchanges, where most people fill it out on a phone in under three minutes. Up to twenty for friend group exchanges where you want detail. More than twenty and response rates collapse.\u003C\u002Fdiv>\u003C\u002Fdetails>\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>What budget should we set for a workplace Secret Santa?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">$15 to $30 per person is the typical US workplace range according to a \u003Ca href=\"https:\u002F\u002Fwww.expresspros.com\u002Fnewsroom\u002Fnews-releases\u002Fnews-releases\u002F2025\u002F12\u002Fbehind-the-holiday-glow-56-percent-of-employees-feel-gift-giving-pressure-and-nearly-half-say-it-hurts-their-wallet\" rel=\"noopener nofollow\" target=\"_blank\">December 2025 Express Employment and Harris Poll survey\u003C\u002Fa>. Lower if the team is junior or financially mixed; higher (up to $50) for smaller teams or senior groups where it’s culturally expected.\u003C\u002Fdiv>\u003C\u002Fdetails>\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>How do I send a Secret Santa questionnaire to a remote team?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">Use an online template at a shareable link, not a PDF or a Google Doc. Paste the link into Slack, Microsoft Teams, WhatsApp, or an email thread. The Formester \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsecret-santa-questionnaire-17483\u002F\">Secret Santa template\u003C\u002Fa> gives you a link in 90 seconds, supports anonymous responses, and lands everything in one dashboard.\u003C\u002Fdiv>\u003C\u002Fdetails>\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>Can I print the Secret Santa questionnaire instead of sending it online?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">Yes. Download the printable PDF bundle on this page; it has five themed pages (standard, coworkers, adults, kids, family). Print as many as you need.\u003C\u002Fdiv>\u003C\u002Fdetails>\n      \u003Cdetails class=\"fmstr-cmp-ssq-faq__item\">\u003Csummary>Can I use Google Forms for a Secret Santa questionnaire?\u003C\u002Fsummary>\u003Cdiv class=\"fmstr-cmp-ssq-faq__answer\">Yes, with caveats. Google Forms works for small groups and people inside the same Google Workspace. It struggles with anonymity (you have to manually turn off email collection and trust people not to add their name), conditional logic (it’s clunky), and branding (you get a Workspace logo, no custom design). The comparison table above lays out where each option wins.\u003C\u002Fdiv>\u003C\u002Fdetails>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\nReady to simplify your Secret Santa gift exchange? **[Sign up for Formester today](https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up)** and create your first Secret Santa questionnaire in minutes. Enjoy the premium features for free and make this holiday season fun and stress-free for everyone involved!\n\nA good Secret Santa questionnaire can make gift exchanges more fun for everyone by eliminating the guesswork. By asking the right questions, you ensure that each participant receives something they truly appreciate. Use these 20 questions to make your Secret Santa questionnaire perfect. Have a joyful holiday season with thoughtful gift-giving.\n\nRemember, the key to a successful Secret Santa is in the details. The more you know about each other, the better the gifts will be. Happy gifting!\n\n","blog\u002Fblog\u002Fsecret-santa-questionnaire.md",{"text":143},"9 min read",{"title":145,"author":7,"authorImage":8,"authorProfile":9,"coverImg":146,"coverImgAlt":147,"createdAt":148,"description":149,"featured":14,"jsonld":150,"keywords":151,"metaDescription":152,"metaImage":153,"metaTitle":154,"publishedAt":155,"slug":156,"updatedAt":157,"__hash__":158,"body":159,"id":160,"coverImgWidth":25,"coverImgHeight":26,"readingStats":161},"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":162},"16 min read",{"title":164,"author":7,"authorImage":8,"authorProfile":9,"coverImg":165,"coverImgAlt":166,"createdAt":167,"description":168,"featured":14,"jsonld":169,"keywords":170,"metaDescription":171,"metaImage":172,"metaTitle":164,"publishedAt":173,"slug":174,"updatedAt":175,"__hash__":176,"body":177,"id":178,"coverImgWidth":25,"coverImgHeight":26,"readingStats":179},"How to Create an MBTI 16 Personalities Test for Your Website (2026)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F126_4872de226f.png","a blog post cover about how to create an mbti 16 personality test in formester","2025-09-05T05:25:19.958Z","Step by step guide to create the MBTI 16 personality test on your website. Use Formester’s AI quiz maker to set up, customize, and capture leads.",[],"mbti test,\nMBTI 16 personalities test,\n16 personalities test,\nhow to create a personality quiz,\nhow to create a personality test,","Build a working 16-type personality test in 5 steps. Question bank, scoring logic, result archetypes, and lead capture. With ready-to-use Formester template.",[],"2026-06-05T02:14:37.000Z","how-to-create-mbti-16-personality-test","2026-06-08T11:38:38.943Z","Uur3iASY1tsSp5cvyRfMhUdoEN9S1sQJOMEWwsT0i-E","\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 an MBTI 16 personalities test for your website, define your 4 trait dimensions (Extraversion vs Introversion, Sensing vs Intuition, Thinking vs Feeling, Judging vs Perceiving), write 8-10 questions per dimension that score on a Likert scale, set up scoring logic that combines the 4 dimensions into a 16-archetype result, design the 16 result pages with archetype descriptions, and embed the test on your site. The 5 steps below walk through the question bank, scoring formula, result-page design, lead capture, and embedding.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-mbt-body a { text-decoration: none !important; }\n.fmstr-cmp-mbt-body {\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-600: #6941c6;\nbackground: transparent; padding: 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-mbt-body *, .fmstr-cmp-mbt-body *::before, .fmstr-cmp-mbt-body *::after { box-sizing: border-box; }\n.fmstr-cmp-mbt-body__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-mbt-body__sub { font-size: 17px !important; line-height: 1.6 !important; color: var(--c-fg-3); font-style: italic; margin: 0 0 24px !important; }\n.fmstr-cmp-mbt-body__intro p { font-size: 17px !important; line-height: 1.7 !important; color: var(--c-fg-2); margin: 0 0 16px !important; }\n.fmstr-cmp-mbt-body__intro a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-mbt-body__intro a:hover { text-decoration: underline !important; }\n@media (max-width: 600px) {\n.fmstr-cmp-mbt-body { padding: 16px; }\n.fmstr-cmp-mbt-body__sub { font-size: 16px !important; }\n.fmstr-cmp-mbt-body__intro p { font-size: 16px !important; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-mbt-body\">\n\u003Cdiv class=\"fmstr-cmp-mbt-body__container\">\n\n\u003Cp class=\"fmstr-cmp-mbt-body__sub\">Build a working personality test with question bank, scoring logic, 16 result archetypes, and lead capture in under 60 minutes.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-cmp-mbt-body__intro\">\n\nTo create an MBTI 16 personalities test for your website, define your 4 trait dimensions (Extraversion vs Introversion, Sensing vs Intuition, Thinking vs Feeling, Judging vs Perceiving), write 8-10 questions per dimension that score on a Likert scale, set up scoring logic that combines the 4 dimensions into a 16-archetype result, design the 16 result pages with archetype descriptions, and embed the test on your site. The 5 steps below walk through the question bank, scoring formula, result-page design, lead capture, and embedding.\n\n\u003C\u002Fdiv>\n\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\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__intro\">Define dimensions, write questions, set up scoring, design results, and publish.\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\">Define the 4 trait dimensions\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">MBTI uses Extraversion\u002FIntroversion (E\u002FI), Sensing\u002FIntuition (S\u002FN), Thinking\u002FFeeling (T\u002FF), and Judging\u002FPerceiving (J\u002FP). Each respondent gets a 4-letter result combining the four.\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\">Write 8-10 questions per dimension\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">32-40 questions total. Each question should clearly score toward one side of one dimension. Example: 'You feel energized by being around lots of people' scores toward E; disagreement scores toward I.\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\">Set up scoring logic\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">For each question, tag the answer choices with the dimension and direction (+E or -E). At the end, sum the scores per dimension. The sign of each sum picks the letter.\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\">Design 16 result pages\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">Write a 100-200 word description for each of the 16 archetypes (INTJ, INTP, etc.). Include strengths, weaknesses, career fit, and famous people with that type.\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\">Add lead capture and publish\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-steps__body\">Add an email-gate before showing the result, or after. Visitors take the test, give their email to see their archetype. You build a segmented email list tagged with personality type.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Ciframe width=\"100%\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fw623zEVyCXU?si=3efAQyX0Xw5hMikf\" 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\nThe \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwww.16personalities.com\u002Ffree-personality-test\">MBTI 16 personalities test\u003C\u002Fa>\u003C\u002Fstrong> is one of the most popular personality quizzes in the world. It helps people understand how they think, make decisions, and interact with others. Coaches, bloggers, and educators often use it to engage their audience, capture leads, and add value to their websites.\n\nThe good news is, you don’t need coding skills to create your own MBTI test. With Formester’s no-code quiz builder, you can set up a complete \u003Cstrong>16 personalities test in minutes\u003C\u002Fstrong> using AI, scoring, and \u003Cstrong>\u003Ca href=\"\u002Ffeatures\u002Fconditional-logic\u002F\">logic branching\u003C\u002Fa>\u003C\u002Fstrong>.\n\nIn this guide, I’ll show you step by step how to build and publish the MBTI test directly on your site.\n\n## What is the MBTI Test?\n\nThe Myers-Briggs Type Indicator (MBTI) groups people into 16 personality types. It uses four key dichotomies to determine personality traits:\n\n- Extraversion (E) vs Introversion (I)\n\n- Sensing (S) vs Intuition (N)\n\n- Thinking (T) vs Feeling (F)\n\n- Judging (J) vs Perceiving (P)\n\nEach test taker ends up with a four-letter code such as ISTJ or ENFP. These results provide insights into strengths, weaknesses, and communication styles.\n\nThat’s why MBTI quizzes are widely used by coaches, HR teams, and online creators to engage audiences.\n\n### Step 1: Generate the Quiz with AI\n\nStart by logging into your Formester dashboard.\n\nClick Create New Form.\n\nChoose Start with AI.\n\nSelect Score Quiz as the form type.\n\n\u003Cstrong>Enter the following prompt to the AI quiz maker:\u003C\u002Fstrong>\n\n>“Create an MBTI 16 personalities quiz with 4 pages, one for each dichotomy (E\u002FI, S\u002FN, T\u002FF, J\u002FP). Each page should include 5 single-choice questions with two options. Each option must clearly map to one side of the dichotomy. At the end, create 16 thank you pages, one for each personality type, with a short description of that type.”\n\nThe AI will generate the full quiz structure for you, including questions and thank-you pages.\n\n### Step 2: Add Variables for Scoring\n\nNow, set up \u003Cstrong>\u003Ca href=\"\u002Fblog\u002Fhow-to-create-a-scored-quiz\u002F\">scoring\u003C\u002Fa>\u003C\u002Fstrong> so the quiz can assign results correctly.\n\n- Go to the Advanced Tab > Variables.\n\n- Create two numeric variables for each dichotomy. For example, one for E and one for I.\n\n- Create one text variable to store the final outcome for each pair. Example: “EI = E or I.”\n\nThis setup ensures the quiz knows whether the user leans more toward extroversion or introversion, and so on for all four dichotomies.\n\n### Step 3: Assign Scores to Options\n\n- Open Score Quiz and turn on Allow Multiple Variables.\n\n- For each question, assign one point to the relevant variable.\n\n\u003Cstrong>Example:\u003C\u002Fstrong> If the user chooses option A, add one point to E.\n\n- If they choose option B, add one point to I.\n\n- Repeat this process for all four dichotomies.\n\nBy the end, the system can calculate which side of each scale the user aligns with.\n\n### Step 4: Connect to Personality Outcomes\n\nThis step ties all the results together.\n\n- Go to Rules in the Advanced tab.\n\n- Create conditions based on the variables. For example:\n\n>If E ≥ 3, set EI = E.\n\n>If I ≥ 3, set EI = I.\n\n- Combine all four dichotomy results to map to one of 16 personality types.\n\n\u003Cstrong>Example:\u003C\u002Fstrong> If EI = E, SN = S, TF = T, JP = P → outcome = ESTP.\n\n- Link each condition to the thank-you page for that personality type.\n\nDo this for all 16 combinations. Once complete, every respondent will be redirected to their unique personality result page.\n\n### Step 5: Customize and Publish\n\n- Add an email or phone field before the thank-you page to capture leads.\n\n- Go to the Embed Tab, copy the code, and paste it into your website.\n\n- Use the Design Tab to match the test to your brand. You can also switch to a card-style layout with \u003Cstrong>\u003Ca href=\"\u002Fblog\u002Fsingle-page-vs-multi-page-forms\u002F\">One Field Per Page\u003C\u002Fa>\u003C\u002Fstrong> for a modern look.\n\nNow your MBTI test is live and ready to engage your visitors.\n\n### Why Use Formester for MBTI Quizzes?\n\n- \u003Cstrong>AI-powered creation:\u003C\u002Fstrong> Generate a complete test in minutes using the \u003Cstrong>\u003Ca href=\"\u002Ftest-creator\u002F\">AI test maker\u003C\u002Fa>\u003C\u002Fstrong>.\n\n- \u003Cstrong>Scoring and logic branching:\u003C\u002Fstrong> Set up outcomes with ease.\n\n- \u003Cstrong>Lead capture:\u003C\u002Fstrong> Collect email addresses for follow-up.\n\n- \u003Cstrong>Seamless embedding:\u003C\u002Fstrong> Add the test directly to your website.\n\n- \u003Cstrong>Customization:\u003C\u002Fstrong> Match the quiz design to your brand style.\n\n### Final Thoughts\n\n\u003Cstrong>Creating an MBTI 16 personalities test\u003C\u002Fstrong> doesn’t have to be complicated. With \u003Cstrong>\u003Ca href=\"\u002F\">Formester\u003C\u002Fa>\u003C\u002Fstrong>, you can build it in minutes, customize it for your brand, and publish it directly on your website.\n\nWhether you’re a coach, educator, or content creator, this test helps you engage visitors and capture leads while offering real value.\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-tmpl-faq a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-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; --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);\ntext-align: left !important;\n}\n.fmstr-cmp-tmpl-faq *, .fmstr-cmp-tmpl-faq *::before, .fmstr-cmp-tmpl-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-faq__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-faq__h2 { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; margin: 0 !important; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-tmpl-faq__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 28px !important; text-align: left; }\n.fmstr-cmp-tmpl-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-tmpl-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-tmpl-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-tmpl-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-tmpl-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-tmpl-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-tmpl-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n.fmstr-cmp-tmpl-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-tmpl-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-tmpl-faq__answer a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-tmpl-faq { padding: 40px 16px; }\n.fmstr-cmp-tmpl-faq__intro { font-size: 15.5px !important; text-align: left; }\n.fmstr-cmp-tmpl-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-tmpl-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-tmpl-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-faq\" aria-labelledby=\"fmstr-cmp-tmpl-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-tmpl-faq__h2\" id=\"fmstr-cmp-tmpl-faq-h2\">Frequently asked questions\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-faq__intro\">Common questions about building a 16-type personality test for your website.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>Can I create my own MBTI 16 personalities test?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">Yes. You can build your own 16-type personality test using any form builder that supports conditional logic and scoring. The official MBTI is trademarked, but a 4-dimension, 16-type personality framework is not.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>What are the 4 MBTI dimensions?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">Extraversion (E) vs Introversion (I), Sensing (S) vs Intuition (N), Thinking (T) vs Feeling (F), and Judging (J) vs Perceiving (P). Each respondent scores on each dimension, and the four letters combine into one of 16 archetypes (INTJ, ENFP, etc.).\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>How many questions does an MBTI test need?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">At least 32 questions (8 per dimension) for reasonable accuracy. Full official MBTI uses 93 questions. For a website quiz, 32-40 questions hit the sweet spot between accuracy and completion rate.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>How do I score an MBTI personality test?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">For each question, score the answer toward one side of the dimension (e.g., +1 for E, -1 for I). Sum the scores per dimension. The sign of the sum determines the letter (positive = E, negative = I). Combine the 4 letters into the archetype.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>What are the 16 MBTI personality types?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">INTJ, INTP, ENTJ, ENTP (Analysts); INFJ, INFP, ENFJ, ENFP (Diplomats); ISTJ, ISFJ, ESTJ, ESFJ (Sentinels); ISTP, ISFP, ESTP, ESFP (Explorers).\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>Can I capture leads with a personality test?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">Yes. Add an email-gate before the result page, or after the result. Visitors take the test, give their email to see their archetype, and you build a segmented email list with their personality type attached.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>How long should an online personality test be?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">5-10 minutes feels right for visitors. 32-40 questions, 1-2 lines each. Past 10 minutes, completion rate drops below 60%.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>Is the MBTI test scientifically valid?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">Academic psychology generally considers MBTI low in reliability and validity compared to Big Five. But for marketing engagement, lead capture, and audience segmentation, the 16-type framework works well.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>Can I embed an MBTI test on a Wix, Squarespace, or WordPress site?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">Yes. Build the test in Formester (or any quiz builder), copy the embed code, and paste it into your CMS. The quiz renders inline on your page.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-tmpl-faq__item\">\n\u003Csummary>What's the best tool to build an MBTI test?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-tmpl-faq__answer\">You need conditional logic, multi-dimension scoring, and 16+ result pages. Formester's AI Quiz Maker generates the question bank in under 5 minutes; you set up the scoring formula and result pages. Tryinteract and Outgrow are alternatives with higher complexity and price.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-tmpl-rel a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-rel {\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;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: transparent;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\n}\n.fmstr-cmp-tmpl-rel *, .fmstr-cmp-tmpl-rel *::before, .fmstr-cmp-tmpl-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-rel__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-rel__head { margin: 0 0 28px !important; text-align: left; }\n.fmstr-cmp-tmpl-rel__h2 { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; margin: 0 !important; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-tmpl-rel__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 0 !important; text-align: left; }\n\n.fmstr-cmp-tmpl-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-tmpl-rel__card {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;\ntext-decoration: none !important; color: inherit !important; transition: all .15s ease;\nposition: relative;\n}\n.fmstr-cmp-tmpl-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-tmpl-rel__chip {\ndisplay: inline-block; padding: 3px 10px; border-radius: 9999px;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\ncolor: var(--c-violet-600); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;\ntext-transform: uppercase; align-self: flex-start;\nmargin-bottom: 2px;\n}\n.fmstr-cmp-tmpl-rel__title {\nfont-size: 16px !important; font-weight: 700 !important; color: var(--c-fg-1); margin: 0 !important; line-height: 1.3 !important; text-align: left; }\n.fmstr-cmp-tmpl-rel__body { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--c-fg-2); margin: 0 !important; }\n.fmstr-cmp-tmpl-rel__arrow {\nmargin-top: 6px; color: var(--c-violet-600); font-size: 14px; font-weight: 600;\ndisplay: inline-flex; align-items: center; gap: 6px;\n}\n.fmstr-cmp-tmpl-rel__arrow::after {\ncontent: \"\\2192\"; transition: transform .15s ease; display: inline-block;\n}\n.fmstr-cmp-tmpl-rel__card:hover .fmstr-cmp-tmpl-rel__arrow::after { transform: translateX(3px); }\n\n@media (max-width: 880px) { .fmstr-cmp-tmpl-rel__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }\n@media (max-width: 540px) {\n.fmstr-cmp-tmpl-rel { padding: 40px 16px; }\n.fmstr-cmp-tmpl-rel__grid { grid-template-columns: 1fr; gap: 12px; }\n.fmstr-cmp-tmpl-rel__card { padding: 18px 20px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-rel\" aria-labelledby=\"fmstr-cmp-tmpl-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-tmpl-rel__h2\" id=\"fmstr-cmp-tmpl-rel-h2\">Related on Formester\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-rel__intro\">Use the AI Quiz Maker to spin up the question bank in seconds, or start from a personality quiz template.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-tmpl-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-tmpl-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-quiz-maker\u002F\">\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-tmpl-rel__title\">AI Quiz Maker\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-rel__body\">Continue the workflow on Formester.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-tmpl-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fquizzes\u002F\">\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-tmpl-rel__title\">Quiz templates\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-rel__body\">Continue the workflow on Formester.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-tmpl-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fpersonal-attributes-questionnaire-25370\u002F\">\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-tmpl-rel__title\">Personality questionnaire template\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-rel__body\">Continue the workflow on Formester.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-tmpl-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fbest-ai-quiz-generators\u002F\">\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-tmpl-rel__title\">Best AI quiz generators\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-tmpl-rel__body\">Continue the workflow on Formester.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-tmpl-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"FAQPage\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"Can I create my own MBTI 16 personalities test?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. You can build your own 16-type personality test using any form builder that supports conditional logic and scoring. The official MBTI is trademarked, but a 4-dimension, 16-type personality framework is not.\"}}, {\"@type\": \"Question\", \"name\": \"What are the 4 MBTI dimensions?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Extraversion (E) vs Introversion (I), Sensing (S) vs Intuition (N), Thinking (T) vs Feeling (F), and Judging (J) vs Perceiving (P). Each respondent scores on each dimension, and the four letters combine into one of 16 archetypes (INTJ, ENFP, etc.).\"}}, {\"@type\": \"Question\", \"name\": \"How many questions does an MBTI test need?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"At least 32 questions (8 per dimension) for reasonable accuracy. Full official MBTI uses 93 questions. For a website quiz, 32-40 questions hit the sweet spot between accuracy and completion rate.\"}}, {\"@type\": \"Question\", \"name\": \"How do I score an MBTI personality test?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"For each question, score the answer toward one side of the dimension (e.g., +1 for E, -1 for I). Sum the scores per dimension. The sign of the sum determines the letter (positive = E, negative = I). Combine the 4 letters into the archetype.\"}}, {\"@type\": \"Question\", \"name\": \"What are the 16 MBTI personality types?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"INTJ, INTP, ENTJ, ENTP (Analysts); INFJ, INFP, ENFJ, ENFP (Diplomats); ISTJ, ISFJ, ESTJ, ESFJ (Sentinels); ISTP, ISFP, ESTP, ESFP (Explorers).\"}}, {\"@type\": \"Question\", \"name\": \"Can I capture leads with a personality test?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Add an email-gate before the result page, or after the result. Visitors take the test, give their email to see their archetype, and you build a segmented email list with their personality type attached.\"}}, {\"@type\": \"Question\", \"name\": \"How long should an online personality test be?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"5-10 minutes feels right for visitors. 32-40 questions, 1-2 lines each. Past 10 minutes, completion rate drops below 60%.\"}}, {\"@type\": \"Question\", \"name\": \"Is the MBTI test scientifically valid?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Academic psychology generally considers MBTI low in reliability and validity compared to Big Five. But for marketing engagement, lead capture, and audience segmentation, the 16-type framework works well.\"}}, {\"@type\": \"Question\", \"name\": \"Can I embed an MBTI test on a Wix, Squarespace, or WordPress site?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Yes. Build the test in Formester (or any quiz builder), copy the embed code, and paste it into your CMS. The quiz renders inline on your page.\"}}, {\"@type\": \"Question\", \"name\": \"What's the best tool to build an MBTI test?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"You need conditional logic, multi-dimension scoring, and 16+ result pages. Formester's AI Quiz Maker generates the question bank in under 5 minutes; you set up the scoring formula and result pages. Tryinteract and Outgrow are alternatives with higher complexity and price.\"}}]}\u003C\u002Fscript>\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"Article\", \"headline\": \"How to Create an MBTI 16 Personalities Test for Your Website (5 Steps)\", \"description\": \"Build a working 16-type personality test in 5 steps. Question bank, scoring logic, result archetypes, and lead capture. With ready-to-use Formester template.\", \"author\": {\"@type\": \"Person\", \"name\": \"Harish Kumar\", \"url\": \"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F\"}, \"publisher\": {\"@type\": \"Organization\", \"name\": \"Formester\", \"logo\": {\"@type\": \"ImageObject\", \"url\": \"https:\u002F\u002Fformester.com\u002Flogo.svg\"}}, \"dateModified\": \"2026-06-05\"}\u003C\u002Fscript>\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"BreadcrumbList\", \"itemListElement\": [{\"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Fformester.com\u002F\"}, {\"@type\": \"ListItem\", \"position\": 2, \"name\": \"Blog\", \"item\": \"https:\u002F\u002Fformester.com\u002Fblog\u002F\"}, {\"@type\": \"ListItem\", \"position\": 3, \"name\": \"How to Create an MBTI 16 Personalities Test for Your Website (5 Steps)\", \"item\": \"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-create-mbti-16-personality-test\u002F\"}]}\u003C\u002Fscript>\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\": \"https:\u002F\u002Fschema.org\", \"@type\": \"VideoObject\", \"name\": \"How to Create an MBTI 16 Personalities Test for Your Website (5 Steps)\", \"description\": \"Build a working 16-type personality test in 5 steps. Question bank, scoring logic, result archetypes, and lead capture. With ready-to-use Formester template.\", \"thumbnailUrl\": \"https:\u002F\u002Fimg.youtube.com\u002Fvi\u002Fw623zEVyCXU\u002Fmaxresdefault.jpg\", \"uploadDate\": \"2025-05-15\", \"contentUrl\": \"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=w623zEVyCXU\", \"embedUrl\": \"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fw623zEVyCXU\"}\u003C\u002Fscript>\n","blog\u002Fblog\u002Fhow-to-create-mbti-16-personality-test.md",{"text":143},{"title":181,"author":182,"authorImage":8,"authorProfile":183,"coverImg":184,"coverImgAlt":185,"createdAt":186,"description":187,"featured":14,"jsonld":188,"keywords":204,"metaDescription":187,"metaImage":205,"metaTitle":193,"publishedAt":206,"slug":207,"updatedAt":208,"__hash__":209,"body":210,"id":211,"coverImgWidth":25,"coverImgHeight":26,"readingStats":212},"Demographic Survey Questions: 15 Examples That Get Honest Answers","Harsh Shah","https:\u002F\u002Flinkedin.com\u002Fin\u002Fharshshahseo","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_10_must_have_demographics_questions_2aa9744335.png","an illustration of 10 must have demographics questions","2024-09-02T00:49:32.175Z","15 demographic survey questions with copy-ready answer options, inclusive 2026 phrasing, and when to skip each one. Templates and best practices inside.",[189],{"@type":190,"image":184,"author":191,"@context":133,"headline":193,"publisher":194,"description":200,"dateModified":201,"datePublished":202,"mainEntityOfPage":203},"Article",{"url":9,"name":7,"@type":192},"Person","Demographic Survey Questions: 15 Inclusive Examples (2026)",{"logo":195,"name":198,"@type":199},{"url":196,"@type":197},"https:\u002F\u002Fformester.com\u002Ffavicon.ico","ImageObject","Formester","Organization","15 demographic survey questions with copy-ready answer options, inclusive 2026 phrasing, and when to skip each one.","2026-06-11","2024-09-02","https:\u002F\u002Fformester.com\u002Fblog\u002Fmust-have-demographic-questions-for-survey\u002F","how to ask a current job position in survey,\nhow to ask gender question on survey,\nincome ranges for survey,\nemployment status survey question,\nsurvey to ask job,",[],"2026-06-15T04:39:36.526Z","must-have-demographic-questions-for-survey","2026-06-15T04:39:36.530Z","LbVOjtd-JgDb20qW9EMriFFlhkL15UN_Hm19gwWWUyE","![an illustration of 10 must have demographics questions](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_10_must_have_demographics_questions_2aa9744335.png)\n\n\u003Cstyle>\n\u002F* batch-1 blog normalisation *\u002F\n.fmstr-blog-lead {\n  font-size: 17px !important;\n  line-height: 1.65 !important;\n  color: #475467 !important;\n  font-weight: 400 !important;\n  margin: 0 0 16px !important;\n}\n.fmstr-blog-lead a { color: #6941c6 !important; font-weight: 500; }\n.fmstr-blog-lead a:hover { text-decoration: underline !important; }\n.fmstr-blog-lead strong { color: #101828; font-weight: 700; }\nsection[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n  padding-top: 28px !important;\n  padding-bottom: 28px !important;\n}\n@media (max-width: 540px) {\n  section[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n    padding-top: 24px !important;\n    padding-bottom: 24px !important;\n  }\n}\n\u003C\u002Fstyle>\n\n\u003Cstyle id=\"fmstr-blog-mobile-fullwidth-v3\">\n@media (max-width: 760px) {\n  .art-section { padding-left: 12px !important; padding-right: 12px !important; }\n}\n@media (max-width: 540px) {\n  .art-section { padding-left: 6px !important; padding-right: 6px !important; padding-top: 24px !important; }\n  section[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n    padding-left: 0 !important; padding-right: 0 !important;\n    overflow-x: hidden !important; box-sizing: border-box !important;\n  }\n  section[class^=\"fmstr-cmp-\"] *, section[class^=\"fmstr-cmp-\"] *::before, section[class^=\"fmstr-cmp-\"] *::after { box-sizing: border-box !important; }\n  section[class^=\"fmstr-cmp-\"] > *, section[class^=\"fmstr-cmp-\"] > * > * { min-width: 0 !important; }\n  section[class^=\"fmstr-cmp-\"] [class*=\"__container\"] {\n    padding-left: 0 !important; padding-right: 0 !important;\n    max-width: 100% !important; width: 100% !important;\n  }\n  section[class^=\"fmstr-cmp-\"] [class*=\"__card\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__step\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__panel\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__tool\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__verdict\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__row\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__fix\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__callout\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__quote\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__tldr\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__answer\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__faq\"],\n  section[class^=\"fmstr-cmp-\"] details {\n    padding-left: 14px !important; padding-right: 14px !important;\n    margin-left: 0 !important; margin-right: 0 !important;\n  }\n  section[class^=\"fmstr-cmp-\"] p, section[class^=\"fmstr-cmp-\"] li { font-size: 15px !important; line-height: 1.6 !important; }\n  section[class^=\"fmstr-cmp-\"] h2 { font-size: 22px !important; line-height: 1.22 !important; }\n  section[class^=\"fmstr-cmp-\"] h3 { font-size: 18px !important; line-height: 1.3 !important; }\n  section[class^=\"fmstr-cmp-\"] h4 { font-size: 16px !important; line-height: 1.35 !important; }\n  section[class^=\"fmstr-cmp-\"] table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100% !important; }\n  section[class^=\"fmstr-cmp-\"] img, section[class^=\"fmstr-cmp-\"] iframe, section[class^=\"fmstr-cmp-\"] video { max-width: 100% !important; height: auto !important; }\n  section[class^=\"fmstr-cmp-\"] pre, section[class^=\"fmstr-cmp-\"] code {\n    white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word !important;\n  }\n  section[class^=\"fmstr-cmp-\"] pre { overflow-x: auto; }\n  .fmstr-blog-lead { font-size: 16.5px !important; }\n}\n\u003C\u002Fstyle>\n\n\u003Cp class=\"fmstr-blog-lead\">Demographic survey questions describe who answered your survey: age, gender, location, income, employment, education, ethnicity, language, disability, and household. They are how aggregate numbers turn into segments you can act on.\u003C\u002Fp>\n\n\u003Cp class=\"fmstr-blog-lead\">Get them wrong and people abandon the form or pick a random answer. Research by \u003Ca href=\"https:\u002F\u002Fdoi.org\u002F10.1037\u002F0033-2909.133.5.859\">Tourangeau and Yan in Psychological Bulletin\u003C\u002Fa> found that the more sensitive a question feels and the earlier it appears, the more it drags down both response rate and accuracy.\u003C\u002Fp>\n\n\u003Cp class=\"fmstr-blog-lead\">Below are 15 demographic survey questions with copy-ready answer options, inclusive 2026 phrasing, and a note on when to skip each one. Use them as a base and cut whatever does not directly serve your analysis.\u003C\u002Fp>\n\n\u003Cstyle>\n.fmstr-cmp-demo-tldr a { text-decoration: none !important; }\n.fmstr-cmp-demo-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; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-demo-tldr *, .fmstr-cmp-demo-tldr *::before, .fmstr-cmp-demo-tldr *::after { box-sizing: border-box; }\n.fmstr-cmp-demo-tldr__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-demo-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-demo-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-demo-tldr__label::before {\ncontent: \"\";\nwidth: 8px; height: 8px; border-radius: 9999px;\nbackground: var(--c-violet-500);\ndisplay: inline-block;\n}\n.fmstr-cmp-demo-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-demo-tldr__list {\nmargin: 4px 0 0 !important;\npadding-left: 20px !important;\ndisplay: flex; flex-direction: column; gap: 6px;\n}\n.fmstr-cmp-demo-tldr__list li {\nfont-size: 15.5px !important;\nline-height: 1.6 !important;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-demo-tldr__list li strong { color: var(--c-violet-700); font-weight: 700; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-demo-tldr { padding: 20px 0 28px; }\n.fmstr-cmp-demo-tldr__card { padding: 18px 20px; }\n.fmstr-cmp-demo-tldr__body { font-size: 15px !important; }\n.fmstr-cmp-demo-tldr__list li { font-size: 14.5px !important; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-demo-tldr img, .fmstr-cmp-demo-tldr table, .fmstr-cmp-demo-tldr pre, .fmstr-cmp-demo-tldr iframe, .fmstr-cmp-demo-tldr video { max-width: 100%; }\n.fmstr-cmp-demo-tldr > * { min-width: 0; }\n.fmstr-cmp-demo-tldr [class*='__grid'] > *, .fmstr-cmp-demo-tldr [class*='__list'] > *, .fmstr-cmp-demo-tldr [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-tldr pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-demo-tldr table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-demo-tldr\" aria-labelledby=\"fmstr-cmp-demo-tldr-label\">\n\u003Cdiv class=\"fmstr-cmp-demo-tldr__container\">\n\u003Cdiv class=\"fmstr-cmp-demo-tldr__card\">\n\u003Cp class=\"fmstr-cmp-demo-tldr__label\" id=\"fmstr-cmp-demo-tldr-label\">Quick answer\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-tldr__body\">Demographic survey questions describe who answered your survey: age, gender, location, income, employment, education, ethnicity, language, disability, and household. Below are the 15 most useful, with copy-ready answer options, inclusive 2026 phrasing, and a clear \"skip this question if\" line on every one.\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-tldr__list\">\n\u003Cli>\u003Cstrong>Most analyses need 3 to 5 demographic questions, not 15.\u003C\u002Fstrong> Cut to what your analysis plan actually uses.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Place them at the end.\u003C\u002Fstrong> Exceptions: language and accessibility go first; screening questions go first.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Always include \"Prefer not to say\".\u003C\u002Fstrong> Forced answers on sensitive items either drop respondents or fill cells randomly.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Use ranges, not free text,\u003C\u002Fstrong> for age, income, and education. Cleaner segmentation, lower drop-off.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ethnicity, religion, political affiliation, and sexual orientation are special-category data under GDPR.\u003C\u002Fstrong> Ask only with explicit consent and a documented purpose.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-demo-steps a { text-decoration: none !important; color: #6941c6 !important; }\n.fmstr-cmp-demo-steps a:hover { text-decoration: underline !important; }\n.fmstr-cmp-demo-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-demo-steps *, .fmstr-cmp-demo-steps *::before, .fmstr-cmp-demo-steps *::after { box-sizing: border-box; }\n.fmstr-cmp-demo-steps > *, .fmstr-cmp-demo-steps > * > * { min-width: 0; }\n.fmstr-cmp-demo-steps__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-demo-steps__head { margin: 0 0 28px !important; }\n.fmstr-cmp-demo-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-demo-steps__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 0 !important; }\n.fmstr-cmp-demo-steps__list {\ndisplay: flex; flex-direction: column; gap: 14px;\nmargin: 0; padding: 0; list-style: none;\n}\n.fmstr-cmp-demo-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: 12px;\nalign-items: flex-start;\nmin-width: 0;\n}\n.fmstr-cmp-demo-steps__num {\nflex-shrink: 0;\nwidth: 26px; line-height: 1; height: 26px; border-radius: 7px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\ncolor: var(--c-violet-700) !important;\nfont-weight: 800; font-size: 13px;\ndisplay: inline-flex; align-items: center; justify-content: center;\n}\n.fmstr-cmp-demo-steps__main { flex: 1; min-width: 0; }\n.fmstr-cmp-demo-steps__title {\nfont-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important;\ncolor: var(--c-fg-1); margin: 0 0 8px !important;\n}\n.fmstr-cmp-demo-steps__body {\nfont-size: 15px !important; line-height: 1.65 !important;\ncolor: var(--c-fg-2); margin: 0 0 10px !important;\n}\n.fmstr-cmp-demo-steps__body:last-child { margin-bottom: 0 !important; }\n.fmstr-cmp-demo-steps__ask {\nfont-size: 15px !important; font-weight: 600 !important;\ncolor: var(--c-fg-1); margin: 12px 0 8px !important;\n}\n.fmstr-cmp-demo-steps__options {\nmargin: 0 0 10px !important; padding-left: 20px !important;\ndisplay: flex; flex-direction: column; gap: 4px;\n}\n.fmstr-cmp-demo-steps__options li {\nfont-size: 14.5px !important; line-height: 1.55 !important; color: var(--c-fg-2);\n}\n.fmstr-cmp-demo-steps__skip {\nfont-size: 14px !important; line-height: 1.55 !important;\ncolor: var(--c-fg-3); margin: 12px 0 0 !important;\npadding: 10px 14px;\nbackground: var(--c-tint);\nborder-left: 3px solid var(--c-violet-500);\nborder-radius: 6px;\n}\n.fmstr-cmp-demo-steps__skip strong { color: var(--c-violet-700); font-weight: 700; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-demo-steps { padding: 36px 0; }\n.fmstr-cmp-demo-steps__item { padding: 18px 20px; gap: 14px; }\n.fmstr-cmp-demo-steps__num { width: 34px; height: 34px; font-size: 15px; }\n.fmstr-cmp-demo-steps__title { font-size: 16.5px !important; }\n.fmstr-cmp-demo-steps__body, .fmstr-cmp-demo-steps__ask { font-size: 14.5px !important; }\n.fmstr-cmp-demo-steps__options li { font-size: 14px !important; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-demo-steps img, .fmstr-cmp-demo-steps table, .fmstr-cmp-demo-steps pre, .fmstr-cmp-demo-steps iframe, .fmstr-cmp-demo-steps video { max-width: 100%; }\n.fmstr-cmp-demo-steps > * { min-width: 0; }\n.fmstr-cmp-demo-steps [class*='__grid'] > *, .fmstr-cmp-demo-steps [class*='__list'] > *, .fmstr-cmp-demo-steps [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-steps pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-demo-steps table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\n\n\n\u002F* mobile-inline-num *\u002F\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-steps__item { padding: 18px 16px; gap: 10px; flex-direction: row; align-items: flex-start; }\n  .fmstr-cmp-demo-steps__num { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }\n}\n\n\u002F* step-inline-num-restructure *\u002F\n.fmstr-cmp-demo-steps__item { display: block !important; }\n.fmstr-cmp-demo-steps__title { display: block; }\n.fmstr-cmp-demo-steps__num { display: inline-block !important; vertical-align: 2px; margin-right: 8px; padding: 2px 8px; width: auto !important; height: auto !important; border-radius: 6px; font-size: 12.5px !important; line-height: 1.3 !important; }\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-steps__num { font-size: 11.5px !important; padding: 2px 7px; margin-right: 6px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-demo-steps\" aria-labelledby=\"fmstr-cmp-demo-steps-h2\">\n\u003Cdiv class=\"fmstr-cmp-demo-steps__container\">\n\u003Cdiv class=\"fmstr-cmp-demo-steps__head\">\n\u003Ch2 class=\"fmstr-cmp-demo-steps__h2\" id=\"fmstr-cmp-demo-steps-h2\">15 demographic survey questions to ask (with examples)\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-demo-steps__intro\">Copy-ready answer options, inclusive 2026 phrasing, and a clear note on when to skip each one.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Col class=\"fmstr-cmp-demo-steps__list\">\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">1\u003C\u002Fspan>Age range survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Age is the most analytically useful demographic question for almost every survey. It segments cleanly, generalises across industries, and rarely feels invasive when offered as ranges.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: What is your age?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Under 18\u003C\u002Fli>\n\u003Cli>18 to 24\u003C\u002Fli>\n\u003Cli>25 to 34\u003C\u002Fli>\n\u003Cli>35 to 44\u003C\u002Fli>\n\u003Cli>45 to 54\u003C\u002Fli>\n\u003Cli>55 to 64\u003C\u002Fli>\n\u003Cli>65 or older\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Ranges feel less identifying, reduce drop-off, and roll up cleanly when you cross-tab against satisfaction or NPS. If you need an exact age (medical, financial, regulated industries), state why in a single line above the field.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> your survey already pulls age from a verified source (employee HRIS, customer profile, ID verification).\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">2\u003C\u002Fspan>Gender identity survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Use 2026 inclusive phrasing. The standard pattern is a closed list with a self-describe text field, kept separate from sex assigned at birth (which most surveys do not need at all).\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which best describes your gender?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Woman\u003C\u002Fli>\n\u003Cli>Man\u003C\u002Fli>\n\u003Cli>Non-binary or genderqueer\u003C\u002Fli>\n\u003Cli>Prefer to self-describe (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Always include the self-describe option and always include \"Prefer not to say\". The \u003Ca href=\"https:\u002F\u002Fgo.arizona.edu\u002Fassessment-research\u002Fassets\u002FInclusive-and-Functional-Demographic-Questions_2019.pdf\">University of Arizona Inclusive Demographic Questions guide\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fsupport.greenhouse.io\u002Fhc\u002Fen-us\u002Farticles\u002F7541739987355-U-S-Standard-demographic-questions\">Greenhouse U.S. Standard demographic questions reference\u003C\u002Fa> both treat these as defaults.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you cannot show how gender will be used in the analysis. Collecting it for completeness without a plan to segment by it adds friction without value.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">3\u003C\u002Fspan>Ethnicity survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Ethnicity belongs in a survey only when you plan to segment by it. Equity studies, representativeness checks, market research across regions, and DEI reporting all qualify. Customer-experience surveys for most B2B products do not.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which of the following best describes you? Select all that apply.\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>American Indian or Alaska Native\u003C\u002Fli>\n\u003Cli>Asian\u003C\u002Fli>\n\u003Cli>Black or African American\u003C\u002Fli>\n\u003Cli>Hispanic, Latino, or Spanish origin\u003C\u002Fli>\n\u003Cli>Middle Eastern or North African\u003C\u002Fli>\n\u003Cli>Native Hawaiian or Other Pacific Islander\u003C\u002Fli>\n\u003Cli>White\u003C\u002Fli>\n\u003Cli>Prefer to self-describe (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Multi-select is the inclusive default. Forcing a single answer on multi-ethnic respondents either drops them out or skews data. The \u003Ca href=\"https:\u002F\u002Fwww.usda.gov\u002Fsites\u002Fdefault\u002Ffiles\u002Fdocuments\u002Fsurveys-standard-optional-questions.pdf\">USDA Standardized Optional Questions guidance\u003C\u002Fa> and U.S. Census categories are the public-sector references most readers expect.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you are outside the use cases above. In the EU, UK, and most of Asia, ethnicity is treated as special-category data under \u003Ca href=\"https:\u002F\u002Fgdpr-info.eu\u002Fart-9-gdpr\u002F\">GDPR Article 9\u003C\u002Fa> and needs explicit consent plus a documented purpose.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">4\u003C\u002Fspan>Income survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Income is the highest-friction demographic question on any survey. Use ranges, not free text. Decide upfront whether you need household income (consumer surveys) or individual income (employment, financial-services surveys). Mixing the two is a data-quality killer.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: What is your annual household income?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Under $25,000\u003C\u002Fli>\n\u003Cli>$25,000 to $49,999\u003C\u002Fli>\n\u003Cli>$50,000 to $74,999\u003C\u002Fli>\n\u003Cli>$75,000 to $99,999\u003C\u002Fli>\n\u003Cli>$100,000 to $149,999\u003C\u002Fli>\n\u003Cli>$150,000 to $199,999\u003C\u002Fli>\n\u003Cli>$200,000 or more\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">If your respondent pool is global, switch to currency-neutral bands (quintiles or local-currency tiers per country). State the time period (annual, monthly) and the unit explicitly in the question stem.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Overlapping numbers like \"$20,000 to $40,000\" and \"$40,001 to $60,000\" force respondents at the boundary to pick arbitrarily, which is why every range above uses \"to\" with a clear cap.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you can infer the answer from a transactional dataset you already own.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">5\u003C\u002Fspan>Employment survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Employment status maps to spending power, life stage, and product fit. Consolidate \"looking for a job\" into this section rather than asking it as a separate yes \u002F no.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which best describes your current employment status?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Employed full-time\u003C\u002Fli>\n\u003Cli>Employed part-time\u003C\u002Fli>\n\u003Cli>Self-employed or freelance\u003C\u002Fli>\n\u003Cli>Unemployed and looking for work\u003C\u002Fli>\n\u003Cli>Unemployed and not looking\u003C\u002Fli>\n\u003Cli>Student\u003C\u002Fli>\n\u003Cli>Homemaker or caregiver\u003C\u002Fli>\n\u003Cli>Retired\u003C\u002Fli>\n\u003Cli>Unable to work\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">This wording follows the \u003Ca href=\"https:\u002F\u002Fwww.bls.gov\u002Fcps\u002Fdefinitions.htm\">U.S. Bureau of Labor Statistics labour-force categories\u003C\u002Fa>, which is the cleanest segmentation if you ever need to compare your data against national benchmarks.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you are not running a recruitment, careers, or workforce-development study; the options above already capture job-search status.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">6\u003C\u002Fspan>Industry and job role survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">If your survey is for B2B research, customer feedback, or workforce studies, role and industry are more useful than a free-text job title. Free text creates dirty data (147 variants of \"Manager\") and is hard to segment.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which industry do you work in?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Technology and software\u003C\u002Fli>\n\u003Cli>Financial services\u003C\u002Fli>\n\u003Cli>Healthcare\u003C\u002Fli>\n\u003Cli>Education\u003C\u002Fli>\n\u003Cli>Retail and ecommerce\u003C\u002Fli>\n\u003Cli>Manufacturing\u003C\u002Fli>\n\u003Cli>Government or public sector\u003C\u002Fli>\n\u003Cli>Non-profit\u003C\u002Fli>\n\u003Cli>Media and entertainment\u003C\u002Fli>\n\u003Cli>Hospitality and travel\u003C\u002Fli>\n\u003Cli>Construction or real estate\u003C\u002Fli>\n\u003Cli>Other (text field)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Then ask: Which best describes your role?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Individual contributor\u003C\u002Fli>\n\u003Cli>Team lead or manager\u003C\u002Fli>\n\u003Cli>Director\u003C\u002Fli>\n\u003Cli>VP or head of function\u003C\u002Fli>\n\u003Cli>C-level or owner\u003C\u002Fli>\n\u003Cli>Student or intern\u003C\u002Fli>\n\u003Cli>Not currently working\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">The two-question pattern beats a free-text \"job title\" field on data quality every time.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you already have firmographic data from a CRM or signup flow.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">7\u003C\u002Fspan>Education survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Ask for the highest level completed, not the level a respondent is currently working toward.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: What is the highest level of education you have completed?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Less than high school\u003C\u002Fli>\n\u003Cli>High school diploma or equivalent\u003C\u002Fli>\n\u003Cli>Some college, no degree\u003C\u002Fli>\n\u003Cli>Trade or technical certificate\u003C\u002Fli>\n\u003Cli>Associate degree\u003C\u002Fli>\n\u003Cli>Bachelor's degree\u003C\u002Fli>\n\u003Cli>Master's degree\u003C\u002Fli>\n\u003Cli>Professional degree (MD, JD, etc.)\u003C\u002Fli>\n\u003Cli>Doctoral degree (PhD, EdD)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">For non-US audiences, swap the labels to local equivalents (A-levels, baccalauréat, gymnasium). Education systems do not translate cleanly, so build the localisation step into the survey rather than shipping a US-only list to a global panel.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> education does not change how you would interpret the answer to the rest of the survey.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">8\u003C\u002Fspan>Relationship status survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">\"Marital status\" alone misses the way most adults actually describe their relationships in 2026. Use \"relationship status\" as the headline and include the longer-form options.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which best describes your relationship status?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Single, never married\u003C\u002Fli>\n\u003Cli>In a relationship, not living together\u003C\u002Fli>\n\u003Cli>In a relationship, living together\u003C\u002Fli>\n\u003Cli>Married or in a civil partnership\u003C\u002Fli>\n\u003Cli>Separated\u003C\u002Fli>\n\u003Cli>Divorced\u003C\u002Fli>\n\u003Cli>Widowed\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> this is a customer-experience or product-feedback survey. Use it only when household structure, family planning, or relationship stage actually affects how someone uses the product or service.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">9\u003C\u002Fspan>Household composition survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Two short questions beat one. The first captures size, the second captures whether children are in the picture, which is what most consumer segmentation actually needs.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: How many people live in your household, including you?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>1 (just me)\u003C\u002Fli>\n\u003Cli>2\u003C\u002Fli>\n\u003Cli>3\u003C\u002Fli>\n\u003Cli>4\u003C\u002Fli>\n\u003Cli>5 or more\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Then ask: Do any children under 18 live in your household?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Yes\u003C\u002Fli>\n\u003Cli>No\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you are not segmenting by household structure. For most B2B surveys this is dead weight.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">10\u003C\u002Fspan>Location survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Decide the granularity before you build the field. Country is enough for most market-research surveys. State or province is useful for regional rollouts. City is rarely worth the privacy cost.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Country only (most surveys):\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Dropdown listing all countries, with \"Prefer not to say\" at the top.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Country + region (regional studies):\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Two dependent dropdowns. Country first, then the state or province list refreshes based on the country.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">City and country (only when you ship something physical):\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Open city field plus country dropdown. State the use (\"to estimate shipping zones\") in one line above the field.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">For mobile-first surveys, use a country dropdown with type-ahead. A long radio list of 195 countries crashes form completion on a phone.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">11\u003C\u002Fspan>Language survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Language matters for global product research, accessibility audits, and content localisation studies.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which language do you speak most often at home?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>English\u003C\u002Fli>\n\u003Cli>Spanish\u003C\u002Fli>\n\u003Cli>Mandarin\u003C\u002Fli>\n\u003Cli>Hindi\u003C\u002Fli>\n\u003Cli>Arabic\u003C\u002Fli>\n\u003Cli>French\u003C\u002Fli>\n\u003Cli>Portuguese\u003C\u002Fli>\n\u003Cli>Other (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">For multilingual respondents, follow up with \"Which other languages do you speak fluently?\" as a multi-select. If you are localising the survey itself, ask the language question first and route the respondent into a translated version.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">The \u003Ca href=\"https:\u002F\u002Fwww.surveymonkey.com\u002Flearn\u002Fsurvey-best-practices\u002Fgathering-demographic-information-from-surveys\u002F\">SurveyMonkey demographic best-practices guide\u003C\u002Fa> recommends placing language and accessibility questions before the rest of the demographics so the survey can adapt.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">12\u003C\u002Fspan>Disability survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">The \u003Ca href=\"https:\u002F\u002Fwww.washingtongroup-disability.com\u002Fquestion-sets\u002Fwg-short-set-on-functioning-wg-ss\u002F\">Washington Group Short Set on Functioning\u003C\u002Fa> is the global standard. It avoids the word \"disability\" (which respondents under-report) and asks about functioning in six domains instead. Use it directly.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask each of the following with the same answer scale:\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Do you have difficulty seeing, even if wearing glasses?\u003C\u002Fli>\n\u003Cli>Do you have difficulty hearing, even if using a hearing aid?\u003C\u002Fli>\n\u003Cli>Do you have difficulty walking or climbing steps?\u003C\u002Fli>\n\u003Cli>Do you have difficulty remembering or concentrating?\u003C\u002Fli>\n\u003Cli>Do you have difficulty with self-care, such as washing all over or dressing?\u003C\u002Fli>\n\u003Cli>Using your usual language, do you have difficulty communicating?\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Answer scale (same for all six):\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>No, no difficulty\u003C\u002Fli>\n\u003Cli>Yes, some difficulty\u003C\u002Fli>\n\u003Cli>Yes, a lot of difficulty\u003C\u002Fli>\n\u003Cli>Cannot do it at all\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you are outside accessibility audits, equity studies, healthcare research, or product research focused on assistive technology. Asking it casually feels invasive.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">13\u003C\u002Fspan>Sexual orientation survey question (optional)\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">This is a sensitive question. Ask only when you have a clear analytical reason (DEI study, healthcare research, LGBTQ+ market research) and you can show it in a privacy note above the field.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which best describes your sexual orientation?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Straight or heterosexual\u003C\u002Fli>\n\u003Cli>Gay or lesbian\u003C\u002Fli>\n\u003Cli>Bisexual or pansexual\u003C\u002Fli>\n\u003Cli>Asexual\u003C\u002Fli>\n\u003Cli>Queer\u003C\u002Fli>\n\u003Cli>Prefer to self-describe (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">The \u003Ca href=\"https:\u002F\u002Fsupport.greenhouse.io\u002Fhc\u002Fen-us\u002Farticles\u002F7541739987355-U-S-Standard-demographic-questions\">Greenhouse U.S. Standard demographic questions reference\u003C\u002Fa> uses an equivalent list and the same self-describe + opt-out pattern.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> you cannot show a clear analytical use. Under \u003Ca href=\"https:\u002F\u002Fgdpr-info.eu\u002Fart-9-gdpr\u002F\">GDPR Article 9\u003C\u002Fa>, sexual orientation is special-category data and EU respondents need explicit consent and a documented purpose.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">14\u003C\u002Fspan>Technology and digital access survey question\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Useful for product research, digital-equity studies, and any survey where the answer might be shaped by what device the respondent is using.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Ask: Which devices do you use to access the internet? Select all that apply.\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Smartphone\u003C\u002Fli>\n\u003Cli>Tablet\u003C\u002Fli>\n\u003Cli>Laptop\u003C\u002Fli>\n\u003Cli>Desktop computer\u003C\u002Fli>\n\u003Cli>Smart TV\u003C\u002Fli>\n\u003Cli>Game console\u003C\u002Fli>\n\u003Cli>None of the above\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Then ask: How would you describe your home internet connection?\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Reliable broadband\u003C\u002Fli>\n\u003Cli>Spotty broadband\u003C\u002Fli>\n\u003Cli>Mobile data only\u003C\u002Fli>\n\u003Cli>No home connection\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__skip\">\u003Cstrong>Skip if:\u003C\u002Fstrong> device or connection quality has no bearing on your analysis.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-demo-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-demo-steps__title\">\u003Cspan class=\"fmstr-cmp-demo-steps__num\" aria-hidden=\"true\">15\u003C\u002Fspan>Religion and political affiliation (optional, sensitive)\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">Both are special-category data under \u003Ca href=\"https:\u002F\u002Fgdpr-info.eu\u002Fart-9-gdpr\u002F\">GDPR Article 9\u003C\u002Fa> and both are flagged as sensitive in the \u003Ca href=\"https:\u002F\u002Fdoi.org\u002F10.1037\u002F0033-2909.133.5.859\">Tourangeau and Yan sensitive-question research\u003C\u002Fa>. Ask only when essential.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Religion (use only when relevant):\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Christian\u003C\u002Fli>\n\u003Cli>Muslim\u003C\u002Fli>\n\u003Cli>Hindu\u003C\u002Fli>\n\u003Cli>Buddhist\u003C\u002Fli>\n\u003Cli>Jewish\u003C\u002Fli>\n\u003Cli>Sikh\u003C\u002Fli>\n\u003Cli>Spiritual but not religious\u003C\u002Fli>\n\u003Cli>Atheist or agnostic\u003C\u002Fli>\n\u003Cli>Other (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__ask\">Political affiliation (use only when relevant):\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-demo-steps__options\">\n\u003Cli>Liberal or progressive\u003C\u002Fli>\n\u003Cli>Moderate\u003C\u002Fli>\n\u003Cli>Conservative\u003C\u002Fli>\n\u003Cli>Libertarian\u003C\u002Fli>\n\u003Cli>Other (text field)\u003C\u002Fli>\n\u003Cli>Prefer not to say\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp class=\"fmstr-cmp-demo-steps__body\">For US-specific political surveys, switch to party affiliation (Democrat, Republican, Independent, Other) with the same opt-out. Make both questions optional and place them last.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-tmpl-midcta a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-midcta { background: transparent; padding: 48px 0; font-family: inherit; color: #101828; overflow-x: hidden; }\n.fmstr-cmp-tmpl-midcta *, .fmstr-cmp-tmpl-midcta *::before, .fmstr-cmp-tmpl-midcta *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-midcta__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-midcta__card { width: 100%; background: linear-gradient(135deg, #f7f3ff 0%, #faf7ff 100%); border: 1px solid #e4d7ff; border-radius: 18px; padding: 48px 32px; text-align: center; box-shadow: 0 4px 24px rgba(127, 86, 217, 0.08); }\n.fmstr-cmp-tmpl-midcta__inner { max-width: 760px; margin: 0 auto; }\n.fmstr-cmp-tmpl-midcta__eyebrow { display: inline-block; padding: 4px 12px; background: #ffffff; border: 1px solid #e4d7ff; border-radius: 9999px; color: #5b34b1 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase; margin: 0 0 14px !important; }\n.fmstr-cmp-tmpl-midcta__h2 { font-size: clamp(22px, 3vw, 28px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; margin: 0 0 12px !important; color: #101828 !important; }\n.fmstr-cmp-tmpl-midcta__body { font-size: 16px !important; line-height: 1.55 !important; color: #475467 !important; margin: 0 0 22px !important; }\n.fmstr-cmp-tmpl-midcta__cta { display: inline-flex !important; align-items: center; gap: 8px; background: #7f56d9 !important; color: #ffffff !important; border: 1px solid #7f56d9 !important; padding: 12px 26px !important; border-radius: 9999px !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; transition: background .15s ease, transform .15s ease; }\n.fmstr-cmp-tmpl-midcta__cta:hover { background: #6941c6 !important; border-color: #6941c6 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px); }\n.fmstr-cmp-tmpl-midcta__cta::after { content: \"\\2192\"; transition: transform .15s ease; }\n.fmstr-cmp-tmpl-midcta__cta:hover::after { transform: translateX(2px); }\n.fmstr-cmp-tmpl-midcta__strip { font-size: 13px !important; color: #697586 !important; margin: 20px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; width: 100%; }\n.fmstr-cmp-tmpl-midcta__strip span { color: #d6c2f7; }\n@media (max-width: 760px) {\n  .fmstr-cmp-tmpl-midcta__card { padding: 36px 22px; }\n}\n@media (max-width: 540px) {\n  .fmstr-cmp-tmpl-midcta { padding: 32px 0; }\n  .fmstr-cmp-tmpl-midcta__card { padding: 26px 16px; border-radius: 14px; }\n  .fmstr-cmp-tmpl-midcta__h2 { font-size: 20px !important; }\n  .fmstr-cmp-tmpl-midcta__body { font-size: 15px !important; }\n  .fmstr-cmp-tmpl-midcta__cta { padding: 11px 22px !important; font-size: 14.5px !important; width: 100%; justify-content: center; }\n  .fmstr-cmp-tmpl-midcta__strip { font-size: 12.5px !important; gap: 4px 10px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-midcta\" aria-labelledby=\"fmstr-cmp-tmpl-midcta-h2\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__container\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__card\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__inner\">\n\u003Cspan class=\"fmstr-cmp-tmpl-midcta__eyebrow\">Survey builder\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-tmpl-midcta__h2\" id=\"fmstr-cmp-tmpl-midcta-h2\">Ask the right demographic questions, without survey-tool sprawl\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-midcta__body\">Multi-step forms, conditional logic, templates for every survey type. Free plan includes unlimited responses.\u003C\u002Fp>\n\u003Ca class=\"fmstr-cmp-tmpl-midcta__cta\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\" style=\"background: #7f56d9 !important; color: #ffffff !important; border-color: #7f56d9 !important; text-decoration: none !important;\">Start free on Formester\u003C\u002Fa>\n\u003Cp class=\"fmstr-cmp-tmpl-midcta__strip\">Free forever plan\u003Cspan>•\u003C\u002Fspan>No credit card\u003Cspan>•\u003C\u002Fspan>Setup in 2 minutes\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-demo-faq a { text-decoration: none !important; }\n.fmstr-cmp-demo-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; --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);\ntext-align: left !important; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-demo-faq *, .fmstr-cmp-demo-faq *::before, .fmstr-cmp-demo-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-demo-faq__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-demo-faq__h2 { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; margin: 0 !important; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-demo-faq__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 28px !important; text-align: left; }\n.fmstr-cmp-demo-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-demo-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-demo-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-demo-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-demo-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-demo-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-demo-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n.fmstr-cmp-demo-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-demo-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-demo-faq__answer a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-demo-faq { padding: 40px 16px; }\n.fmstr-cmp-demo-faq__intro { font-size: 15.5px !important; text-align: left; }\n.fmstr-cmp-demo-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-demo-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-demo-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-demo-faq img, .fmstr-cmp-demo-faq table, .fmstr-cmp-demo-faq pre, .fmstr-cmp-demo-faq iframe, .fmstr-cmp-demo-faq video { max-width: 100%; }\n.fmstr-cmp-demo-faq > * { min-width: 0; }\n.fmstr-cmp-demo-faq [class*='__grid'] > *, .fmstr-cmp-demo-faq [class*='__list'] > *, .fmstr-cmp-demo-faq [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-faq pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-demo-faq table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-demo-faq\" aria-labelledby=\"fmstr-cmp-demo-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-demo-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-demo-faq__h2\" id=\"fmstr-cmp-demo-faq-h2\">Frequently asked questions\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-demo-faq__intro\">Common questions about writing, ordering, and analysing demographic survey questions.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>What are the most important demographic survey questions to include?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Age, gender, location, and income are the four most-used demographic questions across consumer, employee, and academic surveys. Add ethnicity, language, employment status, and education when your analysis depends on them. Skip the rest. Most analyses need three to five demographic questions, not fifteen.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>Where should demographic questions go in a survey?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Place them at the end. The SurveyMonkey best-practices guide and most academic guidance agree: asking sensitive identity questions upfront raises drop-off and depresses accuracy. The exception is language and accessibility, which go first so the survey can adapt to the respondent.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>Should demographic questions be mandatory?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">No. Every demographic question should include \"Prefer not to say\" and should not block submission. Forcing answers on income, ethnicity, or gender produces either drop-offs or random selections, both of which hurt your data.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>How do I write inclusive gender questions in 2026?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Use a closed list with a self-describe text field and a \"Prefer not to say\" option. Keep gender identity separate from sex assigned at birth (most surveys do not need the second one at all). Avoid binary-only (\"Male \u002F Female\") and avoid stand-alone \"Other\".\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>How many demographic questions should I include?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Three to five. If your core survey has ten questions and your demographic section has twelve, the demographic section is the survey. Cut to the minimum that supports your analysis plan.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>Is it legal to ask about income and ethnicity in a survey?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Yes, in most jurisdictions, but with conditions. Under GDPR Article 9, ethnicity is special-category data and needs explicit consent plus a documented purpose. In the US, the EEOC has specific guidance on collecting demographic data for hiring purposes. Income is not legally restricted but is socially sensitive: always use ranges and an opt-out.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>What is the difference between demographic and psychographic survey questions?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Demographic questions describe who someone is (age, income, location). Psychographic questions describe how someone thinks (values, lifestyle, attitudes). Both segment your audience, but they answer different questions. Use demographic data for representativeness and equity checks, psychographic data for messaging and positioning.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-demo-faq__item\">\n\u003Csummary>When should I not ask demographic questions?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-demo-faq__answer\">Skip a demographic question when you cannot point to a specific cross-tab in your analysis plan that uses it. \"Just in case\" demographic data is the most common reason surveys feel invasive and the most common reason respondents bail before submitting.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-demo-rel a { text-decoration: none !important; }\n.fmstr-cmp-demo-rel {\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;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: transparent;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-demo-rel *, .fmstr-cmp-demo-rel *::before, .fmstr-cmp-demo-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-demo-rel__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-demo-rel__head { margin: 0 0 28px !important; text-align: left; }\n.fmstr-cmp-demo-rel__h2 { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; margin: 0 !important; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-demo-rel__intro { color: var(--c-fg-3); font-size: 17px !important; line-height: 1.6 !important; margin: 14px 0 0 !important; text-align: left; }\n\n.fmstr-cmp-demo-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-demo-rel__card {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;\ntext-decoration: none !important; color: inherit !important; transition: all .15s ease;\nposition: relative;\n}\n.fmstr-cmp-demo-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-demo-rel__chip {\ndisplay: inline-block; padding: 3px 10px; border-radius: 9999px;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\ncolor: var(--c-violet-600); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;\ntext-transform: uppercase; align-self: flex-start;\nmargin-bottom: 2px;\n}\n.fmstr-cmp-demo-rel__title {\nfont-size: 16px !important; font-weight: 700 !important; color: var(--c-fg-1); margin: 0 !important; line-height: 1.3 !important; text-align: left; }\n.fmstr-cmp-demo-rel__body { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--c-fg-2); margin: 0 !important; }\n.fmstr-cmp-demo-rel__arrow {\nmargin-top: 6px; color: var(--c-violet-600); font-size: 14px; font-weight: 600;\ndisplay: inline-flex; align-items: center; gap: 6px;\n}\n.fmstr-cmp-demo-rel__arrow::after {\ncontent: \"\\2192\"; transition: transform .15s ease; display: inline-block;\n}\n.fmstr-cmp-demo-rel__card:hover .fmstr-cmp-demo-rel__arrow::after { transform: translateX(3px); }\n\n@media (max-width: 880px) { .fmstr-cmp-demo-rel__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }\n@media (max-width: 540px) {\n.fmstr-cmp-demo-rel { padding: 40px 16px; }\n.fmstr-cmp-demo-rel__grid { grid-template-columns: 1fr; gap: 12px; }\n.fmstr-cmp-demo-rel__card { padding: 18px 20px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-demo-rel img, .fmstr-cmp-demo-rel table, .fmstr-cmp-demo-rel pre, .fmstr-cmp-demo-rel iframe, .fmstr-cmp-demo-rel video { max-width: 100%; }\n.fmstr-cmp-demo-rel > * { min-width: 0; }\n.fmstr-cmp-demo-rel [class*='__grid'] > *, .fmstr-cmp-demo-rel [class*='__list'] > *, .fmstr-cmp-demo-rel [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-demo-rel pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-demo-rel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-demo-rel\" aria-labelledby=\"fmstr-cmp-demo-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-demo-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-demo-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-demo-rel__h2\" id=\"fmstr-cmp-demo-rel-h2\">Related on Formester\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-demo-rel__intro\">Start from a demographic template, generate one from a prompt, or read up on adjacent survey patterns.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-demo-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fonline-survey-maker\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">No-code survey maker\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">Drag and drop builder with native conditional logic and \"Prefer not to say\" on every field.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-survey-generator\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Formester\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">AI survey generator\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">Generate a tailored demographic survey from a one-line prompt.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Template\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">Demographic survey template\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">All 15 questions above with inclusive 2026 phrasing, mobile-first layout, and built-in conditional logic.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Open\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fbest-survey-questions\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Blog\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">Best survey questions to ask\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">Open and closed-ended questions that pull honest answers across consumer and employee research.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Read\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-a-user-research-survey\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Blog\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">How to make a user research survey\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">Pair demographic questions with behavioural ones to segment real users, not just personas.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Read\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-demo-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-make-a-net-promoter-score-survey\u002F\">\n\u003Cspan class=\"fmstr-cmp-demo-rel__chip\">Blog\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-demo-rel__title\">Build a Net Promoter Score survey\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-demo-rel__body\">Cross-tab NPS by age, role, and income bracket to find the subgroups behind your headline score.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-demo-rel__arrow\">Read\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n","blog\u002Fblog\u002Fmust-have-demographic-questions-for-survey.md",{"text":213},"14 min read",1788363424744]