squeeze-page-builder

What this skill does

# Squeeze Page Builder

Build email capture landing pages (squeeze pages) as self-contained HTML files with no dependencies. The page offers a high-value lead magnet (ebook, checklist, template, or cheat sheet) in exchange for the visitor's email address, then redirects to an affiliate offer on form submission. Output is a single deployable `.html` file.

## When to Use

- User wants to build an email list while simultaneously promoting an affiliate product
- User wants to warm up cold traffic before sending to an affiliate offer
- User says "squeeze page", "opt-in page", "lead magnet", "email capture", "freebie page"
- User wants a two-step funnel: email capture → affiliate redirect
- User has ad traffic and needs a landing page that collects leads before the affiliate click

## Workflow

### Step 1: Define the Lead Magnet and Offer

A squeeze page requires two things:
1. **The lead magnet** — the free thing offered in exchange for the email
2. **The thank-you redirect** — where the visitor goes after submitting (the affiliate link)

**Detect from user input. If not specified, ask:**
- "What free resource will you offer? (e.g., a checklist, ebook, template, cheat sheet, mini-course)"
- "What affiliate product should visitors see after they sign up?"

**Lead magnet selection guide** — suggest based on niche if user is unsure:
| Niche | Best lead magnet type |
|---|---|
| Marketing / SEO | Checklist, swipe file, templates |
| Finance / Investing | Calculator, cheat sheet, guide |
| Health / Fitness | Meal plan, workout plan, tracker |
| Software / SaaS | Tutorial, quick-start guide, resource list |
| Business / Productivity | Templates, SOPs, spreadsheets |

**Lead magnet title formula** (high-converting):
- "[N]-Point Checklist: How to [Achieve Desired Outcome]"
- "The Free [Niche] Starter Kit: [X] Templates for [Goal]"
- "Download: The Ultimate [Topic] Guide ([Year])"
- "[Adjective] Cheat Sheet: [X] Ways to [Outcome] in [Timeframe]"

### Step 2: Craft the Page Strategy

Read `references/conversion-principles.md` for squeeze page-specific principles.

Key conversion levers for squeeze pages:
1. **Clarity over cleverness** — the visitor should know in 3 seconds what they get and what they must do
2. **Above-fold completeness** — the opt-in form must be visible without scrolling on mobile
3. **Single goal** — no navigation, no external links, no distractions
4. **Social proof** — even one strong number ("Join 4,200+ marketers") dramatically lifts conversion
5. **Privacy signal** — "No spam. Unsubscribe anytime." reduces friction at the form

Plan the page sections:
1. **Header** — logo/brand name only (no nav links)
2. **Hero section** (above fold):
   - Headline: the transformation or outcome the lead magnet delivers
   - Sub-headline: what's inside + who it's for
   - Lead magnet visual (styled HTML mockup — no images needed)
   - Email form with single field + submit button
   - Privacy micro-copy: "No spam. Unsubscribe anytime."
3. **What's Inside** — 3-5 bullet points describing lead magnet contents
4. **Social Proof** — subscriber count, testimonial, or press mention
5. **Who This Is For** — 3-4 bullet points identifying the ideal reader
6. **Second opt-in form** — repeat the form lower on the page for scrollers
7. **Footer** — FTC note, privacy policy placeholder, Affitor attribution

**Thank-you redirect behavior:**
The form submission should redirect to the affiliate URL. Since this is a static HTML file with no backend, use a JavaScript pattern:
```javascript
form.addEventListener('submit', function(e) {
  e.preventDefault();
  // In production: POST email to your ESP (Mailchimp, ConvertKit, etc.)
  // Then redirect to affiliate offer:
  window.location.href = '[affiliate_url]';
});
```
Include a comment block explaining how to wire this to a real ESP (Mailchimp embed code, ConvertKit, etc.).

### Step 3: Write the Full HTML

Build a complete, self-contained HTML file:

