Split Enquiry Form
介绍
左右分栏的合作询问区：左侧等宽小标签加一段粗体宣言与几颗缓慢浮动的渲染球，右侧浅灰底的姓名、邮箱、留言三个输入框和通栏提交按钮；聚焦时出现细描边，悬停按钮变荧光黄，提交后就地给出示意回执。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Split Enquiry Form 加进你的项目并换成你的配色。
适用场景
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-enquiry-form
mcp › 使用 8pt MCP 调用 get_component("houtu-enquiry-form")
代码
Split Enquiry Form 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-esf"><div><p class="x-esf__lbl">一切始于土壤</p><p class="x-esf__lead">你手上有个好东西，需要让人无法忽视的作品。我们像一把多用途小刀，样样都磨得锋利。如果你对自己在做的事全情投入，我们也是。</p><div class="x-esf__orbs" aria-hidden="true"><img src="https://8pt.dev/api/media/c898edd905a4ef57de63da91.webp" alt=""><img src="https://8pt.dev/api/media/a695326afba0de37a7a74362.webp" alt=""><img src="https://8pt.dev/api/media/e67b23536cd0fb650dc36fc7.webp" alt=""></div></div><div><p class="x-esf__lbl">提交需求</p><form class="x-esf__form" action="#"><input type="text" name="name" placeholder="你的名字" aria-label="你的名字"><input type="email" name="email" placeholder="你的邮箱" aria-label="你的邮箱"><textarea name="msg" placeholder="你的留言" aria-label="你的留言"></textarea><button type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 3.5 10 14"/><path d="M20.5 3.5 14 20.5l-4-6.5-6.5-4z"/></svg>提交</button><p class="x-esf__ok" aria-live="polite"></p></form></div></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-esf{display:grid;grid-template-columns:1fr 1fr;gap:32px;width:100%;max-width:1160px;box-sizing:border-box;padding:40px 28px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-esf__lbl{margin:0;font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;letter-spacing:.06em}.x-esf__lead{margin:26px 0 0;max-width:500px;font-size:22px;font-weight:700;line-height:1.3}.x-esf__form{display:grid;gap:10px;margin-top:26px}.x-esf__form input,.x-esf__form textarea{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border:0;border-radius:4px;background:#F7F7F7;font:inherit;font-size:13px;color:#000;outline:0;transition:box-shadow .2s}.x-esf__form textarea{height:150px;padding:12px;resize:none}.x-esf__form input:focus,.x-esf__form textarea:focus{box-shadow:0 0 0 1px #bdbdbd}.x-esf__form ::placeholder{color:#8d8d8d}.x-esf__form button{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:0;border-radius:4px;background:#F7F7F7;font:inherit;font-size:13px;font-weight:600;color:#000;cursor:pointer;transition:background .25s}.x-esf__form button:hover{background:#EBFF00}.x-esf__form button svg{width:15px;height:15px}.x-esf__ok{margin:0;min-height:18px;font-size:13px;color:#6f6f6b}.x-esf__orbs{position:relative;height:240px;margin-top:48px}.x-esf__orbs img{position:absolute;display:block;border-radius:50%;animation:x-esf-bob 6s ease-in-out infinite}.x-esf__orbs img:nth-child(1){width:210px;left:120px;top:10px}.x-esf__orbs img:nth-child(2){width:130px;left:0;top:90px;animation-delay:-2s}.x-esf__orbs img:nth-child(3){width:96px;left:340px;top:0;animation-delay:-4s}@keyframes x-esf-bob{50%{transform:translateY(-10px)}}@media (prefers-reduced-motion:reduce){.x-esf__form button,.x-esf__form input,.x-esf__form textarea{transition:none}.x-esf__orbs img{animation:none}}(root) => {
const form = root.querySelector(".x-esf__form");
const ok = root.querySelector(".x-esf__ok");
if (!form) return;
const onSubmit = (e) => { e.preventDefault(); ok.textContent = "已收到，我们会尽快回复（示意）"; form.reset(); };
form.addEventListener("submit", onSubmit);
return () => form.removeEventListener("submit", onSubmit);
}订阅 Builder 查看完整源码。查看价格