2567 Cta Patterns D1b17b81

# CTA Design Principles

How to think about CTAs that actually convert.

## Core Truth: A CTA's Job

A CTA's job is to make the next step obvious and compelling. The best CTA depends entirely on what you're asking someone to do and where they are in their journey.

---

## Principle 1: Action Hierarchy — Match CTA Urgency to Business Context

### Emergency Services (Plumber, Locksmith, HVAC Repair)
- **The phone number IS the CTA**
- Make it huge, high-contrast, and instantly tappable
- People are in crisis mode — they need to call NOW
- "24/7 Emergency Service: [PHONE]" > everything else
- Don't ask them to fill out a form when their basement is flooding

### Professional Services (Lawyer, Accountant, Consultant)
- Lower commitment first step: "Book a consultation" or "Get a free assessment"
- People need to trust you before they commit
- Secondary: "Download our guide" (email capture, relationship building)

### E-commerce
- "Add to cart" with clear pricing visible
- Show the price before asking for the action
- Cart abandonment is high — don't add friction

### Content/Agency/Creative
- Relationship-building CTAs: "View our work", "Let's talk", "See case studies"
- "Tell us about your project" invites conversation

### SaaS/Software
- Free trial > demo > contact sales
- "Start free trial" converts higher than "Request demo"
- Don't ask for credit card upfront unless your product is proven

**The Pattern**: Ask for the smallest meaningful commitment that moves the relationship forward.

---

## Principle 2: Placement — After Value, Not Before

### The Golden Rule: Make Your Case First

**Bad sequence**:
1. "Get your free quote!" (top of page)
2. Explanation of what you do
3. Why you're different

**Good sequence**:
1. Problem statement (you understand their pain)
2. How you solve it (your solution)
3. Proof (testimonials, results, credentials)
4. **NOW ask for action** (they're convinced)

### Placement Sweet Spots

1. **After the hero section** — for people who already know they want this
2. **Mid-page, after explaining the problem** — "Ready to fix this?"
3. **After social proof** — testimonials built trust, now convert
4. **Pre-footer banner** — last chance before they leave (highest converting)
5. **Sticky CTA on mobile** — only for high-urgency services, use sparingly

### How Many CTAs Per Page?

1-2 per screenful maximum:
- **Low urgency** (blog, about page): 1-2 total
- **Medium urgency** (service pages): 2-3 total
- **High urgency** (landing pages, pricing): 3-4 max

---

## Principle 3: Copy — Words Matter More Than Design

### Specific Beats Generic

| Generic (Weak) | Specific (Strong) |
|----------------|-------------------|
| Contact Us | Call for Same-Day Service |
| Learn More | See How We Cut Energy Bills 30% |
| Get Started | Book Your Free Roof Inspection |
| Submit | Get Your Custom Quote |
| Click Here | Download the 2026 Tax Guide |

**The test**: If your CTA could work on any business's website, it's too generic.

### Action Verbs — What Happens Next?

The verb should describe the immediate next step, not the end goal:
- "Book a consultation" (not "Get better finances")
- "Download the checklist" (not "Improve your marketing")
- "Request a quote" (not "Save money")

### Remove Friction Words (Sometimes)

**When to use them**: Trust problems or commitment anxiety (lawyers, contractors, subscriptions).
**When NOT to**: Makes you sound desperate or cheap.

**Better alternative**: Be specific about the value.
- "Get a custom quote in 24 hours" > "Get a free quote"
- "30-minute strategy call" > "Free consultation"

### Match the Emotional Temperature

**High-energy page** (landing page): "Claim your discount now!"
**Professional page** (services): "Request a consultation"
**Informational page** (blog): "Download the guide"
**Emergency page** (24/7 services): "CALL NOW: [number]"

---

## Principle 4: Visual Design — Contrast and Hierarchy

### Contrast is King

**Simple test**: Squint at the page. Can you still see the CTA? If not, it's not contrasting enough.

- **Light background** -> Dark or vibrant button
- **Dark background** -> Light or vibrant button
- **Colourful page** -> Neutral or opposite colour button

### One Primary CTA Per Section

**Primary CTA**: Solid fill, high contrast, largest size
**Secondary CTA**: Outline or ghost style, smaller, less prominent

### Size Communicates Importance

- Large: 18-20px text, generous padding (16px vertical) — hero, pre-footer
- Medium: 16px text, standard padding (12px vertical) — inline, mid-page
- Small: 14px text, compact padding (8px vertical) — footer, sidebar

### Whitespace — Breathing Room = Drawing Power

Give your CTA space:
- Margin above: 3-4x your base spacing
- Margin below: 3-4x your base spacing
- Padding inside button: 2-3x base spacing

---

## Principle 5: Context-Specific CTAs

### Homepage
- **Primary**: Main action for entire business
- **Secondary**: Alternative path ("See our services")
- **Pre-footer**: Last-chance conversion

### Service Pages
- **Primary**: Service-specific action ("Book a roof inspection")
- NOT generic "Contact us"

### About Page
- **Softer CTA**: "Work with us", "See our projects", "Get in touch"
- NOT "Buy now" or "Get a quote"

### Blog/Content Pages
- **Primary**: Related content or email capture
- **Secondary**: Soft conversion

### Contact Page
- **The form IS the CTA**
- Minimal other CTAs

### Pricing Page
- **Per-tier CTA**: "Choose [Plan Name]" or "Get started"
- **Pre-footer**: "Not sure? Talk to us"

---

## Principle 6: Anti-Patterns

1. **"Learn More" that goes nowhere** — Be specific. "How our process works."
2. **Giant banner with generic motivational copy** — "Ready to take your business to the next level?" is the AI default.
3. **CTAs that look like every other section** — If your CTA looks identical to your hero, it doesn't stand out.
4. **Multiple competing CTAs of equal weight** — One primary (solid), others secondary (outline).
5. **"Contact Us" with no context** — "Request a callback" or "Get a free quote."
6. **CTAs before value** — Explain the value first, THEN ask for action.
7. **Buried CTA in paragraph text** — Visually distinct button, not inline link.
8. **Friction-heavy CTAs** — "Download our comprehensive enterprise-grade whitepaper" -> "Get the guide."

---

## Principle 7: Mobile Considerations

**Minimum touch target**: 44px tall
**Full-width buttons on mobile**: Hero CTAs, banner CTAs
**Stack buttons vertically**: Primary on top, secondary below
**Phone number CTAs**: `<a href="tel:...">` links, large, obvious, high-contrast

**Sticky CTAs on mobile**:
- Emergency services: floating phone button
- High-intent pages: sticky "Get quote" at bottom
- Don't use on informational pages

---

## Quick Decision Framework

1. **What's the business context?** Emergency -> Phone. Professional -> "Book consultation." Creative -> "View work."
2. **What have I proven so far?** Nothing -> Don't ask yet. Shown social proof -> Strong CTA.
3. **What's the smallest meaningful commitment?** Free trial > demo > contact > purchase.
4. **Is my CTA copy specific?** Could it work on any website? -> Too generic.
5. **Does my CTA visually stand out?** Squint test.
6. **Am I asking too many times?** More than 4 CTAs on a page -> Too many.