New: Tristorm Framework v2.0 is live Read the announcement
Section Library / Cluster 08

Conversion

The sections that turn interest into action. CTA endings close every page; contact forms and booking embeds capture the lead. One conversion mechanism per page — never stack.

CONV-01 — CTA Endings

CTA Endings

P Purpose

The closing argument. After the page has built its case — proof, differentiation, social proof — the CTA ending asks for the commitment. It re-states the value proposition in its most compressed form and provides the clearest possible path to act. Every page needs exactly one.

W When to Use

  • Last section on every landing page, service page, and solution page
  • Minimal: blog posts, resource pages, lighter editorial content — the lightest touch
  • Bold: high-conviction pages (homepage, main service pages) where you've earned the ask
  • Soft: consideration-stage pages (case studies, "why us") where the reader may not be ready
  • Not immediately after the hero — the page hasn't built enough case yet
  • Not more than once per page

L Layout Behaviour

All CTA endings render full-width — entire viewport edge to edge, inner container capped at var(--content-max). Bold: dark full-bleed background, centered, large type (clamp(2rem, 4vw, 3.25rem)). Soft: 2-column grid (text + CTAs left, counters + testimonial right), collapses to 1 column at 768px. Counter numbers animate from 0 on scroll into view (1200ms cubic ease-out, IntersectionObserver threshold 0.3).

I Required Inputs

  • variant — "minimal" | "bold-dark" | "bold-white" | "soft-white" | "soft-grey"
  • headline — max 50 chars, the ask not a summary
  • subline — 1–2 sentences: why now, what happens next
  • primaryCta — button text + URL, specific action verb
  • secondaryCta — optional ghost or link button
  • counter[] — Soft variants: 3 items with number, suffix, label

! Do Not

  • Repeat the hero headline word-for-word — CTA should reframe, not echo
  • Use weak CTA text like "Submit" or "Click Here" — be specific about what happens
  • Stack two CTA ending variants on the same page
  • Use Bold variant on pages that haven't built enough case (e.g. short blog post)
  • Include more than 2 buttons — decision paralysis kills conversion
  • Add form fields inside a CTA ending — use Contact Form for that
  • Use red CTA button on light background — primary buttons stay ink-dark per brand
  • Wrap inside a card or constrained container — full-width sections only

V Variants

  • Minimal — white background, eyebrow label, restrained. Lightest touch — blog and editorial
  • Bold (Dark) — ink background, centered, large type, red glow. Maximum urgency. Default closer
  • Bold (White) — same layout on white. Use when page already has a dark section above
  • Soft (White) — split layout with animated counters + testimonial. Conversational, lower pressure
  • Soft (Grey) — same as Soft White on snow background. Better contrast after white sections

F Typical Page Flow

  • After: FAQ section, case study, or comparison table
  • Before: Footer — always the last content section
  • Bold + Soft pairing: Soft mid-page as warm CTA, Bold at bottom as final ask
  • Never place directly after the hero — page hasn't earned the close yet
Live Preview

Want this in your inbox? One email a month.

Subscribe
CONV-02a — Contact Form — Full

Contact Form — Full

P Purpose

Captures qualified lead information at the moment of highest intent. Left side builds trust with a client testimonial and logo social proof; right side captures the data. Collects enough to qualify the inquiry (company, use case) while keeping friction low. Decision-stage only — the visitor has read enough and is ready to talk.

W When to Use

  • Primary conversion section on /contact after a short hero
  • Bottom of high-intent service pages, after the CTA ending
  • When you need qualifying data: company name, use case, budget range
  • Funnel stage: Decision — not for newsletter signups, use CONV-02b for those

L Layout Behaviour

Full-width section with snow background. 2-column grid: text + trust signals left, form card right. Inner capped at var(--content-max). Collapses to 1 column at 768px. Name/email row collapses from 2-col to 1-col at 540px. Form card has white background and subtle shadow for depth separation.

I Required Inputs

  • variant — "white" | "grey"
  • overline — e.g. "Talk to a Senior"
  • headline — max 40 chars
  • subline — trust statement, 1 sentence
  • submitLabel — specific verb, e.g. "Send"
  • Fields (fixed) — Name, Work email, Company (opt.), Role (opt.), Workflow textarea (opt.)

