Vibe Code Bible
Copywriting

CTAs & Conversion Copy

Button copy, urgency and scarcity tactics, objection handling, form optimization, pricing page copy, and the engagement metrics that connect conversion copywriting to SEO performance.

CTAs & Conversion Copy

Button copy, urgency and scarcity tactics, objection handling, form optimization, pricing page copy, and the engagement metrics that connect conversion copywriting to SEO performance.


Principles

1. The Psychology of Conversion Copy

Conversion copy exists at the moment of decision. The visitor has already arrived, already read enough to be interested, and is now deciding whether to take the next step — sign up, buy, download, subscribe, or leave. Every word near a conversion point either reduces friction or adds it. There is no neutral copy.

The psychology behind conversion copy draws from behavioral economics and decision science:

  • Loss aversion — People are more motivated to avoid losing something than to gain something of equal value. "Don't lose your progress" is more compelling than "Save your progress." "Your free trial expires in 3 days" is more compelling than "Upgrade anytime."
  • Cognitive load reduction — Every extra field in a form, every unnecessary word on a button, every ambiguous label increases cognitive load. The brain treats friction as risk. Reducing friction increases conversion.
  • Social proof — Humans look to others when making uncertain decisions. "Trusted by 5,000+ teams" reduces uncertainty. "Join 40,000 developers" reframes signup as joining a community rather than making a solitary decision.
  • Commitment and consistency — Small commitments lead to larger ones. A "Start free" button feels like a smaller commitment than "Sign up for an account." The outcome is the same, but the perceived commitment differs.
  • Anchoring — The first number a person sees becomes the anchor for evaluating subsequent numbers. Showing a "$99/month" enterprise plan first makes the "$29/month" standard plan feel like a deal.

Conversion copy is not about tricks or manipulation. It is about reducing legitimate friction, answering genuine objections, and making the value proposition clear enough that the right decision is obvious.

2. Button Copy: Action-Oriented, Specific, First-Person

Button copy is the most constrained and highest-impact microcopy in your interface. A button label determines whether a user completes the action or hesitates. The rules are simple but consistently violated.

Lead with a verb. Buttons are actions. The copy should name the action: "Start free trial," "Download the guide," "Create your account." Never use nouns alone ("Submission," "Information") or vague labels ("Submit," "Continue," "Next").

Be specific about the outcome. "Submit" tells the user nothing about what happens when they click. "Create my account" tells them exactly what happens. "Get the free template" tells them what they receive. Specificity reduces uncertainty.

Use first-person where possible. "Start my free trial" outperforms "Start your free trial" in A/B testing across multiple studies. First-person ("my") creates a sense of ownership before the action is taken. The user mentally claims the outcome before clicking.

Match the button to the offer. If the headline promises a free guide, the button should say "Download the free guide," not "Submit" or "Continue." If the pricing section promotes a free trial, the button should say "Start free trial," not "Get started." Mismatched button copy breaks the cognitive flow and introduces doubt.

Button copy length:

  • Primary CTA: 2–5 words. "Start free trial" (3 words). "Download the template" (3 words). "Create my account" (3 words).
  • Long enough to be specific. Short enough to scan instantly.
  • If you need more than 5 words, the CTA is trying to do too much.

Ghost text under buttons. Add a short line of reassurance below the primary CTA button:

  • "No credit card required"
  • "Free for 14 days"
  • "Cancel anytime"
  • "Takes 30 seconds"

This ghost text handles the most common objection at the exact moment of conversion — when the user's finger is hovering over the button.

3. Urgency and Scarcity: Ethical Persuasion Tactics

Urgency (time pressure) and scarcity (limited quantity) are the two most powerful conversion levers — and the two most abused. Used honestly, they drive action. Used dishonestly, they destroy trust.

Legitimate urgency:

  • "Sale ends February 28" — a real deadline.
  • "Early bird pricing expires when we launch" — a real pricing change.
  • "Your trial expires in 3 days" — a real timeline.
  • "Limited to 50 workshop seats" — a real capacity constraint.

Manufactured urgency (avoid):

  • Countdown timers that reset when you refresh the page.
  • "Only 2 left!" on a digital product with unlimited inventory.
  • "Price goes up soon" with no actual price change planned.
  • Pop-ups claiming "17 people are viewing this right now" when it is fabricated.

The test: if a customer discovered the urgency or scarcity claim was false, would they feel deceived? If yes, do not use it.

Urgency copy patterns that work:

  • Specific deadlines beat vague urgency: "Offer ends March 1" beats "Limited time offer."
  • Consequences beat commands: "Prices increase after launch week" beats "Buy now!"
  • Reminders beat pressure: "Your saved items expire in 48 hours" beats "HURRY! Don't miss out!!!"

