3 Steps to More Clickable Call-to-Action Buttons [Quick Guide]

Written by Sarah Quezada on May 11, 2015

Posted in Form Optimization

If you want to increase sales, you have to capture more conversions.

If you want to capture more conversions, you need to get more clicks.

If you want to get more clicks, you’ll need compelling calls to action. And the most important CTA of all is the one housed within your webpage’s form “submit” button. Here’s how this one crucial element is described in our 2015 Form Conversion Report:

Ah, the submit button. It’s your last opportunity to capture a click. Which means the words contained within that one small space are arguably the most important for every online form.

It’s amazing how a single button can make or break a landing page.

Here at Formstack, we’ve created, studied, and analyzed hundreds of thousands of call-to-action buttons. As a result, we’ve discovered a three-step process anyone can use to make them more clickable:

Step 1: Create Compelling Content
Apply three S’s to your button copy: Be short, simple, and specific.

  • Keep it short to ensure your button will stand out to the people skimming your webpage. The top-ten converting buttons in this year’s Form Conversion Report all contained two words or less.
  • Use simple words so people can easily understand what’s going to happen after they click. This is definitely not the place for jargon.
  • Be specific to inspire action. For example: Buttons that say “Submit Survey” average a conversion rate of 44%, compared to just 10% for buttons that simply say “Submit.”

Step 2: Use Contrasting Colors
Your button should be distinct from all the other content on your webpage.

  • Start with a tasteful background color to make your button stand out. You can choose a color that matches your brand or use color theory to add some emotional appeal.
  • Introduce movement by adding a subtle color change when someone hovers a mouse pointer over the button. This will indicate to your users that your button is indeed clickable.
  • Use white text to highlight your compelling copy even more. (And by all means, steer clear of flashy neons!)

Step 3: Add Some Style
Make sure your call-to-action button actually looks like a button.

  • Make it big—but not too big. For visual balance, a good rule of thumb is to make your button one-third the width of your web form.
  • Keep the border smooth and make sure there’s plenty of surrounding white space. Virtual buttons shouldn’t look all that different from their physical counterparts.
  • Set your button to change size on mobile devices. Make sure your button automatically adjusts to different screen sizes so it’s easy to click on smartphones and tablets.

Want to learn more?
You can read more about submit buttons, and other form best practices in our 2015 Form Conversion Report.

P.S. If you haven’t used Formstack, this is a great time to sign up for a free trial below. Our form builder makes it easy to check off each of the steps above without having to learn a single line of code.