[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"feature-embed-form-in-email":3},{"head":4,"jsonld":58,"components":59},{"title":5,"link":6,"meta":7},"Embed a Form in Email: Inline Surveys with Pre-Filled Responses",[],[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-05-28T04:56:44.007Z",{"hid":12,"name":12,"content":13},"description","Embed your first form question directly in your email. Respondents click, land on a pre-filled form, and finish in one step. Works with Gmail, Outlook, and any ESP.",{"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/features/embed-form-in-email/",{"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",[56,57],"survey in email ","embed form",[],[60,65,72,75,78,81,84,87,90,93,96],{"id":61,"__component":62,"markup":63,"useContainer":64},244,"micro-components.raw-html","\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-hero a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-hero {\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-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.18), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: radial-gradient(ellipse at top left, var(--c-tint) 0%, #ffffff 55%);\npadding: 88px 24px 80px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\nposition: relative;\noverflow: hidden;\n}\n.fmstr-cmp-eie-hero *, .fmstr-cmp-eie-hero *::before, .fmstr-cmp-eie-hero *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-hero > *, .fmstr-cmp-eie-hero > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-hero__container {\nmax-width: 1180px;\nmargin: 0 auto;\ndisplay: grid;\ngrid-template-columns: 1.05fr 1fr;\ngap: 64px;\nalign-items: center;\n}\n\n.fmstr-cmp-eie-hero__badge {\ndisplay: inline-flex;\nalign-items: center;\ngap: 8px;\npadding: 6px 14px;\nborder-radius: 999px;\nbackground: #ffffff;\nborder: 1px solid var(--c-edge);\ncolor: var(--c-violet-700);\nfont-size: 13px;\nfont-weight: 600;\nmargin-bottom: 22px;\nbox-shadow: var(--c-shadow-sm);\n}\n.fmstr-cmp-eie-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-violet-500); }\n\n.fmstr-cmp-eie-hero__h1 {\nmargin: 0 0 18px;\nfont-size: clamp(36px, 4.6vw, 54px);\nline-height: 1.07;\nletter-spacing: -0.028em;\nfont-weight: 700;\n}\n.fmstr-cmp-eie-hero__h1-accent {\nbackground: linear-gradient(135deg, var(--c-violet-500), var(--c-violet-700));\n-webkit-background-clip: text;\nbackground-clip: text;\n-webkit-text-fill-color: transparent;\n}\n\n.fmstr-cmp-eie-hero__sub {\nmargin: 0 0 32px;\nmax-width: 540px;\nfont-size: 18px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\n}\n\n.fmstr-cmp-eie-hero__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }\n\n.fmstr-cmp-eie-hero__cta-primary {\ndisplay: inline-flex; align-items: center; gap: 8px;\npadding: 14px 26px; border-radius: 10px;\nbackground: var(--c-violet-500) !important; color: #ffffff !important;\nfont-weight: 600; font-size: 15.5px;\ntext-decoration: none !important;\nborder: 1px solid var(--c-violet-500);\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .25);\ntransition: background .15s ease, transform .15s ease;\n}\n.fmstr-cmp-eie-hero__cta-primary:hover { background: var(--c-violet-600) !important; transform: translateY(-1px); }\n\n.fmstr-cmp-eie-hero__cta-secondary {\ndisplay: inline-flex; align-items: center; gap: 8px;\npadding: 14px 22px; border-radius: 10px;\nbackground: #ffffff !important; color: var(--c-fg-1) !important;\nfont-weight: 600; font-size: 15.5px;\ntext-decoration: none !important;\nborder: 1px solid var(--c-border);\ntransition: border-color .15s ease, transform .15s ease;\n}\n.fmstr-cmp-eie-hero__cta-secondary:hover { border-color: var(--c-violet-500); color: var(--c-violet-600) !important; transform: translateY(-1px); }\n\n.fmstr-cmp-eie-hero__trust { display: flex; flex-wrap: wrap; gap: 16px 28px; font-size: 13px; color: var(--c-fg-3); }\n.fmstr-cmp-eie-hero__trust-item { display: inline-flex; align-items: center; gap: 6px; }\n.fmstr-cmp-eie-hero__trust-check { color: var(--c-success); flex-shrink: 0; }\n\n/* Right side: email mockup */\n.fmstr-cmp-eie-hero__visual { position: relative; }\n\n.fmstr-cmp-eie-hero__email {\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-lg);\npadding: 0;\noverflow: hidden;\n}\n\n.fmstr-cmp-eie-hero__email-bar {\ndisplay: flex; align-items: center; gap: 8px;\npadding: 12px 16px;\nbackground: var(--c-soft);\nborder-bottom: 1px solid var(--c-border);\n}\n.fmstr-cmp-eie-hero__dot { width: 9px; height: 9px; border-radius: 50%; }\n.fmstr-cmp-eie-hero__email-domain { margin-left: 8px; font-size: 12px; color: var(--c-fg-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.fmstr-cmp-eie-hero__email-body { padding: 22px 24px 24px; }\n.fmstr-cmp-eie-hero__email-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-fg-3); margin-bottom: 10px; }\n.fmstr-cmp-eie-hero__email-from { font-weight: 600; color: var(--c-fg-2); }\n.fmstr-cmp-eie-hero__email-subject { font-size: 18px; font-weight: 700; color: var(--c-fg-1); margin: 0 0 16px; letter-spacing: -0.015em; }\n.fmstr-cmp-eie-hero__email-prompt { font-size: 14.5px; color: var(--c-fg-2); margin: 0 0 14px; line-height: 1.5; }\n\n.fmstr-cmp-eie-hero__stars { display: flex; gap: 6px; }\n.fmstr-cmp-eie-hero__star {\nwidth: 44px; height: 44px;\nborder-radius: 10px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nbackground: #ffffff;\nborder: 1.5px solid var(--c-border);\nfont-size: 20px;\ncolor: #d1d5db;\ntransition: all .15s ease;\n}\n.fmstr-cmp-eie-hero__star--filled { color: #f59e0b; border-color: var(--c-edge); }\n.fmstr-cmp-eie-hero__star--clicked {\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-color: var(--c-violet-600);\nbox-shadow: 0 4px 12px rgba(127, 86, 217, .35);\ntransform: scale(1.05);\n}\n\n.fmstr-cmp-eie-hero__email-footer { margin-top: 16px; font-size: 12px; color: var(--c-fg-3); border-top: 1px solid var(--c-border); padding-top: 14px; }\n\n/* Floating chip showing the click → form transition */\n.fmstr-cmp-eie-hero__chip {\nposition: absolute;\nbackground: #ffffff;\nborder: 1px solid var(--c-edge);\nbox-shadow: var(--c-shadow-lg);\nborder-radius: 12px;\npadding: 12px 16px;\ndisplay: flex; align-items: center; gap: 12px;\nfont-size: 13px;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-hero__chip--click {\ntop: 36%; right: -20px;\nbackground: #d1fadf;\nborder-color: #b9e9c8;\ncolor: #027a48;\nfont-weight: 600;\n}\n.fmstr-cmp-eie-hero__chip--saved {\nbottom: -20px; left: 16px;\n}\n.fmstr-cmp-eie-hero__chip-icon {\nwidth: 26px; height: 26px;\nborder-radius: 7px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: inline-flex; align-items: center; justify-content: center;\nflex-shrink: 0;\n}\n.fmstr-cmp-eie-hero__chip--click .fmstr-cmp-eie-hero__chip-icon { background: #027a48; color: #fff; }\n.fmstr-cmp-eie-hero__chip-label { font-weight: 600; }\n.fmstr-cmp-eie-hero__chip-sub { display: block; font-size: 11.5px; color: var(--c-fg-3); font-weight: 400; margin-top: 1px; }\n\n@media (max-width: 980px) {\n.fmstr-cmp-eie-hero__container { grid-template-columns: 1fr; gap: 48px; }\n.fmstr-cmp-eie-hero__visual { max-width: 460px; margin: 0 auto; width: 100%; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-hero { padding: 80px 16px 56px; }\n.fmstr-cmp-eie-hero__badge { margin-bottom: 28px; padding: 6px 12px; font-size: 12.5px; }\n.fmstr-cmp-eie-hero__sub { font-size: 16px; }\n.fmstr-cmp-eie-hero__cta-primary, .fmstr-cmp-eie-hero__cta-secondary { padding: 13px 20px; min-height: 44px; }\n.fmstr-cmp-eie-hero__star { width: 38px; height: 38px; font-size: 17px; }\n.fmstr-cmp-eie-hero__trust { flex-direction: column; gap: 10px; }\n.fmstr-cmp-eie-hero__trust-item { font-size: 13.5px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }\n.fmstr-cmp-eie-hero__cta-primary, .fmstr-cmp-eie-hero__cta-secondary { justify-content: center; }\n.fmstr-cmp-eie-hero__chip { display: none; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-hero\" aria-labelledby=\"fmstr-cmp-eie-hero-h1\">\n\u003Cdiv class=\"fmstr-cmp-eie-hero__container\">\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__content\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__badge\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__badge-dot\" aria-hidden=\"true\">\u003C/span>\nFree plan. No credit card.\n\u003C/span>\n\n\u003Ch1 class=\"fmstr-cmp-eie-hero__h1\" id=\"fmstr-cmp-eie-hero-h1\">Embed your \u003Cspan class=\"fmstr-cmp-eie-hero__h1-accent\">first form question\u003C/span> directly in your email\u003C/h1>\n\n\u003Cp class=\"fmstr-cmp-eie-hero__sub\">Respondents click their answer inside the email body. Your form opens with that answer already saved. One step instead of three.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__ctas\">\n\u003Ca class=\"fmstr-cmp-eie-hero__cta-primary\" href=\"https://app.formester.com/users/sign_up\">Build an email form\u003C/a>\n\u003Ca class=\"fmstr-cmp-eie-hero__cta-secondary\" href=\"#compatibility\">See how it renders in Gmail\u003C/a>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__trust\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__trust-item\">\n\u003Csvg class=\"fmstr-cmp-eie-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/polyline>\u003C/svg>\nWorks in every major client\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__trust-item\">\n\u003Csvg class=\"fmstr-cmp-eie-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/polyline>\u003C/svg>\nMailchimp, Brevo, HubSpot, ConvertKit\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__trust-item\">\n\u003Csvg class=\"fmstr-cmp-eie-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/polyline>\u003C/svg>\nPre-fill carries the answer through\n\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-eie-hero__email\">\n\u003Cdiv class=\"fmstr-cmp-eie-hero__email-bar\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__dot\" style=\"background:#fda4af;\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__dot\" style=\"background:#fde68a;\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__dot\" style=\"background:#86efac;\">\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__email-domain\">mail.yourcompany.com\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hero__email-body\">\n\u003Cdiv class=\"fmstr-cmp-eie-hero__email-meta\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__email-from\">team@yourbakery.com\u003C/span>\n\u003Cspan>Today, 2:14 PM\u003C/span>\n\u003C/div>\n\u003Ch3 class=\"fmstr-cmp-eie-hero__email-subject\">How was your last order?\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-hero__email-prompt\">One quick tap. We will use this to make the next order even better.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-eie-hero__stars\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__star\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__star\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__star\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__star fmstr-cmp-eie-hero__star--clicked\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__star\">★\u003C/span>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-eie-hero__email-footer\">Sent via Formester\u003C/p>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__chip fmstr-cmp-eie-hero__chip--click\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__chip-icon\">\n\u003Csvg 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/polyline>\u003C/svg>\n\u003C/span>\n4 stars clicked\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-hero__chip fmstr-cmp-eie-hero__chip--saved\">\n\u003Cspan class=\"fmstr-cmp-eie-hero__chip-icon\">\n\u003Csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cdiv>\n\u003Cspan class=\"fmstr-cmp-eie-hero__chip-label\">Form opens at Q2\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-hero__chip-sub\">With 4 ★ already saved\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",false,{"id":66,"__component":67,"label":68,"heading":69,"description":69,"showTrustBadges":64,"rawHtml":69,"title":70,"logos":71},437,"macro-components.trust-seals","Trusted by leading organisations",null,[],[],{"id":73,"__component":62,"markup":74,"useContainer":64},245,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-hiw a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-hiw {\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-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.06);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\ncolor: var(--c-fg-1);\noverflow-x: hidden;\n}\n.fmstr-cmp-eie-hiw *, .fmstr-cmp-eie-hiw *::before, .fmstr-cmp-eie-hiw *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-hiw__step, .fmstr-cmp-eie-hiw__content, .fmstr-cmp-eie-hiw__visual { min-width: 0; }\n.fmstr-cmp-eie-hiw__visual { max-width: 100%; overflow: hidden; }\n.fmstr-cmp-eie-hiw__code { word-break: break-all; }\n\n.fmstr-cmp-eie-hiw__container { max-width: 1100px; margin: 0 auto; }\n\n.fmstr-cmp-eie-hiw__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }\n.fmstr-cmp-eie-hiw__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-hiw__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-eie-hiw__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-hiw__timeline { list-style: none; margin: 0; padding: 0; }\n\n.fmstr-cmp-eie-hiw__step {\nposition: relative;\ndisplay: grid;\ngrid-template-columns: 72px 1fr 380px;\ngap: 24px;\npadding-bottom: 56px;\nalign-items: start;\n}\n.fmstr-cmp-eie-hiw__step:last-child { padding-bottom: 0; }\n.fmstr-cmp-eie-hiw__step::before {\ncontent: \"\"; position: absolute;\nleft: 35px; top: 56px; bottom: 0; width: 2px;\nbackground: repeating-linear-gradient(to bottom, var(--c-violet-300) 0 6px, transparent 6px 12px);\n}\n.fmstr-cmp-eie-hiw__step:last-child::before { display: none; }\n\n.fmstr-cmp-eie-hiw__marker { width: 72px; display: flex; justify-content: center; align-items: flex-start; }\n.fmstr-cmp-eie-hiw__num {\ndisplay: inline-flex; align-items: center; justify-content: center;\nwidth: 56px; height: 56px;\nborder-radius: 16px;\nbackground: linear-gradient(135deg, var(--c-violet-500) 0%, var(--c-violet-700) 100%);\ncolor: #ffffff; font-size: 20px; font-weight: 700;\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .28), 0 0 0 6px var(--c-violet-100);\n}\n\n.fmstr-cmp-eie-hiw__content { padding-top: 8px; }\n.fmstr-cmp-eie-hiw__h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-eie-hiw__body { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--c-fg-2); }\n.fmstr-cmp-eie-hiw__body strong { color: var(--c-fg-1); font-weight: 600; }\n\n.fmstr-cmp-eie-hiw__visual {\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-md);\npadding: 18px;\ndisplay: flex; flex-direction: column; gap: 12px;\nposition: relative;\nz-index: 1;\n}\n.fmstr-cmp-eie-hiw__mock-label { font-size: 11px; font-weight: 700; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }\n\n/* Step 1: question type picker */\n.fmstr-cmp-eie-hiw__picker { display: flex; flex-direction: column; gap: 6px; }\n.fmstr-cmp-eie-hiw__opt {\ndisplay: flex; align-items: center; gap: 10px;\npadding: 9px 12px;\nbackground: var(--c-soft);\nborder: 1.5px solid transparent;\nborder-radius: 8px;\nfont-size: 13px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-hiw__opt--active {\nbackground: var(--c-tint);\nborder-color: var(--c-violet-500);\ncolor: var(--c-violet-700);\nfont-weight: 600;\n}\n.fmstr-cmp-eie-hiw__opt-icon { font-size: 16px; }\n\n/* Step 2: HTML snippet */\n.fmstr-cmp-eie-hiw__code {\nfont-family: ui-monospace, SFMono-Regular, Menlo, monospace;\nfont-size: 12px; line-height: 1.6;\nbackground: #1f2233;\ncolor: #e2e8f0;\nborder-radius: 10px;\npadding: 14px;\noverflow: hidden;\n}\n.fmstr-cmp-eie-hiw__code-tag { color: #a78bfa; }\n.fmstr-cmp-eie-hiw__code-attr { color: #fbbf24; }\n.fmstr-cmp-eie-hiw__code-str { color: #6ee7b7; }\n.fmstr-cmp-eie-hiw__copy-btn {\nmargin-top: 8px;\ndisplay: inline-flex; align-items: center; gap: 6px;\npadding: 7px 12px;\nbackground: var(--c-tint);\ncolor: var(--c-violet-700);\nborder-radius: 8px;\nfont-size: 12px;\nfont-weight: 600;\nalign-self: flex-start;\n}\n\n/* Step 3: form transition */\n.fmstr-cmp-eie-hiw__form-mock {\ndisplay: flex; flex-direction: column; gap: 10px;\npadding: 12px;\nbackground: var(--c-soft);\nborder-radius: 10px;\n}\n.fmstr-cmp-eie-hiw__form-prefill {\ndisplay: flex; align-items: center; justify-content: space-between;\npadding: 9px 12px;\nbackground: #d1fadf;\nborder-radius: 8px;\nfont-size: 12.5px;\ncolor: #027a48;\nfont-weight: 600;\n}\n.fmstr-cmp-eie-hiw__form-q {\ndisplay: flex; align-items: center; gap: 8px;\npadding: 9px 12px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 8px;\nfont-size: 13px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-hiw__form-q-num { color: var(--c-violet-700); font-weight: 700; font-size: 12px; min-width: 18px; }\n.fmstr-cmp-eie-hiw__form-submit {\nmargin-top: 4px;\npadding: 9px;\nbackground: var(--c-violet-600);\ncolor: #ffffff;\nborder-radius: 8px;\nfont-size: 12.5px;\nfont-weight: 600;\ntext-align: center;\n}\n\n@media (max-width: 880px) {\n.fmstr-cmp-eie-hiw__step { grid-template-columns: 56px 1fr; gap: 16px; row-gap: 16px; padding-bottom: 48px; }\n.fmstr-cmp-eie-hiw__step::before { left: 27px; top: 48px; }\n.fmstr-cmp-eie-hiw__marker { width: 56px; }\n.fmstr-cmp-eie-hiw__num { width: 48px; height: 48px; font-size: 17px; box-shadow: 0 6px 16px rgba(127, 86, 217, .28), 0 0 0 5px var(--c-violet-100); }\n.fmstr-cmp-eie-hiw__visual { grid-column: 1 / -1; margin-left: 0; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-hiw { padding: 64px 16px; }\n.fmstr-cmp-eie-hiw__h3 { font-size: 19px; }\n.fmstr-cmp-eie-hiw__visual { padding: 14px; }\n.fmstr-cmp-eie-hiw__code { font-size: 11px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-hiw__step { grid-template-columns: 44px 1fr; gap: 12px; }\n.fmstr-cmp-eie-hiw__step::before { left: 21px; top: 42px; }\n.fmstr-cmp-eie-hiw__marker { width: 44px; }\n.fmstr-cmp-eie-hiw__num { width: 40px; height: 40px; font-size: 14px; border-radius: 11px; box-shadow: 0 4px 12px rgba(127, 86, 217, .28), 0 0 0 4px var(--c-violet-100); }\n.fmstr-cmp-eie-hiw__visual { padding: 12px; }\n.fmstr-cmp-eie-hiw__h3 { font-size: 18px; }\n.fmstr-cmp-eie-hiw__body { font-size: 14.5px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-hiw\" aria-labelledby=\"fmstr-cmp-eie-hiw-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-hiw__header\">\n\u003Cspan class=\"fmstr-cmp-eie-hiw__eyebrow\">How it works\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-hiw__h2\" id=\"fmstr-cmp-eie-hiw-h2\">A click in the inbox is a response in your form\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-hiw__sub\">Most \"email surveys\" are a button that says \"Take our 5-minute survey.\" People delete the email. Embedding the first question in the body turns one decision into one click.\u003C/p>\n\u003C/header>\n\n\u003Col class=\"fmstr-cmp-eie-hiw__timeline\">\n\n\u003Cli class=\"fmstr-cmp-eie-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__marker\">\u003Cspan class=\"fmstr-cmp-eie-hiw__num\" aria-hidden=\"true\">1\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-eie-hiw__h3\">Pick the first question\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-hiw__body\">Choose any single-click question type: \u003Cstrong>NPS, CSAT, star rating, thumbs up/down, multiple choice, yes/no\u003C/strong>.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-eie-hiw__mock-label\">Choose question type\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__picker\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__opt\">\u003Cspan class=\"fmstr-cmp-eie-hiw__opt-icon\">📊\u003C/span> NPS\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__opt fmstr-cmp-eie-hiw__opt--active\">\u003Cspan class=\"fmstr-cmp-eie-hiw__opt-icon\">★\u003C/span> Star rating\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__opt\">\u003Cspan class=\"fmstr-cmp-eie-hiw__opt-icon\">👍\u003C/span> Thumbs up / down\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__opt\">\u003Cspan class=\"fmstr-cmp-eie-hiw__opt-icon\">○\u003C/span> Yes / No\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003Cli class=\"fmstr-cmp-eie-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__marker\">\u003Cspan class=\"fmstr-cmp-eie-hiw__num\" aria-hidden=\"true\">2\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-eie-hiw__h3\">Copy the email snippet\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-hiw__body\">Formester generates an HTML block you paste into \u003Cstrong>Mailchimp, Brevo, HubSpot, ConvertKit\u003C/strong>, or any ESP that supports custom HTML. Each answer is a tracked link back to your form.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-eie-hiw__mock-label\">HTML snippet\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__code\">\n\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\"><a\u003C/span> \u003Cspan class=\"fmstr-cmp-eie-hiw__code-attr\">href\u003C/span>=\u003Cspan class=\"fmstr-cmp-eie-hiw__code-str\">\"…/r?q=1&v=4\"\u003C/span>\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\">>\u003C/span>★★★★\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\"></a>\u003C/span>\u003Cbr>\n\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\"><a\u003C/span> \u003Cspan class=\"fmstr-cmp-eie-hiw__code-attr\">href\u003C/span>=\u003Cspan class=\"fmstr-cmp-eie-hiw__code-str\">\"…/r?q=1&v=5\"\u003C/span>\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\">>\u003C/span>★★★★★\u003Cspan class=\"fmstr-cmp-eie-hiw__code-tag\"></a>\u003C/span>\n\u003C/div>\n\u003Cspan class=\"fmstr-cmp-eie-hiw__copy-btn\">\n\u003Csvg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Crect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\">\u003C/rect>\u003Cpath d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\">\u003C/path>\u003C/svg>\nCopy snippet\n\u003C/span>\n\u003C/div>\n\u003C/li>\n\n\u003Cli class=\"fmstr-cmp-eie-hiw__step\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__marker\">\u003Cspan class=\"fmstr-cmp-eie-hiw__num\" aria-hidden=\"true\">3\u003C/span>\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__content\">\n\u003Ch3 class=\"fmstr-cmp-eie-hiw__h3\">The respondent clicks once, finishes in your form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-hiw__body\">The click registers as their answer. Your form opens with that answer already filled in. They complete any follow-up questions and submit. The whole flow takes \u003Cstrong>15 seconds\u003C/strong>.\u003C/p>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__visual\" aria-hidden=\"true\">\n\u003Cp class=\"fmstr-cmp-eie-hiw__mock-label\">Form view after click\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__form-mock\">\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__form-prefill\">\n\u003Cspan>Q1 — Rating\u003C/span>\n\u003Cspan>★★★★ saved ✓\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__form-q\">\u003Cspan class=\"fmstr-cmp-eie-hiw__form-q-num\">Q2\u003C/span> What could be better?\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__form-q\">\u003Cspan class=\"fmstr-cmp-eie-hiw__form-q-num\">Q3\u003C/span> Would you order again?\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-hiw__form-submit\">Submit\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003C/li>\n\n\u003C/ol>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":76,"__component":62,"markup":77,"useContainer":64},246,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-cmp a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-cmp {\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-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.06);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-cmp *, .fmstr-cmp-eie-cmp *::before, .fmstr-cmp-eie-cmp *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-cmp > *, .fmstr-cmp-eie-cmp > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-cmp__container { max-width: 1080px; margin: 0 auto; }\n\n.fmstr-cmp-eie-cmp__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-cmp__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-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-eie-cmp__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n/* Client logo strip */\n.fmstr-cmp-eie-cmp__strip {\ndisplay: flex; flex-wrap: wrap; justify-content: center; align-items: center;\ngap: 12px; margin: 0 auto 40px;\nmax-width: 920px;\n}\n.fmstr-cmp-eie-cmp__client {\ndisplay: inline-flex; align-items: center; gap: 10px;\npadding: 10px 16px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 12px;\nfont-size: 13.5px;\nfont-weight: 600;\ncolor: var(--c-fg-1);\nbox-shadow: var(--c-shadow-sm);\n}\n.fmstr-cmp-eie-cmp__brand-mark {\nwidth: 22px; height: 22px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nflex-shrink: 0;\n}\n.fmstr-cmp-eie-cmp__brand-mark svg { display: block; width: 100%; height: 100%; }\n.fmstr-cmp-eie-cmp__client-tick {\ndisplay: inline-flex; align-items: center; justify-content: center;\nwidth: 18px; height: 18px;\nbackground: #d1fadf; color: #027a48;\nborder-radius: 50%;\nfont-size: 11px;\n}\n\n/* Detailed table */\n.fmstr-cmp-eie-cmp__table-wrap {\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\noverflow: hidden;\nbox-shadow: var(--c-shadow-md);\nbackground: #ffffff;\n}\n.fmstr-cmp-eie-cmp__table { width: 100%; border-collapse: collapse; }\n.fmstr-cmp-eie-cmp__table th, .fmstr-cmp-eie-cmp__table td {\npadding: 14px 18px;\ntext-align: left;\nfont-size: 14.5px;\nborder-bottom: 1px solid var(--c-border);\n}\n.fmstr-cmp-eie-cmp__table tr:last-child td { border-bottom: 0; }\n.fmstr-cmp-eie-cmp__table th {\nbackground: var(--c-soft);\nfont-size: 11.5px;\nfont-weight: 700;\ncolor: var(--c-fg-3);\ntext-transform: uppercase;\nletter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-cmp__client-cell { font-weight: 600; color: var(--c-fg-1); }\n.fmstr-cmp-eie-cmp__notes-cell { color: var(--c-fg-2); }\n.fmstr-cmp-eie-cmp__yes {\ndisplay: inline-flex; align-items: center; gap: 6px;\npadding: 4px 10px;\nborder-radius: 999px;\nbackground: #d1fadf; color: #027a48;\nfont-size: 12.5px; font-weight: 700;\n}\n\n.fmstr-cmp-eie-cmp__note {\nmargin: 28px auto 0;\nmax-width: 760px;\npadding: 18px 22px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\nborder-radius: 12px;\nfont-size: 14.5px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\ntext-align: center;\n}\n.fmstr-cmp-eie-cmp__note strong { color: var(--c-violet-700); font-weight: 600; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-eie-cmp { padding: 64px 16px; }\n.fmstr-cmp-eie-cmp__table th, .fmstr-cmp-eie-cmp__table td { padding: 12px 14px; font-size: 13.5px; }\n.fmstr-cmp-eie-cmp__table th:nth-child(2), .fmstr-cmp-eie-cmp__table td:nth-child(2) { text-align: center; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-cmp\" id=\"compatibility\" aria-labelledby=\"fmstr-cmp-eie-cmp-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-cmp__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-cmp__header\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__eyebrow\">Universal compatibility\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-cmp__h2\" id=\"fmstr-cmp-eie-cmp-h2\">Works across every major email client\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-cmp__sub\">From Gmail to Outlook to Apple Mail to Yahoo. The buttons render, the clicks track, the answers carry through to the form.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-cmp__strip\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__brand-mark\" aria-label=\"Gmail\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Cpath fill=\"#EA4335\" d=\"M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z\">\u003C/path>\u003C/svg>\n\u003C/span>\nGmail\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client-tick\">✓\u003C/span>\n\u003C/span>\n\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__brand-mark\" aria-label=\"Outlook\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Cpath fill=\"#0078D4\" d=\"M7.88 12.04q0 .45-.11.87-.1.42-.33.74-.22.32-.58.51-.37.18-.87.18-.51 0-.85-.18-.34-.18-.55-.5-.21-.31-.31-.73-.1-.43-.1-.86t.1-.86q.1-.43.31-.75.2-.31.55-.5.34-.18.85-.18.5 0 .87.18.36.19.58.51.23.32.33.75.11.42.11.85zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.55V2.45q0-.44.3-.75.3-.3.75-.3h12.9q.45 0 .75.3.3.3.3.75V10.4l1.24.72h.01q.1.07.18.18.07.12.02.32zm-3-6.7v-2.4h-9V5.3zm0 5.3v-3H12v3zm0 4.8v-3.6H12v3.6zM12 22.5h9V18l-9.04.45h-3.34v3.16q0 .31.22.53.21.22.52.22zm5.5-14H6.55V6h-2.7v9.32q0 .27.15.46.17.18.43.18h12.32q.27 0 .43-.16.16-.15.16-.42zm-4.55 5.84q.69 0 1.22-.32.53-.32.81-.91.29-.59.29-1.4 0-.74-.26-1.34-.27-.59-.78-.92-.5-.34-1.21-.34-.71 0-1.24.33-.52.33-.79.92-.27.6-.27 1.41 0 .65.26 1.21.27.54.78.87.51.32 1.19.32z\">\u003C/path>\u003C/svg>\n\u003C/span>\nOutlook\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client-tick\">✓\u003C/span>\n\u003C/span>\n\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__brand-mark\" aria-label=\"Apple Mail\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Cdefs>\u003ClinearGradient id=\"eieMailG\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#0BBCFF\">\u003C/stop>\u003Cstop offset=\"1\" stop-color=\"#1A8FFF\">\u003C/stop>\u003C/linearGradient>\u003C/defs>\u003Crect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"3.5\" fill=\"url(#eieMailG)\">\u003C/rect>\u003Cpath d=\"M3.5 7.5l8 5.5 8-5.5\" stroke=\"#fff\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003C/path>\u003C/svg>\n\u003C/span>\nApple Mail\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client-tick\">✓\u003C/span>\n\u003C/span>\n\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client\">\n\u003Cspan class=\"fmstr-cmp-eie-cmp__brand-mark\" aria-label=\"Yahoo Mail\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Cpath fill=\"#5F01D1\" d=\"M4.5 4.5h3.4l3.1 7.3 3.2-7.3H17l-5.4 12-1 2.3H7.3l1-2.3-4.8-12zm12.7 9.3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z\">\u003C/path>\u003C/svg>\n\u003C/span>\nYahoo Mail\n\u003Cspan class=\"fmstr-cmp-eie-cmp__client-tick\">✓\u003C/span>\n\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-cmp__table-wrap\">\n\u003Ctable class=\"fmstr-cmp-eie-cmp__table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Client\u003C/th>\n\u003Cth>First-question buttons render\u003C/th>\n\u003Cth>Notes\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Gmail (web + mobile)\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Most reliable.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Outlook (web + new desktop)\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Buttons render as styled links. Click-through always works.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Outlook (classic Windows desktop)\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Word-engine fallback. Some styling simplifies; clicks still carry through.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Apple Mail (iOS + macOS)\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Renders cleanly with full styling.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Yahoo Mail\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Buttons render as links.\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__client-cell\">Mobile webmail (Gmail / Outlook apps)\u003C/td>\n\u003Ctd>\u003Cspan class=\"fmstr-cmp-eie-cmp__yes\">Yes\u003C/span>\u003C/td>\n\u003Ctd class=\"fmstr-cmp-eie-cmp__notes-cell\">Same behavior as web.\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-eie-cmp__note\">\u003Cstrong>Gmail is the visually-richest render.\u003C/strong> Every other client receives the same buttons as fully-styled clickable links that carry the answer to your form. No client is unsupported.\u003C/p>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":79,"__component":62,"markup":80,"useContainer":64},247,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-qt a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-qt {\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-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-qt *, .fmstr-cmp-eie-qt *::before, .fmstr-cmp-eie-qt *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-qt > *, .fmstr-cmp-eie-qt > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-qt__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-eie-qt__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-qt__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-qt__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-eie-qt__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-qt__grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-eie-qt__card {\ndisplay: flex; flex-direction: column;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\ntransition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;\n}\n.fmstr-cmp-eie-qt__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow-md); transform: translateY(-2px); }\n\n.fmstr-cmp-eie-qt__visual {\nmin-height: 92px;\npadding: 18px;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\ngap: 6px;\nbackground: linear-gradient(135deg, var(--c-tint) 0%, #ffffff 100%);\nborder-bottom: 1px solid var(--c-border);\n}\n\n/* Star rating */\n.fmstr-cmp-eie-qt__star { font-size: 24px; color: #d1d5db; }\n.fmstr-cmp-eie-qt__star--filled { color: #f59e0b; }\n\n/* NPS */\n.fmstr-cmp-eie-qt__nps { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }\n.fmstr-cmp-eie-qt__nps-num {\nwidth: 22px; height: 22px;\nborder-radius: 5px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nfont-size: 11px; font-weight: 600;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-qt__nps-num--active { background: var(--c-violet-600); color: #fff; border-color: var(--c-violet-600); }\n\n/* Thumbs */\n.fmstr-cmp-eie-qt__thumb {\nwidth: 48px; height: 48px;\nborder-radius: 12px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nbackground: #ffffff;\nborder: 1.5px solid var(--c-border);\nfont-size: 22px;\n}\n.fmstr-cmp-eie-qt__thumb--active { background: var(--c-violet-600); border-color: var(--c-violet-600); }\n\n/* Multiple choice */\n.fmstr-cmp-eie-qt__mc { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 200px; }\n.fmstr-cmp-eie-qt__mc-opt {\npadding: 6px 10px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 6px;\nfont-size: 12.5px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-qt__mc-opt--active { background: var(--c-violet-600); color: #fff; border-color: var(--c-violet-600); font-weight: 600; }\n\n/* Yes / No */\n.fmstr-cmp-eie-qt__yn { display: flex; gap: 8px; }\n.fmstr-cmp-eie-qt__yn-btn {\npadding: 8px 22px;\nborder-radius: 10px;\nfont-size: 14px;\nfont-weight: 600;\nbackground: #ffffff;\nborder: 1.5px solid var(--c-border);\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-qt__yn-btn--active { background: var(--c-violet-600); color: #fff; border-color: var(--c-violet-600); }\n\n/* Smileys */\n.fmstr-cmp-eie-qt__smileys { display: flex; gap: 6px; }\n.fmstr-cmp-eie-qt__smiley { font-size: 26px; opacity: 0.6; }\n.fmstr-cmp-eie-qt__smiley--active { opacity: 1; transform: scale(1.15); }\n\n.fmstr-cmp-eie-qt__meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }\n.fmstr-cmp-eie-qt__name { margin: 0; font-size: 16px; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-eie-qt__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-fg-2); }\n\n@media (max-width: 980px) {\n.fmstr-cmp-eie-qt__grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-qt { padding: 64px 16px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-qt__grid { grid-template-columns: 1fr; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-qt\" aria-labelledby=\"fmstr-cmp-eie-qt-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-qt__header\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__eyebrow\">Inline question types\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-qt__h2\" id=\"fmstr-cmp-eie-qt-h2\">Question types that work inline\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-qt__sub\">Anything that is a single decision works. Anything that needs typing belongs on the form page.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-qt__grid\">\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__star fmstr-cmp-eie-qt__star--filled\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__star fmstr-cmp-eie-qt__star--filled\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__star fmstr-cmp-eie-qt__star--filled\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__star fmstr-cmp-eie-qt__star--filled\">★\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__star\">★\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">Star rating (1 to 5)\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">Post-purchase, post-support, post-event. The single most-used inline question.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__nps\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">0\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">1\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">2\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">3\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">4\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">5\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">6\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">7\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">8\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num fmstr-cmp-eie-qt__nps-num--active\">9\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__nps-num\">10\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">NPS (0 to 10)\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">Renders as eleven small buttons. Use a \"How likely are you to recommend us?\" subject line.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__thumb fmstr-cmp-eie-qt__thumb--active\">👍\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__thumb\">👎\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">Thumbs up / thumbs down\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">Quick CSAT after a delivered order, a closed ticket, or a played episode.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__mc\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__mc-opt\">Option A\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__mc-opt fmstr-cmp-eie-qt__mc-opt--active\">Option B\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__mc-opt\">Option C\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">Multiple choice (up to 6 options)\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">\"Which topic should we cover next?\" or \"Which plan fits you?\"\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__yn\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__yn-btn fmstr-cmp-eie-qt__yn-btn--active\">Yes\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__yn-btn\">No\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">Yes / No\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">RSVPs. \"Will you be at the event?\"\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-qt__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__visual\" aria-hidden=\"true\">\n\u003Cdiv class=\"fmstr-cmp-eie-qt__smileys\">\n\u003Cspan class=\"fmstr-cmp-eie-qt__smiley\">😞\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__smiley\">🙁\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__smiley\">😐\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__smiley fmstr-cmp-eie-qt__smiley--active\">🙂\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-qt__smiley\">😄\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-qt__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-qt__name\">Smiley scale (5 emoji)\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-qt__desc\">Casual CSAT for B2C audiences.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":82,"__component":62,"markup":83,"useContainer":64},248,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-esp a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-esp {\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-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-lg: 0 20px 50px -12px rgba(16,24,40,.16), 0 8px 20px -8px rgba(16,24,40,.08);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-esp *, .fmstr-cmp-eie-esp *::before, .fmstr-cmp-eie-esp *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-esp > *, .fmstr-cmp-eie-esp > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-esp__container { max-width: 1100px; margin: 0 auto; }\n.fmstr-cmp-eie-esp__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-esp__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-esp__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-eie-esp__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-esp__split {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 32px;\n}\n\n.fmstr-cmp-eie-esp__col {\ndisplay: flex; flex-direction: column;\ngap: 18px;\npadding: 28px;\nbackground: var(--c-soft);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\n}\n.fmstr-cmp-eie-esp__col-head {\ndisplay: flex; align-items: center; gap: 12px;\n}\n.fmstr-cmp-eie-esp__col-icon {\nwidth: 40px; height: 40px;\nborder-radius: 10px;\nbackground: var(--c-violet-100);\ncolor: var(--c-violet-700);\ndisplay: flex; align-items: center; justify-content: center;\n}\n.fmstr-cmp-eie-esp__col-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-fg-1); }\n\n.fmstr-cmp-eie-esp__esp-grid {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\n}\n.fmstr-cmp-eie-esp__esp {\ndisplay: flex; align-items: center; gap: 10px;\npadding: 12px 14px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 10px;\nfont-size: 13.5px;\ncolor: var(--c-fg-1);\nfont-weight: 600;\n}\n.fmstr-cmp-eie-esp__brand-mark {\nwidth: 22px; height: 22px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nflex-shrink: 0;\n}\n.fmstr-cmp-eie-esp__brand-mark svg { display: block; width: 100%; height: 100%; }\n.fmstr-cmp-eie-esp__esp-name { flex: 1; }\n.fmstr-cmp-eie-esp__esp-check {\ndisplay: inline-flex; align-items: center; justify-content: center;\nwidth: 18px; height: 18px;\nbackground: #d1fadf; color: #027a48;\nborder-radius: 50%;\nfont-size: 11px;\nflex-shrink: 0;\n}\n.fmstr-cmp-eie-esp__smtp-pill {\npadding: 5px 11px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 999px;\nfont-size: 12.5px;\nfont-weight: 600;\ncolor: var(--c-fg-2);\ndisplay: inline-flex;\nalign-items: center;\ngap: 6px;\n}\n.fmstr-cmp-eie-esp__smtp-dot {\nwidth: 8px; height: 8px;\nborder-radius: 50%;\ndisplay: inline-block;\nflex-shrink: 0;\n}\n\n.fmstr-cmp-eie-esp__col-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-eie-esp__col-body a { color: var(--c-violet-600) !important; text-decoration: none !important; font-weight: 600; }\n.fmstr-cmp-eie-esp__col-body a:hover { text-decoration: underline !important; }\n\n.fmstr-cmp-eie-esp__smtp-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }\n\n.fmstr-cmp-eie-esp__caveat {\nmargin: 28px auto 0;\nmax-width: 880px;\npadding: 16px 20px;\nbackground: var(--c-tint);\nborder: 1px solid var(--c-edge);\nborder-radius: 12px;\nfont-size: 14px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\ntext-align: center;\n}\n.fmstr-cmp-eie-esp__caveat strong { color: var(--c-violet-700); font-weight: 600; }\n\n@media (max-width: 880px) {\n.fmstr-cmp-eie-esp__split { grid-template-columns: 1fr; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-esp { padding: 64px 16px; }\n.fmstr-cmp-eie-esp__col { padding: 22px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-esp__esp-grid { grid-template-columns: 1fr; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-esp\" aria-labelledby=\"fmstr-cmp-eie-esp-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-esp__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-esp__header\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__eyebrow\">Ship through your ESP\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-esp__h2\" id=\"fmstr-cmp-eie-esp-h2\">Paste the snippet, hit send\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-esp__sub\">Formester gives you the HTML block. Your existing email platform sends it.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__split\">\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__col\">\n\u003Cdiv class=\"fmstr-cmp-eie-esp__col-head\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__col-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\">\u003C/path>\u003Cpolyline points=\"22 4 12 14.01 9 11.01\">\u003C/polyline>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-esp__col-title\">Tested ESPs\u003C/h3>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp-grid\">\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"Mailchimp\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#FFE01B\">\u003C/circle>\u003Cpath fill=\"#241C15\" d=\"M9.2 8.5c-.4-.4-1-.5-1.5-.2-.4.3-.6.8-.5 1.3l.4 1.3c-.6.4-1 1-1.1 1.7-.2 1.1.5 2.1 1.6 2.5.4.1.8.2 1.2.1.3 0 .6-.2.8-.4l.5.6c.4.4 1 .5 1.5.3.5-.2.8-.7.7-1.3-.1-.5-.4-.9-.9-1l-.6-.2.2-.6c.2-.6.1-1.2-.3-1.7-.4-.5-1-.7-1.6-.6l-.4-1.8zm5.9 5.8c-.7 0-1.2.6-1.2 1.2 0 .7.5 1.2 1.2 1.2.7 0 1.2-.5 1.2-1.2 0-.6-.5-1.2-1.2-1.2z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">Mailchimp\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"Brevo\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Crect width=\"24\" height=\"24\" rx=\"5\" fill=\"#0B996E\">\u003C/rect>\u003Cpath fill=\"#fff\" d=\"M7.5 6h4.6c2.6 0 4.1 1.3 4.1 3.3 0 1.4-.8 2.4-2.1 2.8 1.5.4 2.4 1.4 2.4 3 0 2.2-1.6 3.5-4.4 3.5H7.5V6zm4.4 5c1.3 0 2-.5 2-1.5s-.7-1.5-2-1.5h-1.9v3h1.9zm.3 5.4c1.3 0 2.1-.6 2.1-1.6 0-1.1-.8-1.7-2.1-1.7h-2.2v3.3h2.2z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">Brevo (formerly Sendinblue)\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"HubSpot\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Cpath fill=\"#FF7A59\" d=\"M18.16 8.55V6.43a1.62 1.62 0 1 0-1.94 0v2.12a4.6 4.6 0 0 0-2.18.96L7.97 4.74a1.83 1.83 0 1 0-1.16 1.55l5.92 4.6a4.65 4.65 0 0 0-.71 2.46c0 .94.28 1.81.77 2.54l-1.83 1.82a1.45 1.45 0 1 0 1.07 1.07l1.82-1.82a4.66 4.66 0 1 0 4.31-7.92zm-.97 6.97a2.34 2.34 0 1 1 0-4.68 2.34 2.34 0 0 1 0 4.68z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">HubSpot\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"ConvertKit (Kit)\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Crect width=\"24\" height=\"24\" rx=\"5\" fill=\"#FB6970\">\u003C/rect>\u003Cpath fill=\"#fff\" d=\"M8 7h2.4v6.2L13.7 7h2.5l-2.9 5.4L16.4 17H14l-2-3.8-1.6 1.4V17H8z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">ConvertKit\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"Klaviyo\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Crect width=\"24\" height=\"24\" rx=\"5\" fill=\"#1F1F1F\">\u003C/rect>\u003Cpath fill=\"#fff\" d=\"M12 5.5L5.5 9v6L12 18.5 18.5 15V9L12 5.5zm0 2.4l4.1 2.3v3.6L12 16.1l-4.1-2.3v-3.6L12 7.9zm0 2.2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">Klaviyo\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__esp\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__brand-mark\" aria-label=\"Constant Contact\">\n\u003Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#1856ED\">\u003C/circle>\u003Cpath fill=\"#fff\" d=\"M9.4 8.2c-1.4 0-2.5.5-3.4 1.5-.9 1-1.3 2.3-1.3 3.9 0 1.6.4 2.9 1.3 3.9.9 1 2 1.5 3.4 1.5 1.1 0 2-.3 2.7-.9.7-.6 1.2-1.4 1.4-2.4h-2.3c-.1.4-.3.7-.7.9-.3.2-.7.3-1.1.3-.7 0-1.3-.3-1.7-.9-.4-.6-.6-1.4-.6-2.4 0-1 .2-1.8.6-2.4.4-.6 1-.9 1.7-.9.4 0 .8.1 1.1.3.3.2.6.5.7.9h2.3c-.2-1-.7-1.8-1.4-2.4-.7-.6-1.6-.9-2.7-.9zm6.4 0v9.6h2.4v-3.9h1.4l1.8 3.9H24l-2-4.2c1-.5 1.6-1.4 1.6-2.7 0-.9-.3-1.6-.9-2.1-.6-.5-1.4-.8-2.4-.8h-4.5zm2.4 1.7h2c.4 0 .7.1 1 .3.2.2.3.5.3.9 0 .4-.1.7-.3.9-.2.2-.6.3-1 .3h-2v-2.4z\">\u003C/path>\u003C/svg>\n\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-name\">Constant Contact\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__esp-check\">✓\u003C/span>\n\u003C/div>\n\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-eie-esp__col-body\">HubSpot works with the \u003Ca href=\"https://formester.com/integrations/hubspot/\">native CRM integration\u003C/a> too.\u003C/p>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-esp__col\">\n\u003Cdiv class=\"fmstr-cmp-eie-esp__col-head\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__col-icon\" aria-hidden=\"true\">\n\u003Csvg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\u003Cpath d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\">\u003C/path>\u003Cpolyline points=\"22,6 12,13 2,6\">\u003C/polyline>\u003C/svg>\n\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-esp__col-title\">Custom SMTP for transactional sends\u003C/h3>\n\u003C/div>\n\u003Cp class=\"fmstr-cmp-eie-esp__col-body\">If you send transactional email through Formester directly (notifications, response copies), Formester delivers via \u003Ca href=\"https://formester.com/integrations/\">your connected SMTP provider\u003C/a>. The same identity sends the campaign.\u003C/p>\n\u003Cdiv class=\"fmstr-cmp-eie-esp__smtp-list\">\n\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-pill\">\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-dot\" style=\"background:#1A82E2;\">\u003C/span>SendGrid\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-pill\">\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-dot\" style=\"background:#C02126;\">\u003C/span>Mailgun\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-pill\">\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-dot\" style=\"background:#FF9900;\">\u003C/span>Amazon SES\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-pill\">\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-dot\" style=\"background:#EA4335;\">\u003C/span>Gmail\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-pill\">\u003Cspan class=\"fmstr-cmp-eie-esp__smtp-dot\" style=\"background:#0078D4;\">\u003C/span>Outlook\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-eie-esp__caveat\">\u003Cstrong>Caveat:\u003C/strong> Some ESPs (notably older Mailchimp templates) strip non-standard HTML attributes. If the buttons do not render, switch the template to \"Plain HTML\" or \"Code Your Own\" and paste the snippet directly.\u003C/p>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":85,"__component":62,"markup":86,"useContainer":64},249,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-pf a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-pf {\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-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-success: #12b76a;\n--c-danger: #f04438;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.06);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-pf *, .fmstr-cmp-eie-pf *::before, .fmstr-cmp-eie-pf *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-pf > *, .fmstr-cmp-eie-pf > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-pf__container { max-width: 1100px; margin: 0 auto; }\n.fmstr-cmp-eie-pf__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-pf__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-pf__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-eie-pf__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-pf__compare {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 24px;\n}\n\n.fmstr-cmp-eie-pf__lane {\ndisplay: flex; flex-direction: column;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\noverflow: hidden;\nbox-shadow: var(--c-shadow-sm);\n}\n.fmstr-cmp-eie-pf__lane--good { border-color: var(--c-edge); box-shadow: var(--c-shadow-md); }\n\n.fmstr-cmp-eie-pf__lane-head {\npadding: 14px 20px;\ndisplay: flex; align-items: center; gap: 10px;\nborder-bottom: 1px solid var(--c-border);\nbackground: var(--c-soft);\n}\n.fmstr-cmp-eie-pf__lane--good .fmstr-cmp-eie-pf__lane-head { background: var(--c-tint); }\n.fmstr-cmp-eie-pf__lane-icon {\nwidth: 28px; height: 28px;\nborder-radius: 8px;\ndisplay: inline-flex; align-items: center; justify-content: center;\nfont-size: 14px;\nfont-weight: 700;\n}\n.fmstr-cmp-eie-pf__lane--bad .fmstr-cmp-eie-pf__lane-icon { background: #fee4e2; color: #b42318; }\n.fmstr-cmp-eie-pf__lane--good .fmstr-cmp-eie-pf__lane-icon { background: var(--c-violet-600); color: #ffffff; }\n.fmstr-cmp-eie-pf__lane-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-fg-1); }\n\n.fmstr-cmp-eie-pf__steps {\npadding: 22px;\ndisplay: flex; flex-direction: column; gap: 8px;\nflex: 1;\n}\n.fmstr-cmp-eie-pf__step {\ndisplay: flex; align-items: center; gap: 8px;\npadding: 9px 12px;\nbackground: var(--c-soft);\nborder-radius: 8px;\nfont-size: 13.5px;\ncolor: var(--c-fg-2);\n}\n.fmstr-cmp-eie-pf__lane--good .fmstr-cmp-eie-pf__step--key {\nbackground: var(--c-tint);\ncolor: var(--c-violet-700);\nfont-weight: 600;\n}\n.fmstr-cmp-eie-pf__arrow { color: var(--c-fg-3); flex-shrink: 0; }\n\n.fmstr-cmp-eie-pf__metrics {\npadding: 16px 22px;\nborder-top: 1px solid var(--c-border);\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 12px;\n}\n.fmstr-cmp-eie-pf__metric { text-align: center; }\n.fmstr-cmp-eie-pf__metric-value { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--c-fg-1); }\n.fmstr-cmp-eie-pf__lane--good .fmstr-cmp-eie-pf__metric-value { color: var(--c-violet-700); }\n.fmstr-cmp-eie-pf__metric-label { font-size: 11.5px; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }\n\n.fmstr-cmp-eie-pf__caveat {\nmargin: 28px auto 0;\nmax-width: 880px;\npadding: 16px 20px;\nbackground: #ffffff;\nborder: 1px solid var(--c-border);\nborder-radius: 12px;\nfont-size: 14px;\nline-height: 1.6;\ncolor: var(--c-fg-2);\ntext-align: center;\n}\n.fmstr-cmp-eie-pf__caveat strong { color: var(--c-violet-700); font-weight: 600; }\n\n@media (max-width: 880px) {\n.fmstr-cmp-eie-pf__compare { grid-template-columns: 1fr; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-pf { padding: 64px 16px; }\n.fmstr-cmp-eie-pf__metric-value { font-size: 19px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-pf\" aria-labelledby=\"fmstr-cmp-eie-pf-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-pf__header\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__eyebrow\">The pre-fill\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-pf__h2\" id=\"fmstr-cmp-eie-pf-h2\">The answer travels with the click\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-pf__sub\">This is the whole point. The click in the email does not just open a form. It opens a form with the answer already saved.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-pf__compare\">\n\n\u003Cdiv class=\"fmstr-cmp-eie-pf__lane fmstr-cmp-eie-pf__lane--bad\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__lane-head\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__lane-icon\" aria-hidden=\"true\">✕\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-pf__lane-title\">Without inline embed\u003C/h3>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__steps\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Email\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Click button\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Load form\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Re-answer Q1\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Answer Q2 through Q5\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Submit\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metrics\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">6\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Actions\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">~90s\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Time\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">~20%\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Completion\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-pf__lane fmstr-cmp-eie-pf__lane--good\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__lane-head\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__lane-icon\" aria-hidden=\"true\">✓\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-pf__lane-title\">With inline embed\u003C/h3>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__steps\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Email\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step fmstr-cmp-eie-pf__step--key\">Click answer\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step fmstr-cmp-eie-pf__step--key\">Form opens at Q2 with Q1 already saved\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__step\">Submit\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metrics\">\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">2\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Actions\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">~15s\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Time\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-pf__metric\">\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-value\">↑\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-pf__metric-label\">Friction zero\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-eie-pf__caveat\">\u003Cstrong>Caveat:\u003C/strong> Pre-fill works for every question type, not just the inline one. Hidden fields (UTM parameters, contact ID from your ESP, customer segment) also flow through. Use it to skip \"What is your email?\" when you already know.\u003C/p>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":88,"__component":62,"markup":89,"useContainer":64},250,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-uc a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-uc {\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-100: #ede4ff;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n--c-shadow-md: 0 8px 24px rgba(16,24,40,.08);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-uc *, .fmstr-cmp-eie-uc *::before, .fmstr-cmp-eie-uc *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-uc > *, .fmstr-cmp-eie-uc > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-uc__container { max-width: 1180px; margin: 0 auto; }\n.fmstr-cmp-eie-uc__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-uc__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-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-eie-uc__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-uc__grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 20px;\n}\n\n.fmstr-cmp-eie-uc__card {\ndisplay: flex; flex-direction: column;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\ntransition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;\n}\n.fmstr-cmp-eie-uc__card:hover { border-color: var(--c-edge); box-shadow: var(--c-shadow-md); transform: translateY(-2px); }\n\n.fmstr-cmp-eie-uc__visual {\nheight: 110px;\npadding: 16px 18px;\ndisplay: flex; align-items: center; gap: 12px;\nposition: relative;\n}\n.fmstr-cmp-eie-uc__visual--csat { background: linear-gradient(135deg, #fde68a, #fb923c); }\n.fmstr-cmp-eie-uc__visual--nps { background: linear-gradient(135deg, #86efac, #16a34a); }\n.fmstr-cmp-eie-uc__visual--rsvp { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }\n.fmstr-cmp-eie-uc__visual--webinar { background: linear-gradient(135deg, #93c5fd, #1d4ed8); }\n.fmstr-cmp-eie-uc__visual--support { background: linear-gradient(135deg, #67e8f9, #0891b2); }\n.fmstr-cmp-eie-uc__visual--content { background: linear-gradient(135deg, #fda4af, #be123c); }\n\n.fmstr-cmp-eie-uc__emoji { font-size: 36px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }\n.fmstr-cmp-eie-uc__hint { display: flex; flex-direction: column; gap: 5px; flex: 1; }\n.fmstr-cmp-eie-uc__chip {\ndisplay: inline-flex; align-items: center; gap: 4px;\nalign-self: flex-start;\npadding: 4px 8px;\nborder-radius: 6px;\nbackground: rgba(255,255,255,.85);\ncolor: var(--c-fg-1);\nfont-size: 11px;\nfont-weight: 700;\n}\n.fmstr-cmp-eie-uc__chip-light { background: rgba(255,255,255,.55); color: rgba(16,24,40,.85); font-weight: 600; }\n\n.fmstr-cmp-eie-uc__meta { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }\n.fmstr-cmp-eie-uc__name { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-eie-uc__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-fg-2); flex: 1; }\n\n@media (max-width: 980px) {\n.fmstr-cmp-eie-uc__grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-uc { padding: 64px 16px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-uc__grid { grid-template-columns: 1fr; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-uc\" aria-labelledby=\"fmstr-cmp-eie-uc-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-uc__header\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__eyebrow\">Use cases\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-uc__h2\" id=\"fmstr-cmp-eie-uc-h2\">What this is built for\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-uc__sub\">Six common shapes the integration covers without custom work.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-uc__grid\">\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--csat\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">⭐\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">★★★★☆\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">Order #1834\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">Post-purchase CSAT\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">Star-rating inline. Open with the order number. \"How was your order #1834?\" Click. Optional comment field on the page.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--nps\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">📊\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">0 — 10\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">Quarterly\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">NPS tracking\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">0 to 10 buttons inline, single open-text follow-up on the page. Quarterly send to your customer list.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--rsvp\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">📅\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">Yes / No\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">+ dietary\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">Event RSVP\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">Yes / No inline. Pre-fill captures the choice. Form asks for dietary requirements only if Yes.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--webinar\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">🎥\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">Attended ↓\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">Re-watch ↓\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">Webinar follow-up\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">\"Did you attend?\" Yes opens a feedback form. No opens a re-watch link form. Conditional branching from a single click.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--support\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">🎧\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">👍 / 👎\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">Ticket closed\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">Support ticket CSAT\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">Thumbs up / down on ticket close. Down opens a \"What went wrong?\" form. Up writes the rating and exits.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-uc__card\">\n\u003Cdiv class=\"fmstr-cmp-eie-uc__visual fmstr-cmp-eie-uc__visual--content\" aria-hidden=\"true\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__emoji\">💡\u003C/span>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__hint\">\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip\">A · B · C\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-uc__chip fmstr-cmp-eie-uc__chip-light\">Topic poll\u003C/span>\n\u003C/div>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-uc__meta\">\n\u003Ch3 class=\"fmstr-cmp-eie-uc__name\">Content feedback\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-uc__desc\">\"Which topic next?\" multiple choice. The click is the data point. Optional comment on the form page.\u003C/p>\n\u003C/div>\n\u003C/article>\n\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":91,"__component":62,"markup":92,"useContainer":64},251,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-set a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-set {\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-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-border: #eaecf0;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: var(--c-soft);\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-set *, .fmstr-cmp-eie-set *::before, .fmstr-cmp-eie-set *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-set > *, .fmstr-cmp-eie-set > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-set__container { max-width: 980px; margin: 0 auto; }\n.fmstr-cmp-eie-set__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }\n.fmstr-cmp-eie-set__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-set__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-eie-set__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-fg-2); }\n\n.fmstr-cmp-eie-set__steps {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 16px;\nposition: relative;\n}\n.fmstr-cmp-eie-set__step {\nposition: relative;\npadding: 28px;\nbackground: var(--c-bg);\nborder: 1px solid var(--c-border);\nborder-radius: 16px;\nbox-shadow: var(--c-shadow-sm);\ndisplay: flex;\nflex-direction: column;\ngap: 14px;\n}\n.fmstr-cmp-eie-set__num {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\nwidth: 44px; height: 44px;\nborder-radius: 12px;\nbackground: linear-gradient(135deg, var(--c-violet-500) 0%, var(--c-violet-700) 100%);\ncolor: #ffffff;\nfont-size: 18px;\nfont-weight: 700;\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .25);\n}\n.fmstr-cmp-eie-set__step-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-fg-1); }\n.fmstr-cmp-eie-set__step-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-fg-2); }\n.fmstr-cmp-eie-set__step-body strong { color: var(--c-fg-1); font-weight: 600; }\n\n.fmstr-cmp-eie-set__cta-wrap { display: flex; justify-content: center; margin-top: 36px; }\n.fmstr-cmp-eie-set__cta {\ndisplay: inline-flex; align-items: center; gap: 8px;\npadding: 13px 24px;\nborder-radius: 10px;\nbackground: var(--c-violet-500) !important;\ncolor: #ffffff !important;\nfont-weight: 600; font-size: 15px;\ntext-decoration: none !important;\nbox-shadow: 0 6px 16px rgba(127, 86, 217, .25);\ntransition: background .15s ease, transform .15s ease;\n}\n.fmstr-cmp-eie-set__cta:hover { background: var(--c-violet-600) !important; transform: translateY(-1px); }\n\n@media (max-width: 880px) {\n.fmstr-cmp-eie-set__steps { grid-template-columns: 1fr; }\n}\n@media (max-width: 760px) {\n.fmstr-cmp-eie-set { padding: 64px 16px; }\n.fmstr-cmp-eie-set__step { padding: 22px; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-set\" aria-labelledby=\"fmstr-cmp-eie-set-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-set__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-set__header\">\n\u003Cspan class=\"fmstr-cmp-eie-set__eyebrow\">Setup\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-set__h2\" id=\"fmstr-cmp-eie-set-h2\">From form to inbox in five minutes\u003C/h2>\n\u003Cp class=\"fmstr-cmp-eie-set__sub\">No code. No external automation tool.\u003C/p>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-set__steps\">\n\n\u003Carticle class=\"fmstr-cmp-eie-set__step\">\n\u003Cspan class=\"fmstr-cmp-eie-set__num\" aria-hidden=\"true\">1\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-set__step-title\">Build the form\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-set__step-body\">Drag-and-drop builder. Add the question you want inline as \u003Cstrong>Q1\u003C/strong>, follow-ups after. Save.\u003C/p>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-set__step\">\n\u003Cspan class=\"fmstr-cmp-eie-set__num\" aria-hidden=\"true\">2\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-set__step-title\">Open the Share modal\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-set__step-body\">Click \u003Cstrong>Share\u003C/strong> in the top right. Pick \u003Cstrong>Email\u003C/strong>. The modal renders a live preview of how each answer button will appear in an inbox and outputs an HTML snippet.\u003C/p>\n\u003C/article>\n\n\u003Carticle class=\"fmstr-cmp-eie-set__step\">\n\u003Cspan class=\"fmstr-cmp-eie-set__num\" aria-hidden=\"true\">3\u003C/span>\n\u003Ch3 class=\"fmstr-cmp-eie-set__step-title\">Paste into your ESP\u003C/h3>\n\u003Cp class=\"fmstr-cmp-eie-set__step-body\">In Mailchimp, Brevo, or wherever you send from, pick a template that accepts custom HTML. Paste the block where the question should appear. Send.\u003C/p>\n\u003C/article>\n\n\u003C/div>\n\n\u003Cdiv class=\"fmstr-cmp-eie-set__cta-wrap\">\n\u003Ca class=\"fmstr-cmp-eie-set__cta\" href=\"https://app.formester.com/users/sign_up\">\nFirst send in five minutes. Start free\n\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\u003Cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\">\u003C/line>\u003Cpolyline points=\"12 5 19 12 12 19\">\u003C/polyline>\u003C/svg>\n\u003C/a>\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":94,"__component":62,"markup":95,"useContainer":64},252,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-faq a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-faq {\n--c-card: #ffffff;\n--c-soft: #f9fafb;\n--c-fg-1: #101828;\n--c-fg-2: #475467;\n--c-fg-3: #697586;\n--c-violet-100: #ede4ff;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-tint: #f7f3ff;\n--c-edge: #e4d7ff;\n--c-border: #eaecf0;\n--c-chip-bg: #f4f4f7;\n--c-shadow-sm: 0 1px 3px rgba(16,24,40,.05);\n\nbackground: #ffffff;\npadding: 88px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-1);\n}\n.fmstr-cmp-eie-faq *, .fmstr-cmp-eie-faq *::before, .fmstr-cmp-eie-faq *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-faq > *, .fmstr-cmp-eie-faq > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-faq__container { max-width: 820px; margin: 0 auto; }\n.fmstr-cmp-eie-faq__header { max-width: 760px; margin: 0 auto 40px; text-align: center; }\n.fmstr-cmp-eie-faq__eyebrow {\ndisplay: inline-block; margin: 0 0 14px;\npadding: 4px 12px; border-radius: 999px;\nbackground: var(--c-violet-100); color: var(--c-violet-700);\nfont-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;\n}\n.fmstr-cmp-eie-faq__h2 { margin: 0; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }\n\n.fmstr-cmp-eie-faq__list { display: flex; flex-direction: column; gap: 12px; }\n\n.fmstr-cmp-eie-faq__item {\nbackground: var(--c-card);\nborder: 1px solid var(--c-border);\nborder-radius: 14px;\nbox-shadow: var(--c-shadow-sm);\noverflow: hidden;\n}\n\n.fmstr-cmp-eie-faq__item > summary {\npadding: 18px 22px;\ncursor: pointer;\nfont-weight: 600;\nfont-size: 16.5px;\ncolor: var(--c-fg-1);\ndisplay: flex; align-items: center; gap: 14px;\nlist-style: none;\n}\n.fmstr-cmp-eie-faq__item > summary::-webkit-details-marker { display: none; }\n.fmstr-cmp-eie-faq__item > summary::before {\ncontent: \"\";\nwidth: 28px; height: 28px;\nborder-radius: 8px;\nflex-shrink: 0;\nbackground-color: var(--c-chip-bg);\nbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2375747f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E\");\nbackground-repeat: no-repeat;\nbackground-position: center;\ntransition: transform .15s ease, background-color .15s ease;\n}\n.fmstr-cmp-eie-faq__item[open] > summary::before { transform: rotate(180deg); background-color: var(--c-tint); }\n.fmstr-cmp-eie-faq__item[open] > summary { color: var(--c-violet-600) !important; }\n\n.fmstr-cmp-eie-faq__h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; flex: 1; }\n\n.fmstr-cmp-eie-faq__answer { padding: 0 22px 22px 64px; color: var(--c-fg-2); font-size: 15.5px; line-height: 1.7; }\n.fmstr-cmp-eie-faq__answer p { margin: 0 0 10px; }\n.fmstr-cmp-eie-faq__answer p:last-child { margin-bottom: 0; }\n.fmstr-cmp-eie-faq__answer a { color: var(--c-violet-600) !important; text-decoration: none !important; }\n.fmstr-cmp-eie-faq__answer a:hover { text-decoration: underline !important; }\n.fmstr-cmp-eie-faq__answer strong { color: var(--c-fg-1); font-weight: 600; }\n\n@media (max-width: 760px) {\n.fmstr-cmp-eie-faq { padding: 64px 16px; }\n.fmstr-cmp-eie-faq__item > summary { padding: 16px; font-size: 15.5px; gap: 12px; }\n.fmstr-cmp-eie-faq__item > summary::before { width: 26px; height: 26px; }\n.fmstr-cmp-eie-faq__answer { padding: 0 16px 18px 16px; font-size: 15px; line-height: 1.65; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-faq\" aria-labelledby=\"fmstr-cmp-eie-faq-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-faq__container\">\n\n\u003Cheader class=\"fmstr-cmp-eie-faq__header\">\n\u003Cspan class=\"fmstr-cmp-eie-faq__eyebrow\">FAQ\u003C/span>\n\u003Ch2 class=\"fmstr-cmp-eie-faq__h2\" id=\"fmstr-cmp-eie-faq-h2\">Common questions\u003C/h2>\n\u003C/header>\n\n\u003Cdiv class=\"fmstr-cmp-eie-faq__list\">\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Does the form actually submit from inside Gmail?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>The first answer registers as a click and travels through to the form as a pre-filled value. With \u003Cstrong>Partial Submissions\u003C/strong> enabled, that value is captured the moment the click lands, even if the respondent never opens the rest of the form.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Will the buttons look right in Outlook?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>Yes for new Outlook (web and the rebuilt desktop client). Outlook classic on Windows uses Word's HTML engine and may strip rounded corners or background colors, but the click-through always works. Test against Litmus's client matrix before any major campaign.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Can I track who clicked which answer?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>Yes. Every answer button is a tracked link with the respondent's ID baked into the URL. Click data flows back to your form's analytics view. ESPs (Mailchimp, HubSpot) also see the click in their own reports.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">What if someone clicks twice or changes their mind?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>The latest click wins. The pre-filled answer on the form page reflects the most recent button they tapped. They can also change it on the form before submitting.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Why only one question in the email?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>Because every additional question is a reason to delete the email. Inbox attention is measured in seconds. One question, one click, then the form. Multi-question email surveys exist (AMP-for-Email) but render only in Gmail, so they ship lower completion in mixed-audience lists than the one-click pattern.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Will this work with my ESP?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>If your ESP supports custom HTML blocks, which Mailchimp, Brevo, HubSpot, Klaviyo, ConvertKit, and Constant Contact all do, yes. Paste the snippet into a \"Code Your Own\" or \"Custom HTML\" content block.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">Can I make the form anonymous?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>Yes. Turn off the hidden ID parameter in the share modal. The form treats the click as a stand-alone submission with no respondent tag. The flip side: you lose pre-fill for any other personalised fields, so use this only when respondent identity is not part of the analysis.\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003Cdetails class=\"fmstr-cmp-eie-faq__item\">\n\u003Csummary>\u003Ch3 class=\"fmstr-cmp-eie-faq__h3\">How is this different from sending a survey link?\u003C/h3>\u003C/summary>\n\u003Cdiv class=\"fmstr-cmp-eie-faq__answer\">\n\u003Cp>A link asks the recipient to commit before they know what they are committing to. An inline question shows the first question in the inbox, so the decision is \"answer this,\" not \"give us five minutes.\"\u003C/p>\n\u003C/div>\n\u003C/details>\n\n\u003C/div>\n\u003C/div>\n\u003C/section>\n\u003C/div>",{"id":97,"__component":62,"markup":98,"useContainer":64},253,"\u003Cdiv class=\"raw-html-embed\">\u003Cstyle>\n/* host-link-override */\n.fmstr-cmp-eie-cta a { text-decoration: none !important; }\n\n.fmstr-cmp-eie-cta {\n--c-violet-100: #ede4ff;\n--c-violet-300: #c4b1ee;\n--c-violet-500: #7f56d9;\n--c-violet-600: #6941c6;\n--c-violet-700: #5b34b1;\n--c-violet-900: #3f1d8a;\n--c-fg-on-dark: #ffffff;\n--c-fg-on-dark-2: rgba(255,255,255,0.78);\n--c-fg-on-dark-3: rgba(255,255,255,0.6);\n\npadding: 96px 24px;\nfont-family: inherit;\noverflow-x: hidden;\ncolor: var(--c-fg-on-dark);\nposition: relative;\noverflow: hidden;\nbackground:\nradial-gradient(ellipse at 20% 0%, rgba(127, 86, 217, 0.6) 0%, transparent 55%),\nradial-gradient(ellipse at 80% 100%, rgba(91, 52, 177, 0.6) 0%, transparent 55%),\nlinear-gradient(135deg, #2a1568 0%, #3f1d8a 50%, #5b34b1 100%);\n}\n.fmstr-cmp-eie-cta *, .fmstr-cmp-eie-cta *::before, .fmstr-cmp-eie-cta *::after { box-sizing: border-box; }\n.fmstr-cmp-eie-cta > *, .fmstr-cmp-eie-cta > * > * { min-width: 0; }\n\n.fmstr-cmp-eie-cta::before {\ncontent: \"\";\nposition: absolute; inset: 0;\nbackground-image:\nlinear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),\nlinear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);\nbackground-size: 48px 48px;\npointer-events: none;\nmask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);\n-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);\n}\n\n.fmstr-cmp-eie-cta__container { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }\n\n.fmstr-cmp-eie-cta__eyebrow {\ndisplay: inline-flex; align-items: center; gap: 8px;\nmargin: 0 0 22px;\npadding: 6px 14px;\nborder-radius: 999px;\nbackground: rgba(255,255,255,0.1);\nborder: 1px solid rgba(255,255,255,0.18);\nbackdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\ncolor: var(--c-fg-on-dark);\nfont-size: 13px; font-weight: 600;\n}\n.fmstr-cmp-eie-cta__eyebrow-dot {\nwidth: 8px; height: 8px; border-radius: 50%;\nbackground: #86efac;\nbox-shadow: 0 0 0 4px rgba(134, 239, 172, 0.25);\nanimation: eieCtaPulse 2s ease-in-out infinite;\n}\n@keyframes eieCtaPulse {\n0%, 100% { box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.25); }\n50% { box-shadow: 0 0 0 8px rgba(134, 239, 172, 0.1); }\n}\n\n.fmstr-cmp-eie-cta__h2 {\nmargin: 0 0 18px;\nfont-size: clamp(34px, 5vw, 52px);\nline-height: 1.08;\nletter-spacing: -0.025em;\nfont-weight: 700;\ncolor: var(--c-fg-on-dark);\n}\n.fmstr-cmp-eie-cta__sub {\nmargin: 0 auto 36px;\nmax-width: 580px;\nfont-size: 18px;\nline-height: 1.6;\ncolor: var(--c-fg-on-dark-2);\n}\n\n.fmstr-cmp-eie-cta__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }\n\n.fmstr-cmp-eie-cta__cta-primary {\ndisplay: inline-flex; align-items: center; gap: 8px;\npadding: 16px 32px;\nborder-radius: 12px;\nbackground: #ffffff !important; color: var(--c-violet-900) !important;\nfont-weight: 700; font-size: 16px;\ntext-decoration: none !important;\nborder: 1px solid #ffffff;\nbox-shadow: 0 12px 32px rgba(0,0,0,0.2);\ntransition: transform .15s ease, box-shadow .15s ease;\n}\n.fmstr-cmp-eie-cta__cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.28); }\n.fmstr-cmp-eie-cta__cta-arrow { transition: transform .15s ease; }\n.fmstr-cmp-eie-cta__cta-primary:hover .fmstr-cmp-eie-cta__cta-arrow { transform: translateX(2px); }\n\n.fmstr-cmp-eie-cta__cta-secondary {\ndisplay: inline-flex; align-items: center; gap: 8px;\npadding: 16px 28px;\nborder-radius: 12px;\nbackground: rgba(255,255,255,0.08) !important; color: var(--c-fg-on-dark) !important;\nfont-weight: 600; font-size: 16px;\ntext-decoration: none !important;\nborder: 1px solid rgba(255,255,255,0.2);\nbackdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\ntransition: background .15s ease, border-color .15s ease;\n}\n.fmstr-cmp-eie-cta__cta-secondary:hover { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.32); }\n\n.fmstr-cmp-eie-cta__meta {\nmargin: 28px 0 0;\nfont-size: 13.5px;\ncolor: var(--c-fg-on-dark-3);\n}\n\n.fmstr-cmp-eie-cta__trust {\nmargin: 32px auto 0;\nmax-width: 700px;\npadding: 16px 22px;\nbackground: rgba(255,255,255,0.05);\nborder: 1px solid rgba(255,255,255,0.1);\nborder-radius: 12px;\nfont-size: 13.5px;\nline-height: 1.6;\ncolor: var(--c-fg-on-dark-2);\n}\n\n.fmstr-cmp-eie-cta__stats {\ndisplay: flex; justify-content: center; gap: 48px;\nmargin-top: 48px; padding-top: 36px;\nborder-top: 1px solid rgba(255,255,255,0.12);\nflex-wrap: wrap;\n}\n.fmstr-cmp-eie-cta__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n.fmstr-cmp-eie-cta__stat-value {\nfont-size: 28px; font-weight: 700;\nletter-spacing: -0.02em;\ncolor: var(--c-fg-on-dark);\nfont-variant-numeric: tabular-nums;\n}\n.fmstr-cmp-eie-cta__stat-label {\nfont-size: 12.5px; color: var(--c-fg-on-dark-3);\ntext-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;\n}\n\n@media (max-width: 760px) {\n.fmstr-cmp-eie-cta { padding: 72px 16px; }\n.fmstr-cmp-eie-cta__cta-primary, .fmstr-cmp-eie-cta__cta-secondary { padding: 14px 24px; font-size: 15px; }\n.fmstr-cmp-eie-cta__stats { gap: 32px; }\n.fmstr-cmp-eie-cta__stat-value { font-size: 24px; }\n}\n@media (max-width: 540px) {\n.fmstr-cmp-eie-cta__ctas { flex-direction: column; align-items: stretch; width: 100%; }\n.fmstr-cmp-eie-cta__cta-primary, .fmstr-cmp-eie-cta__cta-secondary { justify-content: center; }\n}\n\u003C/style>\n\n\u003Csection class=\"fmstr-cmp-eie-cta\" aria-labelledby=\"fmstr-cmp-eie-cta-h2\">\n\u003Cdiv class=\"fmstr-cmp-eie-cta__container\">\n\n\u003Cspan class=\"fmstr-cmp-eie-cta__eyebrow\">\n\u003Cspan class=\"fmstr-cmp-eie-cta__eyebrow-dot\" aria-hidden=\"true\">\u003C/span>\nFree plan. No credit card.\n\u003C/span>\n\n\u003Ch2 class=\"fmstr-cmp-eie-cta__h2\" id=\"fmstr-cmp-eie-cta-h2\">Send your first inline form\u003C/h2>\n\n\u003Cp class=\"fmstr-cmp-eie-cta__sub\">Free plan includes unlimited email-shared forms. No credit card. Five minutes from sign-up to first send.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-eie-cta__ctas\">\n\u003Ca class=\"fmstr-cmp-eie-cta__cta-primary\" href=\"https://app.formester.com/users/sign_up\">\nStart for free\n\u003Csvg class=\"fmstr-cmp-eie-cta__cta-arrow\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\u003Cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\">\u003C/line>\u003Cpolyline points=\"12 5 19 12 12 19\">\u003C/polyline>\u003C/svg>\n\u003C/a>\n\u003Ca class=\"fmstr-cmp-eie-cta__cta-secondary\" href=\"https://formester.com/templates/categories/surveys/\">See email-form templates\u003C/a>\n\u003C/div>\n\n\u003Cp class=\"fmstr-cmp-eie-cta__trust\">Used by teams sending NPS, CSAT, RSVPs, post-purchase reviews, and content polls through Mailchimp, HubSpot, Brevo, and any ESP that accepts custom HTML.\u003C/p>\n\n\u003Cdiv class=\"fmstr-cmp-eie-cta__stats\">\n\u003Cdiv class=\"fmstr-cmp-eie-cta__stat\">\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-value\">5 min\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-label\">First send\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-cta__stat\">\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-value\">$0\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-label\">To start\u003C/span>\n\u003C/div>\n\u003Cdiv class=\"fmstr-cmp-eie-cta__stat\">\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-value\">∞\u003C/span>\n\u003Cspan class=\"fmstr-cmp-eie-cta__stat-label\">Email-shared forms\u003C/span>\n\u003C/div>\n\u003C/div>\n\n\u003C/div>\n\u003C/section>\n\u003C/div>",1779971062491]