Squeeze Page Builder

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:

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:

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

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: string       # If testimonial: "— Name, Job Title"

esp: string                 # OPTIONAL — which email service provider they use
                            # "mailchimp" | "convertkit" | "beehiiv" | "aweber" | "other"
                            # Default: "other" (generic instructions)