! Do Not

  • Ask for phone number — increases abandonment dramatically
  • Use more than 6 fields — every field is friction
  • Use visible CAPTCHA — integrate invisible reCAPTCHA or honeypot instead
  • Place above the fold — build the case first
  • Use "Submit" as button text — tell them what happens
  • Put two forms on the same page
  • Auto-focus first field on page load — jarring on mobile
  • Combine with Booking Embed on the same page — pick one mechanism

V Variants

  • White — white section background, snow form card
  • Grey — snow section background, white form card. Better contrast after white sections

F Typical Page Flow

  • On /contact: primary section after a short hero
  • On service pages: Content → CTA Ending → Full Form → Footer
  • Never place before trust-building content — visitor needs context first
Live Preview
Talk to a Senior

Tell us about your operation. We'll reply in 48 hours.

We're senior-led. Every reply comes from a founder or principal engineer.

CONV-02b — Contact Form — Inline

Contact Form — Minimal / Inline

P Purpose

The lowest-friction capture point. A single email field and a button — nothing more. Designed for moments when the reader is interested but not ready to commit to a full conversation. Collects the email for later nurture. Awareness / Consideration stage only.

W When to Use

  • Newsletter signups at the bottom of blog posts
  • Content gates for downloadable resources (guides, templates)
  • Mid-page lead capture on longer editorial pages
  • Inside a Soft CTA ending as an alternative to a button
  • Not as the primary conversion on service pages — too light for high-intent visitors

L Layout Behaviour

2-column grid: copy left, form right. Collapses to 1 column at 800px. Email + button stacks vertically at 480px. No card or border — should feel like a natural part of page content, not a separate UI element. White input background for clean contrast.

I Required Inputs

  • overline — e.g. "Newsletter"
  • headline — max 40 chars, e.g. "One agentic-AI dispatch a month"
  • subline — 1 sentence describing what they'll receive
  • placeholder — input placeholder text
  • submitLabel — specific verb, e.g. "Subscribe" or "Get the Guide"
  • Privacy note auto-renders: "No spam. Unsubscribe anytime."

! Do Not

  • Add more than 2 fields — the whole point is minimal friction
  • Use as primary conversion on a service page — use Full Form there
  • Omit the privacy note — it's a trust signal that costs nothing
  • Use vague button text like "Submit" or "Go"
  • Combine with Full Form on the same page — pick one

F Typical Page Flow

  • End of blog posts → Inline Form → Footer
  • Resource pages: content → Inline Form → CTA
  • Never use as the only conversion on a service page
Live Preview
Newsletter

One agentic-AI dispatch a month

Plain-English breakdowns of what we ship. No hype.

CONV-03 — Booking Embed

Booking Embed

P Purpose

Eliminates form → email → back-and-forth scheduling friction. Left side builds confidence with a value proposition, meeting details, and social proof. Right side shows a team photo. The CTA button opens a scheduling modal — zero steps between intent and booked meeting. Decision stage only.

W When to Use

  • Dedicated /book or /schedule route as primary content
  • Alternative to Full Contact Form when the next step is always a meeting
  • High-intent landing pages (paid ads) where speed-to-meeting matters
  • After a case study or comparison page where the reader is ready to talk
  • Not alongside Full Contact Form on the same page — pick one mechanism

I Required Inputs

  • variant — "light" | "dark"
  • overline, headline (max 40 chars), subline
  • embedUrl — Calendly, Cal.com, or HubSpot link (loads inside modal)
  • height — min-height for embed container, default "640px"
  • Call details — duration, who they'll meet, what to expect (compact icon row)
  • Photo — team or consultant, 4:3 ratio — no generic stock photos

! Do Not

  • Use alongside Full Contact Form — pick one conversion mechanism per page
  • Skip the photo — a faceless booking section feels impersonal
  • Use generic stock photo — show the actual team or consultant
  • Hide the meeting duration — people won't commit time without knowing the cost
  • Show more than one meeting type — pre-select the right one per page
  • Skip mobile testing — verify the modal renders properly on small screens

V Variants

  • Light (default) — white background, clean page integration
  • Dark — ink background, premium feel. Good as page closer

F Typical Page Flow

  • Primary content on /book or /schedule pages
  • Alternative to Full Form at the bottom of service pages
  • After: FAQ or Bold CTA Ending · Before: Footer
  • Ad landing pages: can appear mid-page after a short proof section
Live Preview
Book a Call

Pick a 30-minute slot

All times shown in your local timezone.

Booking calendar (Calendly / Cal.com / etc.)
Pass `embedUrl` prop