Form field friction

폼 입력 마찰

See how extra fields and vague errors delay completion.

···
html
<div class="forms"><div class="mode">FORM <b id="mode">6 FIELDS</b></div><div class="fields" id="fields"></div><div class="complete"><i id="progress"></i></div><span id="state">COMPLETING…</span></div>
css
.forms{width:min(72%,360px);font:800 clamp(10px,max(1.8vmin,1vw),14px)/1.2 sans-serif}.mode{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--muted)}.mode b{color:var(--accent)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:5px}.fields i{height:clamp(10px,2.5vmin,20px);border:2px solid var(--line);background:var(--surface)}.fields i.done{border-color:var(--accent);background:var(--accent)}.complete{height:5px;background:var(--line);margin-top:10px}.complete i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}#state{display:block;text-align:right;margin-top:5px;color:var(--muted)}
js
const fields=document.querySelector('#fields'),mode=document.querySelector('#mode'),progress=document.querySelector('#progress'),state=document.querySelector('#state');let tick=0;function draw(){const short=tick>=6,count=short?3:6,filled=short?Math.min(tick-6,3):Math.min(tick,6);mode.textContent=short?'3 FIELDS':'6 FIELDS';fields.innerHTML=Array.from({length:count},(_,i)=>'<i class="'+(i<filled?'done':'')+'"></i>').join('');progress.style.width=filled/count*100+'%';state.textContent=filled===count?'COMPLETE':'COMPLETING…';tick=(tick+1)%11}draw();setInterval(draw,650);

Form friction is the time and effort required to complete a signup or inquiry. Unneeded fields, late validation, and unclear format hints are common sources.

The demo moves slowly through a long form, then switches to a shorter one. Before removing a field, check whether a later process truly needs its data.

Field count alone is not the goal. Inline error guidance, autofill, and accessibility all affect the actual completion path.

When to use

Use it when many users start a form but few finish, or the same errors recur.

Open as page ↗