Split Enquiry Form
A two-column inquiry section: a monospace label, a bold manifesto and a few slowly floating rendered spheres on the left; name, email and message fields on light gray with a full-width submit button on the right. Fields get a fine outline on focus, the button turns neon yellow on hover and a sample receipt appears in place after submitting.
Taken from the page template Houtu Creative Studio Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Split Enquiry Form to your project in your colors.
Where to use it
Search boxes, AI chat inputs, form fields, file uploads, verification codes and anywhere else people type.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Split Enquiry Form. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
}