Building Block

Email & Newsletter Signup

Inline signup sections, self-hosted PHP mailing lists with double opt-in, and Mailchimp/Brevo API integration — patterns that Claude deploys in a single conversation. No third-party form builders, no per-subscriber fees.

Email & newsletter patterns

Three proven patterns covering signup UI, self-hosted list management, and third-party ESP integration. Claude generates the full HTML, CSS, and PHP — matched to your theme and deployed live on your server.

Pattern 1 — Inline Newsletter Signup Section

A high-converting email capture section with an inline or stacked input + button layout. Includes a no-reload fetch API submission, success/error state swap, and optional GDPR consent checkbox. Drop it anywhere on any page.

HTML CSS Vanilla JS Fetch API GDPR
  • Layout variants: centred dark background, light surface, or full-width branded gradient section
  • Inline variant: email input + submit button in a single pill row; stacked variant for mobile-first contexts
  • JavaScript fetch() POST to subscribe.php — no page reload, no redirect
  • Success state: input row replaced with confirmation message and checkmark animation
  • Error state: inline message below input with red border highlight on the field
  • Optional GDPR consent: “I agree to receive emails” checkbox required before submit is enabled
  • Honeypot hidden field on the PHP side to block automated bot submissions
Prompt to use with Claude

Add an email newsletter signup section to my page. Heading: “[Stay in the loop]”. Subtext: “[No spam. Unsubscribe any time.]”. Inline input + button layout on desktop, stacked on mobile. On submit, POST to subscribe.php with fetch API — no reload. Show a success message on response. Include a GDPR consent checkbox. Brand colour: [your hex]. CSS in theme.css, JS in main.js.

Pattern 2 — Self-Hosted Mailing List with Double Opt-In

A complete self-hosted mailing list backend: PHP handlers, a MySQL subscribers table, double opt-in email verification, and a one-click unsubscribe link in every email. Your subscribers stay on your server — no third-party platform required.

PHP MySQL SMTP Double Opt-in GDPR
  • MySQL subscribers table: email, status (pending/confirmed/unsubscribed), token, confirmed_at, created_at
  • subscribe.php: validates email, checks for duplicates, inserts with status: pending, sends SMTP confirmation with a unique token link
  • confirm.php: validates token, updates status to confirmed, shows confirmation page
  • unsubscribe.php: accepts token from email footer link, updates status to unsubscribed — one-click GDPR-compliant removal
  • admin/subscribers.php: password-protected list view with status counts, CSV export, and per-row manual unsubscribe
  • All tokens are 64-char cryptographically random strings via bin2hex(random_bytes(32))
  • Double opt-in satisfies GDPR Article 7 consent requirements
Prompt to use with Claude

Build a self-hosted mailing list for my site. MySQL subscribers table with email, status, and token columns. subscribe.php validates email and sends a double opt-in SMTP confirmation with a unique token link. confirm.php activates the subscriber. unsubscribe.php removes them on one click. admin/subscribers.php shows a password-protected list with CSV export. All tokens use random_bytes(32).

Pattern 3 — Mailchimp & Brevo API Integration

Connect your signup form to Mailchimp or Brevo (formerly Sendinblue) via their REST API. PHP handles the API call server-side — your API key is never exposed in the browser. Includes graceful error handling and optional custom merge fields for segmentation.

PHP Mailchimp API Brevo API cURL JSON
  • PHP subscribe.php uses curl_exec() to POST to Mailchimp’s /3.0/lists/{list_id}/members or Brevo’s /v3/contacts
  • API key stored in config.php constant — never in HTML or JavaScript
  • Handles Mailchimp 400 response for already-subscribed addresses gracefully (no error shown to user)
  • Optional: pass custom merge fields (first name, source page, plan interest) to your ESP for list segmentation
  • Returns JSON { success: true/false, message: "..." } to the frontend fetch handler in Pattern 1
  • Single ESP_PROVIDER constant switches between Mailchimp and Brevo backends with no other code change
Prompt to use with Claude

Connect my newsletter signup form to Mailchimp. PHP subscribe.php should POST to the Mailchimp API /3.0/lists/{list_id}/members with the submitted email. Store the API key and list ID in config.php. Handle already-subscribed 400 errors gracefully. Return JSON { success: true } to the frontend fetch handler. Never expose the API key in HTML or JS.

Every email & newsletter pattern includes

GDPR-ready by default

Double opt-in confirmation, explicit consent checkbox, and one-click unsubscribe links in every email. Subscribers stored on your server — your data, your compliance.

No form builder fees

No Mailchimp embedded widgets with per-subscriber billing at scale. The PHP backend handles everything — additional cost beyond your hosting is zero.

Secure API handling

API keys stay in config.php on your server. The browser never sees them. All user input is sanitised before any database write or API call.

Iterable in seconds

Change the CTA copy, add a custom merge field, adjust the confirmation email wording. Describe it to Claude and it’s live within seconds.

Pair with

Email signup patterns work well alongside these building blocks.

Modals & Overlays

Combine the inline signup form with an exit-intent popup for maximum email capture on high-traffic pages.

View patterns

Contact Forms

Share the same PHP SMTP setup and MySQL logging pattern across contact forms and newsletter signups.

View patterns

Authentication & Members

Automatically subscribe new members to your mailing list at registration using the same PHP backend.

View patterns

Start growing your mailing list today

From £6.99/month. First month free — no credit card required.