Conversion Elements & CTAs Checklist

<!-- Minimal lead capture form -->
<form class="lead-form">
  <div class="form-group">
    <label for="email">Work Email</label>
    <input type="email" id="email" name="email" 
           placeholder="[email protected]" required>
  </div>
  <button type="submit" class="cta-button">
    Get Instant Access
  </button>
  <p class="form-note">No spam. Unsubscribe anytime.</p>
</form>

// Inline form validation
const emailInput = document.querySelector('#email');
const errorMsg = document.querySelector('.error-msg');

emailInput.addEventListener('blur', () => {
  const email = emailInput.value;
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  
  if (!isValid && email.length > 0) {
    emailInput.classList.add('invalid');
    errorMsg.textContent = 'Please enter a valid email';
    errorMsg.style.display = 'block';
  } else {
    emailInput.classList.remove('invalid');
    errorMsg.style.display = 'none';
  }
});

<!-- Multi-step form with progress -->
<div class="form-progress">
  <div class="step active">1. Contact Info</div>
  <div class="step">2. Business Details</div>
  <div class="step">3. Preferences</div>
</div>

<div class="form-step" data-step="1">
  <input type="text" placeholder="Full Name" required>
  <input type="email" placeholder="Email" required>
  <button class="next-step">Continue →</button>
</div>

<!-- Smart form inputs -->
<input type="tel" 
       name="phone" 
       autocomplete="tel"
       inputmode="numeric"
       pattern="[0-9]{10,}">

<input type="email" 
       name="email" 
       autocomplete="email"
       inputmode="email">

<select name="country" autocomplete="country">
  <option value="US">United States</option>
  <option value="UK">United Kingdom</option>
</select>

Test Priority Order (by typical impact):

1. Headline / Value Proposition    (20-40% lift)
2. CTA text and color              (10-30% lift)
3. Hero image / video              (10-25% lift)
4. Form length                     (10-20% lift)
5. Social proof placement          (5-15% lift)
6. Page layout / structure         (5-15% lift)
7. Trust signal types              (5-10% lift)
8. Button size / shape             (2-8% lift)

Always test the highest-impact elements first.

A/B Test Sample Size Formula:

Minimum sample = 16 × (σ / δ)²

Where:
  σ = standard deviation of your metric
  δ = minimum detectable effect (the lift you care about)

Example:
  Current conversion rate: 3%
  Minimum lift to detect: 20% (3.6%)
  Required sample: ~5,000 per variation

Tools to calculate:
- optimizely.com/sample-size-calculator
- vwo.com/ab-testing/sample-size-calculator

A/B Test Documentation Template:

Test Name: CTA Button Color
Hypothesis: Orange CTA will outperform blue 
            due to higher contrast on white bg
Start Date: 2026-07-15
End Date: 2026-08-01
Traffic Split: 50/50

Results:
  Control (Blue):  3.2% CVR (1,247 / 38,969)
  Variant (Orange): 4.1% CVR (1,603 / 39,098)
  Lift: +28.1%
  Confidence: 98.2%
  
Decision: Implement orange CTA
Learning: High-contrast CTAs outperform 
          brand-aligned colors

// Track CTA clicks in GA4
document.querySelectorAll('.cta-button').forEach(btn => {
  btn.addEventListener('click', () => {
    gtag('event', 'cta_click', {
      'event_category': 'engagement',
      'event_label': btn.textContent.trim(),
      'page_location': window.location.pathname
    });
  });
});

// Track form submissions
document.querySelector('form').addEventListener('submit', (e) => {
  gtag('event', 'generate_lead', {
    'event_category': 'conversion',
    'event_label': 'lead_form',
    'value': 1
  });
});

<!-- High-converting hero -->
<section class="hero">
  <h1>Get 3x More Leads From Your Website</h1>
  <p class="subheadline">SEO + CRO working together. 
     We optimize your pages to rank higher and 
     convert more visitors into customers.</p>
  <a href="#contact" class="cta-button">
    Get My Free Audit
  </a>
  <div class="hero-proof">
    <img src="/logos/client-logos.svg" alt="Trusted by">
    <span>Trusted by 200+ businesses</span>
  </div>
</section>

<!-- Conversion flow structure -->
<section class="problem">
  <h2>Your Traffic Is Growing But Revenue Isn't</h2>
  <p>You're investing in SEO but visitors leave 
     without converting. Sound familiar?</p>
</section>

<section class="benefits">
  <h2>How We Fix It</h2>
  <!-- Benefit cards with specific outcomes -->
</section>

<section class="proof">
  <h2>Results From Real Clients</h2>
  <!-- Case studies with numbers -->
</section>

<section class="cta-repeat">
  <a class="cta-button">Get Started Today</a>
</section>