[{"data":1,"prerenderedAt":105},["ShallowReactive",2],{"blog-how-to-make-feedback-form-in-html":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-feedback-form-in-html.md","How to Make a Feedback Form in HTML (with Code, CSS, and a Backend)","Harish Kumar",null,"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_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.",false,[],"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",1214,630,{"text":28},"16 min read",[30,48,67,86],{"title":31,"author":7,"authorImage":8,"authorProfile":9,"coverImg":32,"coverImgAlt":33,"createdAt":34,"description":35,"featured":14,"jsonld":36,"keywords":37,"metaDescription":35,"metaImage":38,"metaTitle":39,"publishedAt":40,"slug":41,"updatedAt":42,"__hash__":43,"body":44,"id":45,"coverImgWidth":25,"coverImgHeight":26,"readingStats":46},"50+ Social Media Survey Questions (Plus a Free Template You Can Steal)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_f941ad9bbc.png","an illustration of best social media survey questions","2025-02-19T02:42:12.075Z","50+ social media survey questions across 8 categories: demographics, platforms, content, engagement, purchases, ads, brand feedback, and effects. Copy any question, or use the free Formester template.",[],"social media survey,\nsocial media survey questions,\n",[],"50+ Social Media Survey Questions (2026 Template, 8 Categories)","2026-05-17T05:07:07.601Z","social-media-survey-questions","2026-05-17T05:07:07.607Z","bu5ZmXBYBuwRgSd_tfHF6i_jrZNJsENdeeCffiL_pN8","\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-smsq-body a { text-decoration: none !important; }\n.fmstr-cmp-smsq-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-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-smsq-body *, .fmstr-cmp-smsq-body *::before, .fmstr-cmp-smsq-body *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-body__container { max-width: 820px; margin: 0 auto; }\n\n.fmstr-cmp-smsq-body__intro p { font-size: 17px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 16px; }\n.fmstr-cmp-smsq-body__intro a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-smsq-body__intro a:hover { text-decoration: underline !important; }\n\n.fmstr-cmp-smsq-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-smsq-body p { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 14px; }\n.fmstr-cmp-smsq-body p strong { color: var(--c-fg-1); }\n.fmstr-cmp-smsq-body a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-smsq-body a:hover { text-decoration: underline !important; }\n.fmstr-cmp-smsq-body ul { margin: 0 0 16px; padding-left: 22px; }\n.fmstr-cmp-smsq-body li { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 8px 0; }\n.fmstr-cmp-smsq-body li strong { color: var(--c-fg-1); }\n\n.fmstr-cmp-smsq-body__toc {\nbackground: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 14px;\npadding: 22px 26px; margin: 22px 0 32px;\n}\n.fmstr-cmp-smsq-body__toc h4 {\nfont-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;\ncolor: var(--c-fg-3); margin: 0 0 12px;\n}\n.fmstr-cmp-smsq-body__toc ol { margin: 0; padding-left: 22px; }\n.fmstr-cmp-smsq-body__toc li { padding: 4px 0; font-size: 15px; line-height: 1.55; color: var(--c-fg-2); }\n.fmstr-cmp-smsq-body__toc a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-smsq-body__toc a:hover { text-decoration: underline !important; }\n.fmstr-cmp-smsq-body__toc ul { list-style: disc; padding-left: 22px; margin: 4px 0 8px; }\n\n.fmstr-cmp-smsq-body__tip {\ndisplay: flex; gap: 12px; align-items: flex-start;\npadding: 14px 18px; margin: 12px 0;\nbackground: var(--c-bg-soft); border-left: 3px solid var(--c-violet-500);\nborder-radius: 8px;\n}\n.fmstr-cmp-smsq-body__tip p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-smsq-body__tip p strong { color: var(--c-fg-1); }\n\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-body { padding: 16px; }\n.fmstr-cmp-smsq-body__intro p, .fmstr-cmp-smsq-body p, .fmstr-cmp-smsq-body li { font-size: 15.5px; }\n.fmstr-cmp-smsq-body__h2 { font-size: 24px; margin-top: 32px; }\n.fmstr-cmp-smsq-body__toc { padding: 18px 20px; }\n.fmstr-cmp-smsq-body__toc li { font-size: 14px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-body\" aria-label=\"Social media survey questions intro\">\n\u003Cdiv class=\"fmstr-cmp-smsq-body__container\">\n\n\u003Cdiv class=\"fmstr-cmp-smsq-body__intro\">\n\u003Cp>Most social media surveys flop because they ask \"do you like our content?\" and call it a day. The good ones pull apart platform habits, content preferences, purchase triggers, and ad fatigue, then cross-cut by age and platform. That's where strategy comes from.\u003C\u002Fp>\n\u003Cp>This page gives you 50+ ready-to-paste questions across 8 categories. Eight are tuned for researchers and students studying social media effects on mental health and behavior, six for HR teams writing a workplace social media policy, the rest for marketers learning what their audience actually wants.\u003C\u002Fp>\n\u003Cp>If you'd rather not paste questions one by one, the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">free social media survey template\u003C\u002Fa> below is the whole thing pre-built. Edit it in a \u003Ca href=\"https:\u002F\u002Fformester.com\u002F\">Formester\u003C\u002Fa> account, share the link, watch responses come in.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cnav class=\"fmstr-cmp-smsq-body__toc\" aria-label=\"Page contents\">\n\u003Ch4>What's on this page\u003C\u002Fh4>\n\u003Col>\n\u003Cli>\u003Ca href=\"#why-run-survey\">Why run a social media survey\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#question-bank\">50+ questions, 8 categories\u003C\u002Fa>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#audience-demographics\">Audience demographics\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#platform-and-usage\">Platform and usage\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#content-preferences\">Content preferences\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#engagement-and-interaction\">Engagement and interaction\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#purchasing-behavior\">Purchasing behavior\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#ad-preferences\">Ad preferences\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#brand-feedback\">Brand feedback\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#social-media-effects\">Social media effects (researchers and students)\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#employee-social-media-use\">Employee social media use (HR teams)\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#how-to-design\">How to design a survey that actually gets responses\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#free-template\">Free social media survey template\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#tips-response\">Tips for higher response rates\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#faq\">FAQ\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fnav>\n\n\u003Ch2 class=\"fmstr-cmp-smsq-body__h2\" id=\"why-run-survey\">Why run a social media survey\u003C\u002Fh2>\n\u003Cp>Four things you can't get from analytics alone:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Intent behind the scroll.\u003C\u002Fstrong> Analytics tells you a Reel got 12,000 views. A survey tells you 38% saved it for later because it taught them something, 22% sent it to a friend as a joke. Those are two different content engines.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Platform drift.\u003C\u002Fstrong> \u003Ca href=\"https:\u002F\u002Fwww.pewresearch.org\u002Finternet\u002Ffact-sheet\u002Fsocial-media\u002F\">Pew Research's 2025 social media fact sheet\u003C\u002Fa> shows TikTok use among US adults climbed to 33% while Facebook held flat at 68%. Your audience may have moved without telling you.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ad fatigue thresholds.\u003C\u002Fstrong> Most brands run the same creative until CTR halves. A survey tells you the cutoff before that happens.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Buying triggers.\u003C\u002Fstrong> \"Did you ever buy something because of a social post\" has a yes-rate you can benchmark. The follow-up, \u003Cem>what kind of post\u003C\u002Fem>, is the real data.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Run one quarterly. Twenty respondents is enough to spot a pattern. Two hundred is enough to act on it.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-smsq-qbank a { text-decoration: none !important; }\n.fmstr-cmp-smsq-qbank {\n--c-bg-card: #ffffff;\n--c-bg-demo: linear-gradient(135deg, #f7f3ff, #efe7ff);\n--c-bg-platform: linear-gradient(135deg, #ecfeff, #cffafe);\n--c-bg-content: linear-gradient(135deg, #fef3c7, #fde68a);\n--c-bg-engage: linear-gradient(135deg, #fce7f3, #fbcfe8);\n--c-bg-purchase: linear-gradient(135deg, #dcfce7, #bbf7d0);\n--c-bg-ads: linear-gradient(135deg, #fee2e2, #fecaca);\n--c-bg-brand: linear-gradient(135deg, #ede9fe, #ddd6fe);\n--c-bg-effects: linear-gradient(135deg, #e0e7ff, #c7d2fe);\n--c-bg-employee: linear-gradient(135deg, #f4f4f5, #e4e4e7);\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n\nbackground: transparent;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-smsq-qbank *, .fmstr-cmp-smsq-qbank *::before, .fmstr-cmp-smsq-qbank *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-qbank__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-smsq-qbank__head { max-width: 780px; margin: 0 0 32px; }\n.fmstr-cmp-smsq-qbank__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-smsq-qbank__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n.fmstr-cmp-smsq-qbank__intro a { color: var(--c-violet-600) !important; font-weight: 500; text-decoration: none !important; }\n.fmstr-cmp-smsq-qbank__intro a:hover { text-decoration: underline !important; }\n.fmstr-cmp-smsq-qbank__grid { display: flex; flex-direction: column; gap: 20px; }\n\n.fmstr-cmp-smsq-qbank__block {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border);\nborder-radius: 24px; padding: 32px; box-shadow: var(--c-shadow);\n}\n.fmstr-cmp-smsq-qbank__h3 {\ndisplay: flex; align-items: center; gap: 14px; flex-wrap: wrap;\nfont-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0;\ncolor: var(--c-fg-1); line-height: 1.25;\n}\n.fmstr-cmp-smsq-qbank__thumb {\nflex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nfont-size: 17px; font-weight: 700; letter-spacing: -.01em;\ncolor: var(--c-fg-1); font-family: inherit;\n}\n.fmstr-cmp-smsq-qbank__thumb--demo { background: var(--c-bg-demo); color: #1d4ed8; }\n.fmstr-cmp-smsq-qbank__thumb--platform { background: var(--c-bg-platform); color: #6941c6; }\n.fmstr-cmp-smsq-qbank__thumb--content { background: var(--c-bg-content); color: #c2410c; }\n.fmstr-cmp-smsq-qbank__thumb--engage { background: var(--c-bg-engage); color: #92400e; }\n.fmstr-cmp-smsq-qbank__thumb--purchase { background: var(--c-bg-purchase); color: #166534; }\n.fmstr-cmp-smsq-qbank__thumb--ads { background: var(--c-bg-ads); color: #be185d; }\n.fmstr-cmp-smsq-qbank__thumb--brand { background: var(--c-bg-brand); color: #b91c1c; }\n.fmstr-cmp-smsq-qbank__thumb--effects { background: var(--c-bg-effects); color: #4338ca; }\n.fmstr-cmp-smsq-qbank__thumb--employee { background: var(--c-bg-employee); color: #3f3f46; }\n\n.fmstr-cmp-smsq-qbank__count { display: inline-block; padding: 3px 10px; border-radius: 9999px; background: #f4f4f7; color: var(--c-fg-3); font-size: 13px; font-weight: 500; }\n.fmstr-cmp-smsq-qbank__tagline { font-size: 15.5px; line-height: 1.55; color: var(--c-fg-2); margin: 10px 0 0; }\n.fmstr-cmp-smsq-qbank__audience { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 6px; background: #f7f3ff; color: var(--c-violet-700); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }\n\n.fmstr-cmp-smsq-qbank__list { margin: 16px 0 0; padding-left: 22px; }\n.fmstr-cmp-smsq-qbank__list li { padding: 8px 0; font-size: 15.5px; color: var(--c-fg-1); line-height: 1.55; }\n.fmstr-cmp-smsq-qbank__list li strong { font-weight: 600; color: var(--c-fg-1); }\n.fmstr-cmp-smsq-qbank__list li em { color: var(--c-fg-3); font-style: italic; display: inline; margin-left: 4px; }\n\n.fmstr-cmp-smsq-qbank__note {\nmargin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--c-border);\nfont-size: 14.5px; color: var(--c-fg-3); line-height: 1.6;\n}\n.fmstr-cmp-smsq-qbank__note a { color: var(--c-violet-600) !important; font-weight: 500; text-decoration: none !important; }\n.fmstr-cmp-smsq-qbank__note a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-qbank { padding: 40px 16px; }\n.fmstr-cmp-smsq-qbank__grid { gap: 16px; }\n.fmstr-cmp-smsq-qbank__block { padding: 22px 20px; border-radius: 18px; }\n.fmstr-cmp-smsq-qbank__h3 { font-size: 18px; gap: 12px; }\n.fmstr-cmp-smsq-qbank__thumb { width: 36px; height: 36px; border-radius: 9px; font-size: 15px; }\n.fmstr-cmp-smsq-qbank__count { font-size: 12px; padding: 2px 8px; }\n.fmstr-cmp-smsq-qbank__tagline { font-size: 14.5px; }\n.fmstr-cmp-smsq-qbank__list { padding-left: 20px; }\n.fmstr-cmp-smsq-qbank__list li { font-size: 15px; }\n.fmstr-cmp-smsq-qbank__note { font-size: 14px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-qbank\" aria-labelledby=\"fmstr-cmp-smsq-qbank-h2\">\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__container\">\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__head\">\n\u003Ch2 class=\"fmstr-cmp-smsq-qbank__h2\" id=\"fmstr-cmp-smsq-qbank-h2\">50+ social media survey questions, 8 categories\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__intro\">Copy any question into your own builder, or skip ahead and \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">start from the free template\u003C\u002Fa> with all 50 already loaded.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__grid\">\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"audience-demographics\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--demo\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cspan>Audience demographics\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">The four numbers most marketers wish they had before launching a campaign.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>What is your age group?\u003C\u002Fstrong> \u003Cem>(Under 18, 18-24, 25-34, 35-44, 45-54, 55-64, 65+)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s your gender?\u003C\u002Fstrong> \u003Cem>(Optional, with prefer-not-to-say)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What country and state do you live in?\u003C\u002Fstrong> \u003Cem>(Free text or dropdown)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What industry do you work in?\u003C\u002Fstrong> \u003Cem>(Dropdown: tech, retail, healthcare, education, finance, media, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s your annual household income range?\u003C\u002Fstrong> \u003Cem>(Bracketed ranges; mark optional)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s the highest level of education you’ve completed?\u003C\u002Fstrong> \u003Cem>(High school, some college, undergrad, postgrad, doctorate)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">Cross-cut every other section by these six and the survey doubles in value. See \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fmust-have-demographic-questions-for-survey\u002F\">must-have demographic questions for any survey\u003C\u002Fa> for the full set.\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"platform-and-usage\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--platform\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003Cspan>Platform and usage\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">7 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">Where they are, how long they’re there, and what device they’re on.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>Which social media platforms do you actively use?\u003C\u002Fstrong> \u003Cem>(Multi-select: Facebook, Instagram, TikTok, X\u002FTwitter, LinkedIn, YouTube, Snapchat, Reddit, Pinterest, Threads, BlueSky, Other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which one platform do you use the most?\u003C\u002Fstrong> \u003Cem>(Single-select)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>On an average weekday, how much time do you spend on social media?\u003C\u002Fstrong> \u003Cem>(Less than 30 min, 30 min - 1 hr, 1-2 hrs, 2-4 hrs, 4+ hrs)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What time of day are you most active on social media?\u003C\u002Fstrong> \u003Cem>(Morning, afternoon, evening, late night, throughout the day)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What device do you use most often for social media?\u003C\u002Fstrong> \u003Cem>(Phone, tablet, laptop, desktop)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>How often do you discover new brands on social media?\u003C\u002Fstrong> \u003Cem>(Daily, weekly, monthly, rarely, never)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which platform do you trust most for product recommendations?\u003C\u002Fstrong> \u003Cem>(Single-select, same list as Q1)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">According to \u003Ca href=\"https:\u002F\u002Fwww.pewresearch.org\u002Finternet\u002Ffact-sheet\u002Fsocial-media\u002F\">Pew Research’s 2025 social media fact sheet\u003C\u002Fa>, TikTok use among US adults climbed to 33% while Facebook held flat at 68%. Worth benchmarking against your own data.\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"content-preferences\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--content\" aria-hidden=\"true\">3\u003C\u002Fspan>\u003Cspan>Content preferences\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">What they actually stop scrolling for.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>What type of social media content do you engage with most?\u003C\u002Fstrong> \u003Cem>(Short videos, long videos, photos, carousels, memes, text posts, polls, live streams, stories)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Do you prefer short-form content or long-form?\u003C\u002Fstrong> \u003Cem>(Short under 60 seconds, long over 3 minutes, both)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What three topics do you follow most closely?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which formats do you find most trustworthy?\u003C\u002Fstrong> \u003Cem>(User-generated, expert\u002Fcreator, brand, news, peer recommendations)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>How often do you save posts to revisit later?\u003C\u002Fstrong> \u003Cem>(Daily, weekly, monthly, rarely, never)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s the last piece of content you sent to a friend? Why?\u003C\u002Fstrong> \u003Cem>(Free text. The last question is the gold one. Don’t skip it.)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"engagement-and-interaction\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--engage\" aria-hidden=\"true\">4\u003C\u002Fspan>\u003Cspan>Engagement and interaction\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">The mechanics behind likes, shares, and comments.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>What makes you like a post?\u003C\u002Fstrong> \u003Cem>(Funny, useful, beautiful, agrees with my view, supports a friend, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What makes you share a post with someone?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What makes you comment on a post?\u003C\u002Fstrong> \u003Cem>(Short answer)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>How likely are you to enter a contest or giveaway in exchange for an email or follow?\u003C\u002Fstrong> \u003Cem>(Scale 1-5)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Do you follow brands on social media? If yes, what’s the biggest reason?\u003C\u002Fstrong> \u003Cem>(Discounts, content I like, customer support, support a cause, friend follows, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you ever unfollowed a brand? What did they do?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"purchasing-behavior\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--purchase\" aria-hidden=\"true\">5\u003C\u002Fspan>\u003Cspan>Purchasing behavior\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">The connection between scroll and checkout.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>Have you ever bought a product directly because of a social media post?\u003C\u002Fstrong> \u003Cem>(Yes in the last 30 days, yes in the last year, yes longer ago, no)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What kind of post is most likely to convince you to buy?\u003C\u002Fstrong> \u003Cem>(Demo\u002Ftutorial, before-after, user review, influencer endorsement, limited-time offer, behind-the-scenes, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Do you trust influencer recommendations?\u003C\u002Fstrong> \u003Cem>(Always, sometimes by niche, rarely, never)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s the most you’ve spent on a product first discovered on social media?\u003C\u002Fstrong> \u003Cem>(Bracketed ranges)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which platform has driven the most purchases for you in the last 12 months?\u003C\u002Fstrong> \u003Cem>(Single-select)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you ever abandoned a purchase you found via social because the brand felt untrustworthy? What was the signal?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">If purchasing behavior is the focus, pair this block with the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fconsumer-behavior-survey-20056\u002F\">consumer behavior survey template\u003C\u002Fa> or the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fmarket-research-survey-701\u002F\">market research survey template\u003C\u002Fa>.\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"ad-preferences\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--ads\" aria-hidden=\"true\">6\u003C\u002Fspan>\u003Cspan>Ad preferences\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">What ads they tolerate, what ads they actually click.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>How often do you notice social media ads in your feed?\u003C\u002Fstrong> \u003Cem>(Always, often, sometimes, rarely, never)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What makes an ad stop your scroll?\u003C\u002Fstrong> \u003Cem>(Funny hook, strong visual, useful info, familiar creator, social proof, discount, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you clicked an ad in the last 30 days?\u003C\u002Fstrong> \u003Cem>(Yes, no, not sure)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which ad format works best for you?\u003C\u002Fstrong> \u003Cem>(Video, static image, carousel, story, in-stream, sponsored creator, other)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>How do you feel about seeing the same ad repeatedly?\u003C\u002Fstrong> \u003Cem>(Doesn’t bother me, fine up to a point, frustrating, makes me dislike the brand)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you ever blocked or reported an ad? Why?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"brand-feedback\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--brand\" aria-hidden=\"true\">7\u003C\u002Fspan>\u003Cspan>Brand feedback\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">Closed-loop questions for your own followers.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For marketers\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>How would you rate our social media presence overall?\u003C\u002Fstrong> \u003Cem>(Scale 1-5)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Which of our recent posts do you remember?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s one thing we could do better on social?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What kind of content would you like to see more of?\u003C\u002Fstrong> \u003Cem>(Multi-select or free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you ever recommended our brand because of something you saw on social?\u003C\u002Fstrong> \u003Cem>(Yes, no, considered it)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>On a scale of 0-10, how likely are you to recommend us to a friend?\u003C\u002Fstrong> \u003Cem>(NPS standard. Track quarterly as a brand-health pulse.)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">Pair this block with the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fbrand-awareness-survey-template-1659\u002F\">brand awareness survey template\u003C\u002Fa> for a fuller picture of how you’re perceived.\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"social-media-effects\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--effects\" aria-hidden=\"true\">8\u003C\u002Fspan>\u003Cspan>Social media effects\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">8 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">The standard structure used in published instruments for academic studies, thesis work, and class projects on how social media affects mood, attention, and relationships.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For researchers and students\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>In the past two weeks, how often have you felt that social media negatively affected your mood?\u003C\u002Fstrong> \u003Cem>(Never, rarely, sometimes, often, always)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>After spending time on social media, I usually feel:\u003C\u002Fstrong> \u003Cem>(Better, the same, slightly worse, significantly worse)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>I have compared my life to others on social media in a way that left me feeling worse about myself.\u003C\u002Fstrong> \u003Cem>(5-point Likert: strongly disagree to strongly agree)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Social media use has affected my sleep in the last 30 days.\u003C\u002Fstrong> \u003Cem>(Likert + free-text follow-up: how?)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>I find it difficult to put my phone down once I start scrolling.\u003C\u002Fstrong> \u003Cem>(Likert)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Social media has helped me stay connected with people who matter to me.\u003C\u002Fstrong> \u003Cem>(Likert)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>I’ve encountered content on social media that made me feel anxious, angry, or unsafe in the last week.\u003C\u002Fstrong> \u003Cem>(Yes\u002FNo + free-text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>If you could change one thing about how you use social media, what would it be?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">For a longer-form effects-only questionnaire (31 questions across mental health, self-esteem, relationships, productivity, consumer behavior), spin up a custom variant of the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">free social media survey template\u003C\u002Fa> for IRB-style studies.\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-qbank__block\" id=\"employee-social-media-use\">\n\u003Ch3 class=\"fmstr-cmp-smsq-qbank__h3\">\u003Cspan class=\"fmstr-cmp-smsq-qbank__thumb fmstr-cmp-smsq-qbank__thumb--employee\" aria-hidden=\"true\">9\u003C\u002Fspan>\u003Cspan>Employee social media use\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-smsq-qbank__count\">6 questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-smsq-qbank__tagline\">For internal use when writing or updating a workplace social media policy. Run anonymously.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-smsq-qbank__audience\">For HR teams\u003C\u002Fspan>\n\u003Col class=\"fmstr-cmp-smsq-qbank__list\">\n\u003Cli>\u003Cstrong>Do you use personal social media accounts during work hours?\u003C\u002Fstrong> \u003Cem>(Never, rarely, sometimes, often, always)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Has anything you’ve seen a colleague post on personal social media ever made you uncomfortable?\u003C\u002Fstrong> \u003Cem>(Free text, optional)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Are you aware of the company’s current social media policy?\u003C\u002Fstrong> \u003Cem>(Yes, somewhat, no)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Should employees be allowed to identify their employer on personal accounts?\u003C\u002Fstrong> \u003Cem>(Yes, yes with disclaimer, no, unsure)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Have you been asked to post on social media as part of your role? Did you feel comfortable doing so?\u003C\u002Fstrong> \u003Cem>(Yes\u002Fno + free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>What’s one thing you’d want clarified in the company’s social media policy?\u003C\u002Fstrong> \u003Cem>(Free text)\u003C\u002Fem>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cdiv class=\"fmstr-cmp-smsq-qbank__note\">Browse more workplace and survey templates inside the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fsurvey-forms\u002F\">Formester survey form library\u003C\u002Fa>.\u003C\u002Fdiv>\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-smsq-method a { text-decoration: none !important; }\n.fmstr-cmp-smsq-method {\n--c-bg-card: #ffffff;\n--c-bg-step: #f7f3ff;\n--c-bg-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n\nbackground: transparent;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-smsq-method *, .fmstr-cmp-smsq-method *::before, .fmstr-cmp-smsq-method *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-method__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-smsq-method__head { margin: 0 0 32px; }\n.fmstr-cmp-smsq-method__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-smsq-method__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; max-width: 720px; }\n\n.fmstr-cmp-smsq-method__list { display: flex; flex-direction: column; gap: 16px; counter-reset: step; }\n.fmstr-cmp-smsq-method__step {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border);\nborder-radius: 20px; padding: 28px;\nbox-shadow: var(--c-shadow);\n}\n.fmstr-cmp-smsq-method__h3 {\ndisplay: flex; align-items: center; gap: 14px;\nfont-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0;\ncolor: var(--c-fg-1); line-height: 1.3;\n}\n.fmstr-cmp-smsq-method__num {\nflex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;\nbackground: var(--c-bg-step); border: 1px solid var(--c-bg-edge);\ndisplay: grid; place-items: center;\nfont-size: 16px; font-weight: 700; color: var(--c-violet-600);\nletter-spacing: -.01em;\n}\n.fmstr-cmp-smsq-method__body { margin-top: 4px; }\n.fmstr-cmp-smsq-method__p { color: var(--c-fg-2); font-size: 15.5px; line-height: 1.65; margin: 10px 0 0; }\n.fmstr-cmp-smsq-method__p a { color: var(--c-violet-600) !important; font-weight: 500; text-decoration: none !important; }\n.fmstr-cmp-smsq-method__p a:hover { text-decoration: underline !important; }\n.fmstr-cmp-smsq-method__callout {\nmargin-top: 12px; padding: 12px 16px; border-radius: 10px;\nbackground: var(--c-bg-step); border: 1px solid var(--c-bg-edge);\nfont-size: 14.5px; color: var(--c-violet-700); line-height: 1.55;\n}\n.fmstr-cmp-smsq-method__close {\nmargin-top: 24px; padding: 20px 24px; border-radius: 16px;\nbackground: var(--c-bg-step); border: 1px solid var(--c-bg-edge);\ncolor: var(--c-fg-2); font-size: 15.5px; line-height: 1.65; text-align: center;\n}\n.fmstr-cmp-smsq-method__close a { color: var(--c-violet-600) !important; font-weight: 600; text-decoration: none !important; }\n.fmstr-cmp-smsq-method__close a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-method { padding: 40px 16px; }\n.fmstr-cmp-smsq-method__step { padding: 20px; border-radius: 16px; }\n.fmstr-cmp-smsq-method__h3 { font-size: 17px; gap: 12px; }\n.fmstr-cmp-smsq-method__num { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }\n.fmstr-cmp-smsq-method__p { font-size: 15px; }\n.fmstr-cmp-smsq-method__close { font-size: 15px; padding: 18px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-method\" aria-labelledby=\"fmstr-cmp-smsq-method-h2\">\n\u003Cdiv class=\"fmstr-cmp-smsq-method__container\">\n\u003Cdiv class=\"fmstr-cmp-smsq-method__head\">\n\u003Ch2 class=\"fmstr-cmp-smsq-method__h2\" id=\"fmstr-cmp-smsq-method-h2\">How to design a survey that actually gets responses\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-smsq-method__intro\">The five steps that separate a 4% response rate from a 22% one.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-smsq-method__list\">\n\n\u003Carticle class=\"fmstr-cmp-smsq-method__step\">\n\u003Ch3 class=\"fmstr-cmp-smsq-method__h3\">\u003Cspan class=\"fmstr-cmp-smsq-method__num\" aria-hidden=\"true\">1\u003C\u002Fspan>\u003Cspan>Pick one objective per survey\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__body\">\n\u003Cp class=\"fmstr-cmp-smsq-method__p\">“Understand my audience” is too broad to design around. “Decide whether to launch a YouTube channel this quarter” is one good survey. So is “find out why our Instagram engagement dropped 30%.” If you have two goals, run two short surveys, not one long one.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-method__step\">\n\u003Ch3 class=\"fmstr-cmp-smsq-method__h3\">\u003Cspan class=\"fmstr-cmp-smsq-method__num\" aria-hidden=\"true\">2\u003C\u002Fspan>\u003Cspan>Pick the audience before the questions\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__body\">\n\u003Cp class=\"fmstr-cmp-smsq-method__p\">A survey aimed at your own followers reads differently from one going to a cold segment. Followers will answer 20 questions. Cold audiences will quit at 8. Researchers studying social media effects need Likert scales and a consent line; HR teams running a policy pulse need anonymity. Decide who is filling this out before you draft a single question.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-method__step\">\n\u003Ch3 class=\"fmstr-cmp-smsq-method__h3\">\u003Cspan class=\"fmstr-cmp-smsq-method__num\" aria-hidden=\"true\">3\u003C\u002Fspan>\u003Cspan>Match the question mix to the question\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__body\">\n\u003Cp class=\"fmstr-cmp-smsq-method__p\">Categorical (multiple choice) for fast, easy questions. Likert scales for attitudes and frequencies. One or two open-ended boxes where the \u003Cem>why\u003C\u002Fem> matters more than the \u003Cem>what\u003C\u002Fem>. The single biggest fatigue trigger is back-to-back open-text prompts. Keep them to two, max.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__callout\">Rule of thumb: 70% multiple choice, 20% Likert, 10% free text. Adjust for researcher use-cases.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-method__step\">\n\u003Ch3 class=\"fmstr-cmp-smsq-method__h3\">\u003Cspan class=\"fmstr-cmp-smsq-method__num\" aria-hidden=\"true\">4\u003C\u002Fspan>\u003Cspan>Cap it at 10 questions for cold audiences, 20 for your own list\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__body\">\n\u003Cp class=\"fmstr-cmp-smsq-method__p\">Past 10 questions, completion rates start dropping in the 5-15% range for cold audiences. Your own followers will go to 20 because they already trust the brand. Past 20, every audience drops off. Tell respondents the time upfront: “Takes 90 seconds” outperforms “Quick survey” on start-rate.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-method__step\">\n\u003Ch3 class=\"fmstr-cmp-smsq-method__h3\">\u003Cspan class=\"fmstr-cmp-smsq-method__num\" aria-hidden=\"true\">5\u003C\u002Fspan>\u003Cspan>Distribute where the audience already is, then close the loop\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-method__body\">\n\u003Cp class=\"fmstr-cmp-smsq-method__p\">Email list gets the highest completion rate. Story link sticker is second. Bio link is third. DM to engaged followers is fourth (highest response quality, lowest reach). Paid promotion only if you need a representative sample for research. Then post one screenshot, chart, or quote from the results within two weeks. Response rates on your \u003Cem>next\u003C\u002Fem> survey double when people know their answers shaped a decision.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-smsq-method__close\">Build the survey in any \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fonline-survey-maker\u002F\">online survey maker\u003C\u002Fa> you like. We obviously recommend Formester for branding, response analytics, and the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fai-survey-generator\u002F\">AI Survey Generator\u003C\u002Fa> that drafts the first 10 questions from a one-line brief.\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-smsq-shelf a { text-decoration: none !important; }\n.fmstr-cmp-smsq-shelf {\n--c-bg-card: #ffffff;\n--c-bg-tint: #f7f3ff;\n--c-bg-tint-2: #efe7ff;\n--c-bg-edge: #e4d7ff;\n--c-bg-ai-1: #ecfeff;\n--c-bg-ai-2: #cffafe;\n--c-bg-chip: #f4f4f7;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-cyan-600: #0891b2;\n--c-cyan-700: #0e7490;\n--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;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-smsq-shelf *, .fmstr-cmp-smsq-shelf *::before, .fmstr-cmp-smsq-shelf *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-shelf__container { max-width: 820px; margin: 0 auto; text-align: center; }\n.fmstr-cmp-smsq-shelf__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--c-bg-tint); color: var(--c-violet-600) !important;\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--c-bg-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-smsq-shelf__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-smsq-shelf__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; max-width: 780px; margin: 14px 0 32px; }\n\n.fmstr-cmp-smsq-shelf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }\n.fmstr-cmp-smsq-shelf__card {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border);\nborder-radius: 28px; padding: 28px;\ndisplay: flex; flex-direction: column; gap: 16px;\nbox-shadow: var(--c-shadow); position: relative; overflow: hidden;\n}\n.fmstr-cmp-smsq-shelf__card--template::before,\n.fmstr-cmp-smsq-shelf__card--ai::before {\ncontent: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 4px;\n}\n.fmstr-cmp-smsq-shelf__card--template::before { background: linear-gradient(90deg, var(--c-violet-500), var(--c-violet-600)); }\n.fmstr-cmp-smsq-shelf__card--ai::before { background: linear-gradient(90deg, var(--c-cyan-600), var(--c-cyan-700)); }\n\n.fmstr-cmp-smsq-shelf__preview {\naspect-ratio: 16\u002F10; border-radius: 14px; border: 1px solid var(--c-border);\nposition: relative; overflow: hidden;\n}\n.fmstr-cmp-smsq-shelf__preview--template { background: linear-gradient(135deg, var(--c-bg-tint), var(--c-bg-tint-2)); }\n.fmstr-cmp-smsq-shelf__preview--ai { background: linear-gradient(135deg, var(--c-bg-ai-1), var(--c-bg-ai-2)); }\n.fmstr-cmp-smsq-shelf__mock-page {\nposition: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\nwidth: 64%; height: 78%; background: #fff; border-radius: 8px;\nbox-shadow: 0 4px 20px rgba(17,24,39,.10);\ndisplay: flex; flex-direction: column; gap: 8px; padding: 16px;\n}\n.fmstr-cmp-smsq-shelf__mock-h { height: 10px; width: 60%; border-radius: 4px; background: var(--c-bg-tint-2); }\n.fmstr-cmp-smsq-shelf__mock-line { height: 6px; border-radius: 3px; background: var(--c-bg-chip); }\n.fmstr-cmp-smsq-shelf__mock-line--mid { width: 80%; }\n.fmstr-cmp-smsq-shelf__mock-line--short { width: 55%; }\n.fmstr-cmp-smsq-shelf__mock-line--long { width: 95%; }\n.fmstr-cmp-smsq-shelf__mock-cta { height: 18px; width: 50%; border-radius: 4px; background: var(--c-violet-500); margin-top: auto; }\n.fmstr-cmp-smsq-shelf__mock-prompt { height: 24px; width: 100%; border: 1px dashed var(--c-cyan-600); border-radius: 6px; }\n.fmstr-cmp-smsq-shelf__mock-spark { display: flex; gap: 6px; align-items: center; font-size: 22px; color: var(--c-cyan-700); }\n\n.fmstr-cmp-smsq-shelf__card-h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--c-fg-1); }\n.fmstr-cmp-smsq-shelf__meta { font-size: 13px; color: var(--c-fg-3); display: flex; gap: 8px; flex-wrap: wrap; }\n.fmstr-cmp-smsq-shelf__meta span { padding: 3px 9px; background: var(--c-bg-chip); border-radius: 9999px; }\n.fmstr-cmp-smsq-shelf__body { color: var(--c-fg-2); font-size: 15.5px; line-height: 1.6; flex-grow: 1; margin: 0; }\n.fmstr-cmp-smsq-shelf__bullets { margin: 0; padding-left: 20px; color: var(--c-fg-2); font-size: 15px; line-height: 1.65; }\n.fmstr-cmp-smsq-shelf__bullets li { padding: 2px 0; }\n\n.fmstr-cmp-smsq-shelf__cta {\ndisplay: inline-flex; align-items: center; justify-content: center; gap: 8px;\npadding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 15px;\ntext-decoration: none !important; transition: all .15s ease;\n}\n.fmstr-cmp-smsq-shelf__cta--template { background: var(--c-violet-500) !important; color: #fff !important; }\n.fmstr-cmp-smsq-shelf__cta--template:hover { background: var(--c-violet-600) !important; transform: translateY(-1px); }\n.fmstr-cmp-smsq-shelf__cta--ai { background: var(--c-cyan-600) !important; color: #fff !important; }\n.fmstr-cmp-smsq-shelf__cta--ai:hover { background: var(--c-cyan-700) !important; transform: translateY(-1px); }\n\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-shelf { padding: 40px 16px; }\n.fmstr-cmp-smsq-shelf__grid { grid-template-columns: 1fr; gap: 16px; }\n.fmstr-cmp-smsq-shelf__card { padding: 20px; border-radius: 20px; gap: 14px; }\n.fmstr-cmp-smsq-shelf__intro { font-size: 15.5px; margin: 14px 0 24px; }\n.fmstr-cmp-smsq-shelf__preview { aspect-ratio: auto; min-height: 200px; }\n.fmstr-cmp-smsq-shelf__card-h3 { font-size: 18px; line-height: 1.25; }\n.fmstr-cmp-smsq-shelf__body { font-size: 15px; }\n.fmstr-cmp-smsq-shelf__cta { width: 100%; padding: 14px 16px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-shelf\" aria-labelledby=\"fmstr-cmp-smsq-shelf-h2\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__container\">\n\u003Cspan class=\"fmstr-cmp-smsq-shelf__eyebrow\">Two ways to start\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-smsq-shelf__h2\" id=\"fmstr-cmp-smsq-shelf-h2\">Skip the copy-paste. Start from the template, or let AI draft one for you.\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-smsq-shelf__intro\">All 50 questions are pre-built in the free Formester template. Or describe your audience in one line and the AI generator drafts a tailored survey in under a minute.\u003C\u002Fp>\n\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__grid\">\n\n\u003Carticle class=\"fmstr-cmp-smsq-shelf__card fmstr-cmp-smsq-shelf__card--template\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__preview fmstr-cmp-smsq-shelf__preview--template\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-page\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-h\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--long\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--mid\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--long\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--short\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-cta\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3 class=\"fmstr-cmp-smsq-shelf__card-h3\">Free social media survey template (all 50 questions, pre-built)\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__meta\">\n\u003Cspan>50 questions\u003C\u002Fspan>\n\u003Cspan>8 categories\u003C\u002Fspan>\n\u003Cspan>Mobile-ready\u003C\u002Fspan>\n\u003Cspan>Free\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-smsq-shelf__body\">The block below gives you the question pool. This is the same thing pre-built as a working form: branded, mobile-ready, shareable with one link.\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-smsq-shelf__bullets\">\n\u003Cli>All 50 questions across the 8 categories\u003C\u002Fli>\n\u003Cli>Logic to skip brand feedback if respondents haven’t heard of you\u003C\u002Fli>\n\u003Cli>Short-version toggle (cut to 10 questions for cold audiences)\u003C\u002Fli>\n\u003Cli>Email and Slack response notifications out of the box\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ca class=\"fmstr-cmp-smsq-shelf__cta fmstr-cmp-smsq-shelf__cta--template\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">Use the template →\u003C\u002Fa>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-smsq-shelf__card fmstr-cmp-smsq-shelf__card--ai\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__preview fmstr-cmp-smsq-shelf__preview--ai\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-page\">\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-spark\" aria-hidden=\"true\">✨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-prompt\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--long\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--mid\">\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__mock-line fmstr-cmp-smsq-shelf__mock-line--short\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3 class=\"fmstr-cmp-smsq-shelf__card-h3\">AI Survey Generator (one-line brief, tailored survey)\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-smsq-shelf__meta\">\n\u003Cspan>Under 60 seconds\u003C\u002Fspan>\n\u003Cspan>Editable output\u003C\u002Fspan>\n\u003Cspan>Free to try\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-smsq-shelf__body\">Drop a one-line brief like “audience survey for a B2B SaaS launching on LinkedIn” or “Gen Z TikTok study for a thesis on attention”. The generator drafts 10 to 20 questions, you tweak, you ship.\u003C\u002Fp>\n\u003Cul class=\"fmstr-cmp-smsq-shelf__bullets\">\n\u003Cli>Pick from marketer, researcher, or HR framings\u003C\u002Fli>\n\u003Cli>Switch question types per item before publishing\u003C\u002Fli>\n\u003Cli>Outputs straight into the Formester editor\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ca class=\"fmstr-cmp-smsq-shelf__cta fmstr-cmp-smsq-shelf__cta--ai\" href=\"https:\u002F\u002Fformester.com\u002Fai-survey-generator\u002F\">Generate a survey →\u003C\u002Fa>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"fmstr-cmp-smsq-body\" aria-label=\"Tips for higher response rates\" id=\"tips-response\">\n\u003Cdiv class=\"fmstr-cmp-smsq-body__container\">\n\n\u003Ch2 class=\"fmstr-cmp-smsq-body__h2\">Tips for higher response rates\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Keep it short.\u003C\u002Fstrong> 5-10 questions for a cold audience, up to 20 for your own followers. Past that, completion drops off a cliff.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Lead with the easiest question.\u003C\u002Fstrong> Multiple choice or a single-tap rating. The hardest free-text question goes last.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Promise something real.\u003C\u002Fstrong> A discount works. A summary of the results works better, people are more curious about what their peers think than they admit.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Distribute on three channels, not one.\u003C\u002Fstrong> Email + story sticker + bio link beats any single channel by 30-40%.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mention the time it takes.\u003C\u002Fstrong> \"Takes 90 seconds\" in the headline lifts start-rate. Be honest; if it's 3 minutes, say 3.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Close the loop in public.\u003C\u002Fstrong> Post the top insight within two weeks. Builds trust for the next survey.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>See \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-things-you-can-do-with-survey-forms\u002F\">5 things you can do with survey forms\u003C\u002Fa> for the playbook on what to actually do with the responses.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-smsq-faq a { text-decoration: none !important; }\n.fmstr-cmp-smsq-faq {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0; --c-chip-bg: #f4f4f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-smsq-faq *, .fmstr-cmp-smsq-faq *::before, .fmstr-cmp-smsq-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-faq__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-smsq-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-smsq-faq__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 28px; max-width: 760px; }\n.fmstr-cmp-smsq-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-smsq-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-smsq-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-smsq-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-smsq-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-smsq-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-smsq-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n.fmstr-cmp-smsq-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-smsq-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-smsq-faq__answer a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-faq { padding: 40px 16px; }\n.fmstr-cmp-smsq-faq__intro { font-size: 15.5px; }\n.fmstr-cmp-smsq-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-smsq-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-smsq-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-faq\" aria-labelledby=\"fmstr-cmp-smsq-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-smsq-faq__h2\" id=\"fmstr-cmp-smsq-faq-h2\">Social media survey FAQ\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-smsq-faq__intro\">Answers that mirror the FAQPage JSON-LD on the live page.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>How many questions should a social media survey have?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">5 to 10 for a cold audience, 10 to 20 for your own followers. Past 20, drop-off accelerates. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">free template\u003C\u002Fa> ships with 50 questions because they’re optional. Cut what doesn’t apply.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>What are the best questions to ask in a social media usage survey?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">For usage studies (versus marketing studies), lead with platform mix, daily time spent, time-of-day patterns, and primary device. Then layer in content-type preferences and one effects question (mood change after use). The “Platform and usage” and “Social media effects” blocks above cover the core 15.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>What questions do students or researchers studying social media effects usually ask?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">Likert-scale items covering mood after use, social comparison, sleep impact, attention or scroll loss, sense of connection, and exposure to harmful content. The 8-question block in “Social media effects” above is the standard structure. Pair it with demographics and a free-text “what would you change” closer. \u003Ca href=\"https:\u002F\u002Fwww.pewresearch.org\u002Finternet\u002Ffact-sheet\u002Fsocial-media\u002F\">Pew Research’s 2025 social media fact sheet\u003C\u002Fa> is a solid benchmark to cite in the write-up.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>How long should a social media survey take to complete?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">Aim for under 3 minutes. Test it on one team member first. If it takes you more than 4 minutes, cut questions. Tell respondents the time upfront. “Takes 90 seconds” outperforms “Quick survey” on start-rate.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>What’s the best free tool to create a social media survey?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">For a one-off, Google Forms works. For branded, shareable, and analytics-tracked, use \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">Formester’s free template\u003C\u002Fa>. Full branding kit on the free tier, link plus email plus embed share modes, and live response analytics. For a faster start, the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fai-survey-generator\u002F\">AI Survey Generator\u003C\u002Fa> drafts 10 questions from a one-line brief.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-smsq-faq__item\">\n\u003Csummary>How do I get a higher response rate?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-smsq-faq__answer\">Short survey, three distribution channels (email plus story sticker plus bio link), state the time upfront, and post one result publicly within two weeks. Most marketers see 8 to 15% on cold audiences and 25 to 40% on warm. If you’re under 5%, the survey is too long or the ask is unclear. For more ideas, see \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-things-you-can-do-with-survey-forms\u002F\">5 things you can do with survey forms\u003C\u002Fa>.\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-smsq-rel a { text-decoration: none !important; }\n.fmstr-cmp-smsq-rel {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --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-smsq-rel *, .fmstr-cmp-smsq-rel *::before, .fmstr-cmp-smsq-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-smsq-rel__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-smsq-rel__head { max-width: 760px; margin: 0 0 28px; }\n.fmstr-cmp-smsq-rel__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-smsq-rel__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n.fmstr-cmp-smsq-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-smsq-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-smsq-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-smsq-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-smsq-rel__text { flex-grow: 1; min-width: 0; }\n.fmstr-cmp-smsq-rel__text h4 { font-size: 14.5px; font-weight: 600; color: var(--c-fg-1); margin: 0; }\n.fmstr-cmp-smsq-rel__text small { font-size: 12.5px; color: var(--c-fg-3); display: block; margin-top: 2px; }\n.fmstr-cmp-smsq-rel__arrow { color: var(--c-violet-500) !important; font-size: 18px; }\n\n@media (max-width: 880px) { .fmstr-cmp-smsq-rel__grid { grid-template-columns: 1fr 1fr; gap: 12px; } }\n@media (max-width: 760px) {\n.fmstr-cmp-smsq-rel { padding: 40px 16px; }\n.fmstr-cmp-smsq-rel__intro { font-size: 15.5px; }\n.fmstr-cmp-smsq-rel__card { padding: 16px; gap: 12px; }\n}\n@media (max-width: 540px) { .fmstr-cmp-smsq-rel__grid { grid-template-columns: 1fr; gap: 12px; } }\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-smsq-rel\" aria-labelledby=\"fmstr-cmp-smsq-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-smsq-rel__h2\" id=\"fmstr-cmp-smsq-rel-h2\">More from Formester for surveys and audience research\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-smsq-rel__intro\">Templates, builders, and guides you can pair with this page.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fsocial-media-survey-form-2114\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">📱\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Social Media Survey Template\u003C\u002Fh4>\u003Csmall>All 50 questions, pre-built\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-survey-generator\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">✨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>AI Survey Generator\u003C\u002Fh4>\u003Csmall>One-line brief, tailored survey\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fonline-survey-maker\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">📋\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Online Survey Maker\u003C\u002Fh4>\u003Csmall>Branded builder, response analytics\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fmarket-research-survey-701\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">🔍\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Market Research Survey\u003C\u002Fh4>\u003Csmall>Pre-launch and pricing studies\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fbrand-awareness-survey-template-1659\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">⭐\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Brand Awareness Survey\u003C\u002Fh4>\u003Csmall>Recognition, perception, recall\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fconsumer-behavior-survey-20056\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">🛒\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Consumer Behavior Survey\u003C\u002Fh4>\u003Csmall>Buying triggers and journey\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fbest-survey-questions\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">📝\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Best Survey Questions\u003C\u002Fh4>\u003Csmall>Master question bank by use-case\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fmust-have-demographic-questions-for-survey\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">👤\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Demographic Questions for Surveys\u003C\u002Fh4>\u003Csmall>The cross-cut layer for any study\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-drive-social-media-engagement-using-online-quizzes\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">🔥\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Drive Engagement With Quizzes\u003C\u002Fh4>\u003Csmall>Tactics that pair with surveys\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002F5-things-you-can-do-with-survey-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">📈\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>5 Things to Do With Survey Forms\u003C\u002Fh4>\u003Csmall>Turning responses into decisions\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fsurvey-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">📁\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>All Survey Templates\u003C\u002Fh4>\u003Csmall>Full Formester survey library\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-smsq-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Fmarket-research-surveys\u002F\">\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__icon\" aria-hidden=\"true\">🔮\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-smsq-rel__text\">\u003Ch4>Market Research Templates\u003C\u002Fh4>\u003Csmall>For brand and product research\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-smsq-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n","blog\u002Fblog\u002Fsocial-media-survey-questions.md",{"text":47},"15 min read",{"title":49,"author":7,"authorImage":8,"authorProfile":9,"coverImg":50,"coverImgAlt":51,"createdAt":52,"description":53,"featured":14,"jsonld":54,"keywords":55,"metaDescription":56,"metaImage":57,"metaTitle":58,"publishedAt":59,"slug":60,"updatedAt":61,"__hash__":62,"body":63,"id":64,"coverImgWidth":25,"coverImgHeight":26,"readingStats":65},"Best Formstack Alternatives (Free & Paid)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_formstack_alternatives_e1d807f198.png","an illustration of formstack alternatives","2024-09-02T00:51:23.315Z","Find the best Formstack alternatives. Compare top free and paid competitors to find the right form builder for your business needs.",[],"formstack alternatives,\nalternatives to formstack,\nformstack alternative,\nformstack alternative free,\nformstack competitors,","Looking for Formstack alternatives? Explore the top tools with better features, flexible pricing, and easier form building for teams and businesses.",[],"Top Formstack Alternatives + Competitors (Free & Paid)","2024-09-02T01:23:06.927Z","best-formstack-alternatives","2026-01-27T13:36:00.990Z","AYvR94tALW_JgO2eQOX5umYy9ZJc0tj9ZJ4zk3i6ebw","**[Formstack](https:\u002F\u002Fformstack.com\u002F)** has long been a popular choice for businesses and individuals looking to streamline their form-building process. However, as with any software, it might not be the perfect fit for everyone. \n\nWhether you're seeking a more affordable option, advanced features, or a simpler interface, there are plenty of Formstack alternatives worth considering. \n\nHere’s a detailed look at the **[best alternative to Formstack](\u002Fformstack-alternative\u002F)**, starting with a versatile tool that brings powerful form-building capabilities to your fingertips.\n\n### 1. [Formester](\u002F)\n\n![formester.png](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fformester_ade8c8ec26.png)\n#### Why Choose Formester?\nIf you’re searching for a comprehensive online form builder that balances simplicity with advanced features, Formester might just be the tool you need. Designed with both novices and experienced users in mind, Formester offers a user-friendly interface combined with a robust set of features that can meet diverse form-building needs.\n\n#### Key Features:\n- **Drag-and-Drop Builder:** Formester’s intuitive drag-and-drop interface makes it easy to create custom forms without any coding knowledge. Whether you’re building a simple contact form or a complex survey, Formester simplifies the process.\n\n- **Multi-User Collaboration:** Working on a team? Formester allows **[multiple users to collaborate on form creation and management](\u002Ffeatures\u002Fcollaborative-forms\u002F)**, making it ideal for businesses that require input from different departments.\n\n- **Form Backend as a Service:** Formester can handle all the backend operations, including data storage, security, and analytics, so you can focus on what matters—collecting and analyzing your data.\n\n- **Templates and Customization:** With a **[wide range of templates](\u002Ftemplates\u002F)** and customization options, Formester ensures your forms not only function well but also look professional and align with your brand’s identity.\n\n- **Integrations:** Formester seamlessly integrates with various third-party applications, allowing you to connect your forms with tools like email marketing platforms, CRMs, and more.\n\n#### Who is it for?\nFormester is an excellent choice for small to medium-sized businesses (SMBs) looking for an all-in-one form solution. It’s particularly well-suited for teams that require collaboration and customization without getting bogged down by technical details.\n\n**Why It’s a Top Formstack Alternative:** Formester combines ease of use with powerful features, offering a great balance for those looking for a free or cost-effective Formstack alternative.\n\n>**[Try Formester for free-->](https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up)**\n\n### 2. JotForm\n\n![jotform.png](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fjotform_aa856916d6.png)\n#### Why Choose JotForm?\nJotForm is another strong contender in the online form-building space, offering a wide array of templates and features that cater to various industries. Its drag-and-drop builder is comparable to Formester, and it also offers advanced features like conditional logic and payment integrations.\n\n#### Key Features:\n- **Extensive Template Library:** JotForm’s template library is one of the largest, with options for everything from healthcare to education.\n\n- **Conditional Logic:** Create dynamic forms that change based on user input, making the form-filling experience more personalized.\n\n- **Payment Integrations:** Easily integrate with payment gateways like PayPal and Stripe to collect payments directly through your forms.\n\n- **Responsive Design:** All forms built with JotForm are mobile-responsive, ensuring a seamless user experience across devices.\n\n#### Who is it for?\nJotForm is ideal for businesses of all sizes, particularly those in industries that require specialized forms, such as healthcare or education. Its extensive template library makes it easy to get started quickly.\n\nWhy It’s a Great Formstack Competitor: JotForm offers extensive templates and advanced features, making it a solid alternative to Formstack for those needing specific functionalities.\n\n>Read more about the **[best Jotform alternatives](\u002Fblog\u002Ftop-10-jotform-alternatives-or-sme-and-budget-friendly\u002F)**\n\n### 3. Typeform\n\n![typeform.png](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Ftypeform_617594c51f.png)\n### Why Choose Typeform?\nTypeform is known for its unique approach to form design, focusing on user experience with conversational forms. Unlike traditional forms, Typeform’s interface guides users through one question at a time, creating a more engaging experience.\n\n#### Key Features:\n- **Conversational Interface:** Typeform’s one-question-at-a-time format makes the form-filling process feel more interactive and less overwhelming.\n\n- **Custom Design:** With Typeform, you can create forms that are not only functional but also visually appealing, with plenty of customization options available.\n\n- **Data Analytics:** Typeform provides detailed analytics on form performance, helping you understand how users interact with your forms.\n\n- **Integrations:** Connect Typeform with popular tools like Google Sheets, Slack, and Mailchimp to automate workflows.\n\n#### Who is it for?\nTypeform is perfect for businesses and individuals looking to create engaging, user-friendly forms. Its conversational format is particularly well-suited for surveys, quizzes, and customer feedback forms.\n\nWhy It’s a Notable Formstack Alternative: Typeform’s interactive design sets it apart, making it a unique Formstack alternative for those who want a more engaging form experience.\n\n### 4. Wufoo\n![wufoo.png](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fwufoo_07312583f8.png)\n#### Why Choose Wufoo?\nWufoo is a veteran in the online form-building space, offering a straightforward and reliable solution for businesses and individuals. While it might not have all the bells and whistles of newer tools, Wufoo’s simplicity and ease of use make it a great choice for those who need a no-fuss form builder.\n#### \nKey Features:\n- **Ease of Use:** Wufoo’s interface is simple and intuitive, making it easy for anyone to create forms quickly.\n\n- **Form Analytics:** Track form performance with Wufoo’s built-in analytics, helping you optimize your forms for better results.\n\n- **Payment Processing:** Wufoo integrates with payment processors like PayPal, allowing you to collect payments through your forms.\n\n- **Customization Options:** While Wufoo’s customization options are not as extensive as some other tools, it offers enough flexibility to create forms that match your brand.\n\n#### Who is it for?\nWufoo is a good fit for small businesses and individuals who need a reliable, easy-to-use form builder without the complexity of more advanced tools.\n\nWhy It’s a Viable Formstack Competitor: Wufoo’s simplicity and reliability make it a straightforward alternative to Formstack for those who prefer a basic, no-frills option.\n\n### 5. Google Forms\n\n![googleforms.png](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fgoogleforms_b13e40dd44.png)\n#### Why Choose Google Forms?\nGoogle Forms is a free and straightforward option for anyone who needs to create simple forms quickly. While it lacks some of the advanced features found in other form builders, it’s an excellent choice for basic form creation, especially if you’re already using other Google Workspace tools.\n\n#### Key Features:\n- **Free to Use:** Google Forms is completely free, making it an attractive option for individuals and small businesses on a budget.\n\n- **Integration with Google Workspace:** Seamlessly integrates with other Google tools like Sheets and Drive, making it easy to store and analyze your data.\n\n- **Simple Interface:** Google Forms’ interface is clean and simple, allowing you to create and share forms quickly.\n\n- **Real-Time Collaboration:** Like other Google tools, Google Forms allows multiple users to collaborate on form creation in real time.\n\n#### Who is it for?\nGoogle Forms is ideal for anyone who needs to create basic forms without spending money. It’s particularly well-suited for educational institutions, non-profits, and small businesses already using Google Workspace.\n\nWhy It’s a Free Formstack Alternative: Google Forms offers a cost-effective way to create basic forms, making it a popular Formstack alternative free for those who need simple functionality.\n\n>Read more about the **[best Google Forms alternatives](\u002Fblog\u002Ftop-google-forms-alternatives\u002F)**\n\n### Bonus: [Formester's Comparison Tool](\u002Fcomparison-tool\u002F)\nChoosing the right form builder can be tricky with so many options available. To make your decision easier, use our comparison tool to **compare pricing and features of 30+ form builders**. \n\nThis tool allows you to find your perfect form solution by examining key aspects like cost, functionality, and additional features.\n![a screenshot of formester's comparison tool](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_comparison_tool_993ca01802.png)\n#### Why Use the Comparison Tool?\n- See how various form builders stack up against each other.\n\n- Compare specific features to ensure you get the functionalities you need.\n\n- Understand the cost differences and find a solution that fits your budget.\n\n- Using the comparison tool can help you identify which Formstack competitor best meets your needs and preferences.\n\n### Summary\nChoosing the right form builder depends on your specific needs and preferences. While Formstack is a powerful tool, there are several Formstack alternatives that offer different features, pricing, and interfaces. \n\nWhether you’re looking for a more affordable option, unique functionalities, or a simpler interface, the tools listed above are some of the best available. **[Sign up for Formester](https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up)** to start building stunning online forms and surveys for free.\n\n","blog\u002Fblog\u002Fbest-formstack-alternatives.md",{"text":66},"7 min read",{"title":68,"author":7,"authorImage":8,"authorProfile":9,"coverImg":69,"coverImgAlt":70,"createdAt":71,"description":72,"featured":14,"jsonld":73,"keywords":74,"metaDescription":75,"metaImage":76,"metaTitle":77,"publishedAt":78,"slug":79,"updatedAt":80,"__hash__":81,"body":82,"id":83,"coverImgWidth":25,"coverImgHeight":26,"readingStats":84},"Designing Digital Experiences That Drive Action: Visual Principles That Convert","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_blog_post_cover_about_how_visual_design_impacts_conversions_83b224fc46.png","a blog post cover about how visual design impacts conversions","2025-07-24T05:22:16.218Z","Find how visual design influences user behavior and boosts conversions. Learn key principles to create digital experiences that drive action.",[],"conversions,\ndesign principles,\nincrease conversions,\nvisual design principles,","Learn how visual design influences user behavior and boosts conversions. Learn key principles to create digital experiences that drive action.",[],"How Visual Design Impacts Conversions?","2025-07-24T05:22:19.837Z","how-visual-design-impacts-conversions","2025-12-29T04:35:20.222Z","dHtNpPdhcXMzBFs7PcBjM_lMYZZdFfMdAkMJVcAgHAM","![a blog post cover about how visual design impacts conversions](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_blog_post_cover_about_how_visual_design_impacts_conversions_83b224fc46.png)\n\nIf your SaaS product looks great but isn’t converting, the problem isn’t the aesthetics; it’s the intent behind them. Great design isn’t decoration. It’s persuasion. Every color, layout, button, and block of space should serve one purpose: moving the user to action.\n\nStudies show that **[users form an impression of your brand in less than 1 second](https:\u002F\u002Fwww.springfieldbusinessjournal.com\u002Farticles\u002Fyour-website-has-less-than-a-second-to-make-a-first-impression-15375297)**, and if that impression lacks clarity, they bounce. In fact, according to Google, visually complex sites are consistently rated as less beautiful and more confusing. Clean layouts aren’t enough. Users need directional cues, emotional resonance, and quick value recognition.\n\nSo, what separates design that looks “clean” from design that drives results? Visual strategy. Below are the principles that top-performing companies use to turn **[views into signups](\u002Fblog\u002Fcreate-lead-capture-form-effectively\u002F)**, trials into upgrades, and curious visitors into loyal customers.\n\n## Start with visual hierarchy\nMost users make a judgment about your product in under 50 milliseconds. That means your design needs to communicate priority instantly. Visual hierarchy is your silent sales pitch—and it starts before a word is read.\n\nWant users to convert faster? Start by showing what matters, and show it well. **[Omi’s approach to next-gen product imagery](https:\u002F\u002Fomi.so\u002Fresources\u002Fblog\u002Fproduct-imagery)** is a great example of this in action. Rather than relying on static visuals or generic mockups, they use dynamic, highly contextual product imagery that aligns with user intent. The result? Users immediately grasp the value, reducing hesitation and driving quicker decisions before a scroll or click.\n\nVisual hierarchy guides the eye through your interface in a logical order. It's about signaling, not shouting. The headline leads to the subhead. The subhead points to the CTA. Supporting info hangs back until needed.\n\n**Make your most important message unmissable**\n\n- Limit each screen to one clear call to action (CTA), and visually mute secondary actions\n\n- Use directional cues like arrows or image gaze (e.g., a person looking toward your CTA)\n\n- Apply intentional sizing: Headline > Subhead > Button > Body copy. And don’t let icons overpower\n\n- Test the “blur test”: Can you still tell where the action is when the screen is blurred?\n\n### Whitespace isn’t empty, it’s strategic.\nWhitespace, or “negative space”, isn’t wasted real estate. It’s the room your content needs to breathe and be understood. \n\nWhen layouts are too tight or busy, users don’t know where to look. Their attention scatters, and even great messaging can get lost. The most confident brands let whitespace do the heavy lifting.\n\nIn mobile design, especially, whitespace often gets sacrificed. But if your mobile experience feels cramped or overwhelming, you’re probably losing users before they reach the CTA.\n\n**Let your content breathe and your message land**\n\n- Use whitespace to create visual “islands” for important content to improve scannability\n\n- Set a consistent vertical rhythm (e.g., 8px or 16px spacing units) to avoid visual clutter\n\n- Break long-form content with line breaks, bullets, and collapsible sections\n\n- Resist the urge to “fill space”; sometimes the strongest message is the one that stands alone\n\n### Consistency is a trust builder\nYou know what inconsistency looks like: three different button styles on one page, fonts that don’t match, erratic spacing between form fields. This isn’t just annoying for the eyes. It kills trust.\n\nUsers associate consistency with professionalism. When your visuals feel cohesive, so does your brand. When they don’t, the cognitive dissonance distracts users from converting.\n\nTake Figma, for example. Their interface is a masterclass in visual consistency: button styles, color schemes, and spacing stay locked in whether you’re designing a frame or inviting a teammate. That level of predictability helps users build trust fast, especially when they’re working across teams or devices.\n\n**Build credibility through design discipline**\n\n- Create a simple design system with basic spacing, font, and button rules\n\n- Use design tokens or shared components if you're working in tools like Figma or Webflow\n\n- Review critical flows (sign-up, checkout) monthly for styling drift or rogue elements\n\n- Use a UI linting tool or plugin to flag spacing and style inconsistencies\n\n### Contrast creates clarity\nWithout contrast, your design is just… gray soup. Contrast is what guides users toward the most important parts of your interface. It doesn’t just make things pop, it makes them matter.\n\nHumans are visual animals. Our brains are wired to notice differences. Bright colors against muted tones, large text against smaller, bold elements next to neutral space - this is what catches attention and **[triggers engagement](\u002Fblog\u002Ftips-to-improve-customer-engagement\u002F)**.\n\n**Example:** Notion’s interface uses calm, almost empty screens, except for a single, high-contrast CTA button. It pulls your eye immediately, without feeling aggressive.\n\n**Guide attention with visual tension**\n\n- Limit use of your primary color to CTAs and key UI elements; this makes them more impactful\n\n- Use contrast in text hierarchy too: not everything needs to be 16px black\n\n- Run **[contrast accessibility tests (like WebAIM)](https:\u002F\u002Fwebaim.org\u002F)** to ensure readability for all users\n\n- Explore contrast through size, weight, shadow, and whitespace, not just color\n\n### Microinteractions are the difference between static and smart\nClick a button. Nothing happens. Did it work? Is the site broken? Am I supposed to wait?\n\nWelcome to the world of poor interaction design.\n\nMicrointeractions, AKA those tiny animations, hover effects, and loading indicators, create feedback loops that guide users through your product. They offer confirmation, reduce uncertainty, and often make the whole experience feel faster and more polished.\n\nAnother example? ClickUp. Every hover, drag, or dropdown interaction gives feedback that feels both snappy and satisfying. These micro-movements train users on how the product works, reducing confusion and speeding up onboarding.\n\n**Use feedback loops to reduce friction**\n\n- Add hover states and click effects to all interactive elements, even icons and cards\n\n- Use animations to show progress (e.g., upload bars, step transitions)\n\n- Include microcopy with error states (“Oops, that didn’t work, try again”) to reduce frustration\n\n- Keep microinteractions subtle: 0.2 to 0.4s transitions are usually optimal\n\n### Forms Should Feel Effortless\nForms are where your conversions happen, or where they often go to die. A cluttered form with vague labels or 10 required fields is a conversion killer.\n\nThe best forms feel invisible. They guide users from input to completion with minimal friction and maximum clarity. Think of every field as a potential point of dropout. Unless it's absolutely necessary, remove it, or delay it until later in the flow.\n\nBad forms introduce doubt: Do I really need to give my phone number? Will I get spammed? Is this even secure? These questions slow users down or push them to abandon entirely. A smarter form anticipates concerns and removes obstacles. \n\n**Design inputs that feel natural, not annoying**\n\n- Use smart defaults and auto-fill fields where possible (especially on mobile)\n\n- Apply conditional logic so users only see relevant fields; no more “N\u002FA” in dropdowns\n\n- Show a progress bar or step counter to reduce perceived effort\n\n- Make validation real-time: errors should show before submit, not after\n\n**Formester makes this level of UX achievable** without writing a line of code. Its visual form builder supports conditional logic, field validation, and responsive layout by default, so even non-technical teams can build clean, user-friendly forms that convert.\n\n### Remember: Speed and performance are part of the visual experience\nEven the best design fails if it loads slowly or breaks under pressure. In modern UX, performance is part of the visual impression. If a button animation stutters or your landing page takes 4+ seconds to load, it creates friction before the user even reads a headline.\n\nFast-loading, responsive design gives your visuals room to shine. Use lazy loading for images, compress assets, and test interactions under real-world network conditions. \n\nConsider how product imagery loads, too—Omi, for instance, optimizes high-quality visuals without compromising speed, ensuring clarity doesn't come at the cost of performance.\n\n### Don’t Just Design. Direct.\nToo many companies treat visual design like a finishing touch. As something you polish after the “real work” is done. \n\nEffective visual design reduces friction, builds trust, and moves users through your funnel with less hesitation and more clarity. When every element is purposeful - every headline, button, whitespace block, and interaction - you create an experience that’s not just nice to look at, but engineered to convert.\n\nThe best-performing teams don’t separate design from outcomes. They treat UX like a growth lever. Whether you're refining your onboarding flow or rebuilding your landing page, don’t aim for pretty. Aim for persuasive. Aim for clarity. Aim for action.\n\nBecause good design doesn’t have to win awards. But it does need to win conversions.\n\n","blog\u002Fblog\u002Fhow-visual-design-impacts-conversions.md",{"text":85},"8 min read",{"title":87,"author":7,"authorImage":8,"authorProfile":9,"coverImg":88,"coverImgAlt":89,"createdAt":90,"description":91,"featured":14,"jsonld":92,"keywords":93,"metaDescription":94,"metaImage":95,"metaTitle":96,"publishedAt":97,"slug":98,"updatedAt":99,"__hash__":100,"body":101,"id":102,"coverImgWidth":25,"coverImgHeight":26,"readingStats":103},"5 Best Tally Forms Alternatives for 2025","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_13_1ea33fca5f.png","a blog post cover about best tally forms alternatives","2025-06-27T03:40:30.096Z","Explore top Tally Forms alternatives for 2025. Get advanced features, custom branding, Google Sheets integration, and more for your online forms.",[],"tally so alternatives,\nalternative to tally so,\ntally.so,\ntally.so form builder,\ntally forms,\ntally form builder,\n","Tired of Tally forms limits? Discover 5 better alternatives with advanced customization, more form fields, and easy data collection tools.",[],"5 Best Tally.so Alternatives for 2025 | Formester","2025-06-27T03:49:10.657Z","best-tally-forms-alternatives","2026-01-25T06:02:16.293Z","rYBkjorpaDGy0YbtokyA1FDoeV0ETsvf3LJdB6nQzuo","![a blog post cover about best tally forms alternatives](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_13_1ea33fca5f.png)\n\n**Tally.so** is a popular online tool for easy **form creation**. It keeps things simple with clean designs and a quick setup. But if you are reading this, chances are the Tally form is no longer meeting your needs. Maybe you want more features, better control, or options that help you grow.\n\nWhile Tally forms offers a solid free version, many users hit the limits fast. You might need advanced customization, more form fields, better branding, or **[integrations like Google Sheets](\u002Fintegrations\u002Fgoogle-sheets\u002F)**. When that happens, it is time to look for a better alternative.\n\nIn this guide, you will discover the **5 best alternatives to Tally.so** for 2025, built for smarter data collection, better designs, and powerful features that help your business scale.\n\n## Why Look for a Tally.so Alternative?\n\nTally is great for beginners, but here is why people switch:\n\n- **You hit limits with the free version**  \nThe basics are fine, but paid features sneak in fast.\n\n- **You need advanced customization**  \nTally lets you tweak a little, but adding your own style or custom CSS is limited.\n\n- **You want more form fields and smarter logic**  \nComplex forms often need more than what Tally provides.\n\n- **You care about branding with a custom domain**  \nYour forms should match your website, not look like someone else’s product.\n\n- **You need better data collection tools**  \nSmooth connections to tools like Google Sheets help manage responses better.\n\n- **You are ready for more than basic paid plans**  \nTally’s pro plan is simple, but growing teams often need more.\n\n### 1. Formester  \n**Best All in One Tally.so Alternative**\n![a mockup of formester form builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_mockup_of_formester_form_builder_25b9131553.png)\n\n**[Formester](\u002Ftally-forms-alternative\u002F)** gives you everything you wish the Tally form had, plus much more. Whether you are building simple forms or complex surveys, Formester makes it easy and powerful.\n\n**Why people love Formester:**\n\n- Unlimited form creation and submissions on the free plan  \n\n- Advanced conditional logic and branching  \n\n- Full branding with custom domain options  \n\n- Complete design control with custom CSS  \n\n- Google Sheets, Slack, and other easy integrations  \n\n- Team collaboration with field level permissions  \n\n- AI powered tools to build forms in seconds  \n\n- Reliable, real time support when you need help  \n\n**Perfect for:**  \nMarketers, small businesses, product teams, and anyone who needs smarter data collection without technical hassle.\n\n>**Try it here:** [Formester Website](https:\u002F\u002Fformester.com)\n\n### 2. Typeform  \n**Beautiful, Interactive Forms**\n![a mockup of typeform form builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_mockup_of_typeform_form_builder_bae0bddcae.png)\n\nTypeform stands out for its one question at a time style that feels more like a conversation. It is ideal for those who want interactive forms that look sleek.\n\n**Features include:**\n\n- Great for surveys, quizzes, and feedback forms  \n\n- Stunning, mobile friendly designs  \n\n- Logic jumps and smart form fields  \n\n- Integrations like Google Sheets and more  \n\n**Keep in mind:**  \nWhile Typeform offers value, the paid plans can add up fast for advanced features.\n\n### 3. Jotform  \n**Massive Template Library for All Needs**\n\n![a mockup of jotform form builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_mockup_of_jotform_form_builder_daadacf0f6.png)\n\nJotform makes form creation easy with its huge variety of templates. From order forms to registration pages, there is something for everyone.\n\n**Why people choose Jotform:**\n\n- Thousands of ready to use form templates  \n\n- Secure data collection and payment options  \n\n- Smart conditional logic  \n\n- Useful integrations like Google Sheets  \n\n**Worth noting:**  \nMany key features sit behind pro plan pricing.\n\n>Read more about the **[best Jotform alternatives](\u002Fblog\u002Ftop-10-jotform-alternatives-or-sme-and-budget-friendly\u002F)**\n\n### 4. Fillout  \n**Simple and Clean Alternative to Tally**\n\n![a mockup of fillout form builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_mockup_of_fillout_form_builder_16461a1686.png)\n\nFillout is another easy, no code option for building forms. It feels similar to Tally offers, but with more flexibility.\n\n**Good features include:**\n\n- Clean, modern design  \n\n- Logic jumps and smart workflows  \n\n- Payments with Stripe built in  \n\n- Basic branding options  \n\n**Limitations:**  \nFillout works well for simple forms, but larger teams or advanced users may outgrow its free version and need more control.\n\n### 5. Paperform  \n**Ideal for SMBs for everyday workflows**\n![a mockup of paperform form builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_mockup_of_paperform_form_builder_b4b5eea796.png)\n\n**\u003Ca href=\"https:\u002F\u002Fpaperform.co\u002F\">Paperform\u003C\u002Fa>**  is a powerful online form builder trusted by 500K+ small and growing businesses to create forms that onboard clients, generate leads, take payments, automate workflows and get documents signed.\n\n**Top features:**\n\n - \"Edit like a doc\" form builder with 700+ beautifully designed templates \n\n- Easy AI powered conversational form creation experience\n\n- Conditional logic & calculations for complex workflows\n\n- Built-in payment collection\n\n- Supports signatures and scheduling appointments\n\n**Heads up:**  \nPaperform is designed as an all-in-one form and workflow platform, so pricing scales as usage, automation, and collaboration needs grow.\n\n### Final Thoughts\n\nTally offers a good starting point for simple forms. But as your business grows, you may need more control, better design, and advanced tools for smarter data collection.\n\nWhether you need custom CSS, advanced logic, more form fields, or integrations like Google Sheets, these alternatives help you step up your form creation game.\n\n**Looking for the smartest Tally forms alternative?**  \nCheck out how **[Formester](\u002F)** combines ease of use, advanced features, AI tools, and real support to help you build better forms without limits.\n\n","blog\u002Fblog\u002Fbest-tally-forms-alternatives.md",{"text":104},"5 min read",1788363421582]