Scarcity copy patterns that work:

  • Real inventory counts: "3 spots remaining in the March cohort."
  • Edition limits: "500 printed copies — when they're gone, they're gone."
  • Capacity constraints: "Beta access limited to 100 teams."

4. Objection Handling: Anticipate and Answer in Copy

Every conversion point has objections — reasons the visitor hesitates instead of acting. The job of conversion copy is to anticipate these objections and answer them before the user consciously forms them.

Common objection patterns:

ObjectionCopy solution
"How much does it cost?"Show pricing clearly. No "contact us for pricing" unless genuinely custom.
"Is this worth it?"Social proof, case studies, specific outcomes near the CTA.
"What if it doesn't work for me?"Money-back guarantee, free trial, "cancel anytime" text.
"Is my data safe?"Security badges, encryption mentions, privacy policy link near forms.
"Is this too complicated?""Takes 2 minutes to set up." Demo video link. Free trial, not just paid.
"Can I trust this company?"Logos of known customers. Real testimonial with name and company. Trust badges.
"What happens after I sign up?""You'll get instant access to..." Describe the next 3 steps after clicking.
"Am I locked in?""No contracts. Cancel anytime." Month-to-month language.

Where to place objection-handling copy:

  • Directly above or below the CTA button (ghost text).
  • In a FAQ section on the landing page.
  • As trust signal badges near forms (security icons, guarantee badges).
  • In testimonials that specifically address objections ("I was worried about X, but...").

The strongest objection-handling is preemptive. The user should never need to search for answers to their doubts — the copy should address them before they are even fully formed.

5. Trust Signals: Security Badges, Guarantees, Reviews

Trust signals are visual and textual elements that reduce the perceived risk of conversion. They are especially critical for:

  • First-time visitors who have no prior experience with your brand.
  • High-commitment actions (purchases, subscriptions, data sharing).
  • YMYL contexts (money, health, personal information).

Effective trust signals and where to place them:

  • Customer logos — Place above the fold on landing pages. 4–6 recognizable logos. Format: "Trusted by teams at [Logo] [Logo] [Logo]."
  • Review scores — "Rated 4.8/5 on G2 from 500+ reviews." Specific platform, specific score, specific count. Place near CTAs.
  • Testimonials with attribution — Full name, company, role, and preferably a photo. "Great product!" from "John D." is not a trust signal. "Reduced our onboarding time from 2 weeks to 3 days" from "Sarah Chen, Head of Engineering at Acme Corp" is.
  • Security badges — SSL/TLS icons, SOC 2 badge, GDPR compliance badge. Place near payment forms and data collection points.
  • Guarantees — "30-day money-back guarantee," "Free cancellation," "No credit card required." Place as ghost text directly under CTAs.
  • Media mentions — "As featured in TechCrunch, Wired, Product Hunt." Place below hero section.
  • Real-time social proof — "1,247 teams signed up this month." Only if the number is real and impressive. Fake or small numbers hurt more than help.

Trust signal placement hierarchy:

  1. Above the fold: customer logos, key metric ("50,000+ users").
  2. Near the primary CTA: guarantee, "no credit card" text, review score.
  3. Near payment/data forms: security badges, encryption indicators, privacy link.
  4. Mid-page: detailed testimonials, case study links, media mentions.
  5. Bottom of page: full testimonial section, trust badge collection, awards.

6. Form Copy: Labels, Helpers, Placeholders, Submit Buttons

Forms are where conversion either happens or dies. The copy within a form — labels, placeholder text, helper text, validation messages, and the submit button — directly impacts completion rates.

Form label best practices:

  • Use the label as the label. "Full name" not "Please enter your full name."
  • Left-align or top-align labels. Avoid floating labels that disappear when the user starts typing (accessibility issue).
  • Required fields: mark optional fields, not required ones. If most fields are required, marking the few optional ones is less visual noise.

Placeholder text rules:

  • Placeholders are NOT labels. They disappear when the user types, removing the context.
  • Use placeholders for format hints: "e.g., name@company.com" or "MM/DD/YYYY."
  • Never put critical instructions in placeholder text — they will be invisible once input begins.

Helper text:

  • Place below the field, not inside it.
  • Use for clarification: "We'll use this to personalize your dashboard" under the "Company name" field.
  • Use for reassurance: "We'll never share your email. Unsubscribe anytime." under the email field.

Validation copy:

  • Validate inline and in real-time (not after submit).
  • Errors should say what went wrong AND how to fix it: "Email must include an @ symbol" not just "Invalid email."
  • Use neutral, non-blaming language: "Password must be at least 8 characters" not "Your password is too short."

Submit button copy:

  • Never use "Submit." It is the single most generic and anxiety-inducing button label.
  • Match the button to the form's purpose: "Create my account," "Send message," "Download the guide."
  • Include ghost text under the button for the final objection: "No spam, unsubscribe anytime."

