feat(newsletter): JSONP submission + plumb VITE_MAILCHIMP_URL through deploy#32
Merged
Conversation
… deploy
The Mailchimp embed form was doing a standard HTML form POST with
target="_blank", which opens the Mailchimp hosted signup page in a new
tab. Worse: in some browsers the EMAIL field never made it to the
hosted page (likely because React's setState("loading") races with the
browser packaging the form data, and a disabled input stops contributing
to the FormData), so users landed on a blank Mailchimp form with
"There are errors below — Please enter a value."
Switched to JSONP. The form now:
- Calls preventDefault() on submit (no more navigation away)
- Builds the JSONP URL from VITE_MAILCHIMP_URL by replacing
/subscribe/post → /subscribe/post-json
- Adds EMAIL=<typed>, the honeypot field b_<u>_<id>=<empty>, and a
callback name c=mc_cb_<timestamp>_<rand>
- Injects a <script src=...> tag, awaits the JSONP callback
- On success → state "done"; on already-subscribed → also "done";
on any other response or script error → "error" with config message
The honeypot field name is now derived from the action URL's u/id query
params (no more hardcoded "b_b996de87..."), so the component works
verbatim for any fork that swaps VITE_MAILCHIMP_URL.
deploy.yml now passes VITE_MAILCHIMP_URL into the build step env so the
URL is inlined into the Worker bundle on prod deploys. User still has
to run `gh secret set VITE_MAILCHIMP_URL ...` once for the secret to
exist.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Form was redirecting to a blank Mailchimp hosted signup page ("There are errors below") instead of subscribing inline. Two issues bundled:
Newsletter component switched from HTML form POST to JSONP. No more `target="_blank"`, no more Mailchimp hosted page. Submits via injected `<script src>` tag, awaits callback, sets state inline. Treats "already subscribed" as success.
Honeypot field name derived from URL. Was hardcoded `b_b996de87...`; now extracted from `u` and `id` query params of `VITE_MAILCHIMP_URL`. Forks just swap the env var and the component works.
deploy.yml passes `VITE_MAILCHIMP_URL` to the build env. Required so the URL is inlined into the Worker bundle on prod.
Action required from you (one-time)
Before merging, run:
```bash
gh secret set VITE_MAILCHIMP_URL --body 'https://gmail.us20.list-manage.com/subscribe/post?u=b996de87ad64788a889762e4f&id=bb87ce3968&f_id=007102eef0'
```
Test plan
🤖 Generated with Claude Code