Newsletter signup popup — build the full capture-to-inbox flow

The form is the data-collection layer. Build it first so you have its shortcode before touching the popup.

Go to Forms → All Forms → + Add New.

In the My Form card, set Title to something explicit — Newsletter Signup — Roast Notes — not a generic label like "Email Signup". Specific names matter once you have several forms on the site.

Add these three fields to the form canvas:

For Preferences, add three options in the field's option list: Roast Notes only / Gear & Brewing only / Both.

In Mail Settings, tick Send email on submission, then set:

• Subject: New subscriber — [field name="first_name"] [field name="email"]
• To: hello@yourdomain.com
• Body: paste the template below

New newsletter subscriber on [form_title]: Email: [field name="email"] First name: [field name="first_name"] Preferences: [field name="preferences"]
[all_fields]
— SGEN Documentation

The [all_fields] table catches any future fields you add to the form without needing to update the mail template.

In Settings, set Success Message to:

You're in — check your inbox for the 10% off code. It arrives within a few minutes.

Optional: set Redirect URL to /thank-you if you prefer the visitor to land on a dedicated confirmation page. If you set a Redirect URL, the Success Message field is ignored — pick one or the other.

The form builder as it looks for this setup — three fields on the canvas, Mail Settings wired to the admin inbox:

Set Status to Publish and click Create a Form. After saving, the edit screen shows the shortcode — for example Err: Form not found!. Copy it now. You paste it into the popup body in Step 2.

Go to Popups → All Popups → + Add New.

Set Title to Newsletter Signup — Exit Intent (admin label only — visitors never see this). Leave Editor on Text Editor. In Content, paste:

<h2>Before you go — get 10% off</h2>
<p>Subscribe to the your business Roast Notes newsletter and we'll send your discount code straight to your inbox.</p>Err: Form not found!

Replace 4 with your form's actual ID from Step 1. The shortcode renders the full form — email field, first name field, preferences select, and submit button — inside the popup body at display time.

Configure the checkboxes as follows:

Frequency note. SGEN's Frequency field counts page views, not calendar days. Frequency 7 means the popup re-fires after the visitor has viewed 7 pages since dismissing it. Frequency 0 means show once only, never repeat.

Set Popup Width to 480 and Status to Draft (switch to Publish only after verifying the full path in Step 6).

The popup create form filled in for this scenario:

What visitors see when the popup fires — three-field form embedded in the overlay, close button top-right:

In active development. The Create / Edit screens for individual destinations are being built. Use Step 4 (manual webhook) for production today. The steps below describe the intended final UX once the create/edit paths ship.

When available, navigate to Forms → All Forms → [Newsletter Signup row] → Integrations → + Add Destination and select your provider.

Mailchimp — you will provide: API key, Audience ID, optional tag (e.g. roast-notes), double opt-in on/off.

Klaviyo — you will provide: Private API key, List ID.

Webhook — paste a URL that accepts a POST payload. This is the path available today; see Step 4.

After destinations are configured, the Form Integrations list for the Newsletter Signup form reads like this — Mailchimp primary with Stop on Success, webhook as fallback:

Mailchimp fires first. Because Stop on Success is Yes, a successful Mailchimp dispatch skips the webhook for the same submission. If Mailchimp fails, the webhook at position 2 receives the data as a fallback.

Use this path today for production subscriber routing while the native Form Integrations destination management is in active development.

Get a webhook URL. In Zapier: New Zap → Trigger: Webhooks by Zapier → Catch Hook → copy the webhook URL. In Make: New Scenario → Webhooks → Custom Webhook → copy the URL.

Add a Webhook destination in SGEN. The Webhook provider type is available now via + Add Destination in Form Integrations. Paste your webhook URL into the Webhook URL field and save.

Configure the Zapier / Make action. In Zapier, add an action step — Mailchimp → "Add Subscriber to Audience". Map these fields:

• Email address → fields.email
• First name → fields.first_name
• Tag → roast-notes (hardcoded) or branch on fields.preferences

The payload SGEN sends to your webhook on each form submission:

{ "form_id": "4", "form_title": "Newsletter Signup — Roast Notes", "submitted_at": "2026-05-05T09:14:00Z", "fields": { "email": "ada@lovelace.dev", "first_name": "Ada", "preferences": "Both" }, "source": { "page": "/", "referrer": "https://www.google.com/" }
}

Map fields.email, fields.first_name, and fields.preferences in your action step. The source.page value tells you whether the submission came from the popup or an inline form on another page.

After a visitor submits, one of two things happens depending on what you set in the form's Settings card.

Redirect URL set (e.g. /thank-you): the visitor lands on a dedicated confirmation page. Build it at Pages → Add New with path /thank-you. Suggested content: heading "You're in — look out for the Roast Notes!", a note on delivery timing, and a link back to the shop. When Redirect URL is set, the Success Message field is ignored.

Redirect URL blank: the form replaces itself in-page with the Success Message. The visitor stays on the same page — or inside the popup if they subscribed through the overlay.

The inline success state inside the popup after a visitor submits:

Run through the complete flow in a private / incognito window before publishing the popup.

Open your staging site, navigate to any page, and let the popup fire (or wait 5 seconds on first load). Fill in a test email address, a first name, and a preference. Click Subscribe.

Verify three things:

SGEN received it — go to Forms → Submissions, filter to the Newsletter Signup form, confirm the test row appears with correct field values and a green Email Sent check.

The destination received it — open your Zapier scenario history (or Mailchimp audience / Klaviyo list) and confirm the test email is present with the correct mapped values.

The popup does not re-fire in the same session — close the popup and visit another page in the same incognito window. The popup should not reappear.

Once all three pass, go to Popups → All Popups, open the Newsletter Signup popup, change Status from Draft to Publish, and save.

Email marketing law applies the moment you collect an address.

CAN-SPAM (United States): single opt-in is compliant provided every commercial email you send includes a working unsubscribe mechanism and your physical mailing address. Confirm your Mailchimp or Klaviyo templates include the required footer before the first welcome email sends.

GDPR (European Economic Area): consent must be freely given, specific, informed, and unambiguous. Pre-ticking a marketing checkbox is not valid. A visible "Subscribe" button with accompanying privacy text qualifies.

Double opt-in (sending a confirmation email before adding the subscriber) is not legally required by GDPR but is strongly recommended for EEA subscribers because it produces a verifiable consent record and keeps the list cleaner. The tradeoff is a 20–30% reduction in list growth — some visitors do not complete the confirmation step.

Add a consent line below the subscribe button in your popup body:

<p style="font-size:11px; color:#6b7280; margin-top:10px; text-align:center;"> By subscribing you agree to our <a href="/privacy">privacy policy</a>. Unsubscribe any time.
</p>

Enable double opt-in in Mailchimp at Audience → Settings → Signup forms → Opt-in confirmation. In Klaviyo at Lists & Segments → [List] → Settings.