Edit Quote Request Form

Name

Also known as (comma separated)

Brief definition Form requesting a price or estimate.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Request a quote" }, { "id": "serviceType", "type": "select", "label": "Default service type", "default": "Web", "options": [ "Web", "Branding", "Marketing" ] }, { "id": "submitText", "type": "text", "label": "Submit text", "default": "Send request" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"quote\">\n <h2 class=\"quote__heading\">{{heading}}</h2>\n <label for=\"quote-service\">Service type</label>\n <select id=\"quote-service\" name=\"service\">\n <option selected>{{serviceType}}</option>\n <option>Web</option>\n <option>Branding</option>\n <option>Marketing</option>\n </select>\n <label for=\"quote-budget\">Budget range</label>\n <input id=\"quote-budget\" type=\"text\" name=\"budget\" placeholder=\"$5,000 - $10,000\" />\n <label for=\"quote-details\">Project details</label>\n <textarea id=\"quote-details\" name=\"details\" rows=\"3\"></textarea>\n <button type=\"submit\" style=\"background:{{accent}};\">{{submitText}}</button>\n</form>\n<style>\n.quote { 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.quote__heading { margin: 0 0 8px; font-size: 19px; font-weight: 700; }\n.quote label { font-size: 13px; font-weight: 600; }\n.quote input, .quote select, .quote textarea { font: inherit; padding: 9px 11px; border: 1px solid #24143033; border-radius: 8px; background: #FAF7F2; }\n.quote button { margin-top: 10px; border: none; color: #241430; padding: 11px; border-radius: 8px; font-weight: 700; cursor: pointer; }\n.quote button:hover, .quote button:focus-visible { opacity: .85; }\n</style>", "tailwind": "<form class=\"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=\"quote-tw-service\" class=\"text-[13px] font-semibold\">Service type</label>\n <select id=\"quote-tw-service\" name=\"service\" class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg bg-[#FAF7F2]\">\n <option selected>{{serviceType}}</option>\n <option>Web</option>\n <option>Branding</option>\n <option>Marketing</option>\n </select>\n <label for=\"quote-tw-budget\" class=\"text-[13px] font-semibold\">Budget range</label>\n <input id=\"quote-tw-budget\" type=\"text\" name=\"budget\" placeholder=\"$5,000 - $10,000\" class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg\" />\n <label for=\"quote-tw-details\" class=\"text-[13px] font-semibold\">Project details</label>\n <textarea id=\"quote-tw-details\" name=\"details\" rows=\"3\" class=\"font-sans px-2.5 py-2 border border-[#24143033] rounded-lg\"></textarea>\n <button type=\"submit\" class=\"mt-2.5 border-0 text-[#241430] p-2.5 rounded-lg font-bold cursor-pointer hover:opacity-85\" style=\"background:{{accent}};\">{{submitText}}</button>\n</form>", "react": "export function QuoteRequestForm({\n heading = \"{{heading}}\",\n serviceType = \"{{serviceType}}\",\n submitText = \"{{submitText}}\",\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=\"quote-service\" style={{ fontSize: 13, fontWeight: 600 }}>Service type</label>\n <select id=\"quote-service\" name=\"service\" defaultValue={serviceType}\n style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8, background: \"#FAF7F2\" }}>\n <option>Web</option>\n <option>Branding</option>\n <option>Marketing</option>\n </select>\n <label htmlFor=\"quote-budget\" style={{ fontSize: 13, fontWeight: 600 }}>Budget range</label>\n <input id=\"quote-budget\" type=\"text\" name=\"budget\" placeholder=\"$5,000 - $10,000\"\n style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8 }} />\n <label htmlFor=\"quote-details\" style={{ fontSize: 13, fontWeight: 600 }}>Project details</label>\n <textarea id=\"quote-details\" name=\"details\" rows={3}\n style={{ font: \"inherit\", padding: \"9px 11px\", border: \"1px solid #24143033\", borderRadius: 8 }} />\n <button type=\"submit\" style={{ marginTop: 10, border: \"none\", color: \"#241430\", padding: 11, borderRadius: 8,\n fontWeight: 700, cursor: \"pointer\", background: accent }}>{submitText}</button>\n </form>\n );\n}" }