7. Checkout and Payment Copy

Checkout is the highest-stakes conversion point. The user is about to spend money. Every word on the checkout page either reassures or creates doubt.

Order summary copy:

  • Show exactly what the user is buying: plan name, features included, billing period.
  • Show the total prominently. No hidden fees that appear at the last step.
  • If there is a discount applied, show the original price crossed out next to the discounted price. The anchor (original price) makes the discounted price feel more valuable.

Payment form copy:

  • "Pay securely with" + payment method icons (Visa, Mastercard, PayPal, etc.).
  • "Encrypted and secure" or a small lock icon near card input fields.
  • "You'll be charged $29/month starting March 1, 2026" — tell the user exactly when and how much they will be charged.

Post-purchase confirmation copy:

  • "You're all set!" or "Welcome to [Product]" — celebrate the decision.
  • Confirm what they bought, when their access starts, and what to do next.
  • Include support contact in case something went wrong.
  • This is a brand touchpoint, not just a receipt. The tone should be warm and helpful.

Refund/cancellation copy:

  • Do not hide cancellation. Difficult cancellation flows (dark patterns) erode trust and generate negative reviews.
  • "Cancel anytime from your account settings. No questions asked."
  • Clearly state the refund policy near the payment CTA: "30-day money-back guarantee."

8. Pricing Copy: Anchoring, Framing, and Tier Naming

Pricing page copy is conversion copy, not informational copy. Every element on the pricing page — from tier names to feature descriptions to the CTA button — is designed to help the visitor make a confident purchase decision.

Anchoring:

  • Display the most expensive plan first (or make it visually prominent). This sets a high anchor that makes lower tiers feel like deals.
  • If you offer annual billing at a discount, show the monthly equivalent of the annual price: "$24/month (billed annually)" next to "$29/month (billed monthly)." The monthly number is what gets compared.
  • Show the savings amount: "Save $60/year with annual billing."

Tier naming:

  • Name tiers for the audience, not the feature set: "Starter," "Team," "Enterprise" are audience-oriented. "Basic," "Standard," "Premium" are feature-oriented and feel like you are ranking the user's worth.
  • The recommended tier should be visually highlighted (border, badge, "Most popular" label). This reduces decision paralysis by giving a default recommendation.

Feature lists:

  • Lead with the features that differentiate tiers, not the features they share.
  • Use benefit-oriented descriptions: "Unlimited team members" not "User management."
  • Checkmarks for included, dashes or X for excluded. Do not leave cells empty — ambiguity creates doubt.
  • If a feature is complex, add a tooltip or one-line explanation. Do not assume the user knows what "SSO" or "RBAC" means.

CTA buttons on pricing:

  • "Start free trial" for freemium. "Get started" for the recommended tier. "Contact sales" for enterprise.
  • Do not use "Buy now" — it is aggressive and premature on a pricing page where the user is still evaluating.
  • Each tier's CTA should feel appropriate to the commitment level: free tier = "Start free," paid tier = "Start trial," enterprise = "Talk to sales."

9. SEO and Conversion: How Engagement Metrics Influence Rankings

Conversion copy does not exist in an SEO vacuum. Google uses engagement signals — click-through rate, dwell time, bounce rate, and pogo-sticking (bouncing back to search results) — as indirect ranking factors. Copy that converts well also tends to rank well, because the same principles drive both.

The engagement-ranking feedback loop:

  1. A searcher clicks your result (CTR — influenced by your title tag and meta description copy).
  2. They stay on the page (dwell time — influenced by your headline, first paragraph, and scannable structure).
  3. They interact with the page (engagement — influenced by your CTA placement, internal links, and content quality).
  4. They do not return to search results (satisfaction signal — influenced by whether your content matched their intent).

Each step is influenced by copy quality. Better meta descriptions increase CTR. Better headlines increase dwell time. Better CTAs increase engagement. Better intent matching reduces pogo-sticking. The aggregate of these signals reinforces your ranking position.

Practical implications for conversion copywriters:

  • Optimize title tags as conversion copy, not just keyword containers. A title tag that earns a click is a title tag that drives traffic without any additional SEO effort.
  • Write above-the-fold copy that matches search intent immediately. If a searcher clicked expecting a "how-to guide" and sees a sales pitch, they bounce — and your ranking suffers.
  • Place CTAs where they are natural, not obtrusive. A well-placed CTA increases engagement (good for rankings). An intrusive pop-up increases bounce rate (bad for rankings).
  • Internal links in conversion copy keep users on-site longer, which increases dwell time and signals content depth to Google.

The best conversion copywriting and the best SEO copywriting are the same thing: clear, valuable, intent-matched content that earns clicks, holds attention, and delivers on its promise.


LLM Instructions

1. Writing CTA Button Copy

