Lead magnet page

A lead magnet page trades one thing for one thing: something the reader wants right now for an email address they mostly do not want to give. The mockup below is a portfolio design for a fictional agency guide called The Retainer Playbook. The whole page is engineered to make that trade feel obviously fair inside ten seconds.

The trade, visible in one glance

The left half of the page names the offer in one word ("Playbook"). The right half is the form. The reader's eye can complete the transaction without scrolling. Everything below the fold is only there for the small percentage of visitors who need one more reason before typing an email.

Under the headline sits a short bullet list of what is actually inside the guide. Four items, all concrete nouns: a contract, pricing tables, an email sequence, a decision tree. Vague benefit language ("learn the secrets") loses to specific artifacts every single time.

The form, treated as the hero

The form card is cream on black so it visually leaves the page and reads as a physical object. Only two fields: email and studio size. Studio size looks like scope creep, but it lets the follow-up email address the reader in their own terms, which raises open rate on the next send. Anything beyond two fields drops conversion in a way that the extra data never recovers.

The button copy is literal ("Send me the PDF"). No "Get instant access" trickery. Under the button, a single line of trust language tells the reader what happens next: one email, unsubscribe visible, no list resale. That sentence usually converts more clicks than any headline tweak I have tested.

The proof, understated

The bottom-left of the page shows three thumbnail spreads from the actual PDF. Not a mockup of a book, not a Kindle render. The reader sees exactly what they will receive. On a lead magnet, showing the artifact does more work than any testimonial.

Design decisions

• Dark page, light form. Inverting the form card against the page makes it the highest-contrast object without needing a coloured button.
• Serif headline, sans body. A heavy sans headline pairs with a lighter sans body. One typeface, two weights, one job each.
• Author byline, not testimonials. "Written by a founder, not a marketer" replaces a wall of quotes. On a niche resource, source beats social proof.
• No hero image of the PDF. A 3D book render would feel like every other lead magnet. Real spreads at the foot of the page do the same job with more credibility.

The stack

Platform

Astro with a single static route, deployed to Cloudflare Pages.

Design tools

Figma for layout, Affinity Publisher for the PDF itself.

Form

ConvertKit for capture, custom double opt-in, PDF delivered via signed S3 URL.

Instrumentation

Plausible for goal conversion, UTM breakdown by traffic source.