A call to action (CTA) is the next step a page offers: request a quotation, call, start a chat, or open the page that continues the task. It is a designed control with a label, a rank, and a destination. It is not a decoration that says “Learn more” toward nowhere.
How fields on a form behave is covered in form usability. This guide is about the actions that start that form, or skip it.
Primary, secondary, and dead ends
Give each page one primary CTA. It should use the strongest visual rank and a verb the visitor would say: “Request a quotation,” “Book a site visit,” “Call the JB office.” Place it where the decision happens: the first screen of a homepage, and again after proof.
A secondary CTA is allowed when the visitor is not ready. “See related work” or “Compare hosting plans” is a path, not a rival. It should look quieter: outline, text link, or smaller weight. Two solid buttons of the same colour are two primaries, which means you have none.
A dead end is a control that looks actionable and then fails: a button with no href, a “Submit” that sits in the footer of a page that never explained the offer, or a “Contact us” that opens a blank email with no subject. Remove it or finish it.
WhatsApp click-to-chat can be the primary on Malaysian service sites when a person answers during stated hours. It should not sit as a third equal button beside form and phone unless those three serve different jobs.
Labels that finish a sentence
The label is the interface. “Submit,” “Click here,” and “Learn more” describe the control, not the outcome. Write the outcome: “Get the 2026 price range,” “Talk to a Microsoft 365 consultant,” “Download the checklist.”
Keep one intent per label across the site. If the header says “Request a quote” and the hero says “Let’s talk” and the footer says “Get in touch,” visitors treat them as different tasks. Pick one phrase for the commercial action.
Visual hierarchy decides whether the button is seen. Contrast against the section behind it matters more than a new brand colour. A white ghost button on a pale photograph is not a CTA; it is a border.
Designing a CTA that can be used
- Name the one next step this page is for
- Write a verb-plus-noun label in the visitor’s words
- Give that action the strongest button style on the page
- Add at most one quieter alternative
- Follow the click to a form, number, or chat that is ready
Placement and repetition
Repeat the primary after new information, not after every paragraph. A long service page can show the action in the first screen, after the scope list, and at the end. Repeating it in a sticky bar is useful if the bar does not hide content or duplicate a header button of the same intent.
Do not hide the only action below a fold of unused awards. Do not attach it only to a floating widget that covers the form on a phone.
A practical example
A software page uses “Get started,” “Learn more,” and “Contact sales” in the same band, all filled buttons. None leads to a different destination; two open the same form. The revision keeps “Request a demonstration” as the primary, turns the second action into a text link to a case study, and deletes the third. The form heading repeats the same phrase so the click feels finished.
Key takeaways
- One primary CTA per page. A secondary path must look secondary.
- Labels name the outcome, not the control.
- Use the same commercial phrase in the header, hero, and form.
- A button that does not complete a task is a dead end.
FAQ
Should every page use the same primary CTA?
Use the same commercial intent on marketing pages. A careers page, a login, or a documentation article can have a different primary.
How many times can we repeat the button?
As often as the visitor meets a new reason to act. Three well-placed repeats beat a button under every heading.
Is a phone number a CTA?
Yes, if it is tappable and labelled as a call. A number set in small grey type in the footer is a fact, not an action.