[{"data":1,"prerenderedAt":219},["ShallowReactive",2],{"blog-how-to-create-right-to-left-forms":3},{"blogData":4,"relatedArticles":139},{"id":5,"title":6,"author":7,"authorImage":8,"authorProfile":9,"coverImg":10,"coverImgAlt":11,"createdAt":12,"description":13,"featured":14,"jsonld":15,"keywords":128,"metaDescription":13,"metaImage":129,"metaTitle":46,"publishedAt":130,"slug":131,"updatedAt":132,"__hash__":133,"body":134,"coverImgWidth":135,"coverImgHeight":136,"readingStats":137},"blog\u002Fblog\u002Fhow-to-create-right-to-left-forms.md","Google Forms Right to Left: How to Make RTL Forms (and 3 Native Alternatives)","Harsh Shah",null,"https:\u002F\u002Flinkedin.com\u002Fin\u002Fharshshahseo","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F75_e6bfe24fc4.png","a blog post cover about how to create right to left forms","2025-07-31T17:39:19.111Z","Google Forms has no official RTL setting. Here is the language workaround that flips your forms right to left, a language-by-language guide (Arabic, Hebrew, Urd",false,[16],{"@graph":17,"@context":127},[18,32,48,67,83,120],{"@id":19,"@type":20,"image":10,"author":21,"headline":6,"publisher":24,"description":28,"dateModified":29,"datePublished":30,"mainEntityOfPage":31},"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-create-right-to-left-forms\u002F#article","BlogPosting",{"name":22,"@type":23},"Formester","Organization",{"logo":25,"name":22,"@type":23},{"url":26,"@type":27},"https:\u002F\u002Fformester.com\u002Flogo.png","ImageObject","Google Forms has no official RTL setting. Here is the language workaround that flips your forms right to left, a language-by-language guide (Arabic, Hebrew, Urdu, Persian, Pashto), and three form builders with native RTL support.","2026-06-11","2025-07-31","https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-create-right-to-left-forms\u002F",{"@id":33,"@type":34,"itemListElement":35},"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-create-right-to-left-forms\u002F#breadcrumb","BreadcrumbList",[36,41,45],{"item":37,"name":38,"@type":39,"position":40},"https:\u002F\u002Fformester.com\u002F","Home","ListItem",1,{"item":42,"name":43,"@type":39,"position":44},"https:\u002F\u002Fformester.com\u002Fblog\u002F","Blog",2,{"item":31,"name":46,"@type":39,"position":47},"Google Forms Right to Left: How to Make RTL Forms",3,{"name":49,"step":50,"@type":65,"description":66},"How to flip Google Forms to right to left (language workaround)",[51,55,58,61],{"name":52,"text":53,"@type":54,"position":40},"Open Google Forms","Sign in to forms.google.com with the Google account you build forms with.","HowToStep",{"name":56,"text":57,"@type":54,"position":44},"Open Google Account settings","Click your profile icon, then Manage your Google Account, then Personal info, then Language.",{"name":59,"text":60,"@type":54,"position":47},"Add an RTL language","Add Arabic, Hebrew, Urdu, or Persian and set it as primary.",{"name":62,"text":63,"@type":54,"position":64},"Refresh Google Forms","Reload forms.google.com. The editor and every form you open or create defaults to RTL.",4,"HowTo","Change your Google account's Forms language to an RTL language (Arabic, Hebrew, Urdu, Persian) to flip the form editor to right-to-left alignment.",{"name":68,"step":69,"@type":65,"description":82},"How to make a native RTL form in Formester",[70,73,76,79],{"name":71,"text":72,"@type":54,"position":40},"Build your base form","Use the AI form builder or open an existing form.",{"name":74,"text":75,"@type":54,"position":44},"Toggle Multilanguage on","Open Advanced settings and switch Multilanguage on.",{"name":77,"text":78,"@type":54,"position":47},"Add an RTL language and translate","Click Add Language, pick Arabic, Hebrew, Urdu, or Persian, then click Translate with AI.",{"name":80,"text":81,"@type":54,"position":64},"Preview and share","Hit Preview, test on mobile, then share by link, QR code, or one of the six embed modes.","Build a form once, add Arabic, Hebrew, Urdu, or Persian as a language, AI translates and aligns RTL.",{"@type":84,"mainEntity":85},"FAQPage",[86,92,96,100,104,108,112,116],{"name":87,"@type":88,"acceptedAnswer":89},"Does Google Forms officially support right to left?","Question",{"text":90,"@type":91},"No. Google has not shipped an RTL setting. The only workaround is to change your Google account's Forms language to an RTL language, which flips the form direction in your own editor and preview. Respondents on default-English Google accounts still see a left-to-right form.","Answer",{"name":93,"@type":88,"acceptedAnswer":94},"What other form builders support RTL natively?",{"text":95,"@type":91},"Formester (toggle Multilanguage, pick an RTL language, AI translates and aligns), Fillout (per-form Right-to-left toggle), and Jotform (paste a custom CSS block) all support RTL. forms.app and Gravity Forms also offer RTL with setup beyond a single toggle.",{"name":97,"@type":88,"acceptedAnswer":98},"How do I add a Hebrew or Arabic form to my website?",{"text":99,"@type":91},"Build the form in a native RTL builder (Formester, Fillout, or Jotform), then embed it. In Formester, click Share and pick from six embed modes (inline, popup, sidebar, side tab, popover, fullscreen). The form keeps its RTL alignment inside the iframe.",{"name":101,"@type":88,"acceptedAnswer":102},"Can I have one form with both English and Arabic versions?",{"text":103,"@type":91},"Yes, in any builder with a multilanguage feature. Formester ships a language picker that lets respondents switch between English, Arabic, Hebrew, or any combination of 180+ languages. Google Forms does not have a native multilanguage feature.",{"name":105,"@type":88,"acceptedAnswer":106},"Does the Google Forms language hack work for respondents?",{"text":107,"@type":91},"No. The account-language setting is per-Google-account. Each respondent sees the form in their own account's language, not yours.",{"name":109,"@type":88,"acceptedAnswer":110},"Which RTL languages does Formester support?",{"text":111,"@type":91},"Formester's AI translation covers 180+ languages including Arabic, Hebrew, Urdu, Persian (Farsi and Dari), Pashto, Sindhi, and Kurdish (Sorani). RTL alignment applies automatically when the language is RTL.",{"name":113,"@type":88,"acceptedAnswer":114},"Will my form work on mobile in RTL?",{"text":115,"@type":91},"Yes, in any builder with native RTL. Touch targets, submit button placement, and label alignment all stay correct at every breakpoint.",{"name":117,"@type":88,"acceptedAnswer":118},"Can I use dir=rtl in HTML to make my own form RTL?",{"text":119,"@type":91},"Yes. Set dir=rtl on the form element (or a parent) and pair it with the right lang attribute (ar, he, ur, fa). For mixed-direction content like Latin-script brand names inside an RTL body, wrap them in bdi tags.",{"name":121,"@type":122,"embedUrl":123,"contentUrl":124,"uploadDate":30,"description":125,"thumbnailUrl":126},"How to Create Right to Left Forms in Formester","VideoObject","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FccDNyDT8XDw","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ccDNyDT8XDw","4-step walkthrough of building a multilingual RTL form in Formester with AI translation.","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FccDNyDT8XDw\u002Fhqdefault.jpg","https:\u002F\u002Fschema.org","right to left forms,\nonline forms,\nmulti language forms,\n",[],"2026-06-15T04:46:55.613Z","how-to-create-right-to-left-forms","2026-06-15T04:46:55.621Z","XmZVf8XPV3nH4Bdi3cjOKBDB1I69R3UEs80SOD9sMls","![a blog post cover about how to create right to left forms](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F75_e6bfe24fc4.png)\n\n\u003Cstyle>\n\u002F* batch-1 blog normalisation *\u002F\n.fmstr-blog-lead {\n  font-size: 17px !important;\n  line-height: 1.65 !important;\n  color: #475467 !important;\n  font-weight: 400 !important;\n  margin: 0 0 16px !important;\n}\n.fmstr-blog-lead a { color: #6941c6 !important; font-weight: 500; }\n.fmstr-blog-lead a:hover { text-decoration: underline !important; }\n.fmstr-blog-lead strong { color: #101828; font-weight: 700; }\nsection[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n  padding-top: 28px !important;\n  padding-bottom: 28px !important;\n}\n@media (max-width: 540px) {\n  section[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n    padding-top: 24px !important;\n    padding-bottom: 24px !important;\n  }\n}\n\u003C\u002Fstyle>\n\n\u003Cstyle id=\"fmstr-blog-mobile-fullwidth-v3\">\n@media (max-width: 760px) {\n  .art-section { padding-left: 12px !important; padding-right: 12px !important; }\n}\n@media (max-width: 540px) {\n  .art-section { padding-left: 6px !important; padding-right: 6px !important; padding-top: 24px !important; }\n  section[class^=\"fmstr-cmp-\"], section[class*=\" fmstr-cmp-\"] {\n    padding-left: 0 !important; padding-right: 0 !important;\n    overflow-x: hidden !important; box-sizing: border-box !important;\n  }\n  section[class^=\"fmstr-cmp-\"] *, section[class^=\"fmstr-cmp-\"] *::before, section[class^=\"fmstr-cmp-\"] *::after { box-sizing: border-box !important; }\n  section[class^=\"fmstr-cmp-\"] > *, section[class^=\"fmstr-cmp-\"] > * > * { min-width: 0 !important; }\n  section[class^=\"fmstr-cmp-\"] [class*=\"__container\"] {\n    padding-left: 0 !important; padding-right: 0 !important;\n    max-width: 100% !important; width: 100% !important;\n  }\n  section[class^=\"fmstr-cmp-\"] [class*=\"__card\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__step\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__panel\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__tool\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__verdict\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__row\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__fix\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__callout\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__quote\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__tldr\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__answer\"],\n  section[class^=\"fmstr-cmp-\"] [class*=\"__faq\"],\n  section[class^=\"fmstr-cmp-\"] details {\n    padding-left: 14px !important; padding-right: 14px !important;\n    margin-left: 0 !important; margin-right: 0 !important;\n  }\n  section[class^=\"fmstr-cmp-\"] p, section[class^=\"fmstr-cmp-\"] li { font-size: 15px !important; line-height: 1.6 !important; }\n  section[class^=\"fmstr-cmp-\"] h2 { font-size: 22px !important; line-height: 1.22 !important; }\n  section[class^=\"fmstr-cmp-\"] h3 { font-size: 18px !important; line-height: 1.3 !important; }\n  section[class^=\"fmstr-cmp-\"] h4 { font-size: 16px !important; line-height: 1.35 !important; }\n  section[class^=\"fmstr-cmp-\"] table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100% !important; }\n  section[class^=\"fmstr-cmp-\"] img, section[class^=\"fmstr-cmp-\"] iframe, section[class^=\"fmstr-cmp-\"] video { max-width: 100% !important; height: auto !important; }\n  section[class^=\"fmstr-cmp-\"] pre, section[class^=\"fmstr-cmp-\"] code {\n    white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word !important;\n  }\n  section[class^=\"fmstr-cmp-\"] pre { overflow-x: auto; }\n  .fmstr-blog-lead { font-size: 16.5px !important; }\n}\n\u003C\u002Fstyle>\n\n\u003Cp class=\"fmstr-blog-lead\">Google Forms does not have a right-to-left toggle. Google's own help thread confirms there is \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fthread\u002F198216419\">no official RTL setting\u003C\u002Fa>. The only workaround is to change the Forms account language to Hebrew or Arabic, which flips all your forms RTL, but only in your own view.\u003C\u002Fp>\n\n\u003Cp class=\"fmstr-blog-lead\">If you want every respondent to see the form in RTL, native to their script, you need a form builder that ships RTL as a setting.\u003C\u002Fp>\n\n\u003Cp class=\"fmstr-blog-lead\">This guide covers the Google Forms workaround, the limits you should know about before shipping, a language-by-language quick reference for Arabic, Hebrew, Urdu, Persian, Pashto, and Sindhi, and three builders with native RTL support (Formester, Jotform, Fillout).\u003C\u002Fp>\n\n\u003Cstyle>\n.fmstr-cmp-rtl-tldr a { text-decoration: none !important; }\n.fmstr-cmp-rtl-tldr a { color: #5b34b1 !important; }\n.fmstr-cmp-rtl-tldr a:hover { text-decoration: underline !important; }\n.fmstr-cmp-rtl-tldr {\n--c-card: #f7f3ff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-edge: #e4d7ff; --c-border: #d6c2f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\nbackground: transparent;\npadding: 28px 0 40px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-rtl-tldr *, .fmstr-cmp-rtl-tldr *::before, .fmstr-cmp-rtl-tldr *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-tldr__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-tldr__card {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-left: 4px solid var(--c-violet-500);\nborder-radius: 14px;\npadding: 22px 26px;\nbox-shadow: var(--c-shadow);\ndisplay: flex; flex-direction: column; gap: 10px;\n}\n.fmstr-cmp-rtl-tldr__label {\nfont-size: 12px;\nfont-weight: 700;\nletter-spacing: 0.08em;\ntext-transform: uppercase;\ncolor: var(--c-violet-700) !important;\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\nmargin: 0;\n}\n.fmstr-cmp-rtl-tldr__label::before {\ncontent: \"\";\nwidth: 8px; height: 8px; border-radius: 9999px;\nbackground: var(--c-violet-500);\ndisplay: inline-block;\n}\n.fmstr-cmp-rtl-tldr__body {\nfont-size: 16px;\nline-height: 1.65;\ncolor: var(--c-fg-1);\nmargin: 0;\nfont-weight: 500;\n}\n.fmstr-cmp-rtl-tldr__body strong { color: var(--c-violet-700); font-weight: 700; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-rtl-tldr { padding: 20px 0 28px; }\n.fmstr-cmp-rtl-tldr__card { padding: 18px 20px; }\n.fmstr-cmp-rtl-tldr__body { font-size: 15px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-tldr img, .fmstr-cmp-rtl-tldr table, .fmstr-cmp-rtl-tldr pre, .fmstr-cmp-rtl-tldr iframe, .fmstr-cmp-rtl-tldr video { max-width: 100%; }\n.fmstr-cmp-rtl-tldr > * { min-width: 0; }\n.fmstr-cmp-rtl-tldr [class*='__grid'] > *, .fmstr-cmp-rtl-tldr [class*='__list'] > *, .fmstr-cmp-rtl-tldr [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-tldr pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-tldr table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-tldr\" aria-labelledby=\"fmstr-cmp-rtl-tldr-label\">\n\u003Cdiv class=\"fmstr-cmp-rtl-tldr__container\">\n\u003Cdiv class=\"fmstr-cmp-rtl-tldr__card\">\n\u003Cp class=\"fmstr-cmp-rtl-tldr__label\" id=\"fmstr-cmp-rtl-tldr-label\">Quick answer\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-rtl-tldr__body\">\u003Cstrong>Google Forms does not have a right-to-left toggle.\u003C\u002Fstrong> The only workaround is to change your Google account's Forms language to Hebrew or Arabic, which flips the form RTL in your editor view, but respondents still see it left-to-right.\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-rtl-tldr__body\">For respondent-facing RTL, use a native builder: \u003Ca href=\"\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F\">Formester\u003C\u002Fa> (toggle Multilanguage, pick Arabic, Hebrew, Urdu, Persian, Pashto, or Sindhi, AI translates and aligns), \u003Ca href=\"https:\u002F\u002Ffillout.com\u002Fhelp\u002Fright-to-left-forms\">Fillout\u003C\u002Fa> (per-form RTL flag), or \u003Ca href=\"https:\u002F\u002Fwww.jotform.com\u002Fhelp\u002Fhow-to-align-your-forms-to-a-right-to-left-direction\u002F\">Jotform\u003C\u002Fa> (custom CSS).\u003C\u002Fp>\n\u003Cp class=\"fmstr-cmp-rtl-tldr__body\">For developers, \u003Ccode>dir=\"rtl\"\u003C\u002Fcode> with the right \u003Ccode>lang\u003C\u002Fcode> attribute is the W3C-documented approach.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-rtl-cmp a { text-decoration: none !important; }\n.fmstr-cmp-rtl-cmp a { color: #5b34b1 !important; }\n.fmstr-cmp-rtl-cmp a:hover { text-decoration: underline !important; }\n.fmstr-cmp-rtl-cmp {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n--c-good: #12b76a; --c-bad: #f04438;\nbackground: transparent;\npadding: 48px 0;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\noverflow-x: hidden;\n}\n.fmstr-cmp-rtl-cmp *, .fmstr-cmp-rtl-cmp *::before, .fmstr-cmp-rtl-cmp *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-cmp > *, .fmstr-cmp-rtl-cmp > * > * { min-width: 0; }\n.fmstr-cmp-rtl-cmp__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-cmp__head { margin: 0 0 28px; }\n.fmstr-cmp-rtl-cmp__h2 {\nfont-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15;\nletter-spacing: -.02em; margin: 0; color: var(--c-fg-1);\n}\n.fmstr-cmp-rtl-cmp__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n.fmstr-cmp-rtl-cmp__grid {\ndisplay: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;\n}\n.fmstr-cmp-rtl-cmp__card {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\npadding: 22px;\nbox-shadow: var(--c-shadow);\ndisplay: flex; flex-direction: column; gap: 12px;\nmin-width: 0;\n}\n.fmstr-cmp-rtl-cmp__card--featured {\nborder-color: var(--c-edge);\nbackground: var(--c-tint);\nbox-shadow: 0 4px 18px rgba(105,65,198,.10);\n}\n.fmstr-cmp-rtl-cmp__chip {\ndisplay: inline-flex; align-items: center;\nfont-size: 11px; font-weight: 700; letter-spacing: 0.08em;\ntext-transform: uppercase; color: var(--c-violet-700) !important;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\npadding: 4px 10px; border-radius: 9999px;\nalign-self: flex-start;\n}\n.fmstr-cmp-rtl-cmp__name {\nfont-size: 18px; font-weight: 700; color: var(--c-fg-1);\nmargin: 0; line-height: 1.3;\n}\n.fmstr-cmp-rtl-cmp__best {\nfont-size: 13.5px; color: var(--c-fg-3); margin: 0;\n}\n.fmstr-cmp-rtl-cmp__best strong { color: var(--c-fg-1); font-weight: 600; }\n.fmstr-cmp-rtl-cmp__divider {\nheight: 1px; background: var(--c-border); margin: 4px 0; border: 0;\n}\n.fmstr-cmp-rtl-cmp__list {\nmargin: 0; padding: 0; list-style: none;\ndisplay: flex; flex-direction: column; gap: 8px;\n}\n.fmstr-cmp-rtl-cmp__item {\ndisplay: block; position: relative; padding-left: 26px;\nfont-size: 14px; line-height: 1.5; color: var(--c-fg-2);\n}\n.fmstr-cmp-rtl-cmp__item::before {\ncontent: \"\\2713\";\nposition: absolute; left: 0; top: 0.05em;\ncolor: var(--c-good); font-weight: 700; line-height: 1.45;\n}\n.fmstr-cmp-rtl-cmp__item--con::before { content: \"\\2717\"; color: var(--c-bad); position: absolute; left: 0; top: 0.05em; font-weight: 700; }\n\n@media (max-width: 920px) {\n.fmstr-cmp-rtl-cmp__grid { grid-template-columns: 1fr; gap: 12px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-rtl-cmp { padding: 36px 0; }\n.fmstr-cmp-rtl-cmp__card { padding: 18px 20px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-cmp img, .fmstr-cmp-rtl-cmp table, .fmstr-cmp-rtl-cmp pre, .fmstr-cmp-rtl-cmp iframe, .fmstr-cmp-rtl-cmp video { max-width: 100%; }\n.fmstr-cmp-rtl-cmp > * { min-width: 0; }\n.fmstr-cmp-rtl-cmp [class*='__grid'] > *, .fmstr-cmp-rtl-cmp [class*='__list'] > *, .fmstr-cmp-rtl-cmp [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-cmp pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-cmp table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-cmp\" aria-labelledby=\"fmstr-cmp-rtl-cmp-h2\">\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__container\">\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__head\">\n\u003Ch2 class=\"fmstr-cmp-rtl-cmp__h2\" id=\"fmstr-cmp-rtl-cmp-h2\">Native RTL form builders compared\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-cmp__intro\">Three builders ship right-to-left support that actually reaches the respondent, not just the form editor. Pick on setup speed and translation depth.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__grid\">\n\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__card fmstr-cmp-rtl-cmp__card--featured\">\n\u003Cspan class=\"fmstr-cmp-rtl-cmp__chip\">Best for translation\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-cmp__name\">Formester\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-cmp__best\">\u003Cstrong>Best for:\u003C\u002Fstrong> One form, many RTL languages, AI does the translation\u003C\u002Fp>\n\u003Chr class=\"fmstr-cmp-rtl-cmp__divider\">\n\u003Cul class=\"fmstr-cmp-rtl-cmp__list\">\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Toggle Multilanguage in Advanced settings, add an RTL language, hit Translate with AI\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">RTL alignment auto-applies per language\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">AI translation across \u003Ca href=\"\u002Fai-powered-multilingual-forms\u002F\">180+ languages\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Built-in respondent language switcher\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">Offline mode and translations sit on paid plans\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">Branding removal is Personal+\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__card\">\n\u003Cspan class=\"fmstr-cmp-rtl-cmp__chip\">Best for speed\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-cmp__name\">\u003Ca href=\"https:\u002F\u002Ffillout.com\u002Fhelp\u002Fright-to-left-forms\">Fillout\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-cmp__best\">\u003Cstrong>Best for:\u003C\u002Fstrong> A pure layout flip on a form you already wrote\u003C\u002Fp>\n\u003Chr class=\"fmstr-cmp-rtl-cmp__divider\">\n\u003Cul class=\"fmstr-cmp-rtl-cmp__list\">\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Per-form Right-to-left toggle in settings\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Quickest setup of the three\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Layout flips for every field type\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">RTL is a layout flag, not a translation engine\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">You write the copy in the target language yourself\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-rtl-cmp__card\">\n\u003Cspan class=\"fmstr-cmp-rtl-cmp__chip\">Best if you're already in\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-cmp__name\">\u003Ca href=\"https:\u002F\u002Fwww.jotform.com\u002Fhelp\u002Fhow-to-align-your-forms-to-a-right-to-left-direction\u002F\">Jotform\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-cmp__best\">\u003Cstrong>Best for:\u003C\u002Fstrong> Teams deep in Jotform who don't want to migrate\u003C\u002Fp>\n\u003Chr class=\"fmstr-cmp-rtl-cmp__divider\">\n\u003Cul class=\"fmstr-cmp-rtl-cmp__list\">\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Paste a custom CSS block in the Form Designer\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Works on any existing form\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item\">Covers labels, checkboxes, radios, matrix grids\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">You maintain the CSS by hand\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">Jotform updates can break alignment\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-rtl-cmp__item fmstr-cmp-rtl-cmp__item--con\">Not toggle-based\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-rtl-lang a { text-decoration: none !important; }\n.fmstr-cmp-rtl-lang a { color: #5b34b1 !important; }\n.fmstr-cmp-rtl-lang a:hover { text-decoration: underline !important; }\n.fmstr-cmp-rtl-lang {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-row-alt: #fafafa;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\nbackground: transparent;\npadding: 48px 0;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\noverflow-x: hidden;\n}\n.fmstr-cmp-rtl-lang *, .fmstr-cmp-rtl-lang *::before, .fmstr-cmp-rtl-lang *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-lang > *, .fmstr-cmp-rtl-lang > * > * { min-width: 0; }\n.fmstr-cmp-rtl-lang__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-lang__head { margin: 0 0 24px; }\n.fmstr-cmp-rtl-lang__h2 {\nfont-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15;\nletter-spacing: -.02em; margin: 0; color: var(--c-fg-1);\n}\n.fmstr-cmp-rtl-lang__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-rtl-lang__tablewrap {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow);\noverflow-x: auto;\n}\n.fmstr-cmp-rtl-lang__table {\nwidth: 100%;\nborder-collapse: collapse;\nfont-size: 14.5px;\nline-height: 1.55;\n}\n.fmstr-cmp-rtl-lang__table thead th {\ntext-align: left;\nfont-weight: 700;\nfont-size: 12.5px;\nletter-spacing: 0.06em;\ntext-transform: uppercase;\ncolor: var(--c-violet-700);\nbackground: var(--c-tint);\npadding: 14px 18px;\nborder-bottom: 1px solid var(--c-edge);\nwhite-space: nowrap;\n}\n.fmstr-cmp-rtl-lang__table tbody td {\npadding: 16px 18px;\nvertical-align: top;\ncolor: var(--c-fg-2);\nborder-bottom: 1px solid var(--c-border);\n}\n.fmstr-cmp-rtl-lang__table tbody tr:last-child td { border-bottom: 0; }\n.fmstr-cmp-rtl-lang__table tbody tr:nth-child(even) td { background: var(--c-row-alt); }\n.fmstr-cmp-rtl-lang__table tbody td:first-child {\ncolor: var(--c-fg-1);\nfont-weight: 700;\nwhite-space: nowrap;\n}\n.fmstr-cmp-rtl-lang__script {\nfont-size: 18px;\ncolor: var(--c-fg-1);\nfont-weight: 600;\n}\n.fmstr-cmp-rtl-lang__speakers {\nfont-variant-numeric: tabular-nums;\ncolor: var(--c-fg-1);\nfont-weight: 600;\nwhite-space: nowrap;\n}\n\n.fmstr-cmp-rtl-lang__note {\nfont-size: 15px; line-height: 1.65;\ncolor: var(--c-fg-2); margin: 18px 0 0;\npadding: 14px 18px;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\nborder-radius: 10px;\n}\n.fmstr-cmp-rtl-lang__note strong { color: var(--c-violet-700); font-weight: 700; }\n.fmstr-cmp-rtl-lang__note code {\nbackground: #ffffff; padding: 2px 6px; border-radius: 6px;\nborder: 1px solid var(--c-border);\nfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\nfont-size: 13.5px;\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-rtl-lang { padding: 36px 0; }\n.fmstr-cmp-rtl-lang__table { font-size: 13.5px; }\n.fmstr-cmp-rtl-lang__table thead th,\n.fmstr-cmp-rtl-lang__table tbody td { padding: 12px 14px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-lang img, .fmstr-cmp-rtl-lang table, .fmstr-cmp-rtl-lang pre, .fmstr-cmp-rtl-lang iframe, .fmstr-cmp-rtl-lang video { max-width: 100%; }\n.fmstr-cmp-rtl-lang > * { min-width: 0; }\n.fmstr-cmp-rtl-lang [class*='__grid'] > *, .fmstr-cmp-rtl-lang [class*='__list'] > *, .fmstr-cmp-rtl-lang [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-lang pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-lang table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-lang\" aria-labelledby=\"fmstr-cmp-rtl-lang-h2\">\n\u003Cdiv class=\"fmstr-cmp-rtl-lang__container\">\n\u003Cdiv class=\"fmstr-cmp-rtl-lang__head\">\n\u003Ch2 class=\"fmstr-cmp-rtl-lang__h2\" id=\"fmstr-cmp-rtl-lang-h2\">RTL languages: what you need to know before shipping\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-lang__intro\">Six RTL scripts cover almost every audience you will hit. Each one has its own font and numeral gotcha that the form builder needs to handle correctly.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-rtl-lang__tablewrap\">\n\u003Ctable class=\"fmstr-cmp-rtl-lang__table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Language\u003C\u002Fth>\n\u003Cth>Native script\u003C\u002Fth>\n\u003Cth>Speakers (millions)\u003C\u002Fth>\n\u003Cth>Common form use cases\u003C\u002Fth>\n\u003Cth>Key gotcha\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Arabic\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">العربية\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">380+\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Customer service, government, education, e-commerce checkout in MENA\u003C\u002Ftd>\n\u003Ctd>Numerals are usually Western (0-9), not Eastern Arabic. Set them per field.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Hebrew\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">עברית\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">9\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Israeli public sector, fintech onboarding, NGO surveys\u003C\u002Ftd>\n\u003Ctd>Mixed Hebrew + English content needs \u003Ccode>bdi\u003C\u002Fcode> or \u003Ccode>bdo\u003C\u002Fcode> tags or labels break.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Urdu\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">اردو\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">230+\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Pakistani government forms, Indian academic surveys, NGO outreach\u003C\u002Ftd>\n\u003Ctd>Nastaliq script needs a font that supports it (Noto Nastaliq Urdu is safe).\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Persian (Farsi, Dari)\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">فارسی\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">110+\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Iranian banking, Afghan diaspora services, academic intake\u003C\u002Ftd>\n\u003Ctd>Numerals can be Persian (۰-۹) or Western. Confirm with the audience.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Pashto\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">پښتو\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">60+\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Afghan government, refugee intake, education\u003C\u002Ftd>\n\u003Ctd>Limited font support outside Noto Sans Pashto. Test on mobile.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Sindhi\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__script\">سنڌي\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-rtl-lang__speakers\">25+\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>Pakistani provincial forms, Indian academic\u003C\u002Ftd>\n\u003Ctd>Arabic-Sindhi script differs from standard Arabic. Use a Sindhi font.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\u003Cp class=\"fmstr-cmp-rtl-lang__note\">\u003Cstrong>The fix is the same at a layout level:\u003C\u002Fstrong> \u003Ccode>dir=\"rtl\"\u003C\u002Fcode> on the form root and a font that supports the script. The complexity sits downstream in numerals, mixed-direction text, and font availability on mobile.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-rtl-steps a { text-decoration: none !important; }\n.fmstr-cmp-rtl-steps a { color: #5b34b1 !important; }\n.fmstr-cmp-rtl-steps a:hover { text-decoration: underline !important; }\n.fmstr-cmp-rtl-steps {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6; --c-violet-700: #5b34b1;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-code-bg: #0f172a; --c-code-fg: #e2e8f0;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\nbackground: transparent;\npadding: 48px 0;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important;\noverflow-x: hidden;\n}\n.fmstr-cmp-rtl-steps *, .fmstr-cmp-rtl-steps *::before, .fmstr-cmp-rtl-steps *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-steps > *, .fmstr-cmp-rtl-steps > * > * { min-width: 0; }\n.fmstr-cmp-rtl-steps__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-steps__block { margin: 0 0 36px; }\n.fmstr-cmp-rtl-steps__block:last-child { margin-bottom: 0; }\n.fmstr-cmp-rtl-steps__head { margin: 0 0 20px; }\n.fmstr-cmp-rtl-steps__eyebrow {\ndisplay: inline-flex; align-items: center;\nfont-size: 11px; font-weight: 700; letter-spacing: 0.08em;\ntext-transform: uppercase; color: var(--c-violet-700) !important;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\npadding: 4px 10px; border-radius: 9999px; margin-bottom: 10px;\n}\n.fmstr-cmp-rtl-steps__h2 {\nfont-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2;\nletter-spacing: -.02em; margin: 0; color: var(--c-fg-1);\n}\n.fmstr-cmp-rtl-steps__intro { color: var(--c-fg-3); font-size: 16px; line-height: 1.6; margin: 10px 0 0; }\n.fmstr-cmp-rtl-steps__list {\ndisplay: flex; flex-direction: column; gap: 12px;\nmargin: 0; padding: 0; list-style: none;\n}\n.fmstr-cmp-rtl-steps__item {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\npadding: 20px 22px;\nbox-shadow: var(--c-shadow);\ndisplay: flex; gap: 12px;\nalign-items: flex-start;\nmin-width: 0;\n}\n.fmstr-cmp-rtl-steps__num {\nflex-shrink: 0;\nwidth: 26px; line-height: 1; height: 26px; border-radius: 7px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\ncolor: var(--c-violet-700) !important;\nfont-weight: 800; font-size: 13px;\ndisplay: inline-flex; align-items: center; justify-content: center;\n}\n.fmstr-cmp-rtl-steps__main { flex: 1; min-width: 0; }\n.fmstr-cmp-rtl-steps__title {\nfont-size: 16.5px; font-weight: 700; line-height: 1.3;\ncolor: var(--c-fg-1); margin: 0 0 6px;\n}\n.fmstr-cmp-rtl-steps__body {\nfont-size: 15px; line-height: 1.6;\ncolor: var(--c-fg-2); margin: 0;\n}\n.fmstr-cmp-rtl-steps__code {\nbackground: var(--c-code-bg);\ncolor: var(--c-code-fg);\nborder-radius: 14px;\npadding: 20px 22px;\nfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\nfont-size: 13.5px;\nline-height: 1.65;\noverflow-x: auto;\nwhite-space: pre;\nmargin: 14px 0 0;\n}\n.fmstr-cmp-rtl-steps__note {\nfont-size: 14.5px; line-height: 1.65;\ncolor: var(--c-fg-2); margin: 14px 0 0;\npadding: 14px 16px;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\nborder-radius: 10px;\n}\n.fmstr-cmp-rtl-steps__note strong { color: var(--c-violet-700); font-weight: 700; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-rtl-steps { padding: 36px 0; }\n.fmstr-cmp-rtl-steps__item { padding: 18px 20px; gap: 14px; }\n.fmstr-cmp-rtl-steps__num { width: 34px; height: 34px; font-size: 15px; }\n.fmstr-cmp-rtl-steps__title { font-size: 15.5px; }\n.fmstr-cmp-rtl-steps__body { font-size: 14.5px; }\n.fmstr-cmp-rtl-steps__code { font-size: 12.5px; padding: 16px; border-radius: 12px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-steps img, .fmstr-cmp-rtl-steps table, .fmstr-cmp-rtl-steps pre, .fmstr-cmp-rtl-steps iframe, .fmstr-cmp-rtl-steps video { max-width: 100%; }\n.fmstr-cmp-rtl-steps > * { min-width: 0; }\n.fmstr-cmp-rtl-steps [class*='__grid'] > *, .fmstr-cmp-rtl-steps [class*='__list'] > *, .fmstr-cmp-rtl-steps [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-steps pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-steps table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\n\n\n\u002F* mobile-inline-num *\u002F\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-steps__item { padding: 18px 16px; gap: 10px; flex-direction: row; align-items: flex-start; }\n  .fmstr-cmp-rtl-steps__num { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }\n}\n\n\u002F* step-inline-num-restructure *\u002F\n.fmstr-cmp-rtl-steps__item { display: block !important; }\n.fmstr-cmp-rtl-steps__title { display: block; }\n.fmstr-cmp-rtl-steps__num { display: inline-block !important; vertical-align: 2px; margin-right: 8px; padding: 2px 8px; width: auto !important; height: auto !important; border-radius: 6px; font-size: 12.5px !important; line-height: 1.3 !important; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-steps__num { font-size: 11.5px !important; padding: 2px 7px; margin-right: 6px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-steps\" aria-labelledby=\"fmstr-cmp-rtl-steps-h2\">\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__container\">\n\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__block\">\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__head\">\n\u003Cspan class=\"fmstr-cmp-rtl-steps__eyebrow\">Option 1, Google Forms\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-rtl-steps__h2\" id=\"fmstr-cmp-rtl-steps-h2\">How to flip Google Forms to RTL (the language workaround)\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-steps__intro\">Five steps. Flips the editor and your own preview to RTL. Does not change what respondents see.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Col class=\"fmstr-cmp-rtl-steps__list\">\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">1\u003C\u002Fspan>Open Google Forms\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Sign in to \u003Ca href=\"https:\u002F\u002Fforms.google.com\">forms.google.com\u003C\u002Fa> with the Google account you build forms with.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">2\u003C\u002Fspan>Open your Google Account settings\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Click your profile icon in the top-right corner of any Google product (Gmail, Drive, Forms).\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">3\u003C\u002Fspan>Go to Personal info, then Language\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Click \"Manage your Google Account\", then \"Personal info\", then \"Language\".\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">4\u003C\u002Fspan>Add an RTL language and set it as primary\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Pick Arabic, Hebrew, Urdu, or Persian, then set it as your primary language.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">5\u003C\u002Fspan>Refresh Google Forms\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Reload the tab. The editor and every form you open or create is now right-to-left aligned.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003C\u002Fol>\n\u003Cp class=\"fmstr-cmp-rtl-steps__note\">\u003Cstrong>Limit:\u003C\u002Fstrong> this only flips your own view. Respondents on default-English Google accounts still see a left-to-right form. There is no per-form RTL setting and no public link parameter that forces direction. Google's help thread \u003Ca href=\"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fthread\u002F198216419\">confirms this\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__block\">\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__head\">\n\u003Cspan class=\"fmstr-cmp-rtl-steps__eyebrow\">Option 2, Formester native\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-rtl-steps__h2\">How to make a native RTL form in Formester (4 steps)\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-steps__intro\">Under two minutes if you start from a finished English form. Every respondent sees the form in their own script, with proper alignment, no CSS.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Col class=\"fmstr-cmp-rtl-steps__list\">\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">1\u003C\u002Fspan>Build your base form in your primary language\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Log in to Formester. Start from scratch with the \u003Ca href=\"\u002Fai-form-generator\u002F\">AI form builder\u003C\u002Fa> (paste a prompt or a list of questions) or open an existing form. Build it in whichever language is easiest for you; AI translation handles the rest.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">2\u003C\u002Fspan>Toggle Multilanguage on\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Open the form's Advanced settings panel. Find the Multilanguage toggle and switch it on. This unlocks the language picker and adds a dropdown for respondents.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">3\u003C\u002Fspan>Add an RTL language and let AI translate\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Click Add Language. Pick Arabic, Hebrew, Urdu, Persian, Pashto, or any of the 180+ supported languages. Click Translate with AI. The pass runs across every question, option, placeholder, and helper text. Alignment flips to RTL where it needs to. Review, edit, save.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003Cli class=\"fmstr-cmp-rtl-steps__item\">\n\u003Ch3 class=\"fmstr-cmp-rtl-steps__title\">\u003Cspan class=\"fmstr-cmp-rtl-steps__num\" aria-hidden=\"true\">4\u003C\u002Fspan>Preview, test on mobile, share\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-steps__body\">Hit Preview. Switch to Arabic or Hebrew from the language picker; alignment flips, the submit button moves to the left of the row. Test on mobile (RTL is where most builders fail). Share by public link, QR code, or one of the \u003Ca href=\"\u002Ffeatures\u002Fembed-forms\u002F\">six embed modes\u003C\u002Fa> on your site, WordPress, Webflow, Shopify, Wix, or Canva.\u003C\u002Fp>\n\u003C\u002Fli>\n\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__block\">\n\u003Cdiv class=\"fmstr-cmp-rtl-steps__head\">\n\u003Cspan class=\"fmstr-cmp-rtl-steps__eyebrow\">Option 3, developers\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-rtl-steps__h2\">Building your own form? The dir=\"rtl\" snippet\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-steps__intro\">Plain HTML. The \u003Ca href=\"https:\u002F\u002Fwww.w3.org\u002FInternational\u002Fquestions\u002Fqa-html-dir\">W3C-documented attribute\u003C\u002Fa> is \u003Ccode>dir=\"rtl\"\u003C\u002Fcode> on the form element (or a parent like \u003Ccode>body\u003C\u002Fcode>).\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cpre class=\"fmstr-cmp-rtl-steps__code\"><form dir=\"rtl\" lang=\"ar\">\n  <label for=\"name\">الاسم<\u002Flabel>\n  <input type=\"text\" id=\"name\" name=\"name\" \u002F>\n\n  <label for=\"email\">البريد الإلكتروني<\u002Flabel>\n  <input type=\"email\" id=\"email\" name=\"email\" \u002F>\n\n  <button type=\"submit\">إرسال<\u002Fbutton>\n<\u002Fform>\u003C\u002Fpre>\n\u003Cp class=\"fmstr-cmp-rtl-steps__note\">\u003Cstrong>The \u003Ccode>lang\u003C\u002Fcode> attribute matters as much as \u003Ccode>dir\u003C\u002Fcode>.\u003C\u002Fstrong> Screen readers, search engines, and font-fallback all read it. Use \u003Ccode>lang=\"ar\"\u003C\u002Fcode> for Arabic, \u003Ccode>lang=\"he\"\u003C\u002Fcode> for Hebrew, \u003Ccode>lang=\"ur\"\u003C\u002Fcode> for Urdu, \u003Ccode>lang=\"fa\"\u003C\u002Fcode> for Persian. For mixed-direction content (a Latin-script brand name inside Arabic body), wrap it in \u003Ccode><bdi>\u003C\u002Fcode> so the bidirectional algorithm does not flip it incorrectly.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n.fmstr-cmp-tmpl-midcta a { text-decoration: none !important; }\n.fmstr-cmp-tmpl-midcta { background: transparent; padding: 48px 0; font-family: inherit; color: #101828; overflow-x: hidden; }\n.fmstr-cmp-tmpl-midcta *, .fmstr-cmp-tmpl-midcta *::before, .fmstr-cmp-tmpl-midcta *::after { box-sizing: border-box; }\n.fmstr-cmp-tmpl-midcta__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-tmpl-midcta__card { width: 100%; background: linear-gradient(135deg, #f7f3ff 0%, #faf7ff 100%); border: 1px solid #e4d7ff; border-radius: 18px; padding: 48px 32px; text-align: center; box-shadow: 0 4px 24px rgba(127, 86, 217, 0.08); }\n.fmstr-cmp-tmpl-midcta__inner { max-width: 760px; margin: 0 auto; }\n.fmstr-cmp-tmpl-midcta__eyebrow { display: inline-block; padding: 4px 12px; background: #ffffff; border: 1px solid #e4d7ff; border-radius: 9999px; color: #5b34b1 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase; margin: 0 0 14px !important; }\n.fmstr-cmp-tmpl-midcta__h2 { font-size: clamp(22px, 3vw, 28px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; margin: 0 0 12px !important; color: #101828 !important; }\n.fmstr-cmp-tmpl-midcta__body { font-size: 16px !important; line-height: 1.55 !important; color: #475467 !important; margin: 0 0 22px !important; }\n.fmstr-cmp-tmpl-midcta__cta { display: inline-flex !important; align-items: center; gap: 8px; background: #7f56d9 !important; color: #ffffff !important; border: 1px solid #7f56d9 !important; padding: 12px 26px !important; border-radius: 9999px !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; transition: background .15s ease, transform .15s ease; }\n.fmstr-cmp-tmpl-midcta__cta:hover { background: #6941c6 !important; border-color: #6941c6 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px); }\n.fmstr-cmp-tmpl-midcta__cta::after { content: \"\\2192\"; transition: transform .15s ease; }\n.fmstr-cmp-tmpl-midcta__cta:hover::after { transform: translateX(2px); }\n.fmstr-cmp-tmpl-midcta__strip { font-size: 13px !important; color: #697586 !important; margin: 20px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; width: 100%; }\n.fmstr-cmp-tmpl-midcta__strip span { color: #d6c2f7; }\n@media (max-width: 760px) {\n  .fmstr-cmp-tmpl-midcta__card { padding: 36px 22px; }\n}\n@media (max-width: 540px) {\n  .fmstr-cmp-tmpl-midcta { padding: 32px 0; }\n  .fmstr-cmp-tmpl-midcta__card { padding: 26px 16px; border-radius: 14px; }\n  .fmstr-cmp-tmpl-midcta__h2 { font-size: 20px !important; }\n  .fmstr-cmp-tmpl-midcta__body { font-size: 15px !important; }\n  .fmstr-cmp-tmpl-midcta__cta { padding: 11px 22px !important; font-size: 14.5px !important; width: 100%; justify-content: center; }\n  .fmstr-cmp-tmpl-midcta__strip { font-size: 12.5px !important; gap: 4px 10px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-tmpl-midcta\" aria-labelledby=\"fmstr-cmp-tmpl-midcta-h2\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__container\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__card\">\n\u003Cdiv class=\"fmstr-cmp-tmpl-midcta__inner\">\n\u003Cspan class=\"fmstr-cmp-tmpl-midcta__eyebrow\">Native RTL\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-tmpl-midcta__h2\" id=\"fmstr-cmp-tmpl-midcta-h2\">Build RTL forms in Arabic, Hebrew, Urdu and 180 more languages\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-tmpl-midcta__body\">Toggle multilanguage, AI translates and aligns RTL automatically. Built-in language switcher for respondents.\u003C\u002Fp>\n\u003Ca class=\"fmstr-cmp-tmpl-midcta__cta\" href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\" style=\"background: #7f56d9 !important; color: #ffffff !important; border-color: #7f56d9 !important; text-decoration: none !important;\">Start free on Formester\u003C\u002Fa>\n\u003Cp class=\"fmstr-cmp-tmpl-midcta__strip\">Free forever plan\u003Cspan>•\u003C\u002Fspan>No credit card\u003Cspan>•\u003C\u002Fspan>Setup in 2 minutes\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-rtl-faq a { text-decoration: none !important; }\n.fmstr-cmp-rtl-faq {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0; --c-chip-bg: #f4f4f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-rtl-faq *, .fmstr-cmp-rtl-faq *::before, .fmstr-cmp-rtl-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-faq__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-faq__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); text-align: left; }\n.fmstr-cmp-rtl-faq__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 28px; text-align: left; }\n.fmstr-cmp-rtl-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-rtl-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-rtl-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-rtl-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-rtl-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-rtl-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-rtl-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n.fmstr-cmp-rtl-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-rtl-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-rtl-faq__answer a:hover { text-decoration: underline !important; }\n.fmstr-cmp-rtl-faq__answer code {\nbackground: var(--c-chip-bg); padding: 2px 6px; border-radius: 6px;\nfont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\nfont-size: 13.5px;\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-rtl-faq { padding: 40px 16px; }\n.fmstr-cmp-rtl-faq__intro { font-size: 15.5px; text-align: left; }\n.fmstr-cmp-rtl-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-rtl-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-rtl-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-faq img, .fmstr-cmp-rtl-faq table, .fmstr-cmp-rtl-faq pre, .fmstr-cmp-rtl-faq iframe, .fmstr-cmp-rtl-faq video { max-width: 100%; }\n.fmstr-cmp-rtl-faq > * { min-width: 0; }\n.fmstr-cmp-rtl-faq [class*='__grid'] > *, .fmstr-cmp-rtl-faq [class*='__list'] > *, .fmstr-cmp-rtl-faq [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-faq pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-faq table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-faq\" aria-labelledby=\"fmstr-cmp-rtl-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-rtl-faq__h2\" id=\"fmstr-cmp-rtl-faq-h2\">Frequently asked questions\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-faq__intro\">The most-searched questions on Google Forms RTL, native RTL builders, and mixing English with Arabic, Hebrew, Urdu, or Persian in a single form.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Does Google Forms officially support right to left?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">No. Google has not shipped an RTL setting. The only workaround is to change your Google account's Forms language to Hebrew or Arabic, which flips the form direction in your own editor and preview. Respondents on default-English Google accounts still see a left-to-right form. The Google help thread confirms this.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>What other form builders support RTL natively?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Three with first-class RTL support: Formester (toggle Multilanguage, pick an RTL language, AI translates and aligns), Fillout (per-form Right-to-left toggle in settings), and Jotform (paste a custom CSS block in the Form Designer). forms.app and Gravity Forms also have RTL support but require setup beyond a single toggle.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>How do I add a Hebrew or Arabic form to my website?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Build the form in a native RTL builder (Formester, Fillout, or Jotform), then embed it. In Formester, click Share, pick one of the six embed modes, and paste the snippet into your site or CMS. The form keeps its RTL alignment inside the iframe.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Can I have one form with both English and Arabic versions?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Yes, in any builder with a multilanguage feature. Formester ships a language picker that lets the respondent switch between English, Arabic, Hebrew, or any combination of the 180+ supported languages. Google Forms does not have a native multilanguage feature, so you would build separate forms per language.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Does the Google Forms language hack work for respondents too?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">No. The account-language setting is per-Google-account. Each respondent sees the form in their own account's language, not yours. There is no documented way to force RTL on the respondent's view through Google Forms.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Which RTL languages does Formester support?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Formester's AI translation covers 180+ languages, including Arabic, Hebrew, Urdu, Persian (Farsi and Dari), Pashto, Sindhi, and Kurdish (Sorani). The RTL alignment applies automatically whenever the selected language is RTL.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Will my form work on mobile in RTL?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Yes, in any builder with native RTL. The Formester layout adjusts at every breakpoint: touch targets, submit button placement, and label alignment all stay correct. The Google Forms workaround works on mobile too, but only for your own view; respondents on default-LTR accounts still see LTR.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-rtl-faq__item\">\n\u003Csummary>Can I use dir=\"rtl\" in HTML to make my own form RTL?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-rtl-faq__answer\">Yes. Set \u003Ccode>dir=\"rtl\"\u003C\u002Fcode> on the \u003Ccode>form\u003C\u002Fcode> element (or a parent) and pair it with the right \u003Ccode>lang\u003C\u002Fcode> attribute (\u003Ccode>ar\u003C\u002Fcode>, \u003Ccode>he\u003C\u002Fcode>, \u003Ccode>ur\u003C\u002Fcode>, \u003Ccode>fa\u003C\u002Fcode>). The W3C documentation covers edge cases like mixed-direction content (use \u003Ccode><bdi>\u003C\u002Fcode> for Latin-script names inside an RTL body).\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-rtl-rel a { text-decoration: none !important; }\n.fmstr-cmp-rtl-rel {\n--c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: transparent;\npadding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\ntext-align: left !important; overflow-x: hidden; -webkit-text-size-adjust: 100%;}\n.fmstr-cmp-rtl-rel *, .fmstr-cmp-rtl-rel *::before, .fmstr-cmp-rtl-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-rtl-rel__container { max-width: 1200px; margin: 0 auto; }\n.fmstr-cmp-rtl-rel__head { margin: 0 0 28px; text-align: left; }\n.fmstr-cmp-rtl-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); text-align: left; }\n.fmstr-cmp-rtl-rel__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; text-align: left; }\n\n.fmstr-cmp-rtl-rel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }\n.fmstr-cmp-rtl-rel__card {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px;\ntext-decoration: none !important; color: inherit !important; transition: all .15s ease;\nposition: relative;\n}\n.fmstr-cmp-rtl-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-rtl-rel__chip {\ndisplay: inline-block; padding: 3px 10px; border-radius: 9999px;\nbackground: var(--c-tint); border: 1px solid var(--c-edge);\ncolor: var(--c-violet-600) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;\ntext-transform: uppercase; align-self: flex-start;\nmargin-bottom: 2px;\n}\n.fmstr-cmp-rtl-rel__title {\nfont-size: 17px; font-weight: 700; color: var(--c-fg-1); margin: 0; line-height: 1.3; text-align: left; }\n.fmstr-cmp-rtl-rel__body { font-size: 14.5px; line-height: 1.55; color: var(--c-fg-2); margin: 0; }\n.fmstr-cmp-rtl-rel__arrow {\nmargin-top: 6px; color: var(--c-violet-600) !important; font-size: 14px; font-weight: 600;\ndisplay: inline-flex; align-items: center; gap: 6px;\n}\n.fmstr-cmp-rtl-rel__arrow::after {\ncontent: \"\\2192\"; transition: transform .15s ease; display: inline-block;\n}\n.fmstr-cmp-rtl-rel__card:hover .fmstr-cmp-rtl-rel__arrow::after { transform: translateX(3px); }\n\n@media (max-width: 540px) {\n.fmstr-cmp-rtl-rel { padding: 40px 16px; }\n.fmstr-cmp-rtl-rel__grid { grid-template-columns: 1fr; gap: 12px; }\n.fmstr-cmp-rtl-rel__card { padding: 20px 22px; }\n}\n\n\n\u002F* mobile-safety-v2 *\u002F\n.fmstr-cmp-rtl-rel img, .fmstr-cmp-rtl-rel table, .fmstr-cmp-rtl-rel pre, .fmstr-cmp-rtl-rel iframe, .fmstr-cmp-rtl-rel video { max-width: 100%; }\n.fmstr-cmp-rtl-rel > * { min-width: 0; }\n.fmstr-cmp-rtl-rel [class*='__grid'] > *, .fmstr-cmp-rtl-rel [class*='__list'] > *, .fmstr-cmp-rtl-rel [class*='__cards'] > * { min-width: 0; max-width: 100%; }\n@media (max-width: 540px) {\n  .fmstr-cmp-rtl-rel pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n  .fmstr-cmp-rtl-rel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-rtl-rel\" aria-labelledby=\"fmstr-cmp-rtl-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-rtl-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-rtl-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-rtl-rel__h2\" id=\"fmstr-cmp-rtl-rel-h2\">Keep reading\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-rtl-rel__intro\">Sister guides on multilingual forms, Google Forms alternatives, and embedding forms across the stack.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-rtl-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Fai-powered-multilingual-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Feature page\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">AI-powered multilingual forms (180+ languages)\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">The full breakdown of how Formester's translation pass works, every supported language, and the language switcher respondents see.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">Read the guide\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Fblog\u002Fwhy-formester-is-the-best-google-forms-alternative\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Switching guide\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">Google Forms alternatives\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">Side-by-side comparison of the builders worth switching to when Google Forms falls short on RTL, branding, conditional logic, or payments.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">Compare builders\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Fblog\u002Fhow-to-add-conditional-questions-in-google-forms\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Google Forms cluster\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">How to add conditional logic in Google Forms\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">Walk-through for branching a Google Form by answer, plus where the section-based logic hits its limits.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">Read the tutorial\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Fblog\u002Fhow-to-embed-forms-in-wix-studio\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Embed guide\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">How to embed forms in Wix, WordPress, and Webflow\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">Six embed modes (inline, popup, sidebar, side tab, popover, fullscreen), what each one does, and which one fits your page.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">Read the guide\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Ffeatures\u002Fconditional-logic\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Feature page\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">Conditional logic in Formester\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">Show or hide sections based on the language a respondent picks, then route follow-ups to the right team.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">See how it works\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-rtl-rel__card\" href=\"\u002Ffeatures\u002Fautoresponder-email\u002F\">\n\u003Cspan class=\"fmstr-cmp-rtl-rel__chip\">Feature page\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-rtl-rel__title\">Autoresponder emails\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-rtl-rel__body\">Send the confirmation, receipt, or follow-up in the same language the respondent filled the form in.\u003C\u002Fp>\n\u003Cspan class=\"fmstr-cmp-rtl-rel__arrow\">See how it works\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\n",1214,630,{"text":138},"9 min read",[140,161,180,200],{"title":141,"author":142,"authorImage":8,"authorProfile":143,"coverImg":144,"coverImgAlt":145,"createdAt":146,"description":147,"featured":14,"jsonld":148,"keywords":149,"metaDescription":150,"metaImage":151,"metaTitle":152,"publishedAt":153,"slug":154,"updatedAt":155,"__hash__":156,"body":157,"id":158,"coverImgWidth":135,"coverImgHeight":136,"readingStats":159},"How to Add Custom Forms In Shopify  (2026)","Harish Kumar","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424\u002F","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FUntitled_design_1_4a74150c0c.png","an illlustration of how to add custom forms in shopify","2025-02-06T18:33:52.588Z","Easily build custom forms and embed them on your Shopify store with a no-code form builder like Formester. No coding skills needed!",[],"how to add custom forms in shopify,\nshopify form plugin,\nhow to embed forms in shopify,\nshopify form builder,","Learn to create custom forms and embed them on your Shopify store with a no-code form builder like Formester. Easy setup, no coding required!",[],"How to Add Custom Forms In Shopify | Formester","2026-06-22T05:13:58.086Z","how-to-add-custom-forms-in-shopify","2026-06-22T05:13:58.656Z","eeCEgt5pYma-1n48cuNogoqAP_jyfl8hhjtRaIsFBGc","\u003Cp style=\"font-size: inherit;\">Shopify's built-in form does one thing: name, email, message. The moment you need a file upload, a product dropdown, a deposit, or a conditional field, you hit a wall.\u003C\u002Fp>\n\n\u003Cp>The fix is to build the form in a no-code builder and drop one embed snippet into your store. This guide walks through it in three steps: create the form, embed it with a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fplugins\u002Fshopify-form-builder\u002F\">Shopify form builder\u003C\u002Fa>, and automate what happens after submit.\u003C\u002Fp>\n\n\u003Cp>No theme code, no developer, no per-form app fee. You can have a custom form live on a Shopify page in a few minutes.\u003C\u002Fp>\n\n\u003Ch2>Shopify's Built-in Form vs a Dedicated Builder\u003C\u002Fh2>\n\n\u003Cp>Before you add an app, it helps to know exactly where Shopify's native form stops.\u003C\u002Fp>\n\n\u003Ch3>Shopify's built-in contact form\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>Collects name, email, and a message. That is the ceiling.\u003C\u002Fli>\n\u003Cli>No custom fields, no conditional logic, no file uploads, no payments.\u003C\u002Fli>\n\u003Cli>Submissions land in your store email, with nowhere to filter, tag, or export them.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch3>A dedicated form builder\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>Add any field: dropdowns, file uploads, date pickers, signature, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fintegrations\u002Fstripe\u002F\">payment fields\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Use \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fconditional-logic\u002F\">conditional logic\u003C\u002Fa> to show fields only when they are relevant.\u003C\u002Fli>\n\u003Cli>Route data straight to a CRM, a spreadsheet, or an autoresponder.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>If your form is a simple \"contact us\", Shopify's native form is fine. For anything an actual order or application needs, you want a builder.\u003C\u002Fp>\n\n\u003Ch2>What a Dedicated Builder Lets You Do\u003C\u002Fh2>\n\n\u003Cp>Once you move off the default form, the kind of data you can collect changes completely:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Capture detailed customer info: phone, company, order notes, delivery dates.\u003C\u002Fli>\n\u003Cli>Take payments and deposits in the form itself with Stripe or PayPal.\u003C\u002Fli>\n\u003Cli>Let customers upload files: design proofs, prescriptions, ID, brief documents.\u003C\u002Fli>\n\u003Cli>Show or hide fields with conditional logic so the form stays short.\u003C\u002Fli>\n\u003Cli>Auto-send a confirmation email and push the data to your CRM on submit.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>All of it runs without touching your theme code, which is the part most store owners want to avoid.\u003C\u002Fp>\n\n\u003Ch2>Shopify Forms You Can Build This Way\u003C\u002Fh2>\n\n\u003Cp>The same three steps cover almost any form a store needs. The common ones:\u003C\u002Fp>\n\n\u003Ch3>Contact and support forms\u003C\u002Fh3>\n\n\u003Cp>Add the fields Shopify's default form omits: order number, category, file attachment. Route urgent ones straight to your inbox or Slack.\u003C\u002Fp>\n\n\u003Ch3>Registration and account forms\u003C\u002Fh3>\n\n\u003Cp>Collect sign-ups for a loyalty program, an event, or early access, then sync the list to your email tool.\u003C\u002Fp>\n\n\u003Ch3>Wholesale and B2B application forms\u003C\u002Fh3>\n\n\u003Cp>Ask for business name, tax ID, and order volume, and gate access so only approved buyers see wholesale pricing.\u003C\u002Fp>\n\n\u003Ch3>Custom order and quote requests\u003C\u002Fh3>\n\n\u003Cp>Let customers spec a build, pick options, and pay a deposit, all before the order is confirmed. Start from a ready-made \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Forder-forms\u002F\">order form template\u003C\u002Fa> to skip the setup.\u003C\u002Fp>\n\n\u003Ch3>Product question forms\u003C\u002Fh3>\n\n\u003Cp>Drop a short form on a product page so shoppers can ask before they buy, which lifts conversions on higher-priced items.\u003C\u002Fp>\n\n\u003Ch3>Step 1: Build Your Form\u003C\u002Fh3>\n\n\u003Cp>Start with the fields your form actually needs. A quick way in is the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fai-form-generator\u002F\">AI form generator\u003C\u002Fa>: describe the form in a sentence and edit the draft it returns.\u003C\u002Fp>\n\n\u003Cp>Depending on the use case, add fields for:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Customer details: name, email, phone, company.\u003C\u002Fli>\n\u003Cli>Product selections: dropdowns, checkboxes, or quantity fields.\u003C\u002Fli>\n\u003Cli>Custom requests: special instructions, file uploads, preferred dates.\u003C\u002Fli>\n\u003Cli>Payment: a deposit or the full amount, collected in the form.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Then layer in conditional logic. If a customer picks a specific product, show only the customization fields that apply to it. The form stays short, and people finish it.\u003C\u002Fp>\n\n\u003Ch3>Step 2: Embed It on Your Store\u003C\u002Fh3>\n\n\u003Cp>In your form builder, open the share or embed settings and pick Shopify as the platform, then copy the embed code.\u003C\u002Fp>\n\n\u003Cp>Formester gives you the snippet in six embed modes, so the form can sit anywhere it fits:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Inline: the form lives directly in the page (best for contact and order pages).\u003C\u002Fli>\n\u003Cli>Popup, popover, or sidebar: the form opens on click without leaving the page.\u003C\u002Fli>\n\u003Cli>Side tab or fullscreen: for a persistent prompt or a dedicated form page.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Now add it in Shopify:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Go to Online Store, then Pages, and click Add Page (or open the product or theme page you want).\u003C\u002Fli>\n\u003Cli>Name the page, then click Add Section in the editor.\u003C\u002Fli>\n\u003Cli>Search for Custom Liquid and select it.\u003C\u002Fli>\n\u003Cli>Paste your embed code into the block.\u003C\u002Fli>\n\u003Cli>Click Save.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>To put the form on a product page instead, open the product template in the theme editor, add the Custom Liquid block where you want it, and paste the same code. The form is live, and submissions are stored and searchable in your dashboard.\u003C\u002Fp>\n\n\u003Ch3>Step 3: Automate What Happens Next\u003C\u002Fh3>\n\n\u003Cp>A form is only half the job. The other half is what happens the second someone hits submit.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Send an instant confirmation email so the customer knows you got it and what comes next.\u003C\u002Fli>\n\u003Cli>Push every submission to a CRM like \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fintegrations\u002Fhubspot\u002F\">HubSpot\u003C\u002Fa> so it lands in your pipeline, not a forgotten inbox.\u003C\u002Fli>\n\u003Cli>Drop the data into Google Sheets or Slack for the team to action in real time.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Set this up once and a custom-order form turns into a small workflow: customer submits, gets a confirmation, and the order details are already in your system ready to fulfill.\u003C\u002Fp>\n\n\u003Ch2>Put a Custom Form Live on Your Store\u003C\u002Fh2>\n\n\u003Cp>That is the whole job: build the form, paste one snippet into a Custom Liquid block, and wire up a confirmation email. No theme code, no juggling separate apps for every form type.\u003C\u002Fp>\n\n\u003Cp>Start from a \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002F\">ready-made template\u003C\u002Fa> or describe what you need and let the builder draft it. \u003Ca href=\"https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up\u002F\">Get started with Formester free\u003C\u002Fa> and have a custom Shopify form collecting orders today.\u003C\u002Fp>\n\n\u003Csection class=\"faq\">\n\u003Ch2>Shopify Custom Form FAQ\u003C\u002Fh2>\n\u003Cdetails>\u003Csummary>Can you add a custom form to Shopify without code?\u003C\u002Fsummary>\u003Cdiv>Yes. Build the form in a no-code builder, copy the embed snippet, and paste it into a Custom Liquid section on any Shopify page. No theme editing or developer needed.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>How do I add a form to a Shopify product page?\u003C\u002Fsummary>\u003Cdiv>Open the product template in the theme editor, add a Custom Liquid block where you want the form, and paste your embed code. That is how you collect product questions, personalization details, or pre-orders on the listing.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>What kinds of forms can I add to a Shopify store?\u003C\u002Fsummary>\u003Cdiv>Contact forms, registration and account forms, wholesale and B2B applications, custom order and quote requests, product question forms, and feedback surveys. A builder handles all of them with conditional logic, file uploads, and payment fields.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Will an embedded form slow down my store?\u003C\u002Fsummary>\u003Cdiv>A single embedded form loads asynchronously and barely touches page speed. Keep one form per page, skip heavy background images, and use inline embed rather than a popup on critical pages.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003Cdetails>\u003Csummary>Why not just use Shopify's built-in contact form?\u003C\u002Fsummary>\u003Cdiv>The default form only collects name, email, and a message. A dedicated builder adds custom fields, conditional logic, file uploads, payments, autoresponders, and CRM sync, none of which the built-in form supports.\u003C\u002Fdiv>\u003C\u002Fdetails>\n\u003C\u002Fsection>\n\n","blog\u002Fblog\u002Fhow-to-add-custom-forms-in-shopify.md",{"text":160},"6 min read",{"title":162,"author":142,"authorImage":8,"authorProfile":143,"coverImg":163,"coverImgAlt":164,"createdAt":165,"description":166,"featured":14,"jsonld":167,"keywords":168,"metaDescription":169,"metaImage":170,"metaTitle":171,"publishedAt":172,"slug":173,"updatedAt":174,"__hash__":175,"body":176,"id":177,"coverImgWidth":135,"coverImgHeight":136,"readingStats":178},"How to Make a Feedback Form in HTML (with Code, CSS, and a Backend)","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_to_make_feedback_form_in_html_c6203dc935.png","an illustration of how to make feedback form in html","2024-06-27T06:19:40.031Z","Learn how to create a feedback form in HTML with easy steps. Set up an HTML document, add form fields, style with CSS, and add JavaScript for validation. Test your form and start collecting feedback.",[],"feedback forms, fillable freedback form, how to make feedback form in html, style feedback form with css, feedback form html code","Build a working feedback form in HTML with copy-paste code, CSS styling, JavaScript validation, accessibility, and a backend that stores submissions without a server.",[],"How to Make a Feedback Form in HTML (Code, CSS, Validation, Backend)","2026-05-17T04:46:01.940Z","how-to-make-feedback-form-in-html","2026-05-17T04:46:01.948Z","wyyctYTKwdEs6QGo1-xhuZdxYoLFow0lRYEcN7glo1g","![an illustration of how to make feedback form in html](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fan_illustration_of_how_to_make_feedback_form_in_html_c6203dc935.png)\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-body a { text-decoration: none !important; }\n.fmstr-cmp-ffh-body {\n--c-bg-card: #ffffff;\n--c-bg-soft: #f9fafb;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-code-bg: #0f172a; --c-code-fg: #e2e8f0;\n--c-code-keyword: #a78bfa; --c-code-attr: #67e8f9; --c-code-string: #fcd34d; --c-code-comment: #64748b;\n--c-warn-bg: #fef3c7; --c-warn-fg: #92400e; --c-warn-edge: #fde68a;\n\nbackground: transparent; padding: 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body *, .fmstr-cmp-ffh-body *::before, .fmstr-cmp-ffh-body *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-body__container { max-width: 820px; margin: 0 auto; }\n\n.fmstr-cmp-ffh-body__intro p { font-size: 17px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 16px; }\n.fmstr-cmp-ffh-body__intro a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-ffh-body__intro a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-body__intro code { background: var(--c-tint); color: var(--c-violet-600); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; border: 1px solid var(--c-edge); }\n\n.fmstr-cmp-ffh-body__h2 {\nfont-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em;\nmargin: 40px 0 16px; color: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body__h3 {\nfont-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;\nmargin: 28px 0 12px; color: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-body p { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 0 0 14px; }\n.fmstr-cmp-ffh-body p strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 500; }\n.fmstr-cmp-ffh-body a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-body ul, .fmstr-cmp-ffh-body ol { margin: 0 0 16px; padding-left: 22px; }\n.fmstr-cmp-ffh-body li { font-size: 16px; line-height: 1.7; color: var(--c-fg-2); margin: 6px 0; }\n.fmstr-cmp-ffh-body li strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body code { background: var(--c-tint); color: var(--c-violet-600); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; border: 1px solid var(--c-edge); }\n\n.fmstr-cmp-ffh-body__code {\nbackground: var(--c-code-bg); color: var(--c-code-fg);\nborder-radius: 12px; padding: 18px 20px; margin: 8px 0 18px;\noverflow-x: auto;\nfont-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-body__code pre { margin: 0; }\n.fmstr-cmp-ffh-body__code code {\nbackground: transparent !important; color: inherit !important; padding: 0; border: 0;\nfont-family: inherit !important; font-size: inherit;\n}\n.fmstr-cmp-ffh-body__code .kw { color: var(--c-code-keyword); }\n.fmstr-cmp-ffh-body__code .at { color: var(--c-code-attr); }\n.fmstr-cmp-ffh-body__code .st { color: var(--c-code-string); }\n.fmstr-cmp-ffh-body__code .cm { color: var(--c-code-comment); font-style: italic; }\n.fmstr-cmp-ffh-body__code .lang { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); margin: 0 0 12px; }\n\n.fmstr-cmp-ffh-body__note {\nmargin: 14px 0 18px; padding: 14px 18px;\nbackground: var(--c-bg-soft); border-left: 3px solid var(--c-violet-500);\nborder-radius: 8px; font-size: 15.5px; color: var(--c-fg-2); line-height: 1.6;\n}\n.fmstr-cmp-ffh-body__note strong { color: var(--c-fg-1); }\n.fmstr-cmp-ffh-body__note--warn { background: var(--c-warn-bg); border-left-color: var(--c-warn-fg); }\n.fmstr-cmp-ffh-body__note--warn strong { color: var(--c-warn-fg); }\n\n.fmstr-cmp-ffh-body__variants {\ndisplay: grid; grid-template-columns: 1fr; gap: 14px; margin: 12px 0 24px;\n}\n.fmstr-cmp-ffh-body__variant {\nbackground: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 14px;\npadding: 18px 22px;\n}\n.fmstr-cmp-ffh-body__variant h4 {\nfont-size: 16px; font-weight: 700; color: var(--c-fg-1);\nmargin: 0 0 8px; line-height: 1.35;\n}\n.fmstr-cmp-ffh-body__variant p { font-size: 15px; line-height: 1.65; color: var(--c-fg-2); margin: 0; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-body { padding: 16px; }\n.fmstr-cmp-ffh-body__intro p, .fmstr-cmp-ffh-body p, .fmstr-cmp-ffh-body li { font-size: 15.5px; }\n.fmstr-cmp-ffh-body__h2 { font-size: 24px; margin-top: 32px; }\n.fmstr-cmp-ffh-body__h3 { font-size: 18.5px; }\n.fmstr-cmp-ffh-body__code { padding: 14px 16px; font-size: 12.5px; border-radius: 10px; }\n.fmstr-cmp-ffh-body__variant { padding: 16px 18px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-body\" aria-label=\"How to make a feedback form in HTML\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__container\">\n\n\u003Cdiv class=\"fmstr-cmp-ffh-body__intro\">\n\u003Cp>A feedback form in HTML is twenty lines of markup, a bit of CSS, and one decision that trips up almost everyone: what happens after the user clicks Submit?\u003C\u002Fp>\n\u003Cp>This guide ships the full pattern. You'll get a working \u003Ccode><form>\u003C\u002Fcode> with name, email, and message fields, CSS that styles it without a framework, JavaScript validation that doesn't break keyboard users, and three honest options for the backend, including one that needs zero server code. Paste the snippets in order, swap the action URL, and you have a live feedback form on your site in about ten minutes.\u003C\u002Fp>\n\u003Cp>If you want to skip the code entirely, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F\">Formester's drag-and-drop builder\u003C\u002Fa> ships a feedback form you can \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fembed-forms\u002F\">embed in any HTML page\u003C\u002Fa> with one snippet. Keep reading for the hand-coded path.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">What a feedback form in HTML actually needs\u003C\u002Fh2>\n\u003Cp>Four pieces, in order:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>A \u003Ccode><form>\u003C\u002Fcode> element\u003C\u002Fstrong> with the right \u003Ccode>action\u003C\u002Fcode> and \u003Ccode>method\u003C\u002Fcode> so the browser knows where to send data.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Labeled inputs\u003C\u002Fstrong> for the fields you care about (name, email, rating, message), with \u003Ccode>name\u003C\u002Fcode> attributes so the server can read them.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Validation\u003C\u002Fstrong> on the client (for user experience) and on the server (for trust).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>A backend\u003C\u002Fstrong> that receives the submission, stores it, and ideally notifies you. This is the part most tutorials skip; it's the part you need most.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Below, each piece is a separate step with a copy-paste block. The last step is a single complete file you can save as \u003Ccode>feedback.html\u003C\u002Fcode> and open in a browser.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 1: Set up the HTML document\u003C\u002Fh2>\n\u003Cp>Save this as \u003Ccode>feedback.html\u003C\u002Fcode>. It's the shell every form goes inside.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">HTML\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Feedback Form<\u002Ftitle>\n<\u002Fhead>\n<body>\n  <h1>Tell us what you think<\u002Fh1>\n  <!-- form goes here -->\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Two small things that matter later: \u003Ccode>lang=\"en\"\u003C\u002Fcode> helps screen readers pick the right voice, and the viewport meta tag makes the form usable on phones.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 2: Add the form fields\u003C\u002Fh2>\n\u003Cp>Paste this inside \u003Ccode><body>\u003C\u002Fcode>, where the comment says \"form goes here\":\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">HTML\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><form id=\"feedback-form\" action=\"\u002Fsubmit-feedback\" method=\"post\" novalidate>\n  <div class=\"field\">\n    <label for=\"name\">Name<\u002Flabel>\n    <input type=\"text\" id=\"name\" name=\"name\" autocomplete=\"name\" required>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"email\">Email<\u002Flabel>\n    <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\" required>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"rating\">How was your experience?<\u002Flabel>\n    <select id=\"rating\" name=\"rating\" required>\n      <option value=\"\">Pick one<\u002Foption>\n      <option value=\"5\">Loved it<\u002Foption>\n      <option value=\"4\">Good<\u002Foption>\n      <option value=\"3\">Okay<\u002Foption>\n      <option value=\"2\">Not great<\u002Foption>\n      <option value=\"1\">Bad<\u002Foption>\n    <\u002Fselect>\n  <\u002Fdiv>\n\n  <div class=\"field\">\n    <label for=\"message\">Your feedback<\u002Flabel>\n    <textarea id=\"message\" name=\"message\" rows=\"5\" required><\u002Ftextarea>\n  <\u002Fdiv>\n\n  <button type=\"submit\">Send feedback<\u002Fbutton>\n<\u002Fform>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Three details that beginners miss:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Every input has a matching \u003Ccode><label for>\u003C\u002Fcode>.\u003C\u002Fstrong> Click the label, the input focuses. Screen readers read the label out loud. Skip this and the form fails accessibility and loses keyboard users.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>name\u003C\u002Fcode> attributes are not cosmetic.\u003C\u002Fstrong> The server reads submissions by \u003Ccode>name\u003C\u002Fcode>, so \u003Ccode>name=\"email\"\u003C\u002Fcode> is what makes the email value reach your inbox. Missing \u003Ccode>name\u003C\u002Fcode> = silent data loss.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>autocomplete=\"name\"\u003C\u002Fcode> and \u003Ccode>autocomplete=\"email\"\u003C\u002Fcode>\u003C\u002Fstrong> let browsers pre-fill from saved info. One line, measurable bump in completion.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__note\">\u003Cstrong>Note:\u003C\u002Fstrong> \u003Ccode>novalidate\u003C\u002Fcode> on the form tag turns off the browser's default error bubbles so you can show your own (covered in Step 4). Drop it if you want native validation only.\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 3: Style it with CSS\u003C\u002Fh2>\n\u003Cp>Paste this inside \u003Ccode><head>\u003C\u002Fcode> between \u003Ccode><title>\u003C\u002Fcode> and the closing \u003Ccode><\u002Fhead>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">CSS\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><style>\n  body {\n    font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n    background: #f7f7f9;\n    margin: 0;\n    padding: 40px 16px;\n    color: #1a1a1a;\n  }\n  h1 { font-size: 1.5rem; margin: 0 0 24px; text-align: center; }\n  form {\n    max-width: 480px;\n    margin: 0 auto;\n    background: #fff;\n    padding: 24px;\n    border-radius: 12px;\n    box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n  }\n  .field { margin-bottom: 16px; }\n  label {\n    display: block;\n    font-weight: 600;\n    font-size: 0.9rem;\n    margin-bottom: 6px;\n  }\n  input, select, textarea {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 10px 12px;\n    font: inherit;\n    border: 1px solid #d0d0d6;\n    border-radius: 8px;\n    background: #fff;\n  }\n  input:focus, select:focus, textarea:focus {\n    outline: 2px solid #5b6cff;\n    outline-offset: 1px;\n    border-color: #5b6cff;\n  }\n  input[aria-invalid=\"true\"],\n  select[aria-invalid=\"true\"],\n  textarea[aria-invalid=\"true\"] {\n    border-color: #d33;\n  }\n  .error {\n    display: block;\n    color: #d33;\n    font-size: 0.8rem;\n    margin-top: 4px;\n    min-height: 1em;\n  }\n  button {\n    width: 100%;\n    padding: 12px;\n    background: #5b6cff;\n    color: #fff;\n    font-weight: 600;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n  }\n  button:hover { background: #4a59e0; }\n<\u002Fstyle>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>Two things this stylesheet does that the typical tutorial skips:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Keeps the focus outline visible. Default focus styles are ugly, so most tutorials remove them. Removing them breaks keyboard users. Replace, don't remove.\u003C\u002Fli>\n\u003Cli>Uses \u003Ccode>system-ui\u003C\u002Fcode> for fonts, so the form inherits the host site's native typography on macOS, Windows, iOS, and Android without shipping a font file.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 4: Add accessible JavaScript validation\u003C\u002Fh2>\n\u003Cp>The alert-on-submit pattern works but it's the worst possible UX. This version shows inline errors, marks invalid fields for screen readers with \u003Ccode>aria-invalid\u003C\u002Fcode>, and keeps focus where the user can fix the problem.\u003C\u002Fp>\n\u003Cp>Paste this right before \u003Ccode><\u002Fbody>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__code\">\u003Cspan class=\"lang\">JavaScript\u003C\u002Fspan>\n\u003Cpre>\u003Ccode><script>\n  const form = document.getElementById('feedback-form');\n\n  function setError(input, message) {\n    input.setAttribute('aria-invalid', 'true');\n    let errorEl = input.parentElement.querySelector('.error');\n    if (!errorEl) {\n      errorEl = document.createElement('span');\n      errorEl.className = 'error';\n      errorEl.id = input.id + '-error';\n      input.parentElement.appendChild(errorEl);\n    }\n    errorEl.textContent = message;\n    input.setAttribute('aria-describedby', errorEl.id);\n  }\n\n  function clearError(input) {\n    input.setAttribute('aria-invalid', 'false');\n    const errorEl = input.parentElement.querySelector('.error');\n    if (errorEl) errorEl.textContent = '';\n  }\n\n  form.addEventListener('submit', function (event) {\n    let firstInvalid = null;\n\n    [...form.querySelectorAll('input, select, textarea')].forEach((input) => {\n      clearError(input);\n      if (!input.value.trim()) {\n        setError(input, 'This field is required.');\n        firstInvalid = firstInvalid || input;\n      } else if (input.type === 'email' && !\u002F^\\S+@\\S+\\.\\S+$\u002F.test(input.value)) {\n        setError(input, 'Enter a valid email address.');\n        firstInvalid = firstInvalid || input;\n      }\n    });\n\n    if (firstInvalid) {\n      event.preventDefault();\n      firstInvalid.focus();\n    }\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003Cp>What this does that the original snippet missed:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Sets \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> and \u003Ccode>aria-describedby\u003C\u002Fcode> so screen readers announce the error.\u003C\u002Fli>\n\u003Cli>Inserts the error message next to the field, not in a modal.\u003C\u002Fli>\n\u003Cli>Focuses the first invalid field on failed submit, so a keyboard user lands exactly where they need to fix.\u003C\u002Fli>\n\u003Cli>Doesn't trust the email regex to be perfect (it isn't); always re-validate on the server.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__note\">\u003Cstrong>Rule of thumb:\u003C\u002Fstrong> client-side validation is for UX. Server-side validation is for trust. Do both.\u003C\u002Fdiv>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Step 5: Test the form locally\u003C\u002Fh2>\n\u003Cp>Open \u003Ccode>feedback.html\u003C\u002Fcode> in a browser. Run this checklist:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Tab through every field with the keyboard. Focus should be visible at every stop.\u003C\u002Fli>\n\u003Cli>Try to submit empty. You should see inline error messages, focus should jump to the first empty field.\u003C\u002Fli>\n\u003Cli>Type a malformed email. You should see \"Enter a valid email address.\"\u003C\u002Fli>\n\u003Cli>Open the browser's network tab, submit a valid form. You should see a POST to \u003Ccode>\u002Fsubmit-feedback\u003C\u002Fcode>. That request will currently 404 because you don't have a backend yet. Step 6 fixes that.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you want to skip the backend setup entirely, the next step shows the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester HTML form backend\u003C\u002Fa> path: change one \u003Ccode>action\u003C\u002Fcode> attribute and your form starts collecting submissions.\u003C\u002Fp>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\" id=\"step-6-backend\">Step 6: Wire up a backend that stores submissions\u003C\u002Fh2>\n\u003Cp>A feedback form without a backend is a dead form. The browser POSTs the data, the server returns 404, the user sees an error page, the feedback is gone. You have three real options, compared side-by-side below.\u003C\u002Fp>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-back a { text-decoration: none !important; }\n.fmstr-cmp-ffh-back {\n--fmstr-cmp-ffh-back-bg-card: #ffffff;\n--fmstr-cmp-ffh-back-bg-code: #0f172a;\n--fmstr-cmp-ffh-back-fg-1: #101828;\n--fmstr-cmp-ffh-back-fg-2: #475467;\n--fmstr-cmp-ffh-back-fg-3: #697586;\n--fmstr-cmp-ffh-back-violet-500: #7f56d9;\n--fmstr-cmp-ffh-back-violet-600: #6941c6;\n--fmstr-cmp-ffh-back-tint: #f7f3ff;\n--fmstr-cmp-ffh-back-edge: #e4d7ff;\n--fmstr-cmp-ffh-back-border: #eaecf0;\n--fmstr-cmp-ffh-back-red: #dc2626;\n--fmstr-cmp-ffh-back-red-bg: #fef2f2;\n--fmstr-cmp-ffh-back-red-edge: #fecaca;\n--fmstr-cmp-ffh-back-amber: #d97706;\n--fmstr-cmp-ffh-back-amber-bg: #fffbeb;\n--fmstr-cmp-ffh-back-amber-edge: #fde68a;\n--fmstr-cmp-ffh-back-green: #15803d;\n--fmstr-cmp-ffh-back-green-bg: #f0fdf4;\n--fmstr-cmp-ffh-back-green-edge: #bbf7d0;\n--fmstr-cmp-ffh-back-code-fg: #e2e8f0;\n--fmstr-cmp-ffh-back-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-back-fg-1);\n}\n.fmstr-cmp-ffh-back *, .fmstr-cmp-ffh-back *::before, .fmstr-cmp-ffh-back *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-back__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-back__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-back__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-back-tint); color: var(--fmstr-cmp-ffh-back-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-back-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-back__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-back__intro { color: var(--fmstr-cmp-ffh-back-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-back__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }\n.fmstr-cmp-ffh-back__card {\nbackground: var(--fmstr-cmp-ffh-back-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-back-border);\nborder-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px;\nbox-shadow: var(--fmstr-cmp-ffh-back-shadow); position: relative;\n}\n.fmstr-cmp-ffh-back__card--red { border-top: 4px solid var(--fmstr-cmp-ffh-back-red); }\n.fmstr-cmp-ffh-back__card--amber { border-top: 4px solid var(--fmstr-cmp-ffh-back-amber); }\n.fmstr-cmp-ffh-back__card--green { border-top: 4px solid var(--fmstr-cmp-ffh-back-violet-500); background: linear-gradient(180deg, #fdfbff 0%, #fff 60%); }\n\n.fmstr-cmp-ffh-back__verdict {\ndisplay: inline-flex; align-items: center; gap: 8px; align-self: flex-start;\npadding: 5px 12px; border-radius: 9999px; font-size: 11.5px; font-weight: 700;\nletter-spacing: .04em; text-transform: uppercase;\n}\n.fmstr-cmp-ffh-back__verdict--red { background: var(--fmstr-cmp-ffh-back-red-bg); color: var(--fmstr-cmp-ffh-back-red); border: 1px solid var(--fmstr-cmp-ffh-back-red-edge); }\n.fmstr-cmp-ffh-back__verdict--amber { background: var(--fmstr-cmp-ffh-back-amber-bg); color: var(--fmstr-cmp-ffh-back-amber); border: 1px solid var(--fmstr-cmp-ffh-back-amber-edge); }\n.fmstr-cmp-ffh-back__verdict--green { background: var(--fmstr-cmp-ffh-back-tint); color: var(--fmstr-cmp-ffh-back-violet-600); border: 1px solid var(--fmstr-cmp-ffh-back-edge); }\n\n.fmstr-cmp-ffh-back__name { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--fmstr-cmp-ffh-back-fg-1); }\n.fmstr-cmp-ffh-back__sub { font-size: 13.5px; color: var(--fmstr-cmp-ffh-back-fg-3); margin: -8px 0 0; line-height: 1.5; }\n\n.fmstr-cmp-ffh-back__code {\nbackground: var(--fmstr-cmp-ffh-back-bg-code);\nborder-radius: 10px; padding: 14px 16px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 12px; line-height: 1.55;\ncolor: var(--fmstr-cmp-ffh-back-code-fg);\noverflow-x: auto; margin: 0; white-space: pre;\n}\n.fmstr-cmp-ffh-back__code code { font-family: inherit; }\n.fmstr-cmp-ffh-back__code .t { color: #f472b6; }\n.fmstr-cmp-ffh-back__code .a { color: #a5b4fc; }\n.fmstr-cmp-ffh-back__code .s { color: #86efac; }\n.fmstr-cmp-ffh-back__code .c { color: #64748b; font-style: italic; }\n\n.fmstr-cmp-ffh-back__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }\n.fmstr-cmp-ffh-back__row { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--fmstr-cmp-ffh-back-fg-2); }\n.fmstr-cmp-ffh-back__row::before {\ncontent: \"\"; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;\nbackground-repeat: no-repeat; background-position: center;\n}\n.fmstr-cmp-ffh-back__row--bad::before { background-color: var(--fmstr-cmp-ffh-back-red-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2 L8 8 M8 2 L2 8'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row--meh::before { background-color: var(--fmstr-cmp-ffh-back-amber-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5 L8 5'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row--good::before { background-color: var(--fmstr-cmp-ffh-back-green-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5 L4 7 L8 3'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-back__row strong { color: var(--fmstr-cmp-ffh-back-fg-1); font-weight: 600; }\n\n.fmstr-cmp-ffh-back__cta {\nmargin-top: auto; padding-top: 4px;\ndisplay: inline-flex; align-items: center; gap: 8px;\ncolor: var(--fmstr-cmp-ffh-back-violet-600) !important;\nfont-weight: 600; font-size: 14.5px;\ntext-decoration: none !important;\n}\n.fmstr-cmp-ffh-back__cta:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-back { padding: 40px 16px; }\n.fmstr-cmp-ffh-back__card { padding: 22px; }\n.fmstr-cmp-ffh-back__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-back__code { font-size: 11.5px; padding: 12px 14px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-back\" aria-labelledby=\"fmstr-cmp-ffh-back-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-back__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-back__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__eyebrow\">Three honest paths\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-back__h2\" id=\"fmstr-cmp-ffh-back-h2\">What happens after the user clicks Submit\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-back__intro\">Without a backend, a feedback form is a dead form. The browser POSTs the data, the server returns 404, the user sees an error page. Here are the three real options, ranked by how much pain each one ships with.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-back__grid\">\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--red\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--red\">Don’t ship this\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 1: \u003Ccode>mailto:\u003C\u002Fcode>\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">The \"no server\" hack that loses about half your submissions.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\"><!-- Opens the user's mail client -->\u003C\u002Fspan>\n\u003Cspan class=\"t\"><form\u003C\u002Fspan>\n\u003Cspan class=\"a\">action\u003C\u002Fspan>=\u003Cspan class=\"s\">\"mailto:you@example.com\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">method\u003C\u002Fspan>=\u003Cspan class=\"s\">\"post\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">enctype\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\u002Fplain\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>User-action required.\u003C\u002Fstrong> Browser opens a draft email. They have to click Send manually. Half won’t.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>Breaks on mobile.\u003C\u002Fstrong> Many phones have no configured mail client.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--bad\">\u003Cspan>\u003Cstrong>Spam-filter bait.\u003C\u002Fstrong> Resulting messages are unsigned and easy to flag.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--amber\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--amber\">You’ll maintain it\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 2: Your own server\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">PHP, Node, or whatever you already run. Full control, full ownership.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\">\u002F\u002F minimal Node\u002FExpress receiver\u003C\u002Fspan>\napp.\u003Cspan class=\"t\">post\u003C\u002Fspan>(\u003Cspan class=\"s\">'\u002Fsubmit-feedback'\u003C\u002Fspan>, (req, res) => {\n\u003Cspan class=\"t\">const\u003C\u002Fspan> { name, email, message } = req.body;\n\u003Cspan class=\"t\">if\u003C\u002Fspan> (!validate(email)) \u003Cspan class=\"t\">return\u003C\u002Fspan> res.\u003Cspan class=\"t\">status\u003C\u002Fspan>(400);\ndb.\u003Cspan class=\"t\">insert\u003C\u002Fspan>({ name, email, message });\nres.\u003Cspan class=\"t\">redirect\u003C\u002Fspan>(\u003Cspan class=\"s\">'\u002Fthank-you'\u003C\u002Fspan>);\n});\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--meh\">\u003Cspan>\u003Cstrong>You own the server.\u003C\u002Fstrong> Hosting, TLS, scaling, uptime monitoring are yours.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--meh\">\u003Cspan>\u003Cstrong>Spam protection is on you.\u003C\u002Fstrong> Honeypot, rate limiting, CAPTCHA, all DIY.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Maximum control.\u003C\u002Fstrong> Custom logic, database, queues, webhooks however you want.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-back__card fmstr-cmp-ffh-back__card--green\">\n\u003Cspan class=\"fmstr-cmp-ffh-back__verdict fmstr-cmp-ffh-back__verdict--green\">Skip the server\u003C\u002Fspan>\n\u003Ch3 class=\"fmstr-cmp-ffh-back__name\">Path 3: Formester HTML form backend\u003C\u002Fh3>\n\u003Cp class=\"fmstr-cmp-ffh-back__sub\">One \u003Ccode>action\u003C\u002Fcode> attribute swap. No server code, no infra.\u003C\u002Fp>\n\u003Cpre class=\"fmstr-cmp-ffh-back__code\">\u003Ccode>\u003Cspan class=\"c\"><!-- The only change vs. Path 2 -->\u003C\u002Fspan>\n\u003Cspan class=\"t\"><form\u003C\u002Fspan>\n\u003Cspan class=\"a\">action\u003C\u002Fspan>=\u003Cspan class=\"s\">\"https:\u002F\u002Fapp.formester.com\u002F\u003C\u002Fspan>\n\u003Cspan class=\"s\">    api\u002Fv1\u002Fforms\u002FYOUR_ID\u002Fsubmissions\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">method\u003C\u002Fspan>=\u003Cspan class=\"s\">\"post\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul class=\"fmstr-cmp-ffh-back__list\">\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Submissions land in the dashboard.\u003C\u002Fstrong> View, filter, \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fexport-form-submission-pdf\u002F\">export to PDF\u003C\u002Fa>, push to Sheets\u002FSlack\u002FHubSpot.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Spam protection built in.\u003C\u002Fstrong> Honeypot plus \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">reCAPTCHA-style checks\u003C\u002Fa> on every submission.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli class=\"fmstr-cmp-ffh-back__row fmstr-cmp-ffh-back__row--good\">\u003Cspan>\u003Cstrong>Free with unlimited submissions.\u003C\u002Fstrong> Email notifications, dashboard, integrations included. Used by 56,000+ teams.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ca class=\"fmstr-cmp-ffh-back__cta\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">See the HTML form backend →\u003C\u002Fa>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-code a { text-decoration: none !important; }\n.fmstr-cmp-ffh-code {\n--fmstr-cmp-ffh-code-bg-card: #ffffff;\n--fmstr-cmp-ffh-code-bg-code: #0f172a;\n--fmstr-cmp-ffh-code-bg-preview: #f7f7f9;\n--fmstr-cmp-ffh-code-fg-1: #101828;\n--fmstr-cmp-ffh-code-fg-2: #475467;\n--fmstr-cmp-ffh-code-fg-3: #697586;\n--fmstr-cmp-ffh-code-violet-500: #7f56d9;\n--fmstr-cmp-ffh-code-violet-600: #6941c6;\n--fmstr-cmp-ffh-code-tint: #f7f3ff;\n--fmstr-cmp-ffh-code-edge: #e4d7ff;\n--fmstr-cmp-ffh-code-border: #eaecf0;\n--fmstr-cmp-ffh-code-code-fg: #e2e8f0;\n--fmstr-cmp-ffh-code-code-tag: #f472b6;\n--fmstr-cmp-ffh-code-code-attr: #a5b4fc;\n--fmstr-cmp-ffh-code-code-str: #86efac;\n--fmstr-cmp-ffh-code-code-comment: #64748b;\n--fmstr-cmp-ffh-code-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-code-fg-1);\n}\n.fmstr-cmp-ffh-code *, .fmstr-cmp-ffh-code *::before, .fmstr-cmp-ffh-code *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-code__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-code__head { max-width: 780px; margin: 0 0 32px; }\n.fmstr-cmp-ffh-code__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-code-tint); color: var(--fmstr-cmp-ffh-code-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-code-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-code__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-code__intro { color: var(--fmstr-cmp-ffh-code-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-code__grid {\ndisplay: grid; grid-template-columns: 1fr; gap: 0;\nbackground: var(--fmstr-cmp-ffh-code-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-code-border);\nborder-radius: 20px; overflow: hidden;\nbox-shadow: var(--fmstr-cmp-ffh-code-shadow);\n}\n\n.fmstr-cmp-ffh-code__preview-pane {\nbackground: var(--fmstr-cmp-ffh-code-bg-preview);\npadding: 28px 24px;\ndisplay: flex; flex-direction: column; gap: 14px;\nborder-bottom: 1px solid var(--fmstr-cmp-ffh-code-border);\n}\n.fmstr-cmp-ffh-code__preview-label {\nfont-size: 11px; font-weight: 700; letter-spacing: .08em;\ntext-transform: uppercase; color: var(--fmstr-cmp-ffh-code-fg-3);\ndisplay: flex; align-items: center; gap: 8px;\n}\n.fmstr-cmp-ffh-code__preview-label::before {\ncontent: \"\"; width: 8px; height: 8px; border-radius: 50%;\nbackground: #22c55e; flex-shrink: 0;\n}\n.fmstr-cmp-ffh-code__preview-form {\nbackground: #fff; padding: 22px 20px; border-radius: 12px;\nbox-shadow: 0 2px 12px rgba(0,0,0,0.06);\ndisplay: flex; flex-direction: column; gap: 14px;\n}\n.fmstr-cmp-ffh-code__preview-h { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-field { display: flex; flex-direction: column; gap: 6px; }\n.fmstr-cmp-ffh-code__preview-label-row { font-size: 12.5px; font-weight: 600; color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-input {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\n}\n.fmstr-cmp-ffh-code__preview-input--focus { outline: 2px solid var(--fmstr-cmp-ffh-code-violet-500); outline-offset: 1px; border-color: var(--fmstr-cmp-ffh-code-violet-500); color: var(--fmstr-cmp-ffh-code-fg-1); }\n.fmstr-cmp-ffh-code__preview-select {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\ndisplay: flex; justify-content: space-between; align-items: center;\n}\n.fmstr-cmp-ffh-code__preview-textarea {\nbackground: #fff; border: 1px solid #d0d0d6; border-radius: 8px;\npadding: 9px 11px; font-size: 12.5px; color: var(--fmstr-cmp-ffh-code-fg-3);\nmin-height: 54px;\n}\n.fmstr-cmp-ffh-code__preview-btn {\nbackground: var(--fmstr-cmp-ffh-code-violet-500); color: #fff;\npadding: 10px; border-radius: 8px; text-align: center;\nfont-weight: 600; font-size: 13px; margin-top: 4px;\n}\n.fmstr-cmp-ffh-code__preview-caption {\nfont-size: 12px; color: var(--fmstr-cmp-ffh-code-fg-3); line-height: 1.5; margin: 4px 0 0;\n}\n\n.fmstr-cmp-ffh-code__code-pane {\nbackground: var(--fmstr-cmp-ffh-code-bg-code);\nposition: relative; max-height: 560px;\ndisplay: flex; flex-direction: column;\n}\n.fmstr-cmp-ffh-code__code-header {\ndisplay: flex; align-items: center; justify-content: space-between;\npadding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);\ncolor: var(--fmstr-cmp-ffh-code-code-comment);\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 12px;\n}\n.fmstr-cmp-ffh-code__code-filename { display: flex; align-items: center; gap: 8px; }\n.fmstr-cmp-ffh-code__code-filename::before {\ncontent: \"\"; width: 10px; height: 10px; border-radius: 50%; background: #f87171;\nbox-shadow: 16px 0 0 #fbbf24, 32px 0 0 #34d399;\nmargin-right: 12px;\n}\n.fmstr-cmp-ffh-code__code-copy {\nbackground: rgba(127, 86, 217, 0.18) !important;\ncolor: #c4b5fd !important; border: 1px solid rgba(127, 86, 217, 0.4);\npadding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;\ncursor: pointer; font-family: ui-monospace, Menlo, Monaco, monospace;\ndisplay: inline-flex; align-items: center; gap: 6px;\n}\n.fmstr-cmp-ffh-code__code-copy:hover { background: rgba(127, 86, 217, 0.28) !important; }\n.fmstr-cmp-ffh-code__code-body {\nmargin: 0; padding: 18px 20px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 12.5px; line-height: 1.65;\ncolor: var(--fmstr-cmp-ffh-code-code-fg);\noverflow: auto; flex-grow: 1;\nwhite-space: pre;\nscrollbar-width: thin; scrollbar-color: rgba(167,139,250,.35) transparent;\n}\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar { width: 10px; height: 10px; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-track { background: transparent; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-thumb { background: rgba(167,139,250,.3); border-radius: 5px; }\n.fmstr-cmp-ffh-code__code-body::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,.5); }\n.fmstr-cmp-ffh-code__code-body code { font-family: inherit; }\n.fmstr-cmp-ffh-code__tag { color: var(--fmstr-cmp-ffh-code-code-tag); }\n.fmstr-cmp-ffh-code__attr { color: var(--fmstr-cmp-ffh-code-code-attr); }\n.fmstr-cmp-ffh-code__str { color: var(--fmstr-cmp-ffh-code-code-str); }\n.fmstr-cmp-ffh-code__cmt { color: var(--fmstr-cmp-ffh-code-code-comment); font-style: italic; }\n\n.fmstr-cmp-ffh-code__foot {\nmargin: 20px auto 0; max-width: 780px; text-align: center;\ncolor: var(--fmstr-cmp-ffh-code-fg-3); font-size: 14.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-code__foot a { color: var(--fmstr-cmp-ffh-code-violet-600) !important; font-weight: 600; }\n.fmstr-cmp-ffh-code__foot a:hover { text-decoration: underline !important; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-code { padding: 40px 16px; }\n.fmstr-cmp-ffh-code__grid { border-radius: 16px; }\n.fmstr-cmp-ffh-code__preview-pane { padding: 22px 18px; }\n.fmstr-cmp-ffh-code__code-pane { max-height: 420px; }\n.fmstr-cmp-ffh-code__code-body { font-size: 11.5px; padding: 14px 16px; }\n.fmstr-cmp-ffh-code__intro { font-size: 15.5px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-code\" aria-labelledby=\"fmstr-cmp-ffh-code-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__eyebrow\">Copy, paste, ship\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-code__h2\" id=\"fmstr-cmp-ffh-code-h2\">The complete feedback form, in one file\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-code__intro\">Structure, styling, and accessible JavaScript validation in a single working file. Save as \u003Ccode>feedback.html\u003C\u002Fcode>, swap the \u003Ccode>action\u003C\u002Fcode> URL, and the form is live.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-code__grid\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-pane\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-label\">Live preview\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-form\">\n\u003Ch3 class=\"fmstr-cmp-ffh-code__preview-h\">Tell us what you think\u003C\u002Fh3>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Name\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-input\">Jane Doe\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Email\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-input fmstr-cmp-ffh-code__preview-input--focus\">jane@example.com\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">How was your experience?\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-select\">\u003Cspan>Loved it\u003C\u002Fspan>\u003Cspan>▾\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-field\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__preview-label-row\">Your feedback\u003C\u002Fspan>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-textarea\">The dashboard is fast and the export to PDF saved my week.\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-code__preview-btn\">Send feedback\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-ffh-code__preview-caption\">Rendered output. Keyboard-accessible focus ring on the active field, inline error slot ready, mobile-friendly layout.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-code__code-pane\">\n\u003Cdiv class=\"fmstr-cmp-ffh-code__code-header\">\n\u003Cspan class=\"fmstr-cmp-ffh-code__code-filename\">feedback.html\u003C\u002Fspan>\n\u003Cbutton type=\"button\" class=\"fmstr-cmp-ffh-code__code-copy\" aria-label=\"Copy code\">Copy\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cpre class=\"fmstr-cmp-ffh-code__code-body\">\u003Ccode>\u003Cspan class=\"fmstr-cmp-ffh-code__cmt\"><!DOCTYPE html>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><html\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"en\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><head>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><meta\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">charset\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"UTF-8\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><meta\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"viewport\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">content\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"width=device-width, initial-scale=1.0\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><title>\u003C\u002Fspan>Feedback Form\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Ftitle>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><style>\u003C\u002Fspan>\nbody { font-family: system-ui, sans-serif; background: #f7f7f9; padding: 40px 16px; }\nform { max-width: 480px; margin: 0 auto; background: #fff; padding: 24px; border-radius: 12px; }\n.field { margin-bottom: 16px; }\nlabel { display: block; font-weight: 600; margin-bottom: 6px; }\ninput, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #d0d0d6; border-radius: 8px; box-sizing: border-box; }\ninput:focus, select:focus, textarea:focus { outline: 2px solid #5b6cff; border-color: #5b6cff; }\n[aria-invalid=\"true\"] { border-color: #d33; }\n.error { display: block; color: #d33; font-size: 0.8rem; margin-top: 4px; }\nbutton { width: 100%; padding: 12px; background: #5b6cff; color: #fff; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; }\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fstyle>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fhead>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><body>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><h1>\u003C\u002Fspan>Tell us what you think\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fh1>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><form\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"feedback-form\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">action\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"https:\u002F\u002Fapp.formester.com\u002Fapi\u002Fv1\u002Fforms\u002FYOUR_FORM_ID\u002Fsubmissions\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">method\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"post\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">novalidate\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Name\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><input\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"name\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Email\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><input\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>How was your experience?\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><select\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"rating\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Pick one\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"5\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Loved it\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"3\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Okay\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><option\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">value\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"1\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Bad\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Foption>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fselect>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><div\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">class\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"field\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><label\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">for\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Your feedback\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><textarea\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">id\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">name\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"message\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">rows\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"5\"\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">required\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">><\u002Ftextarea>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fdiv>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><button\u003C\u002Fspan> \u003Cspan class=\"fmstr-cmp-ffh-code__attr\">type\u003C\u002Fspan>=\u003Cspan class=\"fmstr-cmp-ffh-code__str\">\"submit\"\u003C\u002Fspan>\u003Cspan class=\"fmstr-cmp-ffh-code__tag\">>\u003C\u002Fspan>Send feedback\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fbutton>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fform>\u003C\u002Fspan>\n\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><script>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__cmt\">\u002F\u002F Accessible inline validation: aria-invalid, aria-describedby, focus management\u003C\u002Fspan>\nconst form = document.getElementById(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'feedback-form'\u003C\u002Fspan>);\nform.addEventListener(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'submit'\u003C\u002Fspan>, (e) => {\nlet firstInvalid = null;\n[...form.querySelectorAll(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'input, select, textarea'\u003C\u002Fspan>)].forEach((input) => {\nconst valid = input.value.trim() && (input.type !== \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'email'\u003C\u002Fspan> || \u002F^\\S+@\\S+\\.\\S+$\u002F.test(input.value));\ninput.setAttribute(\u003Cspan class=\"fmstr-cmp-ffh-code__str\">'aria-invalid'\u003C\u002Fspan>, valid ? \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'false'\u003C\u002Fspan> : \u003Cspan class=\"fmstr-cmp-ffh-code__str\">'true'\u003C\u002Fspan>);\nif (!valid && !firstInvalid) firstInvalid = input;\n});\nif (firstInvalid) { e.preventDefault(); firstInvalid.focus(); }\n});\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fscript>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fbody>\u003C\u002Fspan>\n\u003Cspan class=\"fmstr-cmp-ffh-code__tag\"><\u002Fhtml>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cp class=\"fmstr-cmp-ffh-code__foot\">The \u003Ccode>action\u003C\u002Fcode> URL above points to \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>. Replace \u003Ccode>YOUR_FORM_ID\u003C\u002Fcode> with your form’s ID, or point it at your own server. Everything else stays the same.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Csection class=\"fmstr-cmp-ffh-body\" aria-label=\"Common mistakes and variants\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__container\">\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Common mistakes that break feedback forms\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ccode>mailto:\u003C\u002Fcode> as the action.\u003C\u002Fstrong> Looks like the easy answer. Drops half your submissions because the user has to manually send the draft. Use a real backend.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Missing \u003Ccode>name\u003C\u002Fcode> attributes.\u003C\u002Fstrong> The form POSTs successfully but the server gets empty fields. \u003Ccode>id\u003C\u002Fcode> is for CSS and labels; \u003Ccode>name\u003C\u002Fcode> is what the server reads.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Removed focus outlines.\u003C\u002Fstrong> \u003Ccode>outline: none\u003C\u002Fcode> is the most copy-pasted CSS mistake on the web. It breaks keyboard navigation. Replace the outline; don't delete it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Client-side validation only.\u003C\u002Fstrong> A user with DevTools open can submit anything. Validate on the server too.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>No spam protection.\u003C\u002Fstrong> Public forms attract bots within hours. Add a honeypot field (a hidden input that bots fill and humans don't) or a CAPTCHA. \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">Formester's backend\u003C\u002Fa> does this automatically.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>No confirmation page or message.\u003C\u002Fstrong> The user submits, the page reloads, nothing visibly changes. They submit again. Add a \u003Ccode><p role=\"status\">Thanks, we got it<\u002Fp>\u003C\u002Fcode> or redirect to a thank-you page.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2 class=\"fmstr-cmp-ffh-body__h2\">Variants of the feedback form\u003C\u002Fh2>\n\u003Cp>The base form covers most cases. Three common variants:\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variants\">\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Customer feedback (with rating)\u003C\u002Fh4>\n\u003Cp>Add a 1-5 star scale instead of the dropdown. The \u003Ccode><input type=\"range\">\u003C\u002Fcode> works, but a row of radio buttons styled as stars is clearer for screen readers. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcustomer-feedback-form-31840\u002F\">customer feedback form template\u003C\u002Fa> ships this layout pre-built.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Product feedback (with feature picker)\u003C\u002Fh4>\n\u003Cp>Add a checkbox group: \"Which features did you use?\" with options like Onboarding, Search, Reporting. Use \u003Ccode><fieldset><legend>\u003C\u002Fcode> around the group so screen readers announce it as one question. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">feedback form templates library\u003C\u002Fa> has a fuller version.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-body__variant\">\n\u003Ch4>Employee feedback (anonymous)\u003C\u002Fh4>\n\u003Cp>Drop the name and email fields entirely. Add a \"Department\" dropdown and a longer text area. If you collect this through Formester, turn off IP tracking in the form settings to keep submissions genuinely anonymous. The \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">employee feedback templates\u003C\u002Fa> are preconfigured for this.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-a11y a { text-decoration: none !important; }\n.fmstr-cmp-ffh-a11y {\n--fmstr-cmp-ffh-a11y-bg-card: #ffffff;\n--fmstr-cmp-ffh-a11y-bg-code: #0f172a;\n--fmstr-cmp-ffh-a11y-fg-1: #101828;\n--fmstr-cmp-ffh-a11y-fg-2: #475467;\n--fmstr-cmp-ffh-a11y-fg-3: #697586;\n--fmstr-cmp-ffh-a11y-violet-500: #7f56d9;\n--fmstr-cmp-ffh-a11y-violet-600: #6941c6;\n--fmstr-cmp-ffh-a11y-tint: #f7f3ff;\n--fmstr-cmp-ffh-a11y-edge: #e4d7ff;\n--fmstr-cmp-ffh-a11y-border: #eaecf0;\n--fmstr-cmp-ffh-a11y-red-bg: #fef2f2;\n--fmstr-cmp-ffh-a11y-red-edge: #fecaca;\n--fmstr-cmp-ffh-a11y-red: #b91c1c;\n--fmstr-cmp-ffh-a11y-green-bg: #f0fdf4;\n--fmstr-cmp-ffh-a11y-green-edge: #bbf7d0;\n--fmstr-cmp-ffh-a11y-green: #15803d;\n--fmstr-cmp-ffh-a11y-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit; color: var(--fmstr-cmp-ffh-a11y-fg-1);\n}\n.fmstr-cmp-ffh-a11y *, .fmstr-cmp-ffh-a11y *::before, .fmstr-cmp-ffh-a11y *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-a11y__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-a11y__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-a11y__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--fmstr-cmp-ffh-a11y-tint); color: var(--fmstr-cmp-ffh-a11y-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--fmstr-cmp-ffh-a11y-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-a11y__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-a11y__intro { color: var(--fmstr-cmp-ffh-a11y-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n\n.fmstr-cmp-ffh-a11y__list { display: flex; flex-direction: column; gap: 16px; }\n.fmstr-cmp-ffh-a11y__item {\nbackground: var(--fmstr-cmp-ffh-a11y-bg-card);\nborder: 1px solid var(--fmstr-cmp-ffh-a11y-border);\nborder-radius: 16px; padding: 22px 24px;\ndisplay: grid; grid-template-columns: 44px 1fr 1fr; gap: 20px; align-items: start;\nbox-shadow: var(--fmstr-cmp-ffh-a11y-shadow);\n}\n.fmstr-cmp-ffh-a11y__num {\nwidth: 36px; height: 36px; border-radius: 10px;\nbackground: var(--fmstr-cmp-ffh-a11y-tint);\ncolor: var(--fmstr-cmp-ffh-a11y-violet-600);\ndisplay: grid; place-items: center;\nfont-weight: 700; font-size: 15px;\nborder: 1px solid var(--fmstr-cmp-ffh-a11y-edge);\n}\n\n.fmstr-cmp-ffh-a11y__copy h3 {\nfont-size: 17px; font-weight: 600; letter-spacing: -.01em;\ncolor: var(--fmstr-cmp-ffh-a11y-fg-1); margin: 0 0 6px;\n}\n.fmstr-cmp-ffh-a11y__copy p { color: var(--fmstr-cmp-ffh-a11y-fg-2); font-size: 14.5px; line-height: 1.6; margin: 0; }\n.fmstr-cmp-ffh-a11y__copy strong { color: var(--fmstr-cmp-ffh-a11y-fg-1); font-weight: 600; }\n\n.fmstr-cmp-ffh-a11y__pair { display: flex; flex-direction: column; gap: 10px; }\n.fmstr-cmp-ffh-a11y__codebox {\nbackground: var(--fmstr-cmp-ffh-a11y-bg-code);\nborder-radius: 8px; padding: 10px 12px;\nfont-family: ui-monospace, Menlo, Monaco, monospace;\nfont-size: 11.5px; line-height: 1.55;\ncolor: #e2e8f0; overflow-x: auto; margin: 0;\nwhite-space: pre; position: relative; padding-left: 50px;\n}\n.fmstr-cmp-ffh-a11y__codebox code { font-family: inherit; }\n.fmstr-cmp-ffh-a11y__codebox::before {\ncontent: \"\"; position: absolute; left: 10px; top: 11px;\nwidth: 14px; height: 14px; border-radius: 50%;\nbackground-repeat: no-repeat; background-position: center;\n}\n.fmstr-cmp-ffh-a11y__codebox--bad::before { background-color: var(--fmstr-cmp-ffh-a11y-red-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5 L6.5 6.5 M6.5 1.5 L1.5 6.5'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-a11y__codebox--good::before { background-color: var(--fmstr-cmp-ffh-a11y-green-bg); background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='9' height='9' viewBox='0 0 9 9' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 L3.5 6.5 L7 3'\u002F%3E%3C\u002Fsvg%3E\"); }\n.fmstr-cmp-ffh-a11y__codebox-label {\nposition: absolute; top: 11px; left: 28px;\nfont-size: 9px; font-weight: 700; letter-spacing: .08em;\ntext-transform: uppercase;\n}\n.fmstr-cmp-ffh-a11y__codebox--bad .fmstr-cmp-ffh-a11y__codebox-label { color: var(--fmstr-cmp-ffh-a11y-red); }\n.fmstr-cmp-ffh-a11y__codebox--good .fmstr-cmp-ffh-a11y__codebox-label { color: var(--fmstr-cmp-ffh-a11y-green); }\n\n.fmstr-cmp-ffh-a11y__codebox .t { color: #f472b6; }\n.fmstr-cmp-ffh-a11y__codebox .a { color: #a5b4fc; }\n.fmstr-cmp-ffh-a11y__codebox .s { color: #86efac; }\n\n.fmstr-cmp-ffh-a11y__foot {\nmargin: 28px auto 0; max-width: 760px; text-align: center;\ncolor: var(--fmstr-cmp-ffh-a11y-fg-3); font-size: 14.5px; line-height: 1.6;\n}\n.fmstr-cmp-ffh-a11y__foot a { color: var(--fmstr-cmp-ffh-a11y-violet-600) !important; font-weight: 600; }\n.fmstr-cmp-ffh-a11y__foot a:hover { text-decoration: underline !important; }\n\n@media (max-width: 880px) {\n.fmstr-cmp-ffh-a11y__item { grid-template-columns: 36px 1fr; gap: 16px; }\n.fmstr-cmp-ffh-a11y__pair { grid-column: 1 \u002F -1; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-a11y { padding: 40px 16px; }\n.fmstr-cmp-ffh-a11y__item { padding: 18px; border-radius: 14px; }\n.fmstr-cmp-ffh-a11y__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-a11y__codebox { font-size: 11px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-a11y\" aria-labelledby=\"fmstr-cmp-ffh-a11y-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-a11y__eyebrow\">Five flags worth catching\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-a11y__h2\" id=\"fmstr-cmp-ffh-a11y-h2\">Accessibility checklist for an HTML feedback form\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-a11y__intro\">Every item below is something keyboard and screen-reader users actually hit. Skip these and a measurable chunk of your audience can’t complete the form.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__list\">\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">1\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Pair every label with its input\u003C\u002Fh3>\n\u003Cp>The label’s \u003Ccode>for\u003C\u002Fcode> must match the input’s \u003Ccode>id\u003C\u002Fcode>. Click the label, focus the input. Screen readers announce the label out loud. Skip this and the form fails WCAG 2.1 and loses keyboard users.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label>\u003C\u002Fspan>Email\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label\u003C\u002Fspan> \u003Cspan class=\"a\">for\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Email\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">2\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Connect errors with \u003Ccode>aria-describedby\u003C\u002Fcode>\u003C\u002Fh3>\n\u003Cp>An invalid field needs \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> plus an \u003Ccode>aria-describedby\u003C\u002Fcode> that points at the visible error message. Screen readers then announce the error along with the field name on focus.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><span>\u003C\u002Fspan>Invalid email\u003Cspan class=\"t\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">aria-invalid\u003C\u002Fspan>=\u003Cspan class=\"s\">\"true\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">aria-describedby\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email-error\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><span\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email-error\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Invalid email\u003Cspan class=\"t\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">3\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Use \u003Ccode>autocomplete\u003C\u002Fcode> tokens\u003C\u002Fh3>\n\u003Cp>One line per field. Browsers prefill from saved info, password managers behave, and assistive tech recognizes the field’s purpose. Measurable lift in completion rate on mobile.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"text\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"s\">\"name\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">name\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\n\u003Cspan class=\"a\">autocomplete\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">4\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Keep focus outlines visible\u003C\u002Fh3>\n\u003Cp>\u003Ccode>outline: none\u003C\u002Fcode> is the single most-copied CSS mistake on the web. It breaks keyboard navigation. Replace the default outline, never delete it. The visible ring is how a sighted keyboard user knows where they are.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>input:focus { outline: none; }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>input:focus {\noutline: 2px solid #5b6cff;\noutline-offset: 1px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003Carticle class=\"fmstr-cmp-ffh-a11y__item\">\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__num\">5\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__copy\">\n\u003Ch3>Mark required fields semantically\u003C\u002Fh3>\n\u003Cp>The native \u003Ccode>required\u003C\u002Fcode> attribute does two jobs at once: it tells the browser to block submission and tells screen readers the field is required. Don’t fake it with just a red asterisk in the label.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-a11y__pair\">\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--bad\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">No\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label>\u003C\u002Fspan>Email \u003Cspan class=\"t\"><span>\u003C\u002Fspan>*\u003Cspan class=\"t\"><\u002Fspan><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"fmstr-cmp-ffh-a11y__codebox fmstr-cmp-ffh-a11y__codebox--good\">\u003Cspan class=\"fmstr-cmp-ffh-a11y__codebox-label\">Yes\u003C\u002Fspan>\u003Ccode>\u003Cspan class=\"t\"><label\u003C\u002Fspan> \u003Cspan class=\"a\">for\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>Email (required)\u003Cspan class=\"t\"><\u002Flabel>\u003C\u002Fspan>\n\u003Cspan class=\"t\"><input\u003C\u002Fspan> \u003Cspan class=\"a\">id\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">type\u003C\u002Fspan>=\u003Cspan class=\"s\">\"email\"\u003C\u002Fspan> \u003Cspan class=\"a\">required\u003C\u002Fspan>\u003Cspan class=\"t\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fdiv>\n\u003C\u002Farticle>\n\n\u003C\u002Fdiv>\n\n\u003Cp class=\"fmstr-cmp-ffh-a11y__foot\">For edge cases (fieldsets, error summaries, custom controls), the \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FElements\u002Fform\">MDN \u003Ccode><form>\u003C\u002Fcode> reference\u003C\u002Fa> is the canonical source.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-faq a { text-decoration: none !important; }\n.fmstr-cmp-ffh-faq {\n--c-bg: #fafafb; --c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467;\n--c-violet-600: #6941c6; --c-tint: #f7f3ff; --c-edge: #e4d7ff;\n--c-border: #eaecf0; --c-chip-bg: #f4f4f7;\n--c-shadow: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-faq *, .fmstr-cmp-ffh-faq *::before, .fmstr-cmp-ffh-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-faq__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-faq__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); }\n.fmstr-cmp-ffh-faq__intro { color: #697586; font-size: 17px; line-height: 1.6; margin: 14px 0 28px; max-width: 760px; }\n.fmstr-cmp-ffh-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-ffh-faq__item {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; box-shadow: var(--c-shadow); overflow: hidden;\n}\n.fmstr-cmp-ffh-faq__item > summary {\npadding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 16.5px;\ncolor: var(--c-fg-1); display: flex; align-items: center; gap: 14px;\nlist-style: none;\n}\n.fmstr-cmp-ffh-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-ffh-faq__item > summary::before {\ncontent: \"\"; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;\nbackground-color: var(--c-chip-bg);\nbackground-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2375747f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'\u002F%3E%3C\u002Fsvg%3E\");\nbackground-repeat: no-repeat; background-position: center;\ntransition: transform .15s ease, background-color .15s ease;\n}\n.fmstr-cmp-ffh-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-ffh-faq__item[open] > summary { color: var(--c-violet-600); }\n.fmstr-cmp-ffh-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-ffh-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-ffh-faq__answer a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-faq__answer code {\nbackground: var(--c-chip-bg); padding: 1px 6px; border-radius: 4px;\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 13.5px;\ncolor: var(--c-violet-600);\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-faq { padding: 40px 16px; }\n.fmstr-cmp-ffh-faq__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-faq__item > summary { padding: 16px 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-ffh-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-ffh-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-faq\" aria-labelledby=\"fmstr-cmp-ffh-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__container\">\n\u003Ch2 class=\"fmstr-cmp-ffh-faq__h2\" id=\"fmstr-cmp-ffh-faq-h2\">HTML feedback form FAQ\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-faq__intro\">Answers that mirror the FAQPage JSON-LD on the live page.\u003C\u002Fp>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do you add a feedback form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Use a \u003Ccode><form>\u003C\u002Fcode> element with \u003Ccode>action\u003C\u002Fcode> set to your submission endpoint and \u003Ccode>method=\"post\"\u003C\u002Fcode>. Inside the form, add labeled \u003Ccode><input>\u003C\u002Fcode> and \u003Ccode><textarea>\u003C\u002Fcode> elements with \u003Ccode>name\u003C\u002Fcode> attributes. Style with CSS, validate with JavaScript, and point the \u003Ccode>action\u003C\u002Fcode> at a backend (your server, or a service like \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>). The complete copy-paste example above is the shortest working version.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I create a feedback form?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Decide what to ask (name, email, rating, open-ended feedback are the standard four). Write the HTML using a \u003Ccode><form>\u003C\u002Fcode> with one labeled input per question. Style it with CSS so it matches your site. Hook the \u003Ccode>action\u003C\u002Fcode> to a backend that stores submissions. The full process is the six steps above, or skip ahead to \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fdrag-and-drop-form-builder\u002F\">Formester’s drag-and-drop builder\u003C\u002Fa> if you’d rather not write code.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I create an inquiry form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Same pattern as a feedback form, with different field labels. Swap \"How was your experience?\" for \"What are you interested in?\" and \"Your feedback\" for \"Your message.\" Keep the name, email, and submit-button structure identical. For a longer inquiry form with subject lines and contact preferences, the \u003Ca href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fcontact-form-design-tips-best-practices-and-examples\u002F\">contact form design best practices guide\u003C\u002Fa> covers the patterns.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do you add a comment to a form in HTML?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Two meanings. (1) An HTML comment for developers: \u003Ccode><!-- this is the feedback section -->\u003C\u002Fcode> between elements. (2) A user-facing comment field: a \u003Ccode><textarea>\u003C\u002Fcode> with a label like \"Your comments.\" If you want comments to be optional, leave off the \u003Ccode>required\u003C\u002Fcode> attribute. Use \u003Ccode>rows\u003C\u002Fcode> and \u003Ccode>cols\u003C\u002Fcode> (or CSS height) to size the box.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I add CSS to a feedback form?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Two options. Inline \u003Ccode><style>\u003C\u002Fcode> tags inside \u003Ccode><head>\u003C\u002Fcode> work fine for one-off pages. For any real site, link an external stylesheet with \u003Ccode><link rel=\"stylesheet\" href=\"styles.css\">\u003C\u002Fcode>. Style the \u003Ccode>form\u003C\u002Fcode>, \u003Ccode>label\u003C\u002Fcode>, \u003Ccode>input\u003C\u002Fcode>, \u003Ccode>textarea\u003C\u002Fcode>, and \u003Ccode>button\u003C\u002Fcode> selectors directly. Step 3 above ships a complete starter stylesheet you can paste, including focus rings and inline error styles.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003Cdetails class=\"fmstr-cmp-ffh-faq__item\">\n\u003Csummary>How do I add JavaScript validation without breaking accessibility?\u003C\u002Fsummary>\n\u003Cdiv class=\"fmstr-cmp-ffh-faq__answer\">Use \u003Ccode>aria-invalid=\"true\"\u003C\u002Fcode> on invalid fields, \u003Ccode>aria-describedby\u003C\u002Fcode> to point at the inline error message, and move focus to the first invalid field on submit failure. Avoid \u003Ccode>alert()\u003C\u002Fcode> boxes, they break screen-reader flow. The Step 4 JavaScript and the complete example above are accessibility-tested versions you can paste directly. Always re-validate on the server too, since a user with DevTools open can bypass client-side checks.\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-vid a { text-decoration: none !important; }\n.fmstr-cmp-ffh-vid {\n--c-bg-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-vid *, .fmstr-cmp-ffh-vid *::before, .fmstr-cmp-ffh-vid *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-vid__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-vid__head { margin: 0 0 24px; }\n.fmstr-cmp-ffh-vid__eyebrow {\ndisplay: inline-block; padding: 5px 12px; border-radius: 9999px;\nbackground: var(--c-tint); color: var(--c-violet-600);\nfont-size: 12px; font-weight: 600; letter-spacing: .04em;\ntext-transform: uppercase; border: 1px solid var(--c-edge); margin: 0 0 14px;\n}\n.fmstr-cmp-ffh-vid__h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--c-fg-1); }\n.fmstr-cmp-ffh-vid__sub { color: var(--c-fg-3); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }\n.fmstr-cmp-ffh-vid__frame {\nposition: relative; aspect-ratio: 16 \u002F 9; border-radius: 20px; overflow: hidden;\nbackground: var(--c-tint); border: 1px solid var(--c-border); box-shadow: var(--c-shadow);\n}\n.fmstr-cmp-ffh-vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\n.fmstr-cmp-ffh-vid__caption { color: var(--c-fg-3); font-size: 14px; line-height: 1.6; text-align: center; margin: 16px 0 0; }\n.fmstr-cmp-ffh-vid__caption a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-ffh-vid__caption a:hover { text-decoration: underline !important; }\n.fmstr-cmp-ffh-vid__caption code {\nbackground: var(--c-tint); padding: 1px 6px; border-radius: 4px;\nfont-family: ui-monospace, Menlo, Monaco, monospace; font-size: 13px;\ncolor: var(--c-violet-600);\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-vid { padding: 40px 16px; }\n.fmstr-cmp-ffh-vid__sub { font-size: 15px; }\n.fmstr-cmp-ffh-vid__frame { border-radius: 16px; }\n.fmstr-cmp-ffh-vid__caption { font-size: 13.5px; }\n}\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-vid\" aria-labelledby=\"fmstr-cmp-ffh-vid-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__head\">\n\u003Cspan class=\"fmstr-cmp-ffh-vid__eyebrow\">Three-minute walkthrough\u003C\u002Fspan>\n\u003Ch2 class=\"fmstr-cmp-ffh-vid__h2\" id=\"fmstr-cmp-ffh-vid-h2\">Watch the full HTML feedback form built from scratch\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-vid__sub\">Structure, CSS, accessible validation, backend swap. All six steps in one short video.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-vid__frame\">\n\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F8FC3c5Cv5ew\" title=\"How to make a feedback form in HTML\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n\u003Cp class=\"fmstr-cmp-ffh-vid__caption\">Prefer reading? The full tutorial is below with copy-paste blocks. To skip the backend setup entirely, point the form’s \u003Ccode>action\u003C\u002Fcode> at \u003Ca href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">Formester’s HTML form backend\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cstyle>\n\u002F* host-link-override *\u002F\n.fmstr-cmp-ffh-rel a { text-decoration: none !important; }\n.fmstr-cmp-ffh-rel {\n--c-bg: #f4f4f7; --c-card: #ffffff;\n--c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586;\n--c-violet-500: #7f56d9; --c-violet-600: #6941c6;\n--c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-border: #eaecf0;\n--c-shadow: 0 4px 20px rgba(16,24,40,.06);\n\nbackground: transparent; padding: 56px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-ffh-rel *, .fmstr-cmp-ffh-rel *::before, .fmstr-cmp-ffh-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-ffh-rel__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-ffh-rel__head { margin: 0 0 28px; }\n.fmstr-cmp-ffh-rel__h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; }\n.fmstr-cmp-ffh-rel__intro { color: var(--c-fg-3); font-size: 17px; line-height: 1.6; margin: 14px 0 0; }\n.fmstr-cmp-ffh-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-ffh-rel__card {\nbackground: var(--c-card); border: 1px solid var(--c-border);\nborder-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 14px;\ntext-decoration: none !important; color: inherit !important; transition: all .15s ease;\n}\n.fmstr-cmp-ffh-rel__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow); transform: translateY(-1px); }\n.fmstr-cmp-ffh-rel__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--c-tint); display: grid; place-items: center; flex-shrink: 0; font-size: 18px; border: 1px solid var(--c-edge); }\n.fmstr-cmp-ffh-rel__text { flex-grow: 1; }\n.fmstr-cmp-ffh-rel__text h4 { font-size: 14.5px; font-weight: 600; color: var(--c-fg-1); margin: 0; }\n.fmstr-cmp-ffh-rel__text small { font-size: 12.5px; color: var(--c-fg-3); display: block; margin-top: 2px; }\n.fmstr-cmp-ffh-rel__arrow { color: var(--c-violet-500); font-size: 18px; }\n\n@media (max-width: 880px) { .fmstr-cmp-ffh-rel__grid { grid-template-columns: 1fr 1fr; gap: 12px; } }\n@media (max-width: 760px) {\n.fmstr-cmp-ffh-rel { padding: 40px 16px; }\n.fmstr-cmp-ffh-rel__intro { font-size: 15.5px; }\n.fmstr-cmp-ffh-rel__card { padding: 16px; gap: 12px; }\n}\n@media (max-width: 540px) { .fmstr-cmp-ffh-rel__grid { grid-template-columns: 1fr; gap: 12px; } }\n\u003C\u002Fstyle>\n\n\u003Csection class=\"fmstr-cmp-ffh-rel\" aria-labelledby=\"fmstr-cmp-ffh-rel-h2\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__head\">\n\u003Ch2 class=\"fmstr-cmp-ffh-rel__h2\" id=\"fmstr-cmp-ffh-rel-h2\">More from Formester on HTML forms and feedback\u003C\u002Fh2>\n\u003Cp class=\"fmstr-cmp-ffh-rel__intro\">Pair this tutorial with the backend features, ready-made templates, and adjacent how-tos.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__grid\">\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fhtml-form-backend\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📥\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>HTML Form Backend\u003C\u002Fh4>\u003Csmall>One \u003Ccode>action\u003C\u002Fcode> swap, no server\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fembed-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🔗\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Embed Forms\u003C\u002Fh4>\u003Csmall>Drop a form into any HTML page\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ffeatures\u002Fspam-protection\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🛡\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Spam Protection\u003C\u002Fh4>\u003Csmall>Honeypot + reCAPTCHA built in\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcustomer-feedback-form-31840\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">⭐\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Customer Feedback Form\u003C\u002Fh4>\u003Csmall>Pre-built template\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Ftemplates\u002Fcategories\u002Ffeedback-forms\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📄\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>All Feedback Templates\u003C\u002Fh4>\u003Csmall>Customer, product, employee\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fai-form-generator\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">✨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>AI Form Generator\u003C\u002Fh4>\u003Csmall>The no-code alternative\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-send-contact-form-data-to-google-sheets-free\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">📋\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Send form data to Google Sheets\u003C\u002Fh4>\u003Csmall>Free, step-by-step\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fcontact-form-design-tips-best-practices-and-examples\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🎨\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Contact form design tips\u003C\u002Fh4>\u003Csmall>Best practices and examples\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003Ca class=\"fmstr-cmp-ffh-rel__card\" href=\"https:\u002F\u002Fformester.com\u002Fblog\u002Fhow-to-build-spam-free-contact-forms-for-your-website\u002F\">\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__icon\" aria-hidden=\"true\">🤖\u003C\u002Fdiv>\n\u003Cdiv class=\"fmstr-cmp-ffh-rel__text\">\u003Ch4>Build spam-free contact forms\u003C\u002Fh4>\u003Csmall>Stop bots before they hit your inbox\u003C\u002Fsmall>\u003C\u002Fdiv>\n\u003Cspan class=\"fmstr-cmp-ffh-rel__arrow\" aria-hidden=\"true\">→\u003C\u002Fspan>\n\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fsection>\n","blog\u002Fblog\u002Fhow-to-make-feedback-form-in-html.md",{"text":179},"16 min read",{"title":181,"author":142,"authorImage":8,"authorProfile":182,"coverImg":183,"coverImgAlt":184,"createdAt":185,"description":186,"featured":14,"jsonld":187,"keywords":188,"metaDescription":189,"metaImage":190,"metaTitle":191,"publishedAt":192,"slug":193,"updatedAt":194,"__hash__":195,"body":196,"id":197,"coverImgWidth":135,"coverImgHeight":136,"readingStats":198},"10 Best Training Management Software","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fharish-kumar2424","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_3_52d087e909.png","a blog post cover about best training manangement software","2025-12-10T03:50:39.148Z","Discover the best training management software for blended learning, course management, and scalable training programs with detailed reviews and key features.",[],"training management software, \nbest training software,\ntraining management,","Find the best training management software for blended learning, course management, and scalable training programs with detailed reviews and key features.",[],"10 Best Training Management Software (2026)","2025-12-10T04:12:24.394Z","training-managment-software","2026-01-28T04:42:49.826Z","1CTz2u_9MnZLxuv5DC6KwUDEG4p_3cYBt881Kyeoo_A","![a blog post cover about best training manangement software](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_3_52d087e909.png)\n\n**[Training management software](https:\u002F\u002Fcognota.com\u002Fblog\u002Ftraining-management-system-tms\u002F)** helps you run training programs. It supports employee onboarding and meets compliance needs. It also improves skill development in your training organization. \n\nThese **top 10 picks come from user reviews on G2, Capterra, and TrustRadius.** You get great usability, cloud access, AI features, easy course management, and strong scalability. This is perfect for teams that want a modern training management system.\n\n### Why Choose Training Management Software\n\n**For a training management solution** that exceeds a basic learning management system. Many teams now want AI tools that personalize learning. They also expect mobile access for live online sessions. Reports should help you meet your goals.\n\nUsers say these platforms cut admin work by up to sixty percent. They do this through automation, sending emails, and connecting with HR tools like Rippling. If you use **[Formester](\u002F)**, these systems connect easily with forms for quizzes, registration pages, and blended learning.\n\n### 1. Absorb LMS\n![a screenshot of absorblms](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F190_c24f6870a1.png)\n**Absorb LMS supports** enterprise training programs. You can run onboarding, compliance training, instructor led training, and performance tracking in one place. It works well for teams that need a cloud based platform with strong analytics. Its AI predicts skill gaps so your team stays ready for change.\n \n Absorb offers AI personalization that recommends the next steps for each learner. Users like that it cuts admin work and speeds up delivery. **Many report** that it supports blended learning and offers a simple authoring tool for building courses.\n\n#### Absorb Standout Features and Integrations\n\n Beyond its learning management system, you get automated certification workflows, dashboards for ROI tracking, and support for videos, quizzes, gamification, and multimedia modules.\n\n It works with Workday, BambooHR, ADP, Slack, Microsoft Teams, and open APIs. These tools connect easily with Formester for registration and assessments.\n\n#### Pros\n\n - AI personalization\n\n - Strong analytics\n\n - Reliable support\n\n#### Cons\n\n- Pricing grows for small teams\n\n- Custom reports need time\n\n### 2. Docebo\n![a screenshot of docebo](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F191_6355b8869d.png)\n\n **Docebo helps you scale** learning programs across global teams. It fits companies that need a complete training management solution with AI support. It makes role based learning journeys simple to assign. Reviews praise its mobile access and smooth delivery across countries.\n\n### Docebo Standout Features and Integrations\n\n You get social learning, gamification, offline access, and strong reporting with skill matrices and engagement maps. It connects with Salesforce, Zoom, ADP, SuccessFactors, Zapier, and APIs for forms and events.\n\n### Pros\n\n - Engaging content\n\n - Mobile and social focus\n\n - Global scale\n\n### Cons\n\n - High starting price\n\n- Takes time to master advanced tools\n\n### 3. TalentLMS\n\n![a screenshot of talentlms](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F192_5cdc813d59.png)\n\n**TalentLMS gives you simple course management** that you can set up in hours. Users like that it helps small teams launch training programs without extra stress. Many say it boosts completion rates with light gamification and offers quick tools for building learning programs that fit busy schedules.\n\n#### TalentLMS Standout Features and Integrations\n\nBeyond its learning management system, you get SCORM support, custom branding, detailed progress tracking, and options for branching quizzes that shape each learner’s path. It also supports selling courses through eCommerce and offers mobile access for smooth blended learning.\n\nIt **works with** Google Workspace, Zapier, PayPal, HR platforms, and form embeds. These connections pair well with Formester for registration flows and course assessments.\n\n#### Pros\n\n - Fast setup\n\n - Strong gamification\n\n - Affordable\n\n#### Cons\n\n - Basic reporting\n\n - Fewer advanced AI features\n\n### 4. 360Learning\n![a screenshot of 360learning](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F193_6c91cb1241.png)\n\n**360Learning helps teams co create training programs quickly.** Users say the platform builds strong collaboration and speeds up onboarding. Many like that it supports blended learning and drives engagement through simple social tools.\n\n#### 360Learning Standout Features and Integrations\n\nBeyond its learning management system, you get live sessions, multimedia uploads, feedback loops, and analytics that track how teams learn together. These features help you improve each course through real learner input.\n\nIt works with Slack, Microsoft Teams, HR systems, and APIs that connect smoothly with Formester for sign ups and feedback forms.\n\n### Pros\n\n - Strong social learning\n\n - Good event support\n\n- Easy scale\n\n### Cons\n\n - Not ideal for heavy compliance\n\n - Needs active moderation\n\n### 5. iSpring Suite\n![a screenshot of ispringsuite](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F194_e24991049d.png)\n\n**iSpring Suite gives you an easy authoring tool** for building interactive courses without coding. Users like that it produces high quality content at a low cost. Many say it helps them create videos, quizzes, and scenarios faster than other tools.\n\n#### iSpring Suite Standout Features and Integrations\n\nBeyond its authoring tool, you get video editors, quiz builders, SCORM exports, and mobile ready modules. These tools help you create rich learning programs that you can use across different platforms.\n\nIt works with major LMS systems, Zoom, and **[open APIs](\u002Fblog\u002Fhow-to-pre-fill-forms-with-external-data-using-api\u002F)** that connect well with Formester for assessments and submissions.\n\n#### Pros\n\n- Great authoring tool\n\n- Rich media\n\n- Simple exports\n\n#### Cons\n\n Needs an LMS for delivery\n\n Limited tracking\n\n### 6. Litmos\n![a screenshot of litmos](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F195_6aff05d33b.png)\n\n**Litmos helps you run large scale training programs** with ease. Users like its huge course library and strong mobile access. Many say it helps them roll out training faster in teams that need ready made content.\n\n#### Litmos Standout Features and Integrations\n\nBeyond its learning management system, you get gamification, assessments, offline learning, and a wide library of pre built courses. These tools let learners train at their own pace while keeping track of progress.\n\nIt works with HRIS tools, Salesforce, and open APIs that connect well with Formester for registration and tracking.\n\n#### Pros\n\n - Large library\n\n - Strong mobile\n\n- Flexible integrations\n\n#### Cons\n\n-  Older interface\n\n-  Unclear pricing\n\n### 7. LearnUpon\n![a screenshot of learnupon](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F196_9d245db2be.png)\n\n**LearnUpon stands out for its automation.** Users say it makes certifications, enrollments, and learner management simple. Many like that it handles multiple portals and supports eCommerce for paid training programs.\n\n#### LearnUpon Standout Features and Integrations\n\nBeyond its learning management system, you get auto enrollments, portals for different groups, and detailed reports that help you track performance. These tools reduce admin time and help you build clear learning journeys.\n\nIt works with popular HR systems and other APIs that connect smoothly with Formester for course sign ups and assessments.\n\n#### Pros\n\n- Strong automation\n\n-  eCommerce tools\n\n-  Good portals\n\n#### Cons\n\n- Limited UI control\n\n - Support varies\n\n### 8. Cornerstone\n![a screenshot of cornerstone](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F197_7e85631002.png)\n\n**Cornerstone supports enterprises** that need strict compliance and global training programs. Users like its deep reporting and strong skill roadmaps. Many say it handles complex setups with long term scalability.\n\n#### Cornerstone Standout Features and Integrations\n\nBeyond its learning management system, you get audits, AI insights, career planning tools, and global compliance tracking. These tools help large teams stay aligned with organizational objectives.\n\nIt works with all major HR platforms and connects well with Formester for registrations and training evaluations.\n\n#### Pros\n\n-  Deep reports\n\n - Compliance focus\n\n - Scalable\n\n#### Cons\n\n - Complex setup\n\n - High cost\n\n### 9. Rippling\n\n![a screenshot of rippling](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F198_574e06b817.png)\n\n**Rippling brings HR, payroll, and training into one system.** Users say it helps them run training programs that connect smoothly with everyday HR workflows. Many like that it scales easily and reduces manual work.\n\n#### Rippling Standout Features and Integrations\n\nBeyond its training tools, you get unified dashboards, HR triggers, and automated workflows. These features help you assign training based on real time employee changes.\n\nIt works inside its own HR ecosystem and connects easily with Formester for forms that support onboarding and assessments.\n\n#### Pros\n\n - Full HR integration\n\n - Scales well\n\n - Easy to use\n\n#### Cons\n\n - Too large for training only\n\n - US heavy focus\n\n### 10. eloomi\n![a screenshot of eloomi](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002F199_46b0e4a2b2.png)\n\n**eloomi supports blended learning for teams** that want strong insights and accountability. Users say it improves engagement across online and face to face sessions. Many like its simple tracking and clear learning journeys.\n\n#### eloomi Standout Features and Integrations\n\nBeyond its learning management system, you get learning journeys, feedback tools, and analytics that show how each learner progresses. These tools help you improve both digital and live online training programs.\n\nIt works with HR and LMS platforms and connects well with Formester for sign ups, feedback, and assessments.\n\n#### Pros\n\n- Strong blended support\n\n- Insightful reports\n\n- Good accountability tools\n\n#### Cons\n\n- Less known\n\n- Unclear pricing\n\n### Summary\n\nChoosing the right **training management software** helps you deliver better learning programs, reduce admin work, and support real growth across your team. Each platform offers different strengths, but all aim to make training easier to build, run, and track. \n\nWhen you pair these tools with **[Formester](\u002Fuse-case\u002Fformester-for-training-and-assessments\u002F)** for registrations, quizzes, and assessments, you get a smoother workflow and a stronger learning experience for every learner.\n","blog\u002Fblog\u002Ftraining-managment-software.md",{"text":199},"8 min read",{"title":201,"author":142,"authorImage":8,"authorProfile":143,"coverImg":202,"coverImgAlt":203,"createdAt":204,"description":205,"featured":14,"jsonld":206,"keywords":207,"metaDescription":208,"metaImage":209,"metaTitle":210,"publishedAt":211,"slug":212,"updatedAt":213,"__hash__":214,"body":215,"id":216,"coverImgWidth":135,"coverImgHeight":136,"readingStats":217},"How to Create Online Section-Based Tests with Negative Markings","https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_49_a949c12212.png","a blog post cover about how to make online tests with negative marking and timer","2025-12-08T02:57:18.651Z","Create section based tests with timers and negative marking using Formester. Build fast, score smarter, and run clean, controlled assessments with ease.",[],"online section based test,\nonline quiz with negative marking,\nonline test with negative marking,\nonline assessment,\ntest maker,\n","Learn how to create section based tests with timers and negative marking using Formester. Build fast, and run clean, controlled assessments.",[],"Create Online Section-Based Tests with Negative Markings","2025-12-08T03:16:31.134Z","how-to-create-online-section-based-tests-and-quizzes-with-negative-scores-and-timer","2025-12-08T03:16:31.138Z","S9OTd9Su-ahJ6ZkXA-Pzp87tO-zVNCmg3dESrDjAsEw","![a blog post cover about how to make online tests with negative marking and timer](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002FHow_to_Make_User_Research_Survey_49_a949c12212.png)\n\nIf you want to run clean and controlled **[online assessments](\u002Ftemplates\u002Fcategories\u002Fquizzes\u002F)**, Formester gives you everything you need in one place. You can add sections, set timers, use negative marking, and even let the AI create questions for you. In this guide, you will learn **how to build a complete test** from start to finish using Formester.\n\n## Why You Should Create Online Assessments with Negative Marks and Timers\n\nYou can use negative marks and timers to keep your assessments fair and focused. A timer reduces cheating and pushes students to think clearly under pressure. **Negative marking** stops guesswork and shows you what they actually know. Together, they give you cleaner scores, stronger insights, and a more controlled testing environment. If you want results you can trust, these two features make your assessments more accurate and meaningful.\n\n### Step 1. Create Sections for Each Subject\n![a screenshot of formester's builder](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_builder_976a1755eb.png)\n\nStart by creating a **[new test in Formester](\u002Ftest-creator\u002F)**. For this sample test, create four sections. One for math, one for science, one for English, and one for reasoning. Each section will live on its own page so your students can focus on one subject at a time.\n\nWhen you open each page, you can add all your questions in that section. You do not have to write every question and answer by hand. Formester has **[AI quiz maker](\u002Fai-quiz-maker\u002F)** to help you create questions and answers in seconds.\n\n### Step 2. Use the AI to Add Questions Fast\n![a screenshot of formester's ai editor](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_ai_editor_7bc10e0565.png)\n\nOpen the **AI editor**. Enter a simple prompt such as **\"Add five single choice questions with answers on the topic of algebra\"**. When you run the prompt, the AI will generate all the questions and the correct answers inside your test.\n\nYou can edit the field label, change the options, make a question required, or switch the question type to single choice or multiple choice. When you are done reviewing the questions, accept the changes.\n\nRepeat this process for the rest of your subjects. For example, you can tell the AI to create five questions on environmental science. It will fill them in for you in a few seconds.\n\n### Step 3. Add Helpful Extras\n![a screenshot of formester's video embed field](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_video_embed_field_405fb5abc8.png)\n\nIf you teach live classes, you can embed your lecture video right inside the test using the **video field**. This helps you check how well students understood the lesson before they attempt the quiz.\n\n### Step 4. Set Up Your Scoring System\n![a screenshot of formester's score quiz feature](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_score_quiz_feature_f57e8f9c8d.png)\n\nNow it is time to add positive and negative scoring. Go to the Advanced tab and open **[Score Quiz](\u002Ffeatures\u002Fquiz-maker-features\u002F)**. You will see each question, each option, and a score variable in the middle. This score variable updates in real time based on the option the student selects.\n\nGive one point to the correct answer. Leave the other options at zero or give them negative one if you want to use negative marking. When a student picks the right option, the score becomes one. If they pick a wrong option, the value becomes zero or negative one based on your settings.\n\nYou can also recall this score variable in other questions using the **\"@ symbol\"**. You can also show the total score to the student at the end of the test.\n\nIf you want to guide your students further, you can toggle on **Show Feedback**. This shows them which answer is correct. If you do not want this feature, you can turn it off with one click.\n\n### Step 5. Add a Timer to the Test\n![a screenshot of formester's quiz timer feature](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_quiz_timer_feature_881bdcb347.png)\n\nTo add a timer, click the **gear icon**. Then open Form Behavior and scroll down to Timed Submissions. Turn it on and set the time for your test. You can choose hours, minutes, or even seconds. Also select which page starts the timer. For this example, set the timer to two hours and select page one as the starting page.\n\n### Step 6. Set Up the Final Score Display\n\nYou can show the total score to students in the thank you message. Just **recall the score variable** using the @ symbol. It will calculate the total score for you.\n\nYou can also **create multiple thank you pages**. Each page will show up based on the score range the student falls into. This gives a more personal and guided ending to the test.\n\n### Step 7. Test Your Assessment\n![a screenshot of formester's publish ui](https:\u002F\u002Fformester-strapi.s3.ap-south-1.amazonaws.com\u002Fa_screenshot_of_formester_s_publish_ui_eaef984322.png)\n\n**Publish your test** and try a test submission. Select all the correct answers and check the final score. Then take the test again and choose a few wrong answers. You will see the score drop. This tells you the negative marking system is working.\n\n### Step 8. Review Submissions\n\nTo see all responses, open the results tab. You can also track who submitted each response by adding a small required field at the start of the test. This could be a **student ID** or any other unique detail you want to collect.\n\n### Final Thoughts\n\nBuilding section based tests with a timer and negative marking becomes simple with Formester. You save time with AI generated questions, you stay in control with clear scoring rules, and you guide students better with smart feedback and timed assessments.\n\n**[Try these steps yourself](https:\u002F\u002Fapp.formester.com\u002Fusers\u002Fsign_up)** and see how smooth your assessments become with Formester.\n","blog\u002Fblog\u002Fhow-to-create-online-section-based-tests-and-quizzes-with-negative-scores-and-timer.md",{"text":218},"5 min read",1788363420030]