When asked to write CTA copy or button labels:

  • Ask for the context: what is the user signing up for, buying, downloading, or doing?
  • Write 5–8 CTA variants. Each should:
    • Start with a verb: "Start," "Get," "Download," "Create," "Join," "Try."
    • Be specific about the outcome: "Start my free trial" not "Get started."
    • Use first-person where natural: "my" instead of "your."
    • Stay within 2–5 words.
  • For each CTA, write matching ghost text (the reassurance line below the button).
  • Recommend the top 2 CTAs and explain why (specificity, action orientation, risk reduction).
  • Flag any "Submit," "Click here," or generic labels in existing copy and provide specific replacements.

2. Creating Objection-Handling Blocks

When writing landing page or product page copy that includes a conversion point:

  • Identify the top 5 objections for the specific offer (cost, complexity, trust, lock-in, effectiveness).
  • Write objection-handling copy for each: a short phrase or sentence that preemptively answers the concern.
  • Suggest placement: ghost text under CTAs, FAQ section, testimonial selection, or inline near the relevant section.
  • For each objection, suggest a supporting trust signal (badge, testimonial quote, guarantee, statistic).

3. Optimizing Form and Checkout Copy

When asked to write or improve form copy:

  • Review all labels: are they concise, clear, and using the simplest language?
  • Review placeholders: are they format hints, not labels? Are they necessary?
  • Write helper text for fields that might cause confusion or hesitation (email, phone, company).
  • Write validation messages that explain the problem and the fix.
  • Rewrite the submit button to match the form's purpose.
  • Add ghost text addressing the primary objection (spam, privacy, commitment).
  • For checkout flows: ensure the order summary is clear, the total is prominent, and security signals are near payment fields.

4. Writing Pricing Page Copy

When asked to write pricing page copy:

  • Ask for the tier structure (names, prices, key differentiating features).
  • Write tier descriptions that focus on who each tier is for, not just what it includes.
  • Highlight the recommended tier visually and verbally: "Most popular" or "Best for growing teams."
  • Write feature list items as benefits, not features: "Invite your whole team" not "User management."
  • Write CTA buttons that match commitment level: free tier = low commitment, paid tier = medium, enterprise = conversation.
  • Apply anchoring: structure the visual layout so the most expensive option is seen first or the recommended option is centered.
  • Write the FAQ section addressing pricing objections: billing frequency, refunds, plan changes, cancellation.

5. A/B Testing Copy Variants

When asked to create A/B test variants:

  • Only change one variable per test: headline OR CTA OR social proof — not all at once.
  • Write variant A (control) and variant B (challenger) with a clear hypothesis for each.
  • Explain what signal each test will reveal: "If B wins, it means [X] resonates more than [Y]."
  • Suggest minimum sample size and duration guidelines (at least 100 conversions per variant, run for at least 2 weeks).
  • Recommend the highest-leverage test first: headline > CTA > social proof > layout.

Examples

1. CTA Button Variants

Button copy options for different conversion contexts with ghost text.

FREE TRIAL CTA (SaaS Product)
================================
Primary options:
1. "Start my free trial"
   Ghost: No credit card required. Cancel anytime.

2. "Try [Product] free for 14 days"
   Ghost: Full access to all features. No commitment.

3. "Start building for free"
   Ghost: No credit card. Upgrade when you're ready.

Recommended: Option 1 — first-person, specific, action-oriented.
Runner-up: Option 3 — benefit-focused (building, not "trialing").
Avoid: "Get started" (vague), "Sign up" (generic), "Submit" (terrible).


EMAIL SIGNUP CTA (Newsletter)
================================
Primary options:
1. "Subscribe to the weekly brief"
   Ghost: Join 12,000+ developers. Unsubscribe anytime.

2. "Get the newsletter"
   Ghost: One email per week. No spam, ever.

3. "Send me the weekly tips"
   Ghost: Short, actionable, every Thursday.

Recommended: Option 1 — specific about frequency and content type.
Runner-up: Option 3 — first-person, benefit-oriented.
Avoid: "Submit" (fear-inducing), "Sign up" (what am I signing up for?).


EBOOK / LEAD MAGNET CTA
================================
Primary options:
1. "Download the free guide"
   Ghost: PDF, 24 pages. No email sequence — just the guide.

2. "Get my copy"
   Ghost: Instant download. No signup required.

3. "Send me the SEO checklist"
   Ghost: Free, instant, no strings attached.

Recommended: Option 1 — clear value, specific format.
Key: The ghost text handles the #1 objection for lead magnets
("Will I get spammed?").


ENTERPRISE / SALES CTA
================================
Primary options:
1. "Talk to our team"
   Ghost: No pitch deck. Just a conversation about your needs.

2. "Request a demo"
   Ghost: 30-minute walkthrough. See how it works for your team.

