Put your main call to action where a visitor has just learned enough to say yes, and keep it within reach the whole way down the page. For a simple offer, that means the top of the page. For a bigger decision, like a roof replacement or a custom website, it means a first button up top for people who are ready, then repeated buttons after the proof that earns the click. On a phone, it means the bottom third of the screen, where a thumb already rests.
There is no single magic coordinate. This guide covers where the buttons go, how to size and style them, and how to set up a service page so it turns visits into calls and bookings.
TL;DR
- Placement should follow intent. Simple offers work best above the fold. Complex or high-cost services need trust-building content before the ask.
- Use more than one CTA per page: one near the top, one after your proof, one at the end.
- On mobile, pin the primary action to the bottom of the screen and make it at least 44 by 44 CSS pixels.
- One primary button per screen. Secondary actions get a quieter style.
- Test the real task (a call, a booking, a form) on a real phone before you call the layout finished.
Table of Contents
- What call to action placement really means
- Above the fold: when it works and when it backfires
- Use several CTAs, each in a logical spot
- Mobile: the thumb zone and the sticky bar
- Button size, contrast and hierarchy
- Trust before the ask: timing for higher-stakes services
- Where CTAs go on common page types
- Where phone numbers fit in
- Our perspective
- Test before you trust any rule
- Want a site where every button is in the right place?
- FAQ
- Sources
What call to action placement really means
A call to action (CTA) is the button, link or line of text that asks a visitor to do one specific thing: call, book, request a quote, get a estimate. Placement is the combination of where it sits on the page, what comes right before it, and whether it stays visible as the visitor moves.
Most advice stops at "above the fold." That is a start, not a strategy. A Heatpoints guide on CTA placement makes the better point: the action belongs where its purpose is clear and the reader has enough information to decide. That is a question about the visitor's state of mind, not about pixels.
Above the fold: when it works and when it backfires
The fold is the part of the page visible without scrolling. Zoho's academy notes that studies suggest most users spend the bulk of their time in that first view, so a visible button there catches people who arrive ready to act. Think of a visitor who searches "emergency roof tarp near me" after a hailstorm. They do not need a pitch. They need a phone number and a button.
But the same first screen can hurt you when the offer is bigger. Smart Insights points out that the usual advice to put the primary CTA near the top is not automatically right for every landing page. Ask for a commitment before the visitor understands the value or trusts you, and it feels like a pushy salesperson at the door.
A workable rule:
| Situation | Where the first CTA goes | What comes before it |
|---|---|---|
| Urgent, low-friction (emergency repair, same-day booking) | Hero section, top of page | A clear headline and phone number |
| Simple offer (free quote, table reservation) | Hero section plus end of page | One line of value, a trust cue |
| Considered purchase (roof replacement, full website) | After the first proof block, repeated at the end | Reviews, specific services, price range or process |
| Long educational page | After a section that answers a real question | The answer itself |
The hero button is still useful on considered purchases. It is just not the only one, and it should not be the only chance a skeptical visitor gets.
Use several CTAs, each in a logical spot
Relying on one button usually leaves conversions on the table. Zoho's guidance suggests placing secondary CTAs after engaging content or at natural breakpoints, which catches people who scroll further because they need more information. The IEEE Technology Navigator says much the same: put the CTA in multiple places on longer pages.
Here is a layout that works for most local service pages:
- Hero: headline, one line of what you do and where, a primary button and a phone number.
- After the first proof block: reviews, a project photo set, licenses or insurance. Then a button that repeats the same action.
- After the service detail: what is included, how it works, what it costs or how pricing is set. Then the button again, perhaps with a small reassurance such as "No obligation."
- Footer area: a last full-width prompt with phone, form and hours.
- Navigation bar: a persistent "Call" or "Get a quote" button, styled as the primary action.
Keep the wording consistent. If the hero says "Get a free roof inspection," do not switch to "Contact us" halfway down. Same action, same promise. For examples of wording, see our collection of call to action examples that actually convert.
Mobile: the thumb zone and the sticky bar
For most local businesses, the majority of visitors arrive on a phone, so mobile placement is the main design, not an afterthought. Our piece on why mobile optimization matters for local businesses covers the wider case.
The BTNG mobile guide describes the bottom third of the screen as the easy-to-reach zone, the natural resting place for a thumb, and says to put the primary action there. The same article cites that about half of smartphone users operate their phone with one hand. A button at the top corner of a tall screen is a stretch.
A sticky bar that stays pinned to the bottom of the viewport solves this. The same source reports conversion lifts between 5% and 23.6% in A/B tests of sticky bottom CTAs against static buttons. Those figures come from checkout flows, so treat them as a sign of what is possible, not a promise for your site. Test it on yours.
Practical rules for a sticky mobile bar:
- Keep it slim, so it does not eat the screen. One or two actions at most.
- For a service business, "Call now" and "Get a quote" are the usual pair. Make the call button a real tel: link. We cover the setup in our guide to click-to-call buttons and tracking.
- Do not cover form fields, cookie banners or the content the visitor is reading. Check it with the keyboard open.
- Hide it where it is redundant, for example when the on-page form is already on screen.
UX Movement makes a related point about placing buttons where users expect to find them, since faster task completion makes for a better experience.
Button size, contrast and hierarchy
Placement fails if the button is hard to hit or hard to see.
Size. WCAG 2.5.5 (Enhanced) asks for pointer targets of at least 44 by 44 CSS pixels, with some exceptions. Treat that as your floor for primary CTAs on mobile, and leave breathing room around each one so a thumb does not hit the neighbor.
Contrast. The button should stand out sharply from the background. IBM's Carbon design system advises a primary style for the main goal and a secondary style for alternatives, so the primary button dominates and nobody guesses what to press. In practice: one filled, high-contrast button per screen, and outlined or text-link styling for "Learn more" or "See pricing."
Spacing. White space around a button works like a spotlight. Crowd it with badges and sliders and it disappears.
Label. Say what happens next: "Get my storm inspection," "Book a table for Friday," "Request a quote." "Submit" tells nobody anything.
Trust before the ask: timing for higher-stakes services
A homeowner choosing a roofer is making a five-figure decision. A business owner picking a web designer is about to hand over money and trust. For these visitors, the order of the page matters more than the position of the button.
Heatpoints observes that for straightforward offers, the top of the page works, while more involved decisions benefit from specifics first. For a roofer's page, that could look like this:
- Hero: "Free roof inspection in [city]" with a call button, for the visitor already sure.
- Right after: license and insurance details, review count and a few real project photos.
- Then: what the inspection covers and how the process runs.
- Then: the same button, now backed by proof.
The question of when to introduce an action also shows up in other fields. A write-up on timing account sign-up prompts so visitors understand the offer first makes the same case from an ecommerce angle: let people see the value, then ask.
If you are mapping CTA locations across a service site, this overview on where CTAs belong on technology and service websites is a useful companion read.
Where CTAs go on common page types
Home page. One primary action in the hero, matching your top revenue goal. Secondary paths (services, areas) as quiet links. A repeat near the bottom.
Service pages. Hero CTA, a mid-page CTA after proof, a final CTA after the details. Each service page should push toward the same booking or quote path.
City and service area pages. Mention the city in the button's supporting text and repeat the phone number. Our guide to service area pages for local businesses shows how to structure them.
Contact page. The form is the CTA. Keep it short and put the phone number beside it, not below.
Blog posts. A CTA after the section that answers the reader's question, and one at the end. Skip pop-ups that fire the moment someone lands. Our note on live chat page intent prompts explains how to trigger prompts by page context instead.
Restaurant pages. Reservation or order button in the sticky header on mobile. Menu pages should keep the button visible while people scroll through dishes.
Portfolio pages (for freelancers). A "Start a project" button after the best case study, not only at the bottom. See our portfolio website layout guide.
Where phone numbers fit in
For local service businesses, a phone call is often the best conversion. Put the number in the header, in the hero, in the sticky mobile bar and in the footer, always tappable. We break down four spots in phone number placements that get local businesses more calls.
Our perspective
We build websites for Texas small businesses, and the most common CTA mistake we see is not a bad color. It is a page that asks too early or too weakly. A roofing page with a lone "Contact us" link in the footer loses the homeowner with water in the ceiling. A page that shoves a quote form in front of a cold visitor loses the one comparing three contractors.
So we design around two visitors. The first is ready now, so the call button is visible on the first screen and pinned on mobile. The second is deciding, so we put proof and plain scope ahead of the second and third buttons. Every page has one primary action, and every button says what happens next.
We also keep the layouts simple enough for a founder to review on their own phone, because that is where most of your customers will see it. If the button is hard to find with one thumb, we fix the layout, not the customer.
— Dylan
Test before you trust any rule
Every number in this guide is an average from someone else's site. Your audience may behave differently. A short testing routine:
- Walk the page on a phone. Can you reach the primary action with one thumb at every scroll depth?
- Complete the task. Call, book, submit the form. Note every moment of friction.
- Check tracking. Count clicks on each CTA separately (hero, mid-page, sticky bar, footer) so you know which placements earn their space.
- Change one thing at a time. Move or restyle one button, wait for enough visits, then compare.
- Review the whole page. If conversions are low across all placements, the problem is usually the offer, speed or trust, not button position. Our article on why your website isn't converting walks through the likely causes, and the website review checklist gives you a quick audit.
Want a site where every button is in the right place?
We are a founder-led studio, so you work directly with the person building your site, and you keep full ownership of your site and content. Pricing is published on our pricing page: the Starter Website is from $500, the Growth Website from $1,200 and the Custom Business Website from $2,500, all one-off, with a $250 project deposit. If your current site has CTAs buried in the wrong places, our website redesign service is the place to start, and our responsive website development page explains how we build for phones first.
FAQ
Does a CTA have to be above the fold?
No. Above the fold suits simple, urgent offers where visitors are ready to act. For considered purchases, a first CTA up top plus later ones after your proof usually serves both kinds of visitor better. Let the visitor's intent decide.
How many CTAs should one page have?
As many as the length of the page justifies, as long as they all point to the same primary action. A short landing page may need two. A long service page may need three or four, spaced after meaningful sections. Never place two competing primary buttons in the same view.
What is the best CTA placement on mobile?
The bottom third of the screen, where the thumb rests. A slim sticky bar with a call button and a quote button is a common approach for local service sites. Make each target at least 44 by 44 CSS pixels and test it with the keyboard open.
What makes a CTA button stand out?
Contrast with the background, generous space around it, and a clear hierarchy: one filled primary button, with secondary actions styled quietly. A specific label such as "Book a table" also beats a vague one like "Submit."
Sources
- Where should you place a call to action? (Heatpoints)
- Where is the 'best' place to put your CTA? (Smart Insights)
- Best Practices for CTA Placement and Design (Zoho Academy)
- Creating a Call-To-Action (IEEE Technology Navigator)
- Mobile Checkout Optimization: UX Fixes and Real Benchmarks (BTNG.studio)
- Optimal Placement for Mobile Call to Action Buttons (UX Movement)
- Understanding Success Criterion 2.5.5: Target Size (Enhanced) (W3C)
- Call to action pattern (IBM Carbon Design System)