contact-widget

Contact Widget Skill

Create a compact, embeddable contact or support widget. The result should be easy to scan, keyboard-accessible, and explicit about what happens after the user submits.

License note: First-party Neuma-authored skill content for this repository. No upstream proprietary text, images, templates, or third-party code were copied.

Workflow

1. Define the task

   • Identify whether the widget is for sales, support, callback scheduling, community contact, or general inquiries.
   • Pick only the fields needed for that task. Do not ask for unnecessary personal data.

2. Required widget anatomy

   • Header: short title and response-time expectation.
   • Fields: name, email, topic, message, and optional company/phone only when the brief justifies them.
   • Consent/privacy note: concise, plain-language, and close to submit.
   • Submit button and secondary route such as help center, email, or status.

3. State coverage

   • Normal, focus, invalid, submitting, success, and failure states.
   • Inline validation messages tied to fields with accessible descriptions.
   • Disabled submit state when required fields are missing.

4. Layout rules

   • Widget fits in a card no wider than 440px and can embed in a sidebar, modal, or floating panel.
   • On mobile, full-width with stable spacing and no text clipped inside buttons or fields.
   • Use the active DESIGN.md tokens and component rules.

5. Self-check

   • Every input has a visible label.
   • Error copy says how to fix the issue.
   • The success state confirms the next step, not just "submitted".
   • No hidden tracking, fake urgency, or deceptive consent language.

Output Contract

Emit a self-contained HTML artifact named index.html with data-od-id on the widget shell, each field, submit action, and state message.