3. "See it in action"
   Ghost: Personalized demo with your use case. Book in 60 seconds.

Recommended: Option 2 — specific commitment level (30 min), clear format.
Avoid: "Contact sales" (feels transactional), "Learn more" (not action-oriented).

2. Checkout Flow with Conversion Copy

A complete checkout page demonstrating trust signals, clear pricing, and reassurance copy.

// Checkout page with conversion-optimized copy
function CheckoutPage({ plan, billingPeriod }: CheckoutProps) {
  return (
    <main className="max-w-lg mx-auto py-12 px-4">
      {/* Order summary — clarity reduces anxiety */}
      <section aria-label="Order summary">
        <h1 className="text-2xl font-bold">Complete your order</h1>

        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
          <div className="flex justify-between">
            <div>
              <p className="font-semibold">{plan.name} Plan</p>
              <p className="text-sm text-gray-600">
                {billingPeriod === "annual"
                  ? "Billed annually"
                  : "Billed monthly"}
              </p>
            </div>
            <div className="text-right">
              {billingPeriod === "annual" && (
                <p className="text-sm text-gray-400 line-through">
                  ${plan.monthlyPrice}/mo
                </p>
              )}
              <p className="text-lg font-bold">
                ${plan.effectivePrice}/mo
              </p>
            </div>
          </div>

          {billingPeriod === "annual" && (
            <p className="mt-2 text-sm text-green-700 font-medium">
              You save ${plan.annualSavings}/year with annual billing
            </p>
          )}

          <hr className="my-4" />

          <div className="flex justify-between font-bold">
            <span>Total due today</span>
            <span>
              ${billingPeriod === "annual"
                ? plan.annualPrice
                : plan.monthlyPrice}
            </span>
          </div>
        </div>
      </section>

      {/* Payment form — security signals near inputs */}
      <section className="mt-8" aria-label="Payment details">
        <div className="flex items-center gap-2 mb-4">
          <LockIcon className="w-4 h-4 text-gray-500" />
          <span className="text-sm text-gray-600">
            Encrypted and secure. We never store your full card number.
          </span>
        </div>

        <form>
          <label className="block mb-4">
            <span className="text-sm font-medium">Email</span>
            <input
              type="email"
              placeholder="you@company.com"
              className="mt-1 block w-full rounded border p-2"
            />
            <span className="text-xs text-gray-500 mt-1">
              Your receipt and login details will be sent here
            </span>
          </label>

          <label className="block mb-4">
            <span className="text-sm font-medium">Card number</span>
            <div className="relative">
              <input
                type="text"
                placeholder="1234 5678 9012 3456"
                className="mt-1 block w-full rounded border p-2"
              />
              {/* Payment method icons as trust signals */}
              <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
                <VisaIcon />
                <MastercardIcon />
                <AmexIcon />
              </div>
            </div>
          </label>

          <div className="flex gap-4 mb-6">
            <label className="flex-1">
              <span className="text-sm font-medium">Expiry</span>
              <input
                placeholder="MM/YY"
                className="mt-1 block w-full rounded border p-2"
              />
            </label>
            <label className="flex-1">
              <span className="text-sm font-medium">CVC</span>
              <input
                placeholder="123"
                className="mt-1 block w-full rounded border p-2"
              />
            </label>
          </div>

          {/* Primary CTA with ghost text */}
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold"
          >
            Start my {plan.name} plan
          </button>
          <p className="text-center text-sm text-gray-500 mt-2">
            30-day money-back guarantee. Cancel anytime.
          </p>
        </form>
      </section>

      {/* Trust signals below form */}
      <section className="mt-8 flex items-center justify-center gap-6 text-sm text-gray-400">
        <span className="flex items-center gap-1">
          <ShieldIcon className="w-4 h-4" /> SOC 2 compliant
        </span>
        <span className="flex items-center gap-1">
          <LockIcon className="w-4 h-4" /> 256-bit encryption
        </span>
        <span className="flex items-center gap-1">
          <StarIcon className="w-4 h-4" /> 4.8/5 on G2
        </span>
      </section>
    </main>
  );
}

Key decisions: The order summary shows exactly what the user is paying, with the annual savings made explicit. Security signals appear near card inputs, not hidden at the bottom. The CTA button names the specific plan ("Start my Team plan") instead of generic "Pay now." Ghost text handles the two biggest checkout objections: commitment and refund. Trust badges (SOC 2, encryption, reviews) are placed below the form for final reassurance.

3. Pricing Page with Anchoring

A SaaS pricing page demonstrating anchoring, tier naming, and conversion copy.

