Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-vb-newsletter-form
Newsletter signup, unsubscribe, and preferences forms wired through VBService('newsletter'). Progressive enhancement on top of native form action.
Overview
Add data-vb-newsletter-form to a <form> to wire it through VBService('newsletter') against the /go/newsletter/* endpoints. Three modes share the same attribute — subscribe (default), unsubscribe, and preferences. Without JS the form falls back to its native action, so the same markup works as a server-side post.
Subscribe
The default mode. Reads list ids from any <input type="checkbox" name="lists"> children that are checked, or from data-vb-newsletter-lists as a comma-separated default. POSTs { email, lists } to /go/newsletter/subscribe.
Subscribe form
<form action="/newsletter/subscribe" method="POST" data-vb-newsletter-form="subscribe" data-vb-newsletter-subscribed="Welcome aboard."> <p> <label for="email">Email</label> <input type="email" id="email" name="email" required autocomplete="email"/> </p> <fieldset> <legend>Lists</legend> <label><input type="checkbox" name="lists" value="weekly-digest" checked> Weekly digest</label> <label><input type="checkbox" name="lists" value="release-notes"> Release notes</label> </fieldset> <output data-vb-newsletter-status aria-live="polite"></output> <button type="submit">Subscribe</button></form>For a single-list signup, drop the checkboxes and pass the list via the data attribute:
Single-list signup
<form data-vb-newsletter-form data-vb-newsletter-lists="release-notes" action="/newsletter/subscribe" method="POST"> <input type="email" name="email" required autocomplete="email"/> <button type="submit">Get release notes</button></form>Unsubscribe
Same shape, different endpoint. POSTs { email, lists } to /go/newsletter/unsubscribe.
Unsubscribe form
<form data-vb-newsletter-form="unsubscribe" action="/newsletter/unsubscribe" method="POST"> <p> <label for="email">Email</label> <input type="email" id="email" name="email" required/> </p> <fieldset> <legend>Stop sending</legend> <label><input type="checkbox" name="lists" value="weekly-digest" checked> Weekly digest</label> <label><input type="checkbox" name="lists" value="release-notes"> Release notes</label> </fieldset> <output data-vb-newsletter-status aria-live="polite"></output> <button type="submit">Unsubscribe</button></form>Preferences
Loads existing subscriptions for the email on commit (blur or change of the email field) and fills in the checkboxes. Submitting computes the diff and posts subscribe + unsubscribe in parallel, then re-snapshots the new state. Useful as a per-user “manage your subscriptions” surface.
Preferences form
<form data-vb-newsletter-form="preferences" action="/newsletter/preferences" method="POST" data-vb-newsletter-saved="Preferences saved."> <p> <label for="email">Email</label> <input type="email" id="email" name="email" required autocomplete="email"/> </p> <fieldset> <legend>Lists</legend> <label><input type="checkbox" name="lists" value="weekly-digest"> Weekly digest</label> <label><input type="checkbox" name="lists" value="release-notes"> Release notes</label> <label><input type="checkbox" name="lists" value="security-alerts"> Security alerts</label> </fieldset> <output data-vb-newsletter-status aria-live="polite"></output> <button type="submit">Save</button></form>The vb-newsletter-form:preferences event fires when the load completes, with detail { email, subscriptions, available } — useful for syncing parent UI (e.g., disabling lists not exposed by the backend).
Attributes
| Attribute | Required | Purpose |
|---|---|---|
data-vb-newsletter-form | yes | subscribe (default), unsubscribe, or preferences |
data-vb-newsletter-lists | no | Comma-separated default list ids when the form has no checkboxes (e.g. single-list signup). |
data-vb-newsletter-loading-label | no | Replaces the submit button label while in flight. |
data-vb-newsletter-subscribed | no | Success message for subscribe mode (default: “Subscribed. Check your inbox.”) |
data-vb-newsletter-unsubscribed | no | Success message for unsubscribe mode (default: “Unsubscribed.”) |
data-vb-newsletter-saved | no | Success message for preferences mode (default: “Preferences saved.”) |
data-vb-newsletter-error | no | Error message (default: “Sorry, that did not work. Try again.”) |
data-vb-newsletter-no-reset | no | Skip the auto form.reset() on subscribe success. |
Events
| Event | Detail | When |
|---|---|---|
vb-newsletter-form:submitting | { mode } | Just before the request goes out |
vb-newsletter-form:success | { mode, lists, response } | 2xx response |
vb-newsletter-form:error | { mode, error, status?, body? } | Network failure or non-2xx |
vb-newsletter-form:preferences | { email, subscriptions, available } | Preferences mode finished loading existing subscriptions |
All events bubble + composed.
Related
- Service contracts › /go/newsletter — the JSON shapes this attribute submits
data-vb-email-form— sibling enhancement for transactional email forms- /go/ convention — the namespace and the lock-in problem it solves