Forms

What this skill does

The Forms skill provides a structured approach to building accessible, consistent form components using composable UI elements like FieldGroup, InputGroup, ToggleGroup, and FieldSet. It ensures proper semantic grouping, input validation, and state management for interactive elements including text inputs, buttons inside inputs, option toggles, and grouped checkboxes or radios. This skill helps maintain design and accessibility standards across email capture, lead generation, and conversion rate optimization forms.

Who it's for

This skill is designed for growth marketers implementing high-converting landing pages, performance marketers managing detailed form-based funnels, and agency strategists responsible for crafting scalable user input experiences. It suits scenarios where form usability, accessibility, and clear validation messaging directly impact key metrics like form completion rates and lead quality.

Key workflows

Practitioners start by structuring forms with FieldGroup and Field elements to semantically group input fields. Next, they wrap text inputs inside InputGroup with InputGroupInput or InputGroupTextarea components to ensure consistent styling and behavior. When embedding buttons inside inputs, the workflow requires placing buttons inside InputGroupAddon to avoid layout issues. For option sets with 2 to 7 choices, marketers use ToggleGroup with ToggleGroupItem to manage active states without manual state handling. Lastly, related inputs like checkboxes or radios are grouped inside FieldSet with FieldLegend to improve screen reader navigation and visual grouping, with validation and disabled states applied via data attributes and ARIA properties.

Common questions

Can I place a raw Input inside an InputGroup? No; always use InputGroupInput or InputGroupTextarea inside an InputGroup to ensure correct styling and accessibility. How do I handle buttons that appear inside an input field? Wrap the Button in an InputGroupAddon inside the InputGroup, never position buttons absolutely outside the input. What’s the best way to group multiple related checkboxes? Use FieldSet with FieldLegend instead of divs to provide proper semantic grouping and accessible labeling.

How to use in Metaflow

Attach the Forms skill to any agent task that involves form design or optimization to automatically apply best practices for input grouping, validation states, and option toggles. Expect the skill to guide you through structuring fields with FieldGroup and InputGroup components while managing validation and disabled styling consistently. This ensures your form components meet accessibility standards and improve user experience across platforms.

For broader context, see our roundup of claude marketing skills, and read common Claude Code content mistakes for related setup guidance.