function PricingPage() {
  return (
    <main className="py-16 px-4">
      <section className="text-center max-w-2xl mx-auto">
        <h1 className="text-4xl font-bold">
          Simple pricing. No surprises.
        </h1>
        <p className="mt-4 text-lg text-gray-600">
          Start free, upgrade when your team grows. Every plan includes a
          14-day free trial with full access.
        </p>

        {/* Billing toggle with savings callout */}
        <div className="mt-6 flex items-center justify-center gap-3">
          <span>Monthly</span>
          <Toggle checked={annual} onChange={setAnnual} />
          <span>Annual</span>
          <span className="ml-2 text-sm font-medium text-green-700 bg-green-50 px-2 py-1 rounded">
            Save 20%
          </span>
        </div>
      </section>

      <section className="mt-12 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {/* Starter tier */}
        <div className="border rounded-xl p-8">
          <h2 className="text-lg font-semibold">Starter</h2>
          <p className="text-sm text-gray-600 mt-1">
            For individuals and small projects
          </p>
          <p className="mt-4">
            <span className="text-4xl font-bold">$0</span>
            <span className="text-gray-500">/month</span>
          </p>
          <button className="mt-6 w-full py-2 border rounded-lg font-medium">
            Start free
          </button>
          <ul className="mt-6 space-y-3 text-sm">
            <li className="flex gap-2">
              <CheckIcon /> Up to 3 team members
            </li>
            <li className="flex gap-2">
              <CheckIcon /> 5 projects
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Community support
            </li>
            <li className="flex gap-2 text-gray-400">
              <DashIcon /> No custom domains
            </li>
            <li className="flex gap-2 text-gray-400">
              <DashIcon /> No analytics
            </li>
          </ul>
        </div>

        {/* Team tier — RECOMMENDED, visually highlighted */}
        <div className="border-2 border-blue-600 rounded-xl p-8 relative">
          <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
            Most popular
          </span>
          <h2 className="text-lg font-semibold">Team</h2>
          <p className="text-sm text-gray-600 mt-1">
            For growing teams that need more power
          </p>
          <p className="mt-4">
            <span className="text-4xl font-bold">
              ${annual ? "24" : "29"}
            </span>
            <span className="text-gray-500">/user/month</span>
          </p>
          {annual && (
            <p className="text-sm text-green-700">
              $24/mo vs $29/mo — save $60/user/year
            </p>
          )}
          <button className="mt-6 w-full py-2 bg-blue-600 text-white rounded-lg font-semibold">
            Start free trial
          </button>
          <p className="text-center text-xs text-gray-500 mt-1">
            14 days free. No credit card required.
          </p>
          <ul className="mt-6 space-y-3 text-sm">
            <li className="flex gap-2">
              <CheckIcon /> Unlimited team members
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Unlimited projects
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Custom domains
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Advanced analytics
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Priority support
            </li>
          </ul>
        </div>

        {/* Enterprise tier — high anchor */}
        <div className="border rounded-xl p-8">
          <h2 className="text-lg font-semibold">Enterprise</h2>
          <p className="text-sm text-gray-600 mt-1">
            For organizations with advanced needs
          </p>
          <p className="mt-4">
            <span className="text-4xl font-bold">Custom</span>
          </p>
          <p className="text-sm text-gray-500 mt-1">
            Typically $99+/user/month
          </p>
          <button className="mt-6 w-full py-2 border rounded-lg font-medium">
            Talk to sales
          </button>
          <p className="text-center text-xs text-gray-500 mt-1">
            Personalized demo included
          </p>
          <ul className="mt-6 space-y-3 text-sm">
            <li className="flex gap-2">
              <CheckIcon /> Everything in Team
            </li>
            <li className="flex gap-2">
              <CheckIcon /> SSO / SAML
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Audit logs
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Dedicated support
            </li>
            <li className="flex gap-2">
              <CheckIcon /> Custom SLA
            </li>
          </ul>
        </div>
      </section>

      {/* FAQ addressing pricing objections */}
      <section className="mt-16 max-w-2xl mx-auto">
        <h2 className="text-2xl font-bold text-center">Common questions</h2>
        <dl className="mt-8 space-y-6">
          <div>
            <dt className="font-semibold">Can I switch plans later?</dt>
            <dd className="mt-1 text-gray-600">
              Yes. Upgrade or downgrade anytime from your account settings.
              Changes take effect at the start of your next billing cycle.
            </dd>
          </div>
          <div>
            <dt className="font-semibold">What happens after my trial ends?</dt>
            <dd className="mt-1 text-gray-600">
              You choose whether to subscribe or move to the free Starter
              plan. No automatic charges. We will send you a reminder 3 days
              before your trial expires.
            </dd>
          </div>
          <div>
            <dt className="font-semibold">Do you offer refunds?</dt>
            <dd className="mt-1 text-gray-600">
              Yes — 30-day money-back guarantee on all paid plans. No
              questions asked. Email support and we will process it within
              24 hours.
            </dd>
          </div>
        </dl>
      </section>
    </main>
  );
}

