Subscribe Form — Field Interactions

Hover the form or the button

Subscribe Form

Email

+

We respect your privacy. Unsubscribe at any time.

Current states — matching your Figma designs.

Hover the form → blue outline + "Subscribe Form" chip appears top-left
Hover the button → button gets its own blue outline + "Subscribe Form Button" chip; form outline clears
Click either to select → blue "+" circles appear top & bottom (add a block), floating action panel appears right
The button's action panel adds Duplicate compared to the form's

Hover or click a field row — click the form background to select the form

Subscribe Form

+

We respect your privacy. Unsubscribe at any time.

Proposed field-level states — same visual language as the form and button.

Hover a field → blue outline + "Form Field" chip (mirrors form/button hover)
Click to select → blue "+" top & bottom (add a field above/below that row), action panel on the right
Email is required — up/down are disabled, no delete option in panel

Question: The action panel sits outside the form boundary, partially overlapping the canvas. Is that acceptable, or should the panel be repositioned (e.g. appearing inside the form, or as a tooltip-style row above the field)?

Hover a field to see the drag handle — drag to reorder, or use ↑↓ in the action panel

Subscribe Form

+

We respect your privacy. Unsubscribe at any time.

Reordering fields: Hover a field to see the drag handle (six-dot grip). Drag to reorder.

Use ↑ / ↓ in the action panel as an accessible fallback — click a field to select it first
Email is locked — it cannot be moved or deleted

Question: Should the drag handle be the only drag target (safer, avoids conflicts with future inline label editing), or should the entire row be draggable?

Hover a field to see the drag handle — click to select and add fields left or right

Subscribe Form

We respect your privacy. Unsubscribe at any time.

Horizontal layout: Fields sit side by side. Click a field to select it.

Select a field → left/right blue "+" circles appear; click to insert a new field at that position
Hover a non-email field → drag handle appears; drag left/right to reorder
Email is locked — it stays first and cannot be moved or deleted