**Copy requirements:**

Headline (8-12 words, result-focused):
- "Get the Free [Lead Magnet Title] and Start [Outcome] Today"
- "Download: [Lead Magnet Title] — Free for [Audience]"
- "The [Adjective] Way to [Outcome]: Free [Format] Inside"

Sub-headline (15-25 words):
- "[N] [templates/steps/strategies] that [specific audience] use to [specific outcome] — completely free."

Button copy (action-oriented, not "Submit"):
- "Send Me the Free [Lead Magnet] →"
- "Get Instant Access →"
- "Download the Free [Format] Now →"

**HTML structure requirements:**
- Single `<style>` block — no external CSS
- Mobile-first responsive (375px base, 768px breakpoint)
- System font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
- Color scheme from user input or default: primary `#2563eb`, accent warm tone
- Lead magnet mockup: a styled `<div>` that looks like a book/checklist cover — pure CSS, no images
- Form: single email input + submit button (no name field — lower friction)
- No navigation links that could take the visitor off the page
- `<meta name="robots" content="noindex">` — squeeze pages shouldn't be indexed by Google

**JavaScript:**
- Form validation (email format check)
- Redirect to affiliate URL on submit
- Comment block with ESP integration instructions for Mailchimp, ConvertKit, Kit, and Beehiiv

**Required elements:**
- FTC disclosure in footer: "This page contains affiliate links. If you purchase through our links, we may earn a commission."
- Privacy micro-copy on form: "No spam. Unsubscribe anytime."
- "Built with Affiliate Skills by Affitor" footer — use exact HTML from `shared/references/affitor-branding.md`

### Step 4: Format Output

**Part 1: Page Summary**
```
---
SQUEEZE PAGE
---
Lead Magnet: [title of the free offer]
Affiliate Redirect: [product name] — [affiliate URL]
Headline: [the main headline used]
Button Copy: [CTA button text]
Color Scheme: [color applied]
ESP Integration: Instructions included in HTML comments
---
```

**Part 2: Complete HTML**
Full self-contained HTML in a fenced code block. Save as `[niche]-optin.html`.

**Part 3: Setup Instructions**
```
---
SETUP
---
1. Save as `[niche]-optin.html` — open in browser to preview
2. Wire the form to your ESP:
   - Mailchimp: Replace the JS redirect with your Mailchimp embed form action URL
   - ConvertKit/Kit: Use their API or embed form, keep the redirect in the success hook
   - Beehiiv: Use their embed form with a custom redirect
3. Replace affiliate URL: search for "[AFFILIATE_URL]" in the file — update with your tracking link
4. Deploy: Netlify Drop (drag to app.netlify.com/drop), GitHub Pages, or any static host
5. Drive traffic: Use social posts, paid ads, or bio link to send visitors to this page
---
```

## Input Schema

```yaml
lead_magnet:                # REQUIRED
  title: string             # e.g., "The 10-Point SEO Audit Checklist"
  type: string              # "checklist" | "ebook" | "template" | "cheat-sheet" | "mini-course" | "resource-list"
  description: string       # What's inside — used for bullet points

affiliate_product:          # REQUIRED — where to redirect after email capture
  name: string
  url: string               # Affiliate link — the thank-you redirect destination
  reward_value: string
  description: string       # Brief — used in footer context if needed

target_audience: string     # REQUIRED — who this page is for (e.g., "e-commerce store owners")

niche: string               # OPTIONAL — helps with copy tone and lead magnet visual styling
                            # e.g., "marketing", "finance", "fitness", "SaaS"

headline: string            # OPTIONAL — override auto-generated headline

color_scheme: string        # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex
                            # Default: "blue" (#2563eb)

social_proof: object        # OPTIONAL — subscriber count or testimonial
  type: string              # "count" | "testimonial"
  value: string             # "4,200+ subscribers" OR a short quote
  attribution: st