Key decisions: Enterprise tier shows "$99+/user/month" — this anchors the $24–29 Team price as reasonable. The "Most popular" badge reduces decision paralysis by providing a default. Ghost text under each CTA addresses the primary objection at that commitment level. Feature lists use benefit language ("Unlimited team members") not internal terminology. The FAQ directly addresses the four most common pricing objections: switching, trial expiration, automatic charges, and refunds.

4. Trust Signal Section

A social proof and trust section for a landing page.

<!-- Social proof section — placed between value prop and CTA -->
<section class="py-12 bg-gray-50" aria-label="Social proof">
  <div class="max-w-4xl mx-auto px-4">

    <!-- Key metric — one strong number -->
    <p class="text-center text-lg text-gray-600">
      Trusted by <strong class="text-gray-900">5,000+ teams</strong>
      to ship faster
    </p>

    <!-- Customer logos -->
    <div class="mt-6 flex items-center justify-center gap-8 opacity-60">
      <img src="/logos/stripe.svg" alt="Stripe" height="24" />
      <img src="/logos/vercel.svg" alt="Vercel" height="24" />
      <img src="/logos/linear.svg" alt="Linear" height="24" />
      <img src="/logos/notion.svg" alt="Notion" height="24" />
      <img src="/logos/figma.svg" alt="Figma" height="24" />
    </div>

    <!-- Featured testimonial with full attribution -->
    <blockquote class="mt-12 max-w-2xl mx-auto text-center">
      <p class="text-xl leading-relaxed">
        "We reduced our deployment pipeline from 45 minutes to under 3
        minutes. The ROI was obvious within the first week."
      </p>
      <footer class="mt-4">
        <cite class="not-italic">
          <strong>Sarah Chen</strong>,
          Head of Engineering at Acme Corp
        </cite>
        <!-- Optional: review platform badge -->
        <p class="mt-1 text-sm text-gray-500">
          via G2 Review — Rated 4.8/5 from 500+ reviews
        </p>
      </footer>
    </blockquote>

    <!-- Stat bar — specific, verifiable numbers -->
    <div class="mt-12 grid grid-cols-3 gap-8 text-center">
      <div>
        <p class="text-3xl font-bold">3.2x</p>
        <p class="text-sm text-gray-600">
          avg. faster deployments
        </p>
      </div>
      <div>
        <p class="text-3xl font-bold">99.99%</p>
        <p class="text-sm text-gray-600">
          uptime SLA
        </p>
      </div>
      <div>
        <p class="text-3xl font-bold">50,000+</p>
        <p class="text-sm text-gray-600">
          projects deployed
        </p>
      </div>
    </div>
  </div>
</section>

5. Form with Conversion-Optimized Copy

A signup form demonstrating label clarity, helper text, and objection handling.

function SignupForm() {
  return (
    <form className="max-w-md mx-auto" aria-label="Create your account">
      <h2 className="text-2xl font-bold">Create your account</h2>
      <p className="mt-2 text-gray-600">
        Free 14-day trial. No credit card required.
      </p>

      <div className="mt-6 space-y-4">
        <label className="block">
          <span className="text-sm font-medium">Work email</span>
          <input
            type="email"
            placeholder="you@company.com"
            className="mt-1 block w-full rounded border p-2"
            required
          />
        </label>

        <label className="block">
          <span className="text-sm font-medium">Full name</span>
          <input
            type="text"
            placeholder="Jane Smith"
            className="mt-1 block w-full rounded border p-2"
            required
          />
        </label>

        <label className="block">
          <span className="text-sm font-medium">Password</span>
          <input
            type="password"
            className="mt-1 block w-full rounded border p-2"
            minLength={8}
            required
          />
          <span className="text-xs text-gray-500 mt-1 block">
            At least 8 characters
          </span>
        </label>

        {/* Optional field — marked as optional, not the other way around */}
        <label className="block">
          <span className="text-sm font-medium">
            Company name
            <span className="text-gray-400 font-normal ml-1">(optional)</span>
          </span>
          <input
            type="text"
            className="mt-1 block w-full rounded border p-2"
          />
          <span className="text-xs text-gray-500 mt-1 block">
            Used to personalize your workspace
          </span>
        </label>
      </div>

      {/* CTA with ghost text addressing objections */}
      <button
        type="submit"
        className="mt-6 w-full bg-blue-600 text-white py-3 rounded-lg font-semibold"
      >
        Create my account
      </button>
      <p className="text-center text-xs text-gray-500 mt-2">
        By signing up, you agree to our
        <a href="/terms" className="underline">Terms</a> and
        <a href="/privacy" className="underline">Privacy Policy</a>.
        No spam, ever. Unsubscribe from emails anytime.
      </p>
    </form>
  );
}

