formspompon

Formspompon is a coined term in user interface design that describes a morphing form presentation pattern. It refers to an interactive element in which a compact control—such as a button, badge, or icon—triggers an animated transition that expands or morphs into a full data entry form. The term is informal and lacks a formal specification, but multiple designers use it to describe similar patterns in prototypes and articles.

Origin and usage: The name blends 'form' with a playful 'pompon' concept to convey attention-grabbing motion. It is commonly discussed in the context of micro-interactions and onboarding flows, where a minimal initial affordance leads to a complete form.

Design and implementation: Typical implementation relies on CSS transitions or web animations to morph shape, combined with JavaScript state management. Accessibility considerations include proper labeling with aria-expanded, logical focus order, and option to escape or close the form without data loss. Performance considerations include avoiding long animations on low-end devices and ensuring that the morph does not hinder screen reader users.

Applications: Used for quick sign-ups, newsletter opt-ins, or short surveys embedded in a page or app. It can improve engagement by reducing initial cognitive load, but may degrade usability if overused or poorly designed.

Variants and critique: Some designers contrast formspompon with modal dialogs or traditional multi-step forms; others warn against relying on style over function.

See also: morphing button, form wizard, progressive disclosure, inline validation.