[{"data":1,"prerenderedAt":187},["ShallowReactive",2],{"page-responsive-form-builder":3},{"head":4,"jsonld":56,"components":144},{"title":5,"link":6,"meta":7},"Responsive Form Builder, Mobile First on Every Device",[],[8,11,14,16,19,22,24,26,29,32,34,37,39,41,43,45,48,51,53],{"property":9,"content":10},"article:modified_time","2026-06-13T11:25:00.923Z",{"hid":12,"name":12,"content":13},"description","Build forms that fit every screen, phone to desktop, with no CSS work. Touch-ready inputs, adaptive layouts, and live multi-viewport preview.",{"hid":15,"name":15,"content":5},"og:site_name",{"hid":17,"property":17,"content":18},"og:type","website",{"hid":20,"property":20,"content":21},"og:url","https://formester.com/responsive-form-builder/",{"hid":23,"property":23,"content":5},"og:title",{"hid":25,"property":25,"content":13},"og:description",{"hid":27,"property":27,"content":28},"og:image","https://formester.com/formester-logo-meta-image.png",{"hid":30,"name":30,"content":31},"og:image:alt","Formester Logo",{"hid":33,"name":33,"content":21},"twitter:url",{"name":35,"content":36},"twitter:site","@_formester_",{"hid":38,"name":38,"content":5},"twitter:title",{"hid":40,"name":40,"content":13},"twitter:description",{"hid":42,"name":42,"content":28},"twitter:image",{"hid":44,"name":44,"content":31},"twitter:image:alt",{"hid":46,"name":46,"content":47},"twitter:card","summary_large_image",{"hid":49,"name":49,"content":50},"apple-mobile-web-app-title","Formester",{"hid":52,"name":52,"property":27,"content":28},"image",{"hid":54,"name":54,"content":55},"keywords",[],[57],{"@graph":58,"@context":143},[59,67,77,105],{"@id":60,"url":21,"name":5,"@type":61,"headline":5,"isPartOf":62,"breadcrumb":64,"inLanguage":66,"description":13},"https://formester.com/responsive-form-builder/#webpage","WebPage",{"@id":63},"https://formester.com/#website",{"@id":65},"https://formester.com/responsive-form-builder/#breadcrumb","en-US",{"@id":65,"@type":68,"itemListElement":69},"BreadcrumbList",[70,75],{"item":71,"name":72,"@type":73,"position":74},"https://formester.com/","Home","ListItem",1,{"item":21,"name":5,"@type":73,"position":76},2,{"@id":78,"url":21,"name":79,"@type":80,"offers":81,"publisher":92,"description":97,"aggregateRating":98,"operatingSystem":103,"applicationCategory":104},"https://formester.com/responsive-form-builder/#software","Formester Responsive Form Builder","SoftwareApplication",[82,89],{"url":83,"name":84,"@type":85,"price":86,"availability":87,"priceCurrency":88},"https://formester.com/pricing/","Free","Offer","0","https://schema.org/InStock","USD",{"url":83,"name":90,"@type":85,"price":91,"availability":87,"priceCurrency":88},"Personal","12",{"url":71,"logo":93,"name":50,"@type":96},{"url":94,"@type":95},"https://formester.com/logo.png","ImageObject","Organization","Build mobile-first forms with no CSS. 44px touch targets, WCAG 2.1 AA accessibility, fluid scaling from 320px to 1440px viewports, live preview at every breakpoint.",{"@type":99,"bestRating":100,"ratingCount":101,"ratingValue":102},"AggregateRating","5","11","4.7","Web, iOS, Android","BusinessApplication",{"@id":106,"@type":107,"mainEntity":108},"https://formester.com/responsive-form-builder/#faq","FAQPage",[109,115,119,123,127,131,135,139],{"name":110,"@type":111,"acceptedAnswer":112},"Do I need to write any CSS to make forms responsive?","Question",{"text":113,"@type":114},"No. Every Formester theme is responsive out of the box. Fields auto-stack, fonts scale, and touch targets are sized correctly without you opening the CSS panel. If you want to override anything, custom CSS is available on Personal and above.","Answer",{"name":116,"@type":111,"acceptedAnswer":117},"What's the smallest screen Formester forms support?",{"text":118,"@type":114},"Forms render cleanly down to 320px wide, which covers every modern smartphone in portrait mode, including older iPhones and entry-level Android devices.",{"name":120,"@type":111,"acceptedAnswer":121},"How do conditional fields behave on mobile?",{"text":122,"@type":114},"When a field is shown or hidden by logic, the layout reflows smoothly. No gap is left behind, the viewport does not jump, and the scroll position is preserved so the respondent never loses their place.",{"name":124,"@type":111,"acceptedAnswer":125},"Can I preview the form at different screen sizes before publishing?",{"text":126,"@type":114},"Yes. The builder has a viewport toggle for phone (375px), tablet (768px), and desktop (1440px). Each preview is a live render of the actual form, not a static mockup.",{"name":128,"@type":111,"acceptedAnswer":129},"How does the form perform on a slow 4G connection?",{"text":130,"@type":114},"Forms are served via the Cloudflare CDN and built with a lightweight render path, so first contentful paint typically lands under two seconds on a 4G connection. Heavy themes are not allowed by the builder, so you cannot accidentally ship a slow form.",{"name":132,"@type":111,"acceptedAnswer":133},"Are file uploads reliable on mobile?",{"text":134,"@type":114},"Yes. The File Upload field supports direct camera capture, multi-file selection, and configurable size limits up to 1GB on Personal and 50GB on Business. Uploads are chunked, so a flaky mobile connection does not force a full restart.",{"name":136,"@type":111,"acceptedAnswer":137},"Does the form work in landscape mode?",{"text":138,"@type":114},"Yes. The layout switches to a wider single-column or multi-column arrangement depending on the device width in landscape, and the on-screen keyboard does not cover the active field.",{"name":140,"@type":111,"acceptedAnswer":141},"How accessible is the form to screen reader users?",{"text":142,"@type":114},"Every field carries an ARIA label, errors are announced inline, focus order is logical, and color contrast meets WCAG 2.1 AA. Forms are tested with VoiceOver on iOS and TalkBack on Android.","https://schema.org",[145,150,157,160,163,166,169,172,175,178,181,184],{"id":146,"__component":147,"markup":148,"useContainer":149},794,"micro-components.raw-html","\u003Cstyle>\n.fmstr-cmp-rfb-hero a { text-decoration: none !important; }\n.fmstr-cmp-rfb-hero { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586; --c-violet-100: #ede4ff; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-success: #12b76a; --c-border: #eaecf0; --c-shadow-sm: 0 1px 3px rgba(16,24,40,.05); --c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.18), 0 8px 20px -8px rgba(16,24,40,.08); background: radial-gradient(ellipse at top left, var(--c-tint) 0%, #fff 55%); padding: 88px 24px 80px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); position: relative; }\n.fmstr-cmp-rfb-hero *, .fmstr-cmp-rfb-hero *::before, .fmstr-cmp-rfb-hero *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-hero > *, .fmstr-cmp-rfb-hero > * > * { min-width: 0; }\n.fmstr-cmp-rfb-hero__container { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }\n.fmstr-cmp-rfb-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-edge); color: var(--c-violet-700); font-size: 13px; font-weight: 600; margin-bottom: 22px; box-shadow: var(--c-shadow-sm); }\n.fmstr-cmp-rfb-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-violet-500); }\n.fmstr-cmp-rfb-hero__h1 { margin: 0 0 18px; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.07; letter-spacing: -0.028em; font-weight: 700; }\n.fmstr-cmp-rfb-hero__h1-accent { background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-violet-600); }\n.fmstr-cmp-rfb-hero__sub { margin: 0 0 32px; max-width: 540px; font-size: 18px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-hero__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }\n.fmstr-cmp-rfb-hero__cta-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 10px; background: var(--c-violet-500) !important; color: #fff !important; font-weight: 600; font-size: 15.5px; border: 1px solid var(--c-violet-500); box-shadow: 0 6px 16px rgba(127,86,217,.25); }\n.fmstr-cmp-rfb-hero__cta-primary:hover { background: var(--c-violet-700) !important; }\n.fmstr-cmp-rfb-hero__cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 10px; background: #fff !important; color: var(--c-fg-1) !important; font-weight: 600; font-size: 15.5px; border: 1px solid var(--c-border); }\n.fmstr-cmp-rfb-hero__cta-secondary:hover { border-color: var(--c-violet-500); color: var(--c-violet-700) !important; }\n.fmstr-cmp-rfb-hero__trust { display: flex; flex-wrap: wrap; gap: 16px 28px; font-size: 13px; color: var(--c-fg-3); }\n.fmstr-cmp-rfb-hero__trust-item { display: inline-flex; align-items: center; gap: 6px; }\n.fmstr-cmp-rfb-hero__trust-check { color: var(--c-success); }\n/* Right: 3 device frames */\n.fmstr-cmp-rfb-hero__visual { position: relative; display: grid; grid-template-columns: 80px 1fr 1.4fr; grid-template-rows: auto; gap: 14px; align-items: end; }\n.fmstr-cmp-rfb-hero__device { background: #fff; border: 2px solid var(--c-fg-1); border-radius: 24px; padding: 10px; box-shadow: var(--c-shadow-lg); position: relative; }\n.fmstr-cmp-rfb-hero__device-screen { background: #fff; border-radius: 14px; overflow: hidden; }\n.fmstr-cmp-rfb-hero__device-label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); padding: 3px 9px; background: var(--c-violet-700); color: #fff; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }\n.fmstr-cmp-rfb-hero__device--phone { padding: 6px; border-radius: 16px; }\n.fmstr-cmp-rfb-hero__device--phone .fmstr-cmp-rfb-hero__device-screen { padding: 8px; }\n.fmstr-cmp-rfb-hero__device--tablet { padding: 7px; border-radius: 18px; }\n.fmstr-cmp-rfb-hero__device--tablet .fmstr-cmp-rfb-hero__device-screen { padding: 9px; }\n.fmstr-cmp-rfb-hero__device--desk .fmstr-cmp-rfb-hero__device-screen { padding: 14px; }\n.fmstr-cmp-rfb-hero__device--desk::before { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 8px; background: var(--c-fg-1); border-radius: 0 0 8px 8px; }\n.fmstr-cmp-rfb-hero__mini-h { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--c-border); font-size: 8.5px; color: var(--c-fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }\n.fmstr-cmp-rfb-hero__mini-h-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-success); }\n.fmstr-cmp-rfb-hero__field { background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 5px; padding: 4px 6px; font-size: 8px; color: var(--c-fg-1); margin-bottom: 4px; line-height: 1.3; }\n.fmstr-cmp-rfb-hero__device--tablet .fmstr-cmp-rfb-hero__field { font-size: 9px; padding: 6px 8px; margin-bottom: 5px; }\n.fmstr-cmp-rfb-hero__device--desk .fmstr-cmp-rfb-hero__field { font-size: 10px; padding: 8px 10px; margin-bottom: 6px; }\n.fmstr-cmp-rfb-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.fmstr-cmp-rfb-hero__device--desk .fmstr-cmp-rfb-hero__row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }\n.fmstr-cmp-rfb-hero__cta { background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); color: #fff; text-align: center; border-radius: 5px; padding: 5px; font-size: 8.5px; font-weight: 800; }\n.fmstr-cmp-rfb-hero__device--tablet .fmstr-cmp-rfb-hero__cta { font-size: 10px; padding: 7px; }\n.fmstr-cmp-rfb-hero__device--desk .fmstr-cmp-rfb-hero__cta { font-size: 11px; padding: 9px; }\n@media (max-width: 980px) {\n.fmstr-cmp-rfb-hero__container { grid-template-columns: 1fr; gap: 48px; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-rfb-hero { padding: 80px 16px 56px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-rfb-hero__ctas { flex-direction: column; align-items: stretch; }\n.fmstr-cmp-rfb-hero__cta-primary, .fmstr-cmp-rfb-hero__cta-secondary { justify-content: center; }\n.fmstr-cmp-rfb-hero__visual { grid-template-columns: 1fr; gap: 28px; }\n}\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-hero\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__content\">\n\u003Cspan class=\"fmstr-cmp-rfb-hero__badge\">\u003Cspan class=\"fmstr-cmp-rfb-hero__badge-dot\">\u003C/span>Free forever. No CSS required.\u003C/span>\n\u003Ch1 class=\"fmstr-cmp-rfb-hero__h1\">Responsive form builder \u003Cspan class=\"fmstr-cmp-rfb-hero__h1-accent\">that fits every screen\u003C/span>\u003C/h1>\n\u003Cp class=\"fmstr-cmp-rfb-hero__sub\">Build once, ship everywhere. Your form renders crisp on a 360px phone, a folded tablet, and a 27 inch monitor without you touching a line of CSS.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__ctas\">\n\u003Ca class=\"fmstr-cmp-rfb-hero__cta-primary\" href=\"https://app.formester.com/users/sign_up\">Start building free\u003C/a>\n\u003Ca class=\"fmstr-cmp-rfb-hero__cta-secondary\" href=\"#viewport-preview\">See the live mobile preview\u003C/a>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__trust\">\n\u003Cspan class=\"fmstr-cmp-rfb-hero__trust-item\">\u003Csvg class=\"fmstr-cmp-rfb-hero__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\"/>\u003C/svg>Mobile-first by default\u003C/span>\n\u003Cspan class=\"fmstr-cmp-rfb-hero__trust-item\">\u003Csvg class=\"fmstr-cmp-rfb-hero__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\"/>\u003C/svg>WCAG 2.1 AA out of the box\u003C/span>\n\u003Cspan class=\"fmstr-cmp-rfb-hero__trust-item\">\u003Csvg class=\"fmstr-cmp-rfb-hero__trust-check\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"20 6 9 17 4 12\"/>\u003C/svg>44px touch targets\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device fmstr-cmp-rfb-hero__device--phone\">\n\u003Cspan class=\"fmstr-cmp-rfb-hero__device-label\">PHONE · 375PX\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device-screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-hero__mini-h-dot\">\u003C/span>RSVP\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Name\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Email\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Date\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__cta\">Submit\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device fmstr-cmp-rfb-hero__device--tablet\">\n\u003Cspan class=\"fmstr-cmp-rfb-hero__device-label\">TABLET · 768PX\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device-screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-hero__mini-h-dot\">\u003C/span>EVENT REGISTRATION\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__row\">\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">First name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Last name\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Email address\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__row\">\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Phone\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Date\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Dietary\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__cta\">Register\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device fmstr-cmp-rfb-hero__device--desk\">\n\u003Cspan class=\"fmstr-cmp-rfb-hero__device-label\">DESKTOP · 1440PX\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__device-screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-hero__mini-h-dot\">\u003C/span>ENTERPRISE INTAKE\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__row\">\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">First name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Last name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Title\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__row\">\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Company\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Industry\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Headcount\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__row\">\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Work email\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Phone\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">Country\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__field\">What do you need from Formester this quarter?\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-hero__cta\">Submit enquiry\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",false,{"id":151,"__component":152,"label":153,"heading":154,"description":154,"showTrustBadges":149,"rawHtml":154,"title":155,"logos":156},600,"macro-components.trust-seals","Trusted by leading organisations",null,[],[],{"id":158,"__component":147,"markup":159,"useContainer":149},795,"\u003Cstyle>\n.fmstr-cmp-rfb-why { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586; --c-violet-100: #ede4ff; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-danger: #f04438; --c-warning: #f59e0b; --c-border: #eaecf0; background: var(--c-soft); padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-why *, .fmstr-cmp-rfb-why *::before, .fmstr-cmp-rfb-why *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-why > *, .fmstr-cmp-rfb-why > * > * { min-width: 0; }\n.fmstr-cmp-rfb-why__container { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }\n.fmstr-cmp-rfb-why__copy h2 { margin: 0 0 16px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-why__lede { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-why__lede a { color: var(--c-violet-700); border-bottom: 1px solid var(--c-edge); }\n.fmstr-cmp-rfb-why__pain-h { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #fef3f2; color: #b42318; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }\n.fmstr-cmp-rfb-why__pain-h-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-danger); }\n.fmstr-cmp-rfb-why__pain { display: flex; flex-direction: column; gap: 10px; }\n.fmstr-cmp-rfb-why__pain-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #fee4e2; border-radius: 11px; }\n.fmstr-cmp-rfb-why__pain-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #fef3f2; color: var(--c-danger); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }\n.fmstr-cmp-rfb-why__pain-icon svg { width: 14px; height: 14px; }\n.fmstr-cmp-rfb-why__pain-row strong { color: var(--c-fg-1); font-weight: 700; display: block; margin-bottom: 2px; font-size: 14.5px; }\n.fmstr-cmp-rfb-why__pain-row span { font-size: 13.5px; line-height: 1.5; color: var(--c-fg-2); }\n\n/* Right side: stat + pipeline visual */\n.fmstr-cmp-rfb-why__visual { display: flex; flex-direction: column; gap: 18px; }\n.fmstr-cmp-rfb-why__stat { padding: 36px 32px; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; box-shadow: 0 8px 24px rgba(16,24,40,.06); text-align: center; position: relative; overflow: hidden; }\n.fmstr-cmp-rfb-why__stat::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: var(--c-tint); border-radius: 50%; }\n.fmstr-cmp-rfb-why__stat-num { position: relative; font-size: clamp(54px, 7vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }\n.fmstr-cmp-rfb-why__stat-label { position: relative; margin: 12px 0 4px; font-size: 16px; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-why__stat-src { position: relative; font-size: 12.5px; color: var(--c-fg-3); line-height: 1.55; margin: 0; }\n.fmstr-cmp-rfb-why__stat-src a { color: var(--c-violet-700); border-bottom: 1px solid var(--c-edge); }\n\n/* Split-bar pipeline visual */\n.fmstr-cmp-rfb-why__pipe { padding: 22px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; }\n.fmstr-cmp-rfb-why__pipe-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 11.5px; font-weight: 700; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; }\n.fmstr-cmp-rfb-why__pipe-bar { height: 14px; background: var(--c-soft); border-radius: 999px; display: flex; overflow: hidden; }\n.fmstr-cmp-rfb-why__pipe-segment { height: 100%; }\n.fmstr-cmp-rfb-why__pipe-segment--mobile { background: linear-gradient(90deg, var(--c-violet-500), var(--c-violet-700)); flex: 70; }\n.fmstr-cmp-rfb-why__pipe-segment--desktop { background: var(--c-violet-100); flex: 30; }\n.fmstr-cmp-rfb-why__pipe-legend { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 12.5px; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-why__pipe-legend strong { color: var(--c-fg-1); font-weight: 700; }\n.fmstr-cmp-rfb-why__pipe-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }\n.fmstr-cmp-rfb-why__pipe-legend-dot--m { background: var(--c-violet-700); }\n.fmstr-cmp-rfb-why__pipe-legend-dot--d { background: var(--c-violet-100); border: 1px solid var(--c-edge); }\n\n@media (max-width: 880px) { .fmstr-cmp-rfb-why { padding: 64px 18px; } .fmstr-cmp-rfb-why__container { grid-template-columns: 1fr; gap: 32px; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-why\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__copy\">\n\u003Ch2>Mobile is the first screen, not the second\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-why__lede\">\u003Ca href=\"https://www.statista.com/topics/779/mobile-internet/\">Statista's 2025 internet usage report\u003C/a> puts mobile over 60% of global web traffic, and form submission data tracks the same curve. If your form was designed on a 1440px laptop, you are losing half your pipeline before the first field is filled.\u003C/p>\n\u003Cp class=\"fmstr-cmp-rfb-why__pain-h\">\u003Cspan class=\"fmstr-cmp-rfb-why__pain-h-dot\">\u003C/span>The silent drop-off pattern\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pain\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pain-row\">\u003Cspan class=\"fmstr-cmp-rfb-why__pain-icon\">\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"8\" cy=\"8\" r=\"3\"/>\u003Cpath d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Cstrong>Pinch zoom on every tap\u003C/strong>\u003Cspan>Friction compounds. Respondents bail by field 3.\u003C/span>\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pain-row\">\u003Cspan class=\"fmstr-cmp-rfb-why__pain-icon\">\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M2 8h12M11 5l3 3-3 3\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Cstrong>Horizontal scroll on overflow fields\u003C/strong>\u003Cspan>The submit button hides off-screen, completion stalls.\u003C/span>\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pain-row\">\u003Cspan class=\"fmstr-cmp-rfb-why__pain-icon\">\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"2\" y=\"10\" width=\"12\" height=\"4\" rx=\"1\"/>\u003Cpath d=\"M5 5l3 3 3-3\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Cstrong>Dropdowns under a sticky keyboard\u003C/strong>\u003Cspan>The respondent cannot see what they tapped. They give up.\u003C/span>\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pain-row\">\u003Cspan class=\"fmstr-cmp-rfb-why__pain-icon\">\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"8\" cy=\"8\" r=\"6\"/>\u003Cpath d=\"M5 8h6\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Cstrong>None of this shows up as an error\u003C/strong>\u003Cspan>It surfaces as a flat conversion rate you cannot explain.\u003C/span>\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-rfb-why__visual\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__stat\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__stat-num\">70%+\u003C/div>\n\u003Cp class=\"fmstr-cmp-rfb-why__stat-label\">of form submissions now happen on mobile\u003C/p>\n\u003Cp class=\"fmstr-cmp-rfb-why__stat-src\">Source: \u003Ca href=\"https://www.statista.com/topics/779/mobile-internet/\">Statista, mobile internet topic, 2025\u003C/a>\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pipe\">\n\u003Cp class=\"fmstr-cmp-rfb-why__pipe-h\">\u003Cspan>Your pipeline · by device\u003C/span>\u003Cspan>2025\u003C/span>\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pipe-bar\">\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pipe-segment fmstr-cmp-rfb-why__pipe-segment--mobile\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pipe-segment fmstr-cmp-rfb-why__pipe-segment--desktop\">\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-why__pipe-legend\">\n\u003Cspan>\u003Cspan class=\"fmstr-cmp-rfb-why__pipe-legend-dot fmstr-cmp-rfb-why__pipe-legend-dot--m\">\u003C/span>\u003Cstrong>70%\u003C/strong> Mobile\u003C/span>\n\u003Cspan>\u003Cspan class=\"fmstr-cmp-rfb-why__pipe-legend-dot fmstr-cmp-rfb-why__pipe-legend-dot--d\">\u003C/span>\u003Cstrong>30%\u003C/strong> Desktop\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":161,"__component":147,"markup":162,"useContainer":149},797,"\u003Cstyle>\n.fmstr-cmp-rfb-how { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-violet-100: #ede4ff; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-border: #eaecf0; background: #fff; padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-how *, .fmstr-cmp-rfb-how *::before, .fmstr-cmp-rfb-how *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-how > *, .fmstr-cmp-rfb-how > * > * { min-width: 0; }\n.fmstr-cmp-rfb-how__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-rfb-how__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-rfb-how__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-how__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-how__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }\n.fmstr-cmp-rfb-how__card { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 16px; transition: border-color .2s ease, transform .2s ease; }\n.fmstr-cmp-rfb-how__card:hover { border-color: var(--c-edge); transform: translateY(-2px); }\n.fmstr-cmp-rfb-how__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }\n.fmstr-cmp-rfb-how__icon svg { width: 22px; height: 22px; }\n.fmstr-cmp-rfb-how__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--c-fg-1); line-height: 1.3; }\n.fmstr-cmp-rfb-how__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-how__zero { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #ecfdf3; color: #027a48; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; align-self: flex-start; }\n@media (max-width: 720px) { .fmstr-cmp-rfb-how { padding: 64px 18px; } .fmstr-cmp-rfb-how__grid { grid-template-columns: 1fr; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-how\">\n\u003Cdiv class=\"fmstr-cmp-rfb-how__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-how__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-how__h2\">Four things happen automatically\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-how__sub\">With zero configuration. You do not open a CSS panel.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-how__grid\">\n\u003Cdiv class=\"fmstr-cmp-rfb-how__card\">\u003Cdiv class=\"fmstr-cmp-rfb-how__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"/>\u003Cline x1=\"12\" y1=\"18\" x2=\"12\" y2=\"18\"/>\u003C/svg>\u003C/div>\u003Ch3 class=\"fmstr-cmp-rfb-how__title\">Fields auto-stack on small viewports\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-how__body\">A 3-column layout on desktop collapses to a single clean column on phone. No truncated labels, no overlapping inputs, no horizontal scroll.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-how__card\">\u003Cdiv class=\"fmstr-cmp-rfb-how__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 7V5h16v2M10 19h4M12 5v14\"/>\u003C/svg>\u003C/div>\u003Ch3 class=\"fmstr-cmp-rfb-how__title\">Typography scales with the viewport\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-how__body\">Headings, labels, and helper text resize fluidly between breakpoints, so a 14px input on phone reads as a comfortable 16px on tablet and 18px on desktop, without three separate stylesheets.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-how__card\">\u003Cdiv class=\"fmstr-cmp-rfb-how__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\"/>\u003Cpath d=\"M12 7v5l3 2\"/>\u003C/svg>\u003C/div>\u003Ch3 class=\"fmstr-cmp-rfb-how__title\">Touch targets meet the 44px minimum\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-how__body\">Buttons, checkboxes, radio inputs, and the submit CTA are all sized to Apple HIG and WCAG guidance, so thumbs hit the right control on the first try.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-how__card\">\u003Cdiv class=\"fmstr-cmp-rfb-how__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 7h6l4 5-4 5H4M14 12h6\"/>\u003C/svg>\u003C/div>\u003Ch3 class=\"fmstr-cmp-rfb-how__title\">Conditional fields collapse cleanly on mobile\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-how__body\">When a question is hidden by logic, the layout reflows without leaving a dead gap or a sudden viewport jump that loses the respondent's place.\u003C/p>\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":164,"__component":147,"markup":165,"useContainer":149},796,"\u003Cstyle>\n.fmstr-cmp-rfb-vp { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586; --c-violet-100: #ede4ff; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-success: #12b76a; --c-border: #eaecf0; background: var(--c-soft); padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-vp *, .fmstr-cmp-rfb-vp *::before, .fmstr-cmp-rfb-vp *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-vp > *, .fmstr-cmp-rfb-vp > * > * { min-width: 0; }\n.fmstr-cmp-rfb-vp__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-rfb-vp__header { max-width: 760px; margin: 0 auto 40px; text-align: center; }\n.fmstr-cmp-rfb-vp__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-vp__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n/* Hide radio inputs visually but keep them functional */\n.fmstr-cmp-rfb-vp__radio { position: absolute; opacity: 0; pointer-events: none; }\n\n/* Toolbar */\n.fmstr-cmp-rfb-vp__toolbar-wrap { display: flex; justify-content: center; margin-bottom: 32px; }\n.fmstr-cmp-rfb-vp__toolbar { display: inline-flex; padding: 5px; background: #fff; border: 1px solid var(--c-border); border-radius: 999px; gap: 4px; box-shadow: 0 1px 3px rgba(16,24,40,.04); }\n.fmstr-cmp-rfb-vp__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--c-fg-3); cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; user-select: none; }\n.fmstr-cmp-rfb-vp__btn:hover { color: var(--c-violet-700); }\n.fmstr-cmp-rfb-vp__btn:active { transform: scale(.97); }\n.fmstr-cmp-rfb-vp__btn svg { width: 16px; height: 16px; flex-shrink: 0; }\n\n/* Active state via :checked ~ (inputs must be direct siblings of __toolbar-wrap and __stage) */\n.fmstr-cmp-rfb-vp__r-phone:checked ~ .fmstr-cmp-rfb-vp__toolbar-wrap .fmstr-cmp-rfb-vp__btn--phone,\n.fmstr-cmp-rfb-vp__r-tablet:checked ~ .fmstr-cmp-rfb-vp__toolbar-wrap .fmstr-cmp-rfb-vp__btn--tablet,\n.fmstr-cmp-rfb-vp__r-desktop:checked ~ .fmstr-cmp-rfb-vp__toolbar-wrap .fmstr-cmp-rfb-vp__btn--desktop {\nbackground: var(--c-violet-700); color: #fff;\n}\n\n/* Stage area */\n.fmstr-cmp-rfb-vp__stage { max-width: 940px; margin: 0 auto; }\n.fmstr-cmp-rfb-vp__panel { display: none; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 32px; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; box-shadow: 0 8px 24px rgba(16,24,40,.06); }\n.fmstr-cmp-rfb-vp__r-phone:checked ~ .fmstr-cmp-rfb-vp__stage .fmstr-cmp-rfb-vp__panel--phone,\n.fmstr-cmp-rfb-vp__r-tablet:checked ~ .fmstr-cmp-rfb-vp__stage .fmstr-cmp-rfb-vp__panel--tablet,\n.fmstr-cmp-rfb-vp__r-desktop:checked ~ .fmstr-cmp-rfb-vp__stage .fmstr-cmp-rfb-vp__panel--desktop {\ndisplay: grid;\n}\n\n.fmstr-cmp-rfb-vp__copy { display: flex; flex-direction: column; gap: 14px; }\n.fmstr-cmp-rfb-vp__meta { display: inline-flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }\n.fmstr-cmp-rfb-vp__tag { padding: 3px 10px; border-radius: 999px; background: var(--c-tint); color: var(--c-violet-700); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }\n.fmstr-cmp-rfb-vp__w { font-size: 14px; color: var(--c-fg-3); font-weight: 700; }\n.fmstr-cmp-rfb-vp__title { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }\n.fmstr-cmp-rfb-vp__body { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-vp__checks { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }\n.fmstr-cmp-rfb-vp__checks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-vp__checks li svg { width: 14px; height: 14px; color: var(--c-success); flex-shrink: 0; }\n\n/* Visual: form mockup at each viewport */\n.fmstr-cmp-rfb-vp__visual { display: flex; align-items: center; justify-content: center; }\n.fmstr-cmp-rfb-vp__device { background: #1d1d20; border-radius: 24px; padding: 10px; box-shadow: 0 20px 50px -12px rgba(16,24,40,.18); position: relative; }\n.fmstr-cmp-rfb-vp__device--phone { width: 220px; border-radius: 28px; padding: 10px; }\n.fmstr-cmp-rfb-vp__device--tablet { width: 340px; border-radius: 20px; padding: 12px; }\n.fmstr-cmp-rfb-vp__device--desktop { width: 100%; max-width: 460px; border-radius: 14px; padding: 12px 12px 22px; }\n.fmstr-cmp-rfb-vp__device--desktop::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 8px; background: #1d1d20; border-radius: 0 0 10px 10px; }\n.fmstr-cmp-rfb-vp__screen { background: #fff; border-radius: 14px; padding: 14px; position: relative; }\n.fmstr-cmp-rfb-vp__device--tablet .fmstr-cmp-rfb-vp__screen { padding: 16px; }\n.fmstr-cmp-rfb-vp__device--desktop .fmstr-cmp-rfb-vp__screen { padding: 16px 18px; border-radius: 8px; }\n.fmstr-cmp-rfb-vp__mini-h { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--c-border); font-size: 9px; color: var(--c-fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }\n.fmstr-cmp-rfb-vp__device--tablet .fmstr-cmp-rfb-vp__mini-h, .fmstr-cmp-rfb-vp__device--desktop .fmstr-cmp-rfb-vp__mini-h { font-size: 10px; }\n.fmstr-cmp-rfb-vp__mini-h-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-success); }\n.fmstr-cmp-rfb-vp__field { background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 5px; padding: 5px 7px; font-size: 8px; color: var(--c-fg-1); margin-bottom: 4px; line-height: 1.3; }\n.fmstr-cmp-rfb-vp__device--tablet .fmstr-cmp-rfb-vp__field { font-size: 9.5px; padding: 6px 8px; margin-bottom: 5px; }\n.fmstr-cmp-rfb-vp__device--desktop .fmstr-cmp-rfb-vp__field { font-size: 10.5px; padding: 7px 9px; margin-bottom: 6px; }\n.fmstr-cmp-rfb-vp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.fmstr-cmp-rfb-vp__device--desktop .fmstr-cmp-rfb-vp__row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }\n.fmstr-cmp-rfb-vp__cta { background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); color: #fff; text-align: center; border-radius: 5px; padding: 5px; font-size: 8.5px; font-weight: 800; margin-top: 4px; }\n.fmstr-cmp-rfb-vp__device--tablet .fmstr-cmp-rfb-vp__cta { font-size: 10px; padding: 7px; }\n.fmstr-cmp-rfb-vp__device--desktop .fmstr-cmp-rfb-vp__cta { font-size: 11px; padding: 9px; }\n\n.fmstr-cmp-rfb-vp__foot { margin: 32px auto 0; padding: 18px 24px; background: #fff; border: 1px dashed var(--c-edge); border-radius: 12px; font-size: 14.5px; line-height: 1.55; color: var(--c-fg-2); text-align: center; max-width: 760px; }\n.fmstr-cmp-rfb-vp__foot strong { color: var(--c-fg-1); font-weight: 600; }\n\n@media (max-width: 720px) {\n.fmstr-cmp-rfb-vp { padding: 64px 16px; }\n.fmstr-cmp-rfb-vp__panel { grid-template-columns: 1fr; gap: 24px; padding: 22px; }\n.fmstr-cmp-rfb-vp__device--phone { width: 180px; }\n.fmstr-cmp-rfb-vp__device--tablet { width: 260px; }\n.fmstr-cmp-rfb-vp__btn { padding: 8px 14px; font-size: 12.5px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-rfb-vp\" id=\"viewport-preview\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__container\">\n\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-vp__h2\">Live preview at every viewport\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-vp__sub\">Click a device to see how the same form renders at that width.\u003C/p>\n\u003C/div>\n\n\u003Cinput type=\"radio\" name=\"fmstr-cmp-rfb-vp-pick\" id=\"fmstr-cmp-rfb-vp-phone\" class=\"fmstr-cmp-rfb-vp__radio fmstr-cmp-rfb-vp__r-phone\" checked>\n\u003Cinput type=\"radio\" name=\"fmstr-cmp-rfb-vp-pick\" id=\"fmstr-cmp-rfb-vp-tablet\" class=\"fmstr-cmp-rfb-vp__radio fmstr-cmp-rfb-vp__r-tablet\">\n\u003Cinput type=\"radio\" name=\"fmstr-cmp-rfb-vp-pick\" id=\"fmstr-cmp-rfb-vp-desktop\" class=\"fmstr-cmp-rfb-vp__radio fmstr-cmp-rfb-vp__r-desktop\">\n\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__toolbar-wrap\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__toolbar\" role=\"tablist\" aria-label=\"Viewport modes\">\n\u003Clabel for=\"fmstr-cmp-rfb-vp-phone\" class=\"fmstr-cmp-rfb-vp__btn fmstr-cmp-rfb-vp__btn--phone\" role=\"tab\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"7\" y=\"2\" width=\"10\" height=\"20\" rx=\"2\"/>\u003Cline x1=\"12\" y1=\"18\" x2=\"12\" y2=\"18\"/>\u003C/svg>\nPhone\n\u003C/label>\n\u003Clabel for=\"fmstr-cmp-rfb-vp-tablet\" class=\"fmstr-cmp-rfb-vp__btn fmstr-cmp-rfb-vp__btn--tablet\" role=\"tab\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"4\" y=\"3\" width=\"16\" height=\"18\" rx=\"2\"/>\u003Cline x1=\"12\" y1=\"18\" x2=\"12\" y2=\"18\"/>\u003C/svg>\nTablet\n\u003C/label>\n\u003Clabel for=\"fmstr-cmp-rfb-vp-desktop\" class=\"fmstr-cmp-rfb-vp__btn fmstr-cmp-rfb-vp__btn--desktop\" role=\"tab\">\n\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"2\" y=\"4\" width=\"20\" height=\"13\" rx=\"2\"/>\u003Cpath d=\"M9 21h6M12 17v4M2 14h20\"/>\u003C/svg>\nDesktop\n\u003C/label>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__stage\">\n\n\u003C!-- PHONE PANEL -->\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__panel fmstr-cmp-rfb-vp__panel--phone\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__copy\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__meta\">\n\u003Cspan class=\"fmstr-cmp-rfb-vp__tag\">PHONE\u003C/span>\n\u003Cspan class=\"fmstr-cmp-rfb-vp__w\">375px\u003C/span>\n\u003C/div>\n\u003Ch3 class=\"fmstr-cmp-rfb-vp__title\">Modern smartphone width\u003C/h3>\n\u003Cp class=\"fmstr-cmp-rfb-vp__body\">See exactly what a respondent sees in iOS Safari or Android Chrome, including how your branding header behaves under a sticky keyboard.\u003C/p>\n\u003Cul class=\"fmstr-cmp-rfb-vp__checks\">\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Single-column auto-stack\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>44px touch targets\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Submit always above the fold\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__visual\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__device fmstr-cmp-rfb-vp__device--phone\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-vp__mini-h-dot\">\u003C/span>RSVP\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Name\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Email\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Date\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Dietary\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__cta\">Submit\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C!-- TABLET PANEL -->\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__panel fmstr-cmp-rfb-vp__panel--tablet\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__copy\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__meta\">\n\u003Cspan class=\"fmstr-cmp-rfb-vp__tag\">TABLET\u003C/span>\n\u003Cspan class=\"fmstr-cmp-rfb-vp__w\">768px\u003C/span>\n\u003C/div>\n\u003Ch3 class=\"fmstr-cmp-rfb-vp__title\">The awkward middle\u003C/h3>\n\u003Cp class=\"fmstr-cmp-rfb-vp__body\">Catches the middle where most builders break. Multi-column field groups, modal popups, and progress bars all get re-checked here.\u003C/p>\n\u003Cul class=\"fmstr-cmp-rfb-vp__checks\">\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Two-column groups when room allows\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Modals stay inside the viewport\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Landscape and portrait re-flow\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__visual\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__device fmstr-cmp-rfb-vp__device--tablet\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-vp__mini-h-dot\">\u003C/span>EVENT REGISTRATION\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__row\">\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">First name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Last name\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Email address\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__row\">\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Phone\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Date\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Dietary\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__cta\">Register\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C!-- DESKTOP PANEL -->\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__panel fmstr-cmp-rfb-vp__panel--desktop\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__copy\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__meta\">\n\u003Cspan class=\"fmstr-cmp-rfb-vp__tag\">DESKTOP\u003C/span>\n\u003Cspan class=\"fmstr-cmp-rfb-vp__w\">1440px\u003C/span>\n\u003C/div>\n\u003Ch3 class=\"fmstr-cmp-rfb-vp__title\">Where your team builds\u003C/h3>\n\u003Cp class=\"fmstr-cmp-rfb-vp__body\">Confirms that the form does not look stretched, lonely, or off-center on a wide monitor.\u003C/p>\n\u003Cul class=\"fmstr-cmp-rfb-vp__checks\">\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Three-column groups for dense intake\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Container max-width keeps it readable\u003C/li>\n\u003Cli>\u003Csvg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"3 8 6.5 11.5 13 5\"/>\u003C/svg>Hero image and form side-by-side\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__visual\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__device fmstr-cmp-rfb-vp__device--desktop\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__screen\">\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__mini-h\">\u003Cspan class=\"fmstr-cmp-rfb-vp__mini-h-dot\">\u003C/span>ENTERPRISE INTAKE\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__row\">\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">First name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Last name\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Title\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__row\">\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Company\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Industry\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Headcount\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__row\">\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Work email\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Phone\u003C/div>\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">Country\u003C/div>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__field\">What do you need from Formester this quarter?\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-vp__cta\">Submit enquiry\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-rfb-vp__foot\">\u003Cstrong>Each viewport is a live render of the actual form, not a screenshot mockup.\u003C/strong> Toggle, edit, toggle again.\u003C/p>\n\n\u003C/div>\n\u003C/section>\n",{"id":167,"__component":147,"markup":168,"useContainer":149},798,"\u003Cstyle>\n.fmstr-cmp-rfb-uc { --c-soft: #f9fafb; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-violet-700: #5b34b1; --c-border: #eaecf0; background: #fff; padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-uc *, .fmstr-cmp-rfb-uc *::before, .fmstr-cmp-rfb-uc *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-uc > *, .fmstr-cmp-rfb-uc > * > * { min-width: 0; }\n.fmstr-cmp-rfb-uc__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-rfb-uc__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-rfb-uc__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-uc__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-uc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.fmstr-cmp-rfb-uc__card { display: flex; flex-direction: column; gap: 10px; background: var(--c-soft); border: 1px solid var(--c-border); border-radius: 16px; padding: 22px; transition: border-color .2s ease, transform .2s ease; }\n.fmstr-cmp-rfb-uc__card:hover { border-color: var(--c-edge); transform: translateY(-2px); }\n.fmstr-cmp-rfb-uc__emoji { font-size: 28px; line-height: 1; }\n.fmstr-cmp-rfb-uc__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }\n.fmstr-cmp-rfb-uc__copy { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-fg-2); }\n@media (max-width: 880px) { .fmstr-cmp-rfb-uc { padding: 64px 18px; } .fmstr-cmp-rfb-uc__grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 540px) { .fmstr-cmp-rfb-uc__grid { grid-template-columns: 1fr; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-uc\">\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-uc__h2\">6 use cases where responsive matters most\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-uc__sub\">Where a flat conversion rate is hiding a mobile rendering bug.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__grid\">\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">🎫\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Event signups\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Most attendees register from a phone after seeing an Instagram post or a QR code. A form that hides the submit button behind the keyboard kills RSVPs.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">🍽️\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Restaurant orders and QR menus\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Almost 100% mobile. The form has to render fast, accept thumb taps, and never demand a horizontal scroll.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">🏠\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Real estate enquiries\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Buyers browse listings on phones at open houses. The enquiry form has to load in under two seconds and submit in one tap.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">🤝\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Volunteer registration\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Often filled at the venue, on the volunteer's phone. Conditional fields for shift selection have to reflow cleanly.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">⭐\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Customer feedback at checkout\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Tablet at the counter or phone after the purchase. The same form has to look right on both without two separate builds.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-uc__card\">\u003Cspan class=\"fmstr-cmp-rfb-uc__emoji\">🎟️\u003C/span>\u003Ch3 class=\"fmstr-cmp-rfb-uc__title\">Conference registration\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-uc__copy\">Multi-step form with payment, attendee details, and session preferences. If any step breaks on mobile, the drop off is brutal.\u003C/p>\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":170,"__component":147,"markup":171,"useContainer":149},799,"\u003Cstyle>\n.fmstr-cmp-rfb-a11y { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-success: #12b76a; --c-border: #eaecf0; background: var(--c-soft); padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-a11y *, .fmstr-cmp-rfb-a11y *::before, .fmstr-cmp-rfb-a11y *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-a11y > *, .fmstr-cmp-rfb-a11y > * > * { min-width: 0; }\n.fmstr-cmp-rfb-a11y__container { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }\n.fmstr-cmp-rfb-a11y__copy h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-a11y__copy p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-a11y__badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--c-edge); color: var(--c-violet-700); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }\n.fmstr-cmp-rfb-a11y__list { display: flex; flex-direction: column; gap: 14px; }\n.fmstr-cmp-rfb-a11y__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; }\n.fmstr-cmp-rfb-a11y__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }\n.fmstr-cmp-rfb-a11y__icon svg { width: 16px; height: 16px; }\n.fmstr-cmp-rfb-a11y__row strong { color: var(--c-fg-1); font-weight: 700; }\n.fmstr-cmp-rfb-a11y__row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-fg-2); }\n@media (max-width: 880px) { .fmstr-cmp-rfb-a11y { padding: 64px 18px; } .fmstr-cmp-rfb-a11y__container { grid-template-columns: 1fr; gap: 28px; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-a11y\">\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__copy\">\n\u003Cspan class=\"fmstr-cmp-rfb-a11y__badge\">WCAG 2.1 AA\u003C/span>\n\u003Ch2>Built in accessibility\u003C/h2>\n\u003Cp>Responsive is half the job. The other half is accessibility, and it ships by default.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__list\">\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__row\">\u003Cspan class=\"fmstr-cmp-rfb-a11y__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 12h18M12 3v18M5 5l14 14M19 5L5 19\"/>\u003C/svg>\u003C/span>\u003Cp>\u003Cstrong>ARIA labels\u003C/strong> on every input, helper, and error state, so screen readers announce fields correctly.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__row\">\u003Cspan class=\"fmstr-cmp-rfb-a11y__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"/>\u003Cpath d=\"M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h12\"/>\u003C/svg>\u003C/span>\u003Cp>\u003Cstrong>Keyboard navigation\u003C/strong> through the entire form, with visible focus states and a logical tab order.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__row\">\u003Cspan class=\"fmstr-cmp-rfb-a11y__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\"/>\u003Cpath d=\"M12 3v18M3 12h18\"/>\u003C/svg>\u003C/span>\u003Cp>\u003Cstrong>WCAG 2.1 AA color contrast\u003C/strong> (4.5:1 minimum) on all text and interactive elements across every theme.\u003C/p>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-a11y__row\">\u003Cspan class=\"fmstr-cmp-rfb-a11y__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z\"/>\u003Ccircle cx=\"12\" cy=\"12\" r=\"3\"/>\u003C/svg>\u003C/span>\u003Cp>\u003Cstrong>Screen reader friendly errors\u003C/strong> that announce inline, not as a silent red border.\u003C/p>\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":173,"__component":147,"markup":174,"useContainer":149},800,"\u003Cstyle>\n.fmstr-cmp-rfb-cmp { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-fg-3: #697586; --c-violet-700: #5b34b1; --c-border: #eaecf0; background: #fff; padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-cmp *, .fmstr-cmp-rfb-cmp *::before, .fmstr-cmp-rfb-cmp *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-cmp > *, .fmstr-cmp-rfb-cmp > * > * { min-width: 0; }\n.fmstr-cmp-rfb-cmp__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-rfb-cmp__header { max-width: 760px; margin: 0 auto 40px; text-align: center; }\n.fmstr-cmp-rfb-cmp__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-cmp__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-cmp__scroll { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.04); }\n.fmstr-cmp-rfb-cmp__table { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 14.5px; }\n.fmstr-cmp-rfb-cmp__table thead th { text-align: left; padding: 16px 18px; font-size: 13px; font-weight: 700; color: var(--c-fg-1); background: #f9fafb; border-bottom: 1px solid var(--c-border); white-space: nowrap; }\n.fmstr-cmp-rfb-cmp__table thead th.fmstr-cmp-rfb-cmp__col-us { background: var(--c-tint); color: var(--c-violet-700); }\n.fmstr-cmp-rfb-cmp__table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--c-border); color: var(--c-fg-2); vertical-align: top; }\n.fmstr-cmp-rfb-cmp__table tbody tr:last-child td { border-bottom: none; }\n.fmstr-cmp-rfb-cmp__table tbody td:first-child { font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-cmp__table tbody td.fmstr-cmp-rfb-cmp__col-us { background: #fcfaff; color: var(--c-fg-1); font-weight: 500; }\n.fmstr-cmp-rfb-cmp__src { font-size: 13px; line-height: 1.6; color: var(--c-fg-3); margin: 18px 0 0; }\n.fmstr-cmp-rfb-cmp__src a { color: var(--c-violet-700); border-bottom: 1px solid var(--c-tint); }\n@media (max-width: 720px) { .fmstr-cmp-rfb-cmp { padding: 64px 16px; } .fmstr-cmp-rfb-cmp__table { font-size: 13.5px; } .fmstr-cmp-rfb-cmp__table thead th, .fmstr-cmp-rfb-cmp__table tbody td { padding: 12px 14px; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-cmp\">\n\u003Cdiv class=\"fmstr-cmp-rfb-cmp__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-cmp__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-cmp__h2\">Compare on responsive design\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-cmp__sub\">Where each major form builder lands on mobile-first behavior.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cmp__scroll\">\n\u003Ctable class=\"fmstr-cmp-rfb-cmp__table\">\n\u003Cthead>\u003Ctr>\u003Cth>Criterion\u003C/th>\u003Cth class=\"fmstr-cmp-rfb-cmp__col-us\">Formester\u003C/th>\u003Cth>Google Forms\u003C/th>\u003Cth>Jotform\u003C/th>\u003Cth>Gravity Forms\u003C/th>\u003C/tr>\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Mobile-first by default\u003C/td>\u003Ctd class=\"fmstr-cmp-rfb-cmp__col-us\">Yes, every theme\u003C/td>\u003Ctd>Yes, but rigid layout\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Depends on WordPress theme\u003C/td>\u003C/tr>\n\u003Ctr>\u003Ctd>Custom CSS needed for breakpoints\u003C/td>\u003Ctd class=\"fmstr-cmp-rfb-cmp__col-us\">No\u003C/td>\u003Ctd>Cannot edit CSS\u003C/td>\u003Ctd>Optional, advanced editor\u003C/td>\u003Ctd>Often yes\u003C/td>\u003C/tr>\n\u003Ctr>\u003Ctd>44px touch target compliance\u003C/td>\u003Ctd class=\"fmstr-cmp-rfb-cmp__col-us\">Built in\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Theme dependent\u003C/td>\u003C/tr>\n\u003Ctr>\u003Ctd>Conditional logic on mobile\u003C/td>\u003Ctd class=\"fmstr-cmp-rfb-cmp__col-us\">Smooth reflow\u003C/td>\u003Ctd>No logic available\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Yes, can leave layout gaps\u003C/td>\u003C/tr>\n\u003Ctr>\u003Ctd>File upload on mobile (incl. camera capture)\u003C/td>\u003Ctd class=\"fmstr-cmp-rfb-cmp__col-us\">Yes, with camera capture\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>Plugin dependent\u003C/td>\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-rfb-cmp__src\">Sources: Formester verified product facts, \u003Ca href=\"https://support.google.com/docs/answer/2839737\">Google Forms help\u003C/a>, \u003Ca href=\"https://www.jotform.com/help/\">Jotform Form Builder docs\u003C/a>, \u003Ca href=\"https://docs.gravityforms.com/\">Gravity Forms documentation\u003C/a>.\u003C/p>\n\u003C/div>\n\u003C/section>\n",{"id":176,"__component":147,"markup":177,"useContainer":149},804,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n.fmstr-cmp-testimonials a { text-decoration: none !important; }\n\n.fmstr-cmp-testimonials {\n--c-bg: #ffffff;\n--c-soft: #f9fafb;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-amber-400: #fdc022;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: var(--c-bg);\npadding: 88px 0;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-testimonials *, .fmstr-cmp-testimonials *::before, .fmstr-cmp-testimonials *::after { box-sizing: border-box; }\n.fmstr-cmp-testimonials > *, .fmstr-cmp-testimonials > * > * { min-width: 0; }\n\n.fmstr-cmp-testimonials__container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }\n\n.fmstr-cmp-testimonials__header { max-width: 820px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-testimonials__eyebrow {\ndisplay: inline-block;\npadding: 4px 12px;\nmargin-bottom: 16px;\nbackground: var(--c-tint);\nborder-radius: 9999px;\nfont-size: 12px;\nfont-weight: 700;\nletter-spacing: 0.08em;\ntext-transform: uppercase;\ncolor: var(--c-violet-700);\n}\n.fmstr-cmp-testimonials__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-testimonials__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n/* Aggregate ratings strip */\n.fmstr-cmp-testimonials__agg {\ndisplay: inline-flex;\nalign-items: center;\ngap: 28px;\nmargin-top: 22px;\npadding: 12px 22px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow-sm);\nflex-wrap: wrap;\njustify-content: center;\n}\n.fmstr-cmp-testimonials__agg-item {\ndisplay: inline-flex; align-items: center; gap: 8px;\nfont-size: 12.5px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-testimonials__agg-stars { color: var(--c-amber-400); display: inline-flex; gap: 1px; }\n.fmstr-cmp-testimonials__agg-rating { font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-testimonials__agg-src { color: var(--c-fg-3); font-weight: 600; }\n.fmstr-cmp-testimonials__agg-divider {\nwidth: 1px; height: 18px;\nbackground: var(--c-border);\n}\n\n/* Marquee tracks */\n.fmstr-cmp-testimonials__tracks {\ndisplay: flex; flex-direction: column;\ngap: 18px;\nposition: relative;\n}\n.fmstr-cmp-testimonials__track {\noverflow: hidden;\nmask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\n-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\n}\n.fmstr-cmp-testimonials__row {\ndisplay: flex;\ngap: 18px;\nwidth: max-content;\nanimation: fmstr-cmp-testimonials-marquee 48s linear infinite;\nwill-change: transform;\n}\n.fmstr-cmp-testimonials__row--reverse {\nanimation: fmstr-cmp-testimonials-marquee-reverse 56s linear infinite;\n}\n.fmstr-cmp-testimonials__track:hover .fmstr-cmp-testimonials__row,\n.fmstr-cmp-testimonials__track:focus-within .fmstr-cmp-testimonials__row {\nanimation-play-state: paused;\n}\n@keyframes fmstr-cmp-testimonials-marquee {\n0% { transform: translateX(0); }\n100% { transform: translateX(-50%); }\n}\n@keyframes fmstr-cmp-testimonials-marquee-reverse {\n0% { transform: translateX(-50%); }\n100% { transform: translateX(0); }\n}\n@media (prefers-reduced-motion: reduce) {\n.fmstr-cmp-testimonials__row, .fmstr-cmp-testimonials__row--reverse { animation: none; }\n.fmstr-cmp-testimonials__track { mask-image: none; -webkit-mask-image: none; overflow-x: auto; padding-bottom: 8px; }\n}\n\n/* Card */\n.fmstr-cmp-testimonials__card {\nflex-shrink: 0;\nwidth: 360px;\ndisplay: flex; flex-direction: column; gap: 16px;\npadding: 24px 26px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow-sm);\n}\n.fmstr-cmp-testimonials__card-top {\ndisplay: flex; align-items: center; justify-content: space-between; gap: 12px;\n}\n.fmstr-cmp-testimonials__stars { color: var(--c-amber-400); display: inline-flex; gap: 2px; }\n.fmstr-cmp-testimonials__source {\ndisplay: inline-flex; align-items: center; gap: 6px;\nfont-size: 11px;\nfont-weight: 700;\ncolor: var(--c-fg-3);\nletter-spacing: 0.02em;\n}\n.fmstr-cmp-testimonials__source-logo {\nwidth: 18px; height: 18px;\nborder-radius: 4px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nflex-shrink: 0;\nfont-weight: 800;\nfont-size: 9px;\ncolor: #ffffff;\n}\n.fmstr-cmp-testimonials__source-logo--g2 { background: #FF492C; }\n.fmstr-cmp-testimonials__source-logo--ph { background: #DA552F; }\n.fmstr-cmp-testimonials__source-logo--tp { background: #00B67A; }\n\n.fmstr-cmp-testimonials__quote {\nmargin: 0;\nfont-size: 15px;\nline-height: 1.6;\ncolor: var(--c-fg-1);\nfont-weight: 500;\n}\n.fmstr-cmp-testimonials__quote::before { content: open-quote; color: var(--c-violet-500); font-weight: 700; }\n.fmstr-cmp-testimonials__quote::after { content: close-quote; color: var(--c-violet-500); font-weight: 700; }\n\n.fmstr-cmp-testimonials__foot {\ndisplay: flex; align-items: center; gap: 12px;\npadding-top: 14px;\nborder-top: 1px solid var(--c-border);\n}\n.fmstr-cmp-testimonials__avatar {\nwidth: 38px; height: 38px;\nborder-radius: 50%;\ncolor: #ffffff;\nfont-weight: 700;\nfont-size: 13px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nflex-shrink: 0;\nletter-spacing: 0.02em;\n}\n.fmstr-cmp-testimonials__avatar--violet { background: linear-gradient(135deg, #7f56d9, #5b34b1); }\n.fmstr-cmp-testimonials__avatar--green { background: linear-gradient(135deg, #12b76a, #027a48); }\n.fmstr-cmp-testimonials__avatar--blue { background: linear-gradient(135deg, #1A73E8, #1a4a8e); }\n.fmstr-cmp-testimonials__avatar--orange { background: linear-gradient(135deg, #FF7A59, #c2410c); }\n.fmstr-cmp-testimonials__avatar--pink { background: linear-gradient(135deg, #f04438, #be123c); }\n.fmstr-cmp-testimonials__name { font-size: 13.5px; font-weight: 700; color: var(--c-fg-1); line-height: 1.3; }\n.fmstr-cmp-testimonials__role { font-size: 12px; color: var(--c-fg-3); margin-top: 1px; }\n\n@media (max-width: 540px) {\n.fmstr-cmp-testimonials { padding: 64px 0; }\n.fmstr-cmp-testimonials__card { width: 300px; padding: 20px 22px; }\n.fmstr-cmp-testimonials__agg { gap: 14px; padding: 10px 16px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-testimonials\" aria-labelledby=\"fmstr-cmp-testimonials-h2\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__container\">\n\n\u003Cheader class=\"fmstr-cmp-testimonials__header\">\n\u003Cspan class=\"fmstr-cmp-testimonials__eyebrow\">Testimonials\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-testimonials__h2\" id=\"fmstr-cmp-testimonials-h2\">What teams are saying about Formester\u003C/h2>\n\u003Cp class=\"fmstr-cmp-testimonials__sub\">Real reviews from G2, Trustpilot, and Product Hunt.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__agg\" aria-label=\"Aggregate ratings\">\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-item\">\n\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-rating\">4.7\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-src\">G2 (11 reviews)\u003C/span>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-divider\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-item\">\n\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-rating\">4.7\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-src\">Trustpilot (24 reviews)\u003C/span>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-divider\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-item\">\n\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--ph\">P\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-rating\">5.0\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__agg-src\">Product Hunt\u003C/span>\n\u003C/span>\n\u003C/div>\n\u003C/header>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-testimonials__tracks\">\n\n\u003C!-- Row 1: scrolls left -->\n\u003Cdiv class=\"fmstr-cmp-testimonials__track\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__row\">\n\n\u003C!-- Karthik B. — G2 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester offers a ton of features and my developer loves using it to integrate to various marketing pages. It's quick and easy to create using drag and drop. It allowed me to remove branding unlike Typeform that has branding even in paid plans. Their support is top notch.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--violet\">K\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Karthik B.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Social Media Manager · B2C, SaaS, EdTech\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Trustpilot — Apr 21, 2026 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester brings together some amazing technology all in one easy to use tool. The AI form builder makes things a breeze to set up and completed 75% of my build and then another 25% tweaking. Combined with the AI agent workflow automation after forms are submitted, it's one amazing package.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--green\">V\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">April 2026\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Justin C. — G2 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Beautiful and easy to use. The templates and the floating button feature with easy-to-use integration with Google Sheet is crazy. I was looking for a simple and beautiful form to put on my website for free.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--blue\">J\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Justin C.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Online Private English Teacher\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Trustpilot — Judy, Apr 1, 2026 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">We were looking for a new platform for building quizzes for our educational program. This one has not let us down. It has tons of features and is easy to use. The company is super responsive if you have questions or need help with anything.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--orange\">J\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Judy\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">April 2026\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Deepika K. — G2 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"4.5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester form builder has lots of customisation options. It's very easy to generate online forms. The UI is very attractive and easy to use. No prior experience is required to use it.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--pink\">D\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Deepika K.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Business Development Executive\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Duplicate set A for seamless loop -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester offers a ton of features and my developer loves using it to integrate to various marketing pages. It's quick and easy to create using drag and drop. It allowed me to remove branding unlike Typeform that has branding even in paid plans. Their support is top notch.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--violet\">K\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Karthik B.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Social Media Manager · B2C, SaaS, EdTech\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester brings together some amazing technology all in one easy to use tool. The AI form builder makes things a breeze to set up and completed 75% of my build and then another 25% tweaking. Combined with the AI agent workflow automation after forms are submitted, it's one amazing package.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--green\">V\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">April 2026\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Beautiful and easy to use. The templates and the floating button feature with easy-to-use integration with Google Sheet is crazy. I was looking for a simple and beautiful form to put on my website for free.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--blue\">J\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Justin C.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Online Private English Teacher\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">We were looking for a new platform for building quizzes for our educational program. This one has not let us down. It has tons of features and is easy to use. The company is super responsive if you have questions or need help with anything.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--orange\">J\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Judy\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">April 2026\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester form builder has lots of customisation options. It's very easy to generate online forms. The UI is very attractive and easy to use. No prior experience is required to use it.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--pink\">D\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Deepika K.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Business Development Executive\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\n\u003C/div>\n\u003C/div>\n\n\u003C!-- Row 2: scrolls right -->\n\u003Cdiv class=\"fmstr-cmp-testimonials__track\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__row fmstr-cmp-testimonials__row--reverse\">\n\n\u003C!-- Trustpilot — Feb 5, 2026 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester is an incredibly professional company. They are very helpful, they help solve any problems quickly. At my request, features were enabled and changed in a short time, so I was able to completely customize my Quote Form to my needs.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--violet\">V\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">February 2026\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Guibril D. — G2 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"4.5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester solves the problem of complicated data collection by providing a quick tool to create customized and automated forms. Ultra-fast form creation thanks to drag and drop.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--green\">G\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Guibril D.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Engineer · Renewables & Environment\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Joo, Banghyun — Product Hunt -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--ph\">P\u003C/span>Product Hunt\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Great form and always good support. Easy to set up, easy to share, and the team behind it actually responds when you need something.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--blue\">B\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Banghyun Joo\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Dunoit\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Aashika S. — G2 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"4.5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">We are able to easily build so many forms for our daily business work. These are easy for sharing too with our clients at one time instantly. There is also a feature for identifying if there is any spam in the form filling process.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--orange\">A\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Aashika S.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Manager\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Trustpilot — Jan 28 -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\" aria-label=\"5 out of 5\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Great support and the price-performance ratio is good. The team is quick to reply and the product does exactly what it promises.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\n\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--pink\">V\u003C/span>\n\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">January 2026\u003C/div>\u003C/div>\n\u003C/div>\n\u003C/article>\n\n\u003C!-- Duplicate set B for seamless loop -->\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester is an incredibly professional company. They are very helpful, they help solve any problems quickly. At my request, features were enabled and changed in a short time, so I was able to completely customize my Quote Form to my needs.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--violet\">V\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">February 2026\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Formester solves the problem of complicated data collection by providing a quick tool to create customized and automated forms. Ultra-fast form creation thanks to drag and drop.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--green\">G\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Guibril D.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Engineer · Renewables & Environment\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--ph\">P\u003C/span>Product Hunt\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Great form and always good support. Easy to set up, easy to share, and the team behind it actually responds when you need something.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--blue\">B\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Banghyun Joo\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Dunoit\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--g2\">G2\u003C/span>G2\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">We are able to easily build so many forms for our daily business work. These are easy for sharing too with our clients at one time instantly. There is also a feature for identifying if there is any spam in the form filling process.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--orange\">A\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Aashika S.\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">Manager\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\u003Carticle class=\"fmstr-cmp-testimonials__card\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-testimonials__card-top\">\n\u003Cspan class=\"fmstr-cmp-testimonials__stars\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\u003Cpolygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26\">\u003C/polygon>\u003C/svg>\u003C/span>\n\u003Cspan class=\"fmstr-cmp-testimonials__source\">\u003Cspan class=\"fmstr-cmp-testimonials__source-logo fmstr-cmp-testimonials__source-logo--tp\">★\u003C/span>Trustpilot\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-testimonials__quote\">Great support and the price-performance ratio is good. The team is quick to reply and the product does exactly what it promises.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-testimonials__foot\">\u003Cspan class=\"fmstr-cmp-testimonials__avatar fmstr-cmp-testimonials__avatar--pink\">V\u003C/span>\u003Cdiv>\u003Cdiv class=\"fmstr-cmp-testimonials__name\">Verified Trustpilot reviewer\u003C/div>\u003Cdiv class=\"fmstr-cmp-testimonials__role\">January 2026\u003C/div>\u003C/div>\u003C/div>\n\u003C/article>\n\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":179,"__component":147,"markup":180,"useContainer":149},801,"\u003Cstyle>\n.fmstr-cmp-rfb-cta a { text-decoration: none !important; }\n.fmstr-cmp-rfb-cta { --c-fg-on-dark: #fff; --c-fg-on-dark-2: rgba(255,255,255,0.78); --c-fg-on-dark-3: rgba(255,255,255,0.6); padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-on-dark); position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 0%, rgba(127,86,217,0.6) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(91,52,177,0.6) 0%, transparent 55%), linear-gradient(135deg, #2a1568 0%, #3f1d8a 50%, #5b34b1 100%); }\n.fmstr-cmp-rfb-cta *, .fmstr-cmp-rfb-cta *::before, .fmstr-cmp-rfb-cta *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-cta > *, .fmstr-cmp-rfb-cta > * > * { min-width: 0; }\n.fmstr-cmp-rfb-cta__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%); }\n.fmstr-cmp-rfb-cta__container { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }\n.fmstr-cmp-rfb-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 22px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); font-size: 13px; font-weight: 600; }\n.fmstr-cmp-rfb-cta__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,0.3); }\n.fmstr-cmp-rfb-cta__h2 { margin: 0 0 18px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.12; letter-spacing: -0.024em; font-weight: 700; }\n.fmstr-cmp-rfb-cta__sub { margin: 0 auto 36px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--c-fg-on-dark-2); }\n.fmstr-cmp-rfb-cta__ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }\n.fmstr-cmp-rfb-cta__primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: #fff !important; color: #5b34b1 !important; font-weight: 700; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }\n.fmstr-cmp-rfb-cta__secondary { display: inline-flex; align-items: center; gap: 6px; padding: 14px 22px; border-radius: 999px; background: rgba(255,255,255,0.08) !important; color: #fff !important; font-weight: 600; font-size: 15px; border: 1px solid rgba(255,255,255,0.28); }\n.fmstr-cmp-rfb-cta__stats { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }\n.fmstr-cmp-rfb-cta__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n.fmstr-cmp-rfb-cta__stat-num { font-size: 22px; font-weight: 700; }\n.fmstr-cmp-rfb-cta__stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-fg-on-dark-3); }\n@media (max-width: 720px) { .fmstr-cmp-rfb-cta { padding: 64px 20px; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-cta\">\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__grid\" aria-hidden=\"true\">\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__container\">\n\u003Cspan class=\"fmstr-cmp-rfb-cta__eyebrow\">\u003Cspan class=\"fmstr-cmp-rfb-cta__eyebrow-dot\">\u003C/span>FREE FOREVER. NO CARD.\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-rfb-cta__h2\">Build your responsive form free\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-cta__sub\">No credit card. 10 forms and 100 responses a month on the free plan, every responsive feature included.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__ctas\">\n\u003Ca href=\"https://app.formester.com/users/sign_up\" class=\"fmstr-cmp-rfb-cta__primary\">Build your responsive form free\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M3 8h10M9 4l4 4-4 4\"/>\u003C/svg>\n\u003C/a>\n\u003Ca href=\"#viewport-preview\" class=\"fmstr-cmp-rfb-cta__secondary\">See the live mobile preview\u003C/a>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__stats\">\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__stat\">\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-num\">320px\u003C/span>\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-label\">Smallest viewport\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__stat\">\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-num\">44px\u003C/span>\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-label\">Touch target\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__stat\">\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-num\">< 2s\u003C/span>\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-label\">First paint on 4G\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-cta__stat\">\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-num\">WCAG 2.1 AA\u003C/span>\u003Cspan class=\"fmstr-cmp-rfb-cta__stat-label\">Accessibility\u003C/span>\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":182,"__component":147,"markup":183,"useContainer":149},802,"\u003Cstyle>\n.fmstr-cmp-rfb-faq { --c-soft: #f9fafb; --c-tint: #f7f3ff; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-violet-700: #5b34b1; --c-border: #eaecf0; background: #fff; padding: 96px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-faq *, .fmstr-cmp-rfb-faq *::before, .fmstr-cmp-rfb-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-faq > *, .fmstr-cmp-rfb-faq > * > * { min-width: 0; }\n.fmstr-cmp-rfb-faq__container { max-width: 880px; margin: 0 auto; }\n.fmstr-cmp-rfb-faq__header { text-align: center; margin-bottom: 48px; }\n.fmstr-cmp-rfb-faq__h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-faq__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-faq__list { display: flex; flex-direction: column; gap: 12px; }\n.fmstr-cmp-rfb-faq__item { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; transition: border-color .2s ease; }\n.fmstr-cmp-rfb-faq__item:hover, .fmstr-cmp-rfb-faq__item[open] { border-color: var(--c-edge); }\n.fmstr-cmp-rfb-faq__summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--c-fg-1); }\n.fmstr-cmp-rfb-faq__summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-rfb-faq__chev { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-tint); color: var(--c-violet-700); display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease; }\n.fmstr-cmp-rfb-faq__item[open] .fmstr-cmp-rfb-faq__chev { transform: rotate(180deg); }\n.fmstr-cmp-rfb-faq__answer { padding: 0 26px 22px; font-size: 15px; line-height: 1.65; color: var(--c-fg-2); }\n@media (max-width: 560px) { .fmstr-cmp-rfb-faq { padding: 64px 18px; } .fmstr-cmp-rfb-faq__summary { padding: 18px 20px; font-size: 15.5px; } .fmstr-cmp-rfb-faq__answer { padding: 0 20px 18px; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-faq\">\n\u003Cdiv class=\"fmstr-cmp-rfb-faq__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-faq__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-faq__h2\">Responsive form FAQs\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-faq__sub\">Mobile rendering, accessibility, and viewport behaviour answered honestly.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-faq__list\">\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">Do I need to write any CSS to make forms responsive?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">No. Every Formester theme is responsive out of the box. Fields auto-stack, fonts scale, and touch targets are sized correctly without you opening the CSS panel. If you want to override anything, custom CSS is available on Personal and above.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">What's the smallest screen Formester forms support?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Forms render cleanly down to 320px wide, which covers every modern smartphone in portrait mode, including older iPhones and entry-level Android devices.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">How do conditional fields behave on mobile?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">When a field is shown or hidden by logic, the layout reflows smoothly. No gap is left behind, the viewport does not jump, and the scroll position is preserved so the respondent never loses their place.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">Can I preview the form at different screen sizes before publishing?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Yes. The builder has a viewport toggle for phone (375px), tablet (768px), and desktop (1440px). Each preview is a live render of the actual form, not a static mockup.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">How does the form perform on a slow 4G connection?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Forms are served via the Cloudflare CDN and built with a lightweight render path, so first contentful paint typically lands under two seconds on a 4G connection. Heavy themes are not allowed by the builder, so you cannot accidentally ship a slow form.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">Are file uploads reliable on mobile?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Yes. The File Upload field supports direct camera capture, multi-file selection, and configurable size limits up to 1GB on Personal and 50GB on Business. Uploads are chunked, so a flaky mobile connection does not force a full restart.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">Does the form work in landscape mode?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Yes. The layout switches to a wider single-column or multi-column arrangement depending on the device width in landscape, and the on-screen keyboard does not cover the active field.\u003C/div>\u003C/details>\n\u003Cdetails class=\"fmstr-cmp-rfb-faq__item\">\u003Csummary class=\"fmstr-cmp-rfb-faq__summary\">How accessible is the form to screen reader users?\u003Cspan class=\"fmstr-cmp-rfb-faq__chev\">\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 6l4 4 4-4\"/>\u003C/svg>\u003C/span>\u003C/summary>\u003Cdiv class=\"fmstr-cmp-rfb-faq__answer\">Every field carries an ARIA label, errors are announced inline, focus order is logical, and color contrast meets WCAG 2.1 AA. Forms are tested with VoiceOver on iOS and TalkBack on Android.\u003C/div>\u003C/details>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",{"id":185,"__component":147,"markup":186,"useContainer":149},803,"\u003Cstyle>\n.fmstr-cmp-rfb-rel a { text-decoration: none !important; }\n.fmstr-cmp-rfb-rel { --c-soft: #f9fafb; --c-edge: #e4d7ff; --c-fg-1: #101828; --c-fg-2: #475467; --c-violet-500: #7f56d9; --c-violet-700: #5b34b1; --c-border: #eaecf0; background: var(--c-soft); padding: 88px 24px; font-family: inherit; overflow-x: hidden; color: var(--c-fg-1); border-top: 1px solid var(--c-border); }\n.fmstr-cmp-rfb-rel *, .fmstr-cmp-rfb-rel *::before, .fmstr-cmp-rfb-rel *::after { box-sizing: border-box; }\n.fmstr-cmp-rfb-rel > *, .fmstr-cmp-rfb-rel > * > * { min-width: 0; }\n.fmstr-cmp-rfb-rel__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-rfb-rel__header { max-width: 720px; margin: 0 auto 40px; text-align: center; }\n.fmstr-cmp-rfb-rel__h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; }\n.fmstr-cmp-rfb-rel__sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-rfb-rel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }\n.fmstr-cmp-rfb-rel__card { display: flex; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; color: inherit !important; transition: border-color .2s ease, transform .2s ease; }\n.fmstr-cmp-rfb-rel__card:hover { border-color: var(--c-edge); transform: translateY(-1px); }\n.fmstr-cmp-rfb-rel__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }\n.fmstr-cmp-rfb-rel__icon svg { width: 18px; height: 18px; }\n.fmstr-cmp-rfb-rel__title { margin: 0; font-size: 15px; font-weight: 700; }\n.fmstr-cmp-rfb-rel__copy { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-fg-2); }\n@media (max-width: 720px) { .fmstr-cmp-rfb-rel { padding: 56px 18px; } .fmstr-cmp-rfb-rel__grid { grid-template-columns: 1fr; } }\n\u003C/style>\n\u003Csection class=\"fmstr-cmp-rfb-rel\">\n\u003Cdiv class=\"fmstr-cmp-rfb-rel__container\">\n\u003Cdiv class=\"fmstr-cmp-rfb-rel__header\">\n\u003Ch2 class=\"fmstr-cmp-rfb-rel__h2\">Keep building with Formester\u003C/h2>\n\u003Cp class=\"fmstr-cmp-rfb-rel__sub\">More mobile-first form tools.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-rfb-rel__grid\">\n\u003Ca href=\"https://formester.com/features/drag-and-drop-form-builder/\" class=\"fmstr-cmp-rfb-rel__card\">\u003Cspan class=\"fmstr-cmp-rfb-rel__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\u003Cpath d=\"M9 9h6M9 13h6\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Ch3 class=\"fmstr-cmp-rfb-rel__title\">Form Builder\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-rel__copy\">The full drag-and-drop editor.\u003C/p>\u003C/div>\u003C/a>\n\u003Ca href=\"https://formester.com/free-form-builder-for-website/\" class=\"fmstr-cmp-rfb-rel__card\">\u003Cspan class=\"fmstr-cmp-rfb-rel__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpolyline points=\"16 18 22 12 16 6\"/>\u003Cpolyline points=\"8 6 2 12 8 18\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Ch3 class=\"fmstr-cmp-rfb-rel__title\">Free Form Builder for Websites\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-rel__copy\">Six embed modes for any site.\u003C/p>\u003C/div>\u003C/a>\n\u003Ca href=\"https://formester.com/ai-form-generator/\" class=\"fmstr-cmp-rfb-rel__card\">\u003Cspan class=\"fmstr-cmp-rfb-rel__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M12 2l3 6.6 7 .9-5 5 1.3 7-6.3-3.6-6.3 3.6 1.3-7-5-5 7-.9z\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Ch3 class=\"fmstr-cmp-rfb-rel__title\">AI Form Generator\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-rel__copy\">Generate any form from a prompt, PDF, URL, or image.\u003C/p>\u003C/div>\u003C/a>\n\u003Ca href=\"https://formester.com/blog/best-mobile-form-builders/\" class=\"fmstr-cmp-rfb-rel__card\">\u003Cspan class=\"fmstr-cmp-rfb-rel__icon\">\u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"7\" y=\"2\" width=\"10\" height=\"20\" rx=\"2\"/>\u003Cline x1=\"12\" y1=\"18\" x2=\"12\" y2=\"18\"/>\u003C/svg>\u003C/span>\u003Cdiv>\u003Ch3 class=\"fmstr-cmp-rfb-rel__title\">Best Mobile Form Builders\u003C/h3>\u003Cp class=\"fmstr-cmp-rfb-rel__copy\">Listicle of mobile-first builders.\u003C/p>\u003C/div>\u003C/a>\n\u003C/div>\n\u003C/div>\n\u003C/section>\n",1781362401640]