Key decisions: Form has only 3 required fields (minimal friction). Optional field is marked "optional" rather than marking required fields with asterisks. Helper text explains WHY the company name is asked for. Password requirement is stated upfront as helper text, not as a surprise validation error. The CTA button says "Create my account" (specific, first-person) not "Sign up" (generic). Ghost text handles consent, spam, and privacy objections in one compact block.


Common Mistakes

1. Generic "Submit" or "Click Here" Buttons

Wrong: Using "Submit," "Click Here," "Continue," or "Go" as button labels. These generic labels tell the user nothing about what happens when they click. "Submit" is the worst offender — it sounds like homework, not an action the user wants to take.

Fix: Name the outcome: "Create my account," "Download the guide," "Start free trial," "Send my message." The button label should complete the sentence "I want to..." — no one wants to "Submit."

2. Fake Urgency and Manufactured Scarcity

Wrong: Countdown timers that reset on page refresh. "Only 2 left!" on digital products with unlimited inventory. "Prices going up soon!" with no actual price increase planned. Fabricated social proof: "Sarah from Denver just purchased!" when it is a random name generator.

Fix: Only use urgency and scarcity when they are real. "Early bird pricing ends March 1" (real deadline). "12 seats remaining in the workshop" (real capacity). If a customer discovered the claim was false, would they feel deceived? If yes, do not use it. Trust is a conversion asset — destroying it for a short-term lift is a losing trade.

3. No Objection Handling Before the CTA

Wrong: Asking the user to sign up, buy, or commit without addressing their concerns. The CTA section contains only a button and a heading. No guarantee, no "no credit card required," no testimonial, no FAQ. The user hesitates, and the page offers nothing to resolve their hesitation.

Fix: Map the top 3–5 objections for your specific offer. Place objection-handling copy near the conversion point: ghost text under buttons, FAQ section, testimonials that address specific concerns, trust badges. The CTA should feel like the natural conclusion of a conversation that has already resolved the user's doubts.

4. Trust Signals Buried Below the Fold

Wrong: Customer logos, review scores, and security badges are placed at the very bottom of the page, below the footer, where 80% of visitors never scroll. The most important trust signals are invisible to the majority of the audience.

Fix: Place the most impactful trust signals above the fold or directly adjacent to conversion points. Customer logos near the hero. Review scores near CTAs. Security badges near payment forms. The user should encounter trust signals at the moment they are making the decision, not after.

5. Pricing Without Anchoring

Wrong: Showing only one plan, or showing three plans at $9, $19, and $29 with no visual emphasis. The user has no reference point for evaluating whether $19 is "expensive" or "cheap." Without an anchor, every price feels high.

Fix: Structure the pricing page with clear anchoring. Show the most expensive option first or prominently. Highlight the recommended tier. Show annual vs. monthly pricing to create a contrast. Use "starting at" language to frame the lowest entry point. Every price should have a reference price that makes it feel reasonable.

6. Asking Too Much in Forms

Wrong: A signup form with 8+ fields: name, email, phone, company, job title, company size, use case, and "how did you hear about us?" Every additional field reduces completion rate. Research consistently shows that each extra field costs 5–10% of completions.

Fix: Ask only for what you need to deliver the value. For a free trial: email and password. Maybe name. Everything else can be collected during onboarding or through progressive profiling after the user has experienced the product. The form should feel like a 10-second commitment, not a census.

7. CTA Doesn't Match the Offer

Wrong: The headline says "Download Our Free SEO Checklist" but the button says "Submit" or "Get Started." The headline promises a specific thing (a checklist). The button promises... nothing specific. The mismatch creates cognitive friction that reduces conversions.

Fix: The CTA button should be the direct continuation of the promise above it. "Download Our Free SEO Checklist" → "Download the checklist." "Start Your Free 14-Day Trial" → "Start my free trial." The button completes the promise, it does not introduce a new ambiguous action.

8. Ignoring Mobile CTA Placement

Wrong: The primary CTA is 3 screen-scrolls below the fold on mobile. The user must scroll through testimonials, feature lists, and FAQs before they can take action. On mobile, where 60%+ of web traffic occurs, the CTA is effectively invisible to users who do not scroll deeply.

Fix: Place the primary CTA above the fold on mobile, or use a sticky CTA (fixed to the bottom of the viewport) that remains accessible as the user scrolls. Include multiple CTAs throughout the page — after the hero, after social proof, after features, and at the bottom. The user should never be more than one scroll away from a CTA.


See also: SEO Copywriting | Headlines & Hooks | Landing Pages | UX Writing | Product Copy | Email Copy | Title Tags | Product Page SEO | Core Web Vitals | UX Patterns | Accessibility | Forms & Validation

Last reviewed: 2026-02


By Ryan Lind, Assisted by Claude Code and Google Gemini.

On this page