Project Brief Form
Overview
A project inquiry form in a dark panel: project type and budget switch with radio pills, and the name, email and description fields light up with a warm outline on focus. Sending clears the form and slides in a received notice at the top. It never actually submits.
Taken from the page template Yanbai Independent Designer Portfolio. 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 Project Brief 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.
$ npm i -g @8pt-dev/cli && 8pt add project-brief-form
mcp › Use 8pt MCP to call get_component("project-brief-form")
Code
Source for Project Brief Form. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-pbf"><div class="x-pbf__bd" aria-hidden="true"><img src="https://8pt.dev/api/media/44f2c620b7b4377af63ad5b3.webp" alt=""><img src="https://8pt.dev/api/media/18decab4de8eda12bcd7ab66.webp" alt=""><img src="https://8pt.dev/api/media/1a24aa1e7d9544d8f8a6da70.webp" alt=""><img src="https://8pt.dev/api/media/6e610c02b7c385e2fd9b5975.webp" alt=""></div><div class="x-pbf__toast" role="status" aria-live="polite"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5l1.8 5.2 5.2 1.8-5.2 1.8L12 17.5l-1.8-5.2L5 10.5l5.2-1.8L12 3.5z"/><path d="M18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7.7-1.8z"/></svg><span>需求已收到，回头见</span></div><form class="x-pbf__panel" action="#" autocomplete="off" novalidate><div class="x-pbf__head"><h2>说说你在做什么</h2><p>几句话就够，我会带着想法和计划回复你</p></div><span class="x-pbf__lbl">需要什么？</span><div class="x-pbf__chips"><button type="button" class="x-pbf__chip" aria-pressed="true">官网</button><button type="button" class="x-pbf__chip" aria-pressed="false">后台</button><button type="button" class="x-pbf__chip" aria-pressed="false">移动应用</button><button type="button" class="x-pbf__chip" aria-pressed="false">长期合作</button><button type="button" class="x-pbf__chip" aria-pressed="false">其他</button></div><span class="x-pbf__lbl">预算</span><div class="x-pbf__chips"><button type="button" class="x-pbf__chip" aria-pressed="false">3 万以内</button><button type="button" class="x-pbf__chip" aria-pressed="true">3–6 万</button><button type="button" class="x-pbf__chip" aria-pressed="false">6–15 万</button><button type="button" class="x-pbf__chip" aria-pressed="false">15 万以上</button></div><span class="x-pbf__lbl">联系方式</span><div class="x-pbf__grid"><input class="x-pbf__fld" placeholder="怎么称呼你" aria-label="称呼"><input class="x-pbf__fld" type="email" placeholder="name@example.com" aria-label="邮箱"></div><textarea class="x-pbf__fld x-pbf__area" placeholder="简单聊聊这个项目（选填）" aria-label="项目描述"></textarea><button class="x-pbf__send" type="submit">发送需求<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5L20 4l-6.5 16-2.5-6.5L4 11.5z"/><path d="M11 13.5L20 4"/></svg></button><p class="x-pbf__note"><i></i>通常当天回复</p></form></div>
.x-pbf{box-sizing:border-box;position:relative;display:grid;place-items:center;width:100%;max-width:1200px;height:820px;margin:0 auto;padding:24px;border-radius:24px;overflow:hidden;background:#12100f;color:#efe9de;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif}.x-pbf__bd{position:absolute;inset:-40px;display:grid;grid-template-columns:1fr 1fr;gap:24px;filter:blur(5px) brightness(.4) saturate(1.1);transform:scale(1.04)}.x-pbf__bd img{width:100%;height:100%;object-fit:cover;border-radius:20px}.x-pbf *,.x-pbf *::before,.x-pbf *::after{box-sizing:border-box}.x-pbf svg{width:1em;height:1em;flex:none}.x-pbf__panel{position:relative;z-index:1;width:100%;max-width:560px;padding:30px 30px 24px;border-radius:26px;background:#1d1b19;box-shadow:0 0 0 1px rgba(239,233,222,.09),0 40px 100px -30px rgba(0,0,0,.8)}.x-pbf__head{margin-bottom:6px}.x-pbf__head h2{margin:0;font-size:22px;font-weight:600}.x-pbf__head p{margin:6px 0 0;font-size:13px;color:#8f877c}.x-pbf__lbl{display:block;margin:18px 0 10px;font-size:13px;color:#b9b0a4}.x-pbf__chips{display:flex;flex-wrap:wrap;gap:8px}.x-pbf__chip{height:34px;padding:0 14px;border:0;border-radius:99px;background:#2a2725;color:#efe9de;font:inherit;font-size:13px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09);transition:background .2s,color .2s,box-shadow .2s,transform .2s}.x-pbf__chip:hover{background:#34302c}.x-pbf__chip:active{transform:scale(.96)}.x-pbf__chip[aria-pressed="true"]{background:#f3e3cf;color:#241a12;box-shadow:0 0 16px rgba(240,170,110,.35)}.x-pbf__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.x-pbf__fld{display:block;width:100%;height:42px;padding:0 14px;border:0;border-radius:12px;background:#2a2725;color:#efe9de;font:inherit;font-size:13px;outline:none;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09);transition:box-shadow .2s}.x-pbf__fld::placeholder{color:#7d756b}.x-pbf__fld:focus{box-shadow:inset 0 0 0 1px rgba(240,176,122,.6),0 0 0 3px rgba(240,176,122,.12)}.x-pbf__area{height:76px;margin-top:8px;padding:12px 14px;resize:none;overflow:hidden}.x-pbf__send{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:18px;border:0;border-radius:99px;background:#d9cfc2;color:#211a14;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}.x-pbf__send:hover{background:#efe4d6}.x-pbf__send:active{transform:scale(.99)}.x-pbf__note{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:12px;color:#8f877c}.x-pbf__note i{width:6px;height:6px;border-radius:50%;background:#f0b07a;box-shadow:0 0 8px #f0b07a}.x-pbf__toast{position:absolute;z-index:2;left:50%;top:28px;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:99px;background:#26231f;font-size:13px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(240,176,122,.35),0 20px 50px -10px rgba(0,0,0,.7);opacity:0;transform:translate(-50%,-12px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}.x-pbf__toast svg{font-size:18px;color:#f0b07a}.x-pbf__toast.is-show{opacity:1;transform:translate(-50%,0)}@media (max-width:480px){.x-pbf{height:auto;min-height:700px;padding:16px}.x-pbf__bd{grid-template-columns:1fr}.x-pbf__panel{padding:22px 18px 18px}.x-pbf__grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-pbf__toast,.x-pbf__chip,.x-pbf__send{transition:none}}(root) => {
const form = root.querySelector('.x-pbf__panel');
const toast = root.querySelector('.x-pbf__toast');
let t = 0;
const onChip = e => {
const b = e.target.closest('.x-pbf__chip');
if (!b) return;
b.parentElement.querySelectorAll('.x-pbf__chip').forEach(x => x.setAttribute('aria-pressed', x === b ? 'true' : 'false'));
};
const onSubmit = e => {
e.preventDefault();
form.reset();
…Subscribe to Builder to see the full source.See pricing