Edit Newsletter Signup

Name

Also known as (comma separated)

Brief definition Email capture form for a mailing list.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Get the digest" }, { "id": "microcopy", "type": "text", "label": "Microcopy", "default": "One email a week, unsubscribe any time." }, { "id": "layout", "type": "select", "label": "Layout", "default": "inline", "options": [ "inline", "stacked" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"news news--{{layout}}\">\n <div class=\"news__copy\">\n <p class=\"news__heading\">{{heading}}</p>\n <p class=\"news__micro\">{{microcopy}}</p>\n </div>\n <div class=\"news__field\">\n <label for=\"news-email\" class=\"news__label\">Email address</label>\n <input id=\"news-email\" type=\"email\" name=\"email\" placeholder=\"you@example.com\" required />\n <button type=\"submit\" style=\"background:{{accent}};\">Subscribe</button>\n </div>\n</form>\n<style>\n.news { font: 15px system-ui, sans-serif; color: #241430; display: flex; gap: 16px; padding: 20px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 14px; max-width: 460px; }\n.news--inline { flex-direction: row; align-items: center; }\n.news--stacked { flex-direction: column; align-items: stretch; }\n.news__heading { margin: 0 0 4px; font-weight: 700; font-size: 16px; }\n.news__micro { margin: 0; font-size: 13px; color: #241430aa; }\n.news__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n.news__field { display: flex; gap: 8px; }\n.news--stacked .news__field { flex-direction: column; }\n.news__field input { flex: 1; font: inherit; padding: 9px 12px; border: 1px solid #24143033; border-radius: 8px; min-width: 0; }\n.news__field button { border: none; color: #241430; padding: 9px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap; }\n.news__field button:hover, .news__field button:focus-visible { opacity: .85; }\n</style>", "tailwind": "<form class=\"news-tw news-tw--{{layout}} font-sans text-[15px] text-[#241430] flex gap-4 p-5 bg-[#FAF7F2] border border-[#24143022] rounded-2xl max-w-[460px]\">\n <div>\n <p class=\"m-0 mb-1 font-bold text-base\">{{heading}}</p>\n <p class=\"m-0 text-[13px] text-[#241430]/65\">{{microcopy}}</p>\n </div>\n <div class=\"news-tw__field flex gap-2\">\n <label for=\"news-tw-email\" class=\"sr-only\">Email address</label>\n <input id=\"news-tw-email\" type=\"email\" name=\"email\" placeholder=\"you@example.com\" required class=\"flex-1 min-w-0 font-sans px-3 py-2 border border-[#24143033] rounded-lg\" />\n <button type=\"submit\" class=\"border-0 text-[#241430] px-4.5 py-2 rounded-lg font-bold cursor-pointer whitespace-nowrap hover:opacity-85\" style=\"background:{{accent}};\">Subscribe</button>\n </div>\n</form>\n<style>\n.news-tw--inline { flex-direction: row; align-items: center; }\n.news-tw--stacked { flex-direction: column; align-items: stretch; }\n.news-tw--stacked .news-tw__field { flex-direction: column; }\n</style>", "react": "export function NewsletterSignup({\n heading = \"{{heading}}\",\n microcopy = \"{{microcopy}}\",\n layout = \"{{layout}}\",\n accent = \"{{accent}}\",\n}) {\n const stacked = layout === \"stacked\";\n return (\n <form style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", display: \"flex\", gap: 16, padding: 20,\n background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 14, maxWidth: 460,\n flexDirection: stacked ? \"column\" : \"row\", alignItems: stacked ? \"stretch\" : \"center\" }}>\n <div>\n <p style={{ margin: \"0 0 4px\", fontWeight: 700, fontSize: 16 }}>{heading}</p>\n <p style={{ margin: 0, fontSize: 13, color: \"#241430aa\" }}>{microcopy}</p>\n </div>\n <div style={{ display: \"flex\", gap: 8, flexDirection: stacked ? \"column\" : \"row\" }}>\n <label htmlFor=\"news-email\" style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\" }}>Email address</label>\n <input id=\"news-email\" type=\"email\" name=\"email\" placeholder=\"you@example.com\" required\n style={{ flex: 1, font: \"inherit\", padding: \"9px 12px\", border: \"1px solid #24143033\", borderRadius: 8, minWidth: 0 }} />\n <button type=\"submit\" style={{ border: \"none\", color: \"#241430\", padding: \"9px 18px\", borderRadius: 8,\n fontWeight: 700, cursor: \"pointer\", whiteSpace: \"nowrap\", background: accent }}>Subscribe</button>\n </div>\n </form>\n );\n}" }