[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"blog-how-to-make-a-net-promoter-score-survey":3},{"blogData":4,"relatedArticles":29},{"id":5,"title":6,"author":7,"authorImage":8,"authorProfile":9,"coverImg":10,"coverImgAlt":11,"createdAt":12,"description":13,"featured":14,"jsonld":15,"keywords":16,"metaDescription":17,"metaImage":18,"metaTitle":19,"publishedAt":20,"slug":21,"updatedAt":22,"__hash__":23,"body":24,"coverImgWidth":25,"coverImgHeight":26,"readingStats":27},"blog\u002Fblog\u002Fhow-to-make-a-net-promoter-score-survey.md","How to Create a Net Promoter Score (NPS) Survey in Minutes","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_an_nps_survey_f45f71a201.png","how to make an nps survey","2024-11-13T03:29:56.377Z","In this post, we'll cover what an online Net Promoter Score (NPS) survey is and how to create, customize and analyze results to see how satisfied your customers are with your product or service.",false,[],"offline survey app,offline surveys,survey offline,offline feedback surveys,mobile surveys,offline survey tool,offline survey maker,offline survey software,offline data collection,offline forms,offline forms addon,offline forms app,offline forms free,offline form 2021,wpforms offline forms,wordpress offline form,offline form kaise bhare,offline mode,free offline forms,forms,online form,create offline forms,mobile forms offline,offline mobile forms","In this post, we'll cover what an online Net Promoter Score (NPS) survey is, how to create, and analyze results to see how loyal your customers are.",[],"How to Create a Net Promoter Score (NPS) Survey | Formester","2026-06-22T05:06:22.803Z","how-to-make-a-net-promoter-score-survey","2026-06-22T05:06:39.640Z","DZl07DBNlG7KBY51c3q4dOV-_YP-PQAVOkcSiR_8VYA","\u003Cp style=\"font-size: inherit;\">An NPS survey asks customers one question: how likely are you to recommend us, on a scale of 0 to 10. That single number tells you who loves you, who could leave, and where loyalty is leaking.\u003C\u002Fp>\n\n\u003Cp>This guide walks through the question to ask, the follow-ups that pull out the why, how the score is calculated, and what counts as a good NPS. Then you build one in a few minutes.\u003C\u002Fp>\n\n\u003Cp>Want to skip ahead and start collecting? Spin up an NPS survey with a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fonline-survey-maker\u002F\">free survey maker\u003C\u002Fa> and a ready-made scale field.\u003C\u002Fp>\n\n\u003Ch2>What Is an NPS Survey?\u003C\u002Fh2>\n\n\u003Cp>An NPS survey is a one-question loyalty survey. It asks people to rate, from 0 to 10, how likely they are to recommend your product or service to someone they know.\u003C\u002Fp>\n\n\u003Cp>Their answers sort them into three groups:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Promoters (9-10): your happiest, most loyal customers, the ones who refer others.\u003C\u002Fli>\n\u003Cli>Passives (7-8): satisfied but lukewarm, easy to lure away by a competitor.\u003C\u002Fli>\n\u003Cli>Detractors (0-6): unhappy customers who can spread negative word of mouth.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Subtract the percentage of detractors from the percentage of promoters and you get one number between -100 and +100. The higher it climbs, the stronger your loyalty base.\u003C\u002Fp>\n\n\u003Ch2>NPS Survey Questions (Copy and Paste)\u003C\u002Fh2>\n\n\u003Cp>Every NPS survey starts with one required rating question, then one open follow-up that explains the score. Here are versions you can lift straight into your form.\u003C\u002Fp>\n\n\u003Ch3>The core rating question (0 to 10)\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>How likely are you to recommend us to a friend or colleague?\u003C\u002Fli>\n\u003Cli>How likely are you to recommend [product] to someone with the same need?\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Follow-up for promoters (9-10)\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>What did you enjoy most about using us?\u003C\u002Fli>\n\u003Cli>What is the one thing you would tell a friend about us?\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Follow-up for passives (7-8)\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>What would have made this a 9 or a 10?\u003C\u002Fli>\n\u003Cli>What is one thing we could do better?\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Follow-up for detractors (0-6)\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>What went wrong, and what would you change first?\u003C\u002Fli>\n\u003Cli>What stopped this from being a better experience?\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Keep the rating question required and the follow-up optional. One rating plus one open question is the format that keeps response rates high. Build the whole set in minutes with the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fonline-survey-maker\u002F\">online survey maker\u003C\u002Fa> using a scale field for the rating and conditional logic for the follow-ups.\u003C\u002Fp>\n\n\u003Ch2>How to Create an NPS Survey in 6 Steps\u003C\u002Fh2>\n\n\u003Cp>You can build a working NPS survey in a few minutes. Here is the full flow, from blank form to live results.\u003C\u002Fp>\n\n\u003Ch3>Step 1: Start Building Your Form\u003C\u002Fh3>\n\n\u003Cp>Open your form builder and click New Form. You can start from scratch, generate one with AI, or pick a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002F\">free template\u003C\u002Fa>. We will start from scratch.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Rename: give the survey a clear title so respondents know what they are answering.\u003C\u002Fli>\n\u003Cli>Add elements: a scale rating question (0 to 10), fields for name and email, and two short follow-ups, \"What went wrong?\" and \"What did you enjoy?\"\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Step 2: Design Your Survey\u003C\u002Fh3>\n\n\u003Cp>Match the look to your brand with the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fbranding-kit\u002F\">branding kit\u003C\u002Fa> so the survey feels like part of your product, not a third-party pop-up. Make the rating field required so every response counts toward the score.\u003C\u002Fp>\n\n\u003Ch3>Step 3: Create Three Thank You Pages\u003C\u002Fh3>\n\n\u003Cp>Set up three separate thank you pages so each group gets the right message:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Scores 9-10: route to a Promoters page (ask for a review or referral).\u003C\u002Fli>\n\u003Cli>Scores 7-8: route to a Passives page (ask what would make it a 10).\u003C\u002Fli>\n\u003Cli>Scores 0-6: route to a Detractors page (ask what went wrong and offer to make it right).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>Step 4: Set Up Conditional Rules\u003C\u002Fh3>\n\n\u003Cp>Now wire the routing so each score lands on the right page. Open the Advanced section, find Form Control, and set the rules:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Score 9 or above, show the Promoters page.\u003C\u002Fli>\n\u003Cli>Score 7 or 8, show the Passives page.\u003C\u002Fli>\n\u003Cli>Score 6 or below, show the Detractors page.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>You can also show or hide follow-up questions based on the rating, so a detractor only sees \"What went wrong?\" Here is how \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fbuild-conditional-logic-forms-with-ai\u002F\">conditional logic forms work and how to build one with AI\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch3>Step 5: Test Your Survey\u003C\u002Fh3>\n\n\u003Cp>Run the survey yourself before you publish. Submit a few test scores and check that each one lands on the correct thank you page and shows the right follow-up. Enter a 5 and you should see only the \"What went wrong?\" question, not the promoter prompt.\u003C\u002Fp>\n\n\u003Ch3>Step 6: Publish and Analyze Your Survey\u003C\u002Fh3>\n\n\u003Cp>Publish the survey and start collecting. Generate a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fqr-code-generator\u002F\">QR code\u003C\u002Fa> to print on receipts, flyers, or packaging so people can scan and answer on the spot.\u003C\u002Fp>\n\n\u003Cp>As responses land, open the submissions view and filter by score to see your promoter, passive, and detractor split. Summary analytics on the scale field show the distribution at a glance, so you can read the trend without exporting anything.\u003C\u002Fp>\n\n\u003Ch2>How to Calculate Your NPS\u003C\u002Fh2>\n\n\u003Cp>The math is simple. Take the percentage of promoters and subtract the percentage of detractors. Passives are left out.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Sort responses into promoters (9-10), passives (7-8), and detractors (0-6).\u003C\u002Fli>\n\u003Cli>Work out what percent of all responses are promoters, and what percent are detractors.\u003C\u002Fli>\n\u003Cli>Subtract: NPS = %Promoters minus %Detractors.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Say 100 people respond: 60 promoters, 25 passives, 15 detractors. That is 60% minus 15%, an NPS of +45. The result always sits between -100 and +100. Export the raw data to Excel or \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fintegrations\u002F\">connect Google Sheets\u003C\u002Fa> if you want to slice it further.\u003C\u002Fp>\n\n\u003Ch2>What Is a Good NPS Score?\u003C\u002Fh2>\n\n\u003Cp>Any score above zero means you have more promoters than detractors, which is a fine place to start. As a rough guide:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Above 0: more fans than critics, a positive baseline.\u003C\u002Fli>\n\u003Cli>Above 30: good. Most customers are happy and some will refer you.\u003C\u002Fli>\n\u003Cli>Above 50: excellent. Loyalty is a real growth lever for you.\u003C\u002Fli>\n\u003Cli>Above 70: world-class, the territory of brands people rave about unprompted.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Benchmarks shift by industry, so the honest read is your own trend. Track NPS the same way each quarter and watch whether the number is climbing. The direction matters more than any single snapshot.\u003C\u002Fp>\n\n\u003Ch2>Start Measuring Loyalty Today\u003C\u002Fh2>\n\n\u003Cp>An NPS survey turns one simple question into a number you can act on. Ask it well, route each group to the right follow-up, and track the score over time instead of obsessing over a single reading.\u003C\u002Fp>\n\n\u003Cp>Ready to run yours? Build an NPS survey with a scale field and conditional thank-you pages, then read the split in built-in analytics. \u003Ca href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Start building free with Formester\u003C\u002Fa> or grab a ready-made \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fsurvey-forms\u002F\">survey template\u003C\u002Fa> to launch even faster.\u003C\u002Fp>\n\n\u003Csection class=\"faq\">\n\u003Ch2>NPS Survey FAQ\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>What is an NPS survey?\u003C\u002Fsummary>\u003Cdiv>A one-question loyalty survey that asks how likely someone is to recommend you on a 0 to 10 scale, then sorts them into promoters, passives, and detractors.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What is the standard NPS survey question?\u003C\u002Fsummary>\u003Cdiv>How likely are you to recommend us to a friend or colleague, answered on a 0 to 10 scale where 0 is not at all likely and 10 is extremely likely.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How is the Net Promoter Score calculated?\u003C\u002Fsummary>\u003Cdiv>Subtract the percentage of detractors (0 to 6) from the percentage of promoters (9 to 10). Passives (7 to 8) are left out. The result lands between -100 and +100.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What is a good NPS score?\u003C\u002Fsummary>\u003Cdiv>Anything above zero is positive. Above 30 is good, above 50 is excellent, and above 70 is world-class, though the bar moves by industry.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How many questions should an NPS survey have?\u003C\u002Fsummary>\u003Cdiv>One required rating question plus one optional open follow-up asking why. Keeping it short is what keeps response rates high.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n",1214,630,{"text":28},"7 min read",[30,180,199,218],{"title":31,"author":32,"authorImage":33,"authorProfile":34,"coverImg":35,"coverImgAlt":36,"createdAt":37,"description":38,"featured":14,"jsonld":39,"keywords":169,"metaDescription":170,"metaImage":171,"metaTitle":31,"publishedAt":37,"slug":172,"updatedAt":37,"__hash__":173,"body":174,"id":175,"coverImgWidth":176,"coverImgHeight":177,"readingStats":178},"Google Forms Webhooks: 4 Ways to Send One","Harsh Shah","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F41fc6df7f8a7952a_harsh-shah.jpg","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharshshahseo\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fd93be40c27b01e95_google-forms-webhooks.jpg","Cover art for a guide to sending webhooks from Google Forms","2026-08-29T00:00:00.000Z","Google Forms has no webhook that posts to your URL. Here are the four routes that actually work, what each one costs you, and the seven-day expiry nobody mentions.",[40],{"@context":41,"@graph":42},"https:\u002F\u002Fschema.org",[43,51,60,73,104,142,162],{"@type":44,"@id":45,"url":46,"name":47,"logo":48},"Organization","https:\u002F\u002Fformester.com\u002F#organization","https:\u002F\u002Fformester.com\u002F","Formester",{"@type":49,"url":50},"ImageObject","https:\u002F\u002Fformester.com\u002Flogo.png",{"@type":52,"@id":53,"url":54,"name":31,"isPartOf":55,"breadcrumb":56,"inLanguage":58,"description":38,"datePublished":59,"dateModified":59},"WebPage","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F#webpage","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F",{"@id":45},{"@id":57},"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F#breadcrumb","en-US","2026-08-29",{"@type":61,"@id":57,"itemListElement":62},"BreadcrumbList",[63,67,71],{"@type":64,"position":65,"name":66,"item":46},"ListItem",1,"Home",{"@type":64,"position":68,"name":69,"item":70},2,"Blog","https:\u002F\u002Fformester.com\u002Fblog\u002F",{"@type":64,"position":72,"name":31,"item":54},3,{"@type":74,"@id":75,"headline":31,"image":35,"author":76,"publisher":78,"inLanguage":58,"description":38,"datePublished":59,"dateModified":59,"mainEntityOfPage":79,"about":80,"mentions":87,"citation":94},"BlogPosting","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F#article",{"@type":77,"name":32,"url":34,"image":33},"Person",{"@id":45},{"@id":53},[81],{"@type":82,"name":83,"applicationCategory":84,"url":85,"operatingSystem":86},"SoftwareApplication","Google Forms","BusinessApplication","https:\u002F\u002Fdocs.google.com\u002Fforms\u002F","Web",[88,90],{"@id":89},"https:\u002F\u002Fformester.com\u002F#software",{"@type":82,"name":91,"applicationCategory":92,"url":93,"operatingSystem":86},"Google Apps Script","DeveloperApplication","https:\u002F\u002Fscript.google.com\u002F",[95,100],{"@type":52,"name":96,"url":97,"publisher":98},"Set up and receive push notifications","https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fforms\u002Fapi\u002Fguides\u002Fpush-notifications",{"@type":44,"name":99},"Google",{"@type":52,"name":101,"url":102,"publisher":103},"REST Resource: forms.watches","https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fforms\u002Fapi\u002Freference\u002Frest\u002Fv1beta\u002Fforms.watches",{"@type":44,"name":99},{"@type":105,"@id":106,"mainEntity":107},"FAQPage","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F#faq",[108,114,118,122,126,130,134,138],{"@type":109,"name":110,"acceptedAnswer":111},"Question","Does Google Forms have webhooks?",{"@type":112,"text":113},"Answer","Not in the form editor. There is no setting that posts a submission to a URL you choose. The closest official route is the Google Forms API, which sends change notifications to a Cloud Pub\u002FSub topic rather than to your endpoint, so you still need code in between.",{"@type":109,"name":115,"acceptedAnswer":116},"How do I send a webhook from a Google Form?",{"@type":112,"text":117},"Open the form, click the three-dot menu and choose Apps Script. Write an onFormSubmit trigger that calls UrlFetchApp.fetch with your endpoint and the response payload. That is the only route that needs no third-party service and no Google Cloud project.",{"@type":109,"name":119,"acceptedAnswer":120},"Is there an API for Google Forms?",{"@type":112,"text":121},"Yes. The Google Forms API can read a form's schema and its responses, and it can register a watch so you get notified when either changes. It is a REST API, so it does not push to an arbitrary URL by itself.",{"@type":109,"name":123,"acceptedAnswer":124},"How long does a Google Forms API watch last?",{"@type":112,"text":125},"Seven days. Google's reference documentation states that a watch expires seven days after it is created unless it is renewed, so any integration built this way needs a scheduled renewal job or it goes silent after a week.",{"@type":109,"name":127,"acceptedAnswer":128},"Are Google Forms webhooks free?",{"@type":112,"text":129},"The Apps Script route is free and runs inside your Google account against its normal quotas. The Forms API route needs a Google Cloud project with Pub\u002FSub, which has a free tier and then bills on usage. Marketplace add-ons and connectors like Make, n8n or Zapier have their own pricing.",{"@type":109,"name":131,"acceptedAnswer":132},"What event types can the Google Forms API watch?",{"@type":112,"text":133},"Two of them. RESPONSES fires when a new response arrives and SCHEMA fires when the form's questions change, and there is no separate event for a response that gets edited after submission.",{"@type":109,"name":135,"acceptedAnswer":136},"Why is my Google Forms webhook delayed?",{"@type":112,"text":137},"If you built it on the Forms API, delivery is not guaranteed to be instant. Google's own documentation says notifications usually arrive within minutes and that in some situations they may be delayed. Apps Script triggers fire on submission and are generally faster.",{"@type":109,"name":139,"acceptedAnswer":140},"Can I send Google Form responses to Discord or Slack?",{"@type":112,"text":141},"Yes, with Apps Script. Both accept an incoming webhook URL, so an onFormSubmit trigger that posts a JSON payload to that URL is enough. This is the most common reason people go looking for Google Forms webhooks in the first place.",{"@type":143,"@id":144,"name":145,"description":146,"step":147},"HowTo","https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-forms-webhooks\u002F#howto","Send a webhook from a Google Form with Apps Script","Use an onFormSubmit trigger and UrlFetchApp to post each submission to your own endpoint.",[148,152,155,158],{"@type":149,"position":65,"name":150,"text":151},"HowToStep","Open Apps Script","In the form editor, open the three-dot menu in the top right and choose Apps Script.",{"@type":149,"position":68,"name":153,"text":154},"Write the handler","Add a function that reads the submitted response and posts it with UrlFetchApp.fetch to your endpoint.",{"@type":149,"position":72,"name":156,"text":157},"Add an onFormSubmit trigger","In the Triggers panel, add a trigger on form submit that runs your function.",{"@type":149,"position":159,"name":160,"text":161},4,"Authorise and test","Run the function once to grant the script permission, then submit the form and check your endpoint received the payload.",{"@type":82,"@id":89,"url":46,"name":47,"applicationCategory":84,"operatingSystem":163,"offers":164},"Web, iOS, Android",{"@type":165,"price":166,"priceCurrency":167,"description":168},"Offer","0","USD","Free forever plan, no credit card required","google forms webhooks,google form webhook,google forms api,google forms webhook url,google form webhook n8n,google forms webhook discord,apps script form submit webhook","Google Forms has no native webhook. Compare Apps Script, the Forms API with Pub\u002FSub, marketplace add-ons and connectors, with the catch in each.",[],"google-forms-webhooks","MXBsdw6vsp6UmBm_q7Yt27rKzvMFwoFp6QqF6QjtOo0","\n![Cover art for a guide to sending webhooks from Google Forms](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fd93be40c27b01e95_google-forms-webhooks.jpg)\n\n\u003Cp style=\"font-size: inherit;\">A webhook is an HTTP request your form fires the moment someone submits, so another system can react without anyone polling for changes. Developers want one for Google Forms so responses can land in Slack, a Discord channel, an internal API or a database without anyone refreshing a spreadsheet to check. Google Forms does not have one, and the official mechanism Google does offer turns out to be quite different from what most people arrive looking for.\u003C\u002Fp>\n\n\u003Cdiv class=\"tldr\">\n\u003Cp>\u003Cstrong>Key facts\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>There is no setting in Google Forms that posts a submission to a URL you pick. Four routes get you there: Apps Script, the Forms API with Cloud Pub\u002FSub, a Marketplace add-on, or a connector like Make, n8n or Zapier. Apps Script is the only free one that needs nothing outside your Google account.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Native webhook in the form editor: none.\u003C\u002Fstrong> The closest official mechanism is an API watch\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Where the API delivers:\u003C\u002Fstrong> a Cloud Pub\u002FSub topic, not your endpoint (\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fforms\u002Fapi\u002Fguides\u002Fpush-notifications\" target=\"_blank\" rel=\"noopener\">Google for Developers\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Watch lifespan: 7 days.\u003C\u002Fstrong> It expires unless you renew it with \u003Ccode>watches.renew\u003C\u002Fcode> (\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fforms\u002Fapi\u002Freference\u002Frest\u002Fv1beta\u002Fforms.watches\" target=\"_blank\" rel=\"noopener\">Google for Developers\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>2 event types:\u003C\u002Fstrong> \u003Ccode>RESPONSES\u003C\u002Fcode> for new answers, \u003Ccode>SCHEMA\u003C\u002Fcode> for question changes (\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fforms\u002Fapi\u002Fguides\u002Fpush-notifications\" target=\"_blank\" rel=\"noopener\">Google for Developers\u003C\u002Fa>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Delivery is not guaranteed instant.\u003C\u002Fstrong> Google says notifications arrive usually within minutes and may sometimes be delayed\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\n\u003Ch2>Which route should you use?\u003C\u002Fh2>\n\n\u003Cp>All four end with your endpoint receiving the response. They differ in what you have to run and maintain.\u003C\u002Fp>\n\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Route\u003C\u002Fth>\u003Cth>What it needs\u003C\u002Fth>\u003Cth>The catch\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#apps-script\">Apps Script\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>A few lines of JavaScript in the form itself\u003C\u002Ftd>\u003Ctd>You own the code, the retries and the error handling\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#forms-api\">Forms API + Pub\u002FSub\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>A Google Cloud project and a Pub\u002FSub topic\u003C\u002Ftd>\u003Ctd>The watch expires after seven days unless renewed\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#add-on\">Marketplace add-on\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>Install and authorise, no code\u003C\u002Ftd>\u003Ctd>A third party sits in the path of your form data\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ca href=\"#connector\">Make, n8n or Zapier\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>An account with the connector\u003C\u002Ftd>\u003Ctd>Per-task pricing, and many trigger on a poll rather than instantly\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\n\u003Ch2 id=\"apps-script\">How do you send a webhook from a Google Form with Apps Script?\u003C\u002Fh2>\n\n\u003Cp>Write an \u003Ccode>onFormSubmit\u003C\u002Fcode> trigger that posts the response to your URL. This is the route most tutorials land on. It costs nothing and it runs inside your own Google account rather than someone else's service.\u003C\u002Fp>\n\u003Col>\n\u003Cli>Open the form, click the three-dot menu in the top right, and choose \u003Cstrong>Apps Script\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F54bae7da343a2d8f_01-apps-script-menu.jpg\" alt=\"The Google Forms three-dot menu showing Apps Script and Get add-ons\" loading=\"lazy\" style=\"width:100%;max-width:272px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\u003Cli>Paste a handler that reads the submitted response and posts it.\u003C\u002Fli>\n\u003Cli>In the \u003Cstrong>Triggers\u003C\u002Fstrong> panel, add a trigger that runs your function on form submit.\u003C\u002Fli>\n\u003Cli>Run the function once to grant permissions, then submit a test response.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>The handler is about ten lines:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Apps Script handler\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>function onFormSubmit(e) { const out = {}; e.response.getItemResponses().forEach(r => { out[r.getItem().getTitle()] = r.getResponse(); }); UrlFetchApp.fetch('https:\u002F\u002Fapi.yourapp.com\u002Fhooks', { method: 'post', contentType: 'application\u002Fjson', payload: JSON.stringify(out) }); }\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>The part that rarely survives into the tutorials is what happens when the call fails. If your endpoint is down at the moment the trigger fires, that submission is gone as far as the webhook is concerned, because Apps Script will not retry it on your behalf, which means anything you genuinely depend on needs its own queue or at minimum a catch block that writes the failure somewhere you will look later.\u003C\u002Fp>\n\n\u003Ch2 id=\"forms-api\">Does the Google Forms API have webhooks?\u003C\u002Fh2>\n\n\u003Cp>It has watches, which are not the same thing. You register a watch on a form, Google publishes change notifications to a \u003Cstrong>Cloud Pub\u002FSub topic\u003C\u002Fstrong> you own, and your own code subscribes to that topic to pick them up. Google never calls your URL directly, which means there is always a piece of your own infrastructure sitting in the middle of it.\u003C\u002Fp>\n\u003Cp>Three details from Google's documentation shape whether this is worth it:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>It expires.\u003C\u002Fstrong> A watch lasts seven days from creation, so you have to renew it with \u003Ccode>watches.renew\u003C\u002Fcode> before that deadline or the integration quietly stops delivering, which is an unpleasant thing to discover a fortnight after you shipped it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Two events only.\u003C\u002Fstrong> \u003Ccode>RESPONSES\u003C\u002Fcode> covers new answers and \u003Ccode>SCHEMA\u003C\u002Fcode> covers changes to the questions, and nothing in either of them distinguishes an edited response from a brand new one.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Permissions take a pass or two.\u003C\u002Fstrong> Your Pub\u002FSub topic has to grant publish rights to Google's own service account before any of this works, and the failure mode when it has not is silence rather than an error you can chase.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>This route makes sense if you are already running on Google Cloud and want form responses arriving in the same event pipeline as the rest of your services, and it makes very little sense if you came here hoping to paste a URL into a box and move on.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-blog-cta\">\n\u003Cp>\u003Cstrong>Want a webhook without the plumbing?\u003C\u002Fstrong> Formester posts form events straight to any endpoint you name, with the events you choose.\u003C\u002Fp>\n\u003Cp>\u003Ca class=\"fmstr-blog-cta__btn\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Try Formester free\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp class=\"fmstr-blog-cta__meta\">Free forever plan · No credit card · Setup in 2 minutes\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2 id=\"add-on\">Is there a Google Forms webhook add-on?\u003C\u002Fh2>\n\n\u003Cp>Several of them exist, and \u003Ca href=\"https:\u002F\u002Fworkspace.google.com\u002Fmarketplace\u002Fapp\u002Fsend_to_api_webhooks\u002F189658533728\" target=\"_blank\" rel=\"noopener\">Send to API \u002F Webhooks\u003C\u002Fa> on Google Workspace Marketplace is the one that surfaces most often, with Digital Inspiration's Form Notifications add-on handling webhooks as well. You install it, authorise it and paste in an endpoint, after which there is no code left for you to maintain.\u003C\u002Fp>\n\u003Cp>What you are trading away is access, because an add-on that reads every submission holds a live authorisation against both your form and your Google account for as long as it stays installed. On an internal team form that is rarely worth a second thought. On applicant data, or on anything that has a compliance owner attached to it, read what the add-on is asking for before you click allow.\u003C\u002Fp>\n\n\u003Ch2 id=\"connector\">Can Make, n8n or Zapier trigger on a Google Form?\u003C\u002Fh2>\n\n\u003Cp>All three connect, and how they trigger matters more than whether they connect. Many Google Forms integrations watch the linked Google Sheet on a schedule rather than reacting to the submission itself, which turns your real-time webhook into a poll that runs every few minutes.\u003C\u002Fp>\n\u003Cp>The common workaround in the Make and n8n communities is to skip the native trigger, put an Apps Script \u003Ccode>onFormSubmit\u003C\u002Fcode> on the form, and have it POST to the connector's own webhook URL. At that point you are back to writing Apps Script, and you are paying for the connector as well.\u003C\u002Fp>\n\n\u003Ch2 id=\"formester\">What does a native form webhook look like?\u003C\u002Fh2>\n\n\u003Cp>For comparison, this is the same job on a builder that ships webhooks as a first-class feature rather than an extension point.\u003C\u002Fp>\n\u003Cp>You open the form, go to \u003Cstrong>Automate\u003C\u002Fstrong> and then \u003Cstrong>Webhooks\u003C\u002Fstrong>, and click Add Webhook. The panel asks for an endpoint URL and a tick against the events you care about, which are \u003Ccode>submission.created\u003C\u002Fcode>, \u003Ccode>submission.updated\u003C\u002Fcode> and \u003Ccode>submission.deleted\u003C\u002Fcode>. From there the payload posts as JSON the moment the event happens, signed with a secret so your endpoint can confirm the request genuinely came from Formester rather than from anyone who guessed the URL.\u003C\u002Fp>\n\u003Cp>What you never touch is the rest of it. There is no Pub\u002FSub topic to create and no Cloud project to bill, and nothing expires after seven days while a calendar reminder you forgot to set waits to break the integration.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F5bf939da075b3e2c_webhook-add-endpoint.jpg\" alt=\"Formester's Add Webhook panel with an endpoint URL field and submission.created, submission.updated and submission.deleted events\" loading=\"lazy\" style=\"width:100%;max-width:430px;height:auto;border-radius:10px;border:1px solid #d8dce3;box-shadow:0 1px 3px rgba(16,24,40,0.08);margin:18px 0;\" \u002F>\u003C\u002Fp>\n\n\u003Cdiv class=\"better\">\n\u003Ch5>Why Formester's webhooks are the better choice\u003C\u002Fh5>\n\u003Cp>The endpoint field Google Forms never gave you.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fintegrations\u002Fwebhook\u002F\">Webhooks post in real time\u003C\u002Fa> to any HTTP endpoint, with no polling and no connector in the middle\u003C\u002Fli>\n\u003Cli>Three events to pick from, so one form can feed several systems without every hook firing on everything\u003C\u002Fli>\n\u003Cli>Each request is signed, and the endpoint is tested before the webhook saves\u003C\u002Fli>\n\u003Cli>Clean JSON payloads your endpoint can parse directly, rather than a spreadsheet row you have to reshape\u003C\u002Fli>\n\u003Cli>Pair them with \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">spam protection\u003C\u002Fa> so the payloads reaching your API are real submissions\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Ca class=\"btn\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\">Try Formester free\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Csection class=\"faq\">\n\u003Ch2>Google Forms webhooks FAQ\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>Does Google Forms have webhooks?\u003C\u002Fsummary>\u003Cp>Not in the form editor. There is no setting that posts a submission to a URL you choose. The closest official route is the Google Forms API, which sends change notifications to a Cloud Pub\u002FSub topic rather than to your endpoint, so you still need code in between.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I send a webhook from a Google Form?\u003C\u002Fsummary>\u003Cp>Open the form, click the three-dot menu and choose Apps Script. Write an onFormSubmit trigger that calls UrlFetchApp.fetch with your endpoint and the response payload. That is the only route that needs no third-party service and no Google Cloud project.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Is there an API for Google Forms?\u003C\u002Fsummary>\u003Cp>Yes. The Google Forms API can read a form's schema and its responses, and it can register a watch so you get notified when either changes. It is a REST API, so it does not push to an arbitrary URL by itself.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How long does a Google Forms API watch last?\u003C\u002Fsummary>\u003Cp>Seven days. Google's reference documentation states that a watch expires seven days after it is created unless it is renewed, so any integration built this way needs a scheduled renewal job or it goes silent after a week.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Are Google Forms webhooks free?\u003C\u002Fsummary>\u003Cp>The Apps Script route is free and runs inside your Google account against its normal quotas. The Forms API route needs a Google Cloud project with Pub\u002FSub, which has a free tier and then bills on usage. Marketplace add-ons and connectors like Make, n8n or Zapier have their own pricing.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What event types can the Google Forms API watch?\u003C\u002Fsummary>\u003Cp>Two of them. RESPONSES fires when a new response arrives and SCHEMA fires when the form's questions change, and there is no separate event for a response that gets edited after submission.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Why is my Google Forms webhook delayed?\u003C\u002Fsummary>\u003Cp>If you built it on the Forms API, delivery is not guaranteed to be instant. Google's own documentation says notifications usually arrive within minutes and that in some situations they may be delayed. Apps Script triggers fire on submission and are generally faster.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can I send Google Form responses to Discord or Slack?\u003C\u002Fsummary>\u003Cp>Yes, with Apps Script. Both accept an incoming webhook URL, so an onFormSubmit trigger that posts a JSON payload to that URL is enough. This is the most common reason people go looking for Google Forms webhooks in the first place.\u003C\u002Fp>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n\u003Ch2>Related reading\u003C\u002Fh2>\n\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-use-webhooks-in-formester\u002F\">\u003Cstrong>How to use webhooks in Formester\u003C\u002Fstrong>\u003C\u002Fa> - the same setup on our side, with the events list.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-link-google-sheets-to-google-forms\u002F\">\u003Cstrong>Link Google Forms to Google Sheets\u003C\u002Fstrong>\u003C\u002Fa> - the polling route most connectors actually use.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-ways-to-view-responses-in-google-forms\u002F\">\u003Cstrong>View responses in Google Forms\u003C\u002Fstrong>\u003C\u002Fa> - where the data sits before you move it.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fgoogle-form-send-copy-of-response\u002F\">\u003Cstrong>Send a copy of Google Form responses\u003C\u002Fstrong>\u003C\u002Fa> - the no-code way to get a submission out by email.\u003C\u002Fli>\n\u003C\u002Ful>\n","blog\u002Fblog\u002Fgoogle-forms-webhooks.md",2400,1350,{"text":179},"9 min read",{"title":181,"author":7,"authorImage":8,"authorProfile":9,"coverImg":182,"coverImgAlt":183,"createdAt":184,"description":185,"featured":14,"jsonld":186,"keywords":187,"metaDescription":188,"metaImage":189,"metaTitle":190,"publishedAt":191,"slug":192,"updatedAt":193,"__hash__":194,"body":195,"id":196,"coverImgWidth":25,"coverImgHeight":26,"readingStats":197},"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":198},"16 min read",{"title":200,"author":7,"authorImage":8,"authorProfile":9,"coverImg":201,"coverImgAlt":202,"createdAt":203,"description":204,"featured":14,"jsonld":205,"keywords":206,"metaDescription":207,"metaImage":208,"metaTitle":209,"publishedAt":210,"slug":211,"updatedAt":212,"__hash__":213,"body":214,"id":215,"coverImgWidth":25,"coverImgHeight":26,"readingStats":216},"Top 10 Compliance Management Tools & Software for 2025","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_7_4ba816382b.png","a blog post cover about best compliance management tools","2025-04-29T15:20:18.502Z","Explore top compliance software to manage audits, reduce risk, and follow rules easily. Find the best tool for your business needs today.",[],"compliance management software,\ncompliance management tools,\ncompliance management,\ncompliance management automation,","Find the 10 best compliance management software tools in 2025. Simplify audits, stay secure, and meet regulations with ease.",[],"10 Best Compliance Management Tools & Software for 2025","2025-04-29T15:37:09.563Z","best-compliance-management-tools","2025-08-20T01:29:54.745Z","Wgn2c3DnioyKup4VoTQ-WKeiXhIUitcFVqiky_-vzg0","\n![a blog post cover about best compliance management tools](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_7_4ba816382b.png)\n\nKeeping up with rules and regulations can feel overwhelming. That’s why **compliance management software** exists to help you stay on track automatically, without the headaches.\n\nCompliance management tools make sure your business follows the right rules, policies, and standards every time. They help you reduce risks, avoid fines, and build customer trust.\n\nWith the right software, you’ll save time, avoid costly mistakes, and keep your business growing safely and smoothly.\n\nAnd if you add tools like **[Formester](\u002F)** to collect customer and internal data with smart online forms, you can automate even more and stay audit-ready at all times!\n\n## What is Compliance Management Software?\nCompliance management software is a tool that helps your **[business follow the rules](https:\u002F\u002Fcompliancechain.com\u002Fwhat-is-business-compliance-ultimate-guide\u002F)**.\n\nEvery business has to follow certain laws, regulations, and industry standards. These might be about how you protect customer data, how you handle money, or how you treat employees. \n\nIf you don’t follow these rules, you can get into serious trouble like paying big fines or losing customers.\n\nThat’s where compliance software comes in. Instead of trying to remember all the rules yourself or doing everything manually, this tool helps you stay on track. \n\nIt keeps everything organized, reminds you of deadlines, stores important documents, and even tracks who did what and when.\n\nThink of it like a smart checklist and filing cabinet rolled into one made to help your business stay safe, legal, and stress-free.\n\nWith compliance software, you can:\n\n- Avoid mistakes and penalties\n\n- Save time on paperwork\n\n- Keep all your important files in one place\n\n- Show auditors or regulators that you’re following the rules\n\nAnd the best part? It does a lot of the work for you, so you can focus on growing your business instead of worrying about red tape.\n\n## Top 10 Compliance Management Software in 2024\nHere’s a list of the best compliance tools to help your business follow rules, stay organized, and avoid costly mistakes.\n\n### 1. Vanta\n![a mockup of vanta](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F16_73b2d4f87a.png)\n\nVanta helps businesses get security certifications like SOC 2 and ISO 27001 faster and with less effort. It constantly checks your systems to make sure they follow the right rules. \n\nIt also collects the evidence you need for audits, so you don’t have to chase after it manually. This saves you time and keeps you on track.\n\n**Key Features:**\n- Automated security checks\n\n- Pre-built policy templates\n\n- Continuous system monitoring\n\n- Easy integration with cloud tools\n\n**Pricing:**\nCustom plans available; pricing depends on company size and needs.\n\n**Ideal Use Cases:**\n Best for startups and tech companies that need to prove their security to customers and pass audits quickly.\n\n### 2. Hyperproof\n![a mockup of hyperproof](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F17_e4409fc25b.png)\n\nHyperproof gives you one place to manage all your compliance work. You can create tasks, track deadlines, and collect audit documents without jumping between different tools. \n\nIt helps teams stay organized and ready for any inspection. Whether it’s GDPR, SOC 2, or HIPAA, Hyperproof makes it easier to stay compliant and audit-ready.\n\n**Key Features:**\n- Centralized compliance tracking\n\n- Automated reminders and tasks\n\n- Easy document collection\n\n- Real-time collaboration\n\n**Pricing:**\n Custom pricing based on the features and number of users.\n\n**Ideal Use Cases:**\n Great for growing businesses managing multiple compliance standards and internal teams.\n\n### 3. LogicGate\n![a mockup of logicgate](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F18_49da7664b2.png)\n\nLogicGate is a flexible platform that helps you build your own compliance workflows. Instead of working in spreadsheets, you can track tasks, assign responsibilities, and build rules to stay on top of your company’s risk and compliance. \n \n It’s especially useful for businesses with unique processes or complex regulatory needs.\n\n**Key Features:**\n- Custom workflow builder\n\n- Risk management dashboard\n\n- Automated alerts and tasks\n\n- Integration with business tools\n\n**Pricing:**\nCustom pricing based on selected modules and user count.\n\n**Ideal Use Cases:**\nBest for mid to large companies with complex compliance or governance structures.\n\n### 4. Drata\n![a mockup of drata](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F19_a1bc3ac964.png)\n\nDrata helps you become and stay compliant with certifications like SOC 2 and ISO 27001. It automatically monitors your security controls, collects evidence, and alerts you when something needs fixing. \n\nIt also keeps everything organized so you're always audit-ready without the stress of manual work.\n\n**Key Features:**\n- Real-time system monitoring\n\n- Automated evidence collection\n\n- Built-in security templates\n\n- Dashboard for audit tracking\n\n**Pricing:**\nPlans: Foundation, Advanced, Enterprise. Pricing on request.\n\n**Ideal Use Cases:**\nPerfect for SaaS companies and tech firms that need strong security and quick compliance.\n\n### 5. Secureframe\n![a mockup of secureframe](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F20_21551eabc9.png)\n\n\nSecureframe takes the headache out of getting certified for security standards. It automates many of the steps involved, like monitoring your systems and generating policies. \n \n It also works with auditors, so you don’t have to handle the process alone. This makes it easier to stay compliant and build trust with your customers.\n \n**Key Features:**\n- Compliance automation\n\n- Continuous cloud monitoring\n\n- Policy templates\n\n- Auditor access built-in\n\n**Pricing:**\nCustom pricing based on business needs and number of employees.\n\n**Ideal Use Cases:**\nBest for companies looking to scale fast while keeping compliance under control.\n\n### 6. OneTrust\n![a mockup of onetrust](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F21_430bf1c196.png)\n\n\nOneTrust helps you manage privacy and compliance in one platform. Whether you need to follow GDPR, CCPA, or manage third-party vendors, OneTrust gives you tools to track data, reduce risks, and stay up to date with changing laws. \n\nIt's a large platform built to handle serious privacy and compliance needs.\n\n**Key Features:**\n- Privacy and consent tools\n\n- Vendor risk management\n\n- Data mapping and discovery\n\n- Regulatory updates and alerts\n\n**Pricing:**\nPricing depends on selected modules and company size.\n\n**Ideal Use Cases:**\nGreat for large enterprises or companies dealing with sensitive customer data across multiple regions.\n\n### 7. Tugboat Logic\n![a mockup of tugboatlogic](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F22_6937aee928.png)\n\nTugboat Logic is like a security coach for your business. It walks you through the steps to become compliant with standards like SOC 2, ISO 27001, and more. \n\nIt helps write your policies, gather evidence, and keeps your audit documents in one place so you're always ready when an auditor comes knocking.\n\n**Key Features:**\n- Pre-built compliance templates\n\n- Automated document tracking\n\n- Audit-readiness dashboard\n\n- Security program builder\n\n**Pricing:**\nStarts around $7,600\u002Fyear. Varies by features and company size.\n\n**Ideal Use Cases:**\nPerfect for startups and small businesses getting ready for their first audit.\n\n### 8. ComplySci\n![a mockup of complysci](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F23_063eb9d9e4.png)\n\n\nComplySci is designed for financial companies that need to track employee activities and prevent risks. It helps you watch for conflicts of interest, trading activity, and other behavior that might break the rules. \n \n It also gives you tools to report issues and prove to regulators that you're doing things the right way.\n\n**Key Features:**\n- Employee monitoring\n\n- Pre-clearance and disclosures\n\n- Risk alerts and reports\n\n- Compliance tracking tools\n\n**Pricing:**\nCustom quotes based on firm size and needs.\n\n**Ideal Use Cases:**\nBest for banks, investment firms, and financial services that need strong internal controls.\n\n### 9. MetricStream\n\n![a mockup of metricstream](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F24_cb0ac554b7.png)\n\nMetricStream helps large businesses manage their entire compliance and risk program in one platform. You can track regulations, set up internal policies, and manage audits, all from a single dashboard. \n\nIt also supports real-time reporting, so leadership can see what’s going on and where improvements are needed.\n\n**Key Features:**\n- End-to-end compliance tracking\n\n- Policy and audit management\n\n- Real-time dashboards\n\n- Risk analysis tools\n\n**Pricing:**\n Custom pricing based on company size and setup.\n\n**Ideal Use Cases:**\n Built for large enterprises with multiple teams, regulations, and global operations.\n\n### 10. Libryo\n![a mockup of libryo](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F25_b6b71c947e.png)\n\nLibryo helps companies understand and follow legal rules wherever they operate. It tells you what laws apply to your business based on your industry and location. You get updates when laws change and tools to keep your teams informed. \n\nIt’s built to remove confusion and make compliance simpler, even in multiple countries.\n\n**Key Features:**\n- Legal requirement tracking\n\n- Location-based rule updates\n\n- Plain-language legal summaries\n\n- Team collaboration tools\n\n**Pricing:**\nCustom pricing based on region and number of locations.\n\n**Ideal Use Cases:**\nIdeal for businesses operating in different countries or under complex legal rules.\n\n### Recap\nWe explored the **top 10 compliance management tools of 2025**, including great picks like Vanta, Hyperproof, Drata, and Tugboat Logic.\n\nThese tools can help you save time, cut risks, and win customer trust all while growing your business safely.\n \nCompliance doesn’t have to be scary. With the right software and **[smart forms from Formester](\u002Fblog\u002Fwhat-is-conditional-logic-how-to-use-it\u002F)**, you’ll breeze through audits, impress customers, and sleep better at night!\n\n","blog\u002Fblog\u002Fbest-compliance-management-tools.md",{"text":217},"8 min read",{"title":219,"author":32,"authorImage":8,"authorProfile":220,"coverImg":221,"coverImgAlt":222,"createdAt":223,"description":224,"featured":14,"jsonld":225,"keywords":226,"metaDescription":227,"metaImage":228,"metaTitle":229,"publishedAt":20,"slug":230,"updatedAt":231,"__hash__":232,"body":233,"id":234,"coverImgWidth":25,"coverImgHeight":26,"readingStats":235},"How to add math formulas in Google Forms","https:\u002F\u002Flinkedin.com\u002Fin\u002Fharshshahseo","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_blog_post_cover_about_how_to_add_math_formulas_in_google_forms_541ba07053.png","a blog post cover about how to add math formulas in google forms","2025-09-25T12:00:50.589Z","Add math equations in Google Forms with simple tools, or use Formester’s calculation field for real-time formulas and smarter assessments.",[],"google forms,\nhow to add math formulas in google forms, \nhow to add calculations in google forms,","Add math formulas in Google Forms with simple tools, or use Formester’s calculation field for real-time formulas and smarter assessments.",[],"How to add math formulas in Google Forms?","how-to-add-math-formulas-in-google-forms","2026-06-22T05:06:32.735Z","g12M98w3jLr9zWpEpGOpcSy_oPyZdFfv_ipRch2v0m4","\u003Cp style=\"font-size: inherit;\">Google Forms has no built-in equation editor. Type a fraction or a square root and you get \"1\u002F2\" or \"sqrt(2)\", which looks wrong to a student staring at a math test.\u003C\u002Fp>\n\n\u003Cp>The fix is to add the formula as a clean image. Three methods cover almost every case: the Equatio extension for daily use, CodeCogs for the odd equation, and Microsoft Office if you already live in Word or PowerPoint.\u003C\u002Fp>\n\n\u003Cp>Below, each method in numbered steps, a quick comparison so you can pick fast, and a simpler route if you would rather skip add-ons entirely.\u003C\u002Fp>\n\n\u003Ch2>Can Google Forms Handle Math?\u003C\u002Fh2>\n\n\u003Cp>Short answer: not on its own. Google Forms cannot render equations, run calculations, or total numbers natively.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>To show formulas, insert them as images (Equatio, CodeCogs, or Office).\u003C\u002Fli>\n\u003Cli>To calculate or total responses, export to Google Sheets and use spreadsheet formulas, or build the form in a tool with a calculation field.\u003C\u002Fli>\n\u003Cli>To auto-grade, Google Forms quizzes grade multiple choice and dropdown answers, but short-answer math usually needs a manual check.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The rest of this guide covers the formula side first, then the calculation and grading side near the end.\u003C\u002Fp>\n\n\u003Ch2>Why Math Is Tricky in Google Forms\u003C\u002Fh2>\n\n\u003Cp>Google Forms was built for plain text and images, not for math. Notation needs stacked fractions, roots, exponents, and operators that sit above or below the line, and a text field flattens all of it.\u003C\u002Fp>\n\n\u003Cp>So \"x squared over two\" becomes \"x^2\u002F2\", and a student has to guess what you meant. That single gap is why many teachers default back to paper. The workarounds below close it without leaving Google Forms.\u003C\u002Fp>\n\n\u003Ch2>Method 1: Equatio Chrome Extension (Best for Frequent Use)\u003C\u002Fh2>\n\n\u003Cp>Equatio is the go-to if you build math forms often. It adds an equation button straight into Google Forms, so you never leave the page.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Install it. In the Chrome Web Store, search Equatio and click Add to Chrome. Sign in with the same Google account you use for Forms.\u003C\u002Fli>\n\u003Cli>Pin it. Pin the Equatio icon to your toolbar so it is one click away.\u003C\u002Fli>\n\u003Cli>Open your form. Create or open a quiz. A small blue Equatio icon (the pi symbol) appears next to question fields and answer options.\u003C\u002Fli>\n\u003Cli>Build the equation. Click the icon to open the editor at the bottom of the screen. Type \"fraction\" and it drops in a fraction template. Prefer talking or writing? Use the speak-math or handwriting input.\u003C\u002Fli>\n\u003Cli>Insert it. Click Insert Math and the equation lands in your form as a clean image.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cdiv class=\"note\">\n\u003Cp>Note: only you need Equatio. Students see the finished image and answer as normal, no install on their side.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2>Method 2: CodeCogs Equation Editor (No Install)\u003C\u002Fh2>\n\n\u003Cp>Only need an equation or two? CodeCogs is a free web tool, no extension required.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Open the editor. Go to the CodeCogs equation editor in your browser.\u003C\u002Fli>\n\u003Cli>Build the formula. Assemble it from the toolbar; it renders live above the buttons as you go.\u003C\u002Fli>\n\u003Cli>Copy the image URL. Scroll to the small yellow box, choose URL from the dropdown, and copy the address.\u003C\u002Fli>\n\u003Cli>Add it to your form. In Google Forms, click the image icon next to a question or answer, open the By URL tab, paste, preview, and click Add image.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Good for occasional use. If you are inserting a dozen equations per quiz, Equatio will be faster.\u003C\u002Fp>\n\n\u003Ch2>Method 3: Microsoft Word or PowerPoint\u003C\u002Fh2>\n\n\u003Cp>Already comfortable in Office? Build the equation there and bring it across as an image.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Create the equation. In Word or PowerPoint, go to Insert, then Equation, and type your formula with the symbol picker.\u003C\u002Fli>\n\u003Cli>Capture it. Take a screenshot of the rendered equation.\u003C\u002Fli>\n\u003Cli>Upload it. Back in Google Forms, click the image icon, open the Upload tab, and add the screenshot.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Slowest of the three for volume, but handy when you already have equations sitting in Office files.\u003C\u002Fp>\n\n\u003Ch2>Which Method Should You Use?\u003C\u002Fh2>\n\n\u003Cp>Pick by how often you teach math and whether you mind installing anything.\u003C\u002Fp>\n\n\u003Cdiv class=\"table-wrap\">\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\u003Cth>Method\u003C\u002Fth>\u003Cth>Best for\u003C\u002Fth>\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Equatio extension\u003C\u002Ftd>\u003Ctd>Install needed, free tier with paid upgrades, best for frequent math forms and the fastest day to day.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>CodeCogs\u003C\u002Ftd>\u003Ctd>No install, free, best for one or two equations now and then.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Microsoft Office\u003C\u002Ftd>\u003Ctd>No new install if you have Office, best when your equations already live in Word or PowerPoint.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Built-in calculation field (Formester)\u003C\u002Ftd>\u003Ctd>No add-ons, no screenshots, best when you also want the form to calculate or auto-grade numeric answers.\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\u003Ch2>Skip the Add-Ons: Formester's Calculation Field\u003C\u002Fh2>\n\n\u003Cp>Every method above works, but each one adds steps: install an add-on, copy a URL, or paste a screenshot. If math is a regular part of your forms, that friction adds up.\u003C\u002Fp>\n\n\u003Cp>Formester takes a different route with a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fcalculating-fields\u002F\">built-in calculation field\u003C\u002Fa>. The math happens inside the form, in real time, with no images to manage. You can:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Add basic or advanced formulas directly in the form.\u003C\u002Fli>\n\u003Cli>Auto-grade numeric answers by linking formulas to answer fields.\u003C\u002Fli>\n\u003Cli>Build finance or science forms that calculate results as the respondent types.\u003C\u002Fli>\n\u003Cli>Keep equations clean and readable without extensions or screenshots.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>For a quiz or test, you can \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftest-creator\u002F\">build one in seconds with AI\u003C\u002Fa>, then set pass marks and per-question points so scoring runs itself. Prefer to start from a layout? The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fquizzes\u002F\">quiz templates\u003C\u002Fa> give you a head start.\u003C\u002Fp>\n\n\u003Ch2>Pick the Method That Fits Your Workload\u003C\u002Fh2>\n\n\u003Cp>Google Forms is not as limited for math as it first looks. For everyday use, Equatio is worth the install. For the occasional equation, CodeCogs or Office will do. Match the method to how often you teach math and you will not overthink it.\u003C\u002Fp>\n\n\u003Cp>If you want the math, the calculation, and the grading handled in one place without add-ons, \u003Ca href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\u002F\">build your math assessment in Formester\u003C\u002Fa> and let the form do the arithmetic for you.\u003C\u002Fp>\n\n\u003Csection class=\"faq\">\n\u003Ch2>Math in Google Forms FAQ\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>Can you add math formulas in Google Forms?\u003C\u002Fsummary>\u003Cdiv>Google Forms has no built-in equation editor, so you add formulas as images. The three common methods are the Equatio Chrome extension, the free CodeCogs editor, and the equation tool in Word or PowerPoint.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What is the easiest way to add equations in Google Forms?\u003C\u002Fsummary>\u003Cdiv>For frequent use, the Equatio extension is easiest because it adds an equation button inside the form. For one or two equations, CodeCogs is faster since it needs no install.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can Google Forms do calculations or add up numbers?\u003C\u002Fsummary>\u003Cdiv>Not on its own. Either export responses to Google Sheets and use spreadsheet formulas, or build the form in a tool with a calculation field that does the math inside the form in real time.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Can Google Forms auto-grade math answers?\u003C\u002Fsummary>\u003Cdiv>Google Forms quizzes auto-grade multiple choice, checkbox, and dropdown answers from your answer key. Short-answer math often needs manual review, so many teachers use a calculation field to score numeric answers automatically.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Do students need to install anything to answer math questions?\u003C\u002Fsummary>\u003Cdiv>No. If you build the equations as images, students just see and answer the question. The Equatio extension is only needed by the teacher creating the form.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n","blog\u002Fblog\u002Fhow-to-add-math-formulas-in-google-forms.md",{"text":236},"6 min read",1788363419022]