Edit Lead Capture Form

Name

Also known as (comma separated)

Brief definition Form collecting contact details from prospects.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "See a live demo" }, { "id": "submitText", "type": "text", "label": "Submit button text", "default": "Request a demo" }, { "id": "fieldSet", "type": "select", "label": "Fields", "default": "detailed", "options": [ "basic", "detailed" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"lead lead--{{fieldSet}}\">\n <h2 class=\"lead__heading\">{{heading}}</h2>\n <label for=\"lead-name\">Name</label>\n <input id=\"lead-name\" type=\"text\" name=\"name\" required />\n <label for=\"lead-email\">Work email</label>\n <input id=\"lead-email\" type=\"email\" name=\"email\" required />\n <div class=\"lead__company\">\n <label for=\"lead-company\">Company</label>\n <input id=\"lead-company\" type=\"text\" name=\"company\" />\n </div>\n <button type=\"submit\" class=\"lead__submit\" style=\"background:{{accent}};\">{{submitText}}</button>\n</form>\n<style>\n.lead { font: 15px system-ui, sans-serif; color: #241430; display: flex; flex-direction: column; gap: 8px; max-width: 320px; padding: 22px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }\n.lead__heading { margin: 0 0 8px; font-size: 19px; font-weight: 700; }\n.lead label { font-size: 13px; font-weight: 600; }\n.lead input { font: inherit; padding: 9px 11px; border: 1px solid #24143033; border-radius: 8px; }\n.lead__company { display: flex; flex-direction: column; gap: 8px; }\n.lead--basic .lead__company { display: none; }\n.lead__submit { margin-top: 10px; border: none; color: #FAF7F2; padding: 11px; border-radius: 8px; font-weight: 700; cursor: pointer; }\n.lead__submit:hover, .lead__submit:focus-visible { opacity: .9; }\n</style>", "tailwind": "<form class=\"lead-tw lead-tw--{{fieldSet}} font-sans text-[15px] text-[#241430] flex flex-col gap-2 max-w-[320px] p-5.5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]\">\n <h2 class=\"m-0 mb-2 text-lg font-bold\">{{heading}}</h2>\n <label for=\"lead-tw-name\" class=\"text-[13px] font-semibold\">Name</label>\n <input id=\"lead-tw-name\" type=\"text\" name=\"name\" required class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg\" />\n <label for=\"lead-tw-email\" class=\"text-[13px] font-semibold\">Work email</label>\n <input id=\"lead-tw-email\" type=\"email\" name=\"email\" required class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg\" />\n <div class=\"lead-tw__company flex flex-col gap-2\">\n <label for=\"lead-tw-company\" class=\"text-[13px] font-semibold\">Company</label>\n <input id=\"lead-tw-company\" type=\"text\" name=\"company\" class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg\" />\n </div>\n <button type=\"submit\" class=\"mt-2.5 border-0 text-[#FAF7F2] p-2.5 rounded-lg font-bold cursor-pointer hover:opacity-90\" style=\"background:{{accent}};\">{{submitText}}</button>\n</form>\n<style>\n.lead-tw--basic .lead-tw__company { display: none; }\n</style>", "react": "export function LeadCaptureForm({\n heading = \"{{heading}}\",\n submitText = \"{{submitText}}\",\n fieldSet = \"{{fieldSet}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <form style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", display: \"flex\", flexDirection: \"column\",\n gap: 8, maxWidth: 320, padding: 22, border: \"1px solid #24143022\", borderRadius: 14, background: \"#FAF7F2\" }}>\n <h2 style={{ margin: \"0 0 8px\", fontSize: 19, fontWeight: 700 }}>{heading}</h2>\n <label htmlFor=\"lead-name\" style={{ fontSize: 13, fontWeight: 600 }}>Name</label>\n <input id=\"lead-name\" type=\"text\" name=\"name\" required style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8 }} />\n <label htmlFor=\"lead-email\" style={{ fontSize: 13, fontWeight: 600 }}>Work email</label>\n <input id=\"lead-email\" type=\"email\" name=\"email\" required style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8 }} />\n {fieldSet === \"detailed\" && (\n <>\n <label htmlFor=\"lead-company\" style={{ fontSize: 13, fontWeight: 600 }}>Company</label>\n <input id=\"lead-company\" type=\"text\" name=\"company\" style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8 }} />\n </>\n )}\n <button type=\"submit\" style={{ marginTop: 10, border: \"none\", color: \"#FAF7F2\", padding: 11, borderRadius: 8,\n fontWeight: 700, cursor: \"pointer\", background: accent }}>{submitText}</button>\n </form>\n );\n}" }