If you’ve been following my recent posts exposing the results I’ve observed from a few of my submit button testing rounds, you’re sure to love this final post in the series.

I’m going to bring all of the elements together and show you the submit button that smashed my initial control. (And the exact HTML and CSS code for doing it yourself!)

To recap the other post in this series…

Give Them Another Reason to Click!
(Providing “secondary link feedback”, such as a color change, can help users know that your link or button is “clickable”.)

You need to give your visitors the finger!
(Make sure your buttons provide “primary link feedback” and change the cursor arrow into a pointing finger.)

Size Does Matter!
(Bigger buttons often produce bigger response rates.)

Well today we are going to put all of these pieces together to create what I like to call “The ULTIMATE Submit Button”!

Here is what I tested…

The Red Border Trick

I first noticed a border around a submit button about 4 years ago when I saw this on Google’s Adsense Log-in page:

Since that time I’ve tested several different variations and colors of borders around submit buttons and in most cases a red border converts best. (Although there are a few niches where I’ve found green or blue pulling slightly better.)

The Red to Green Trick

Following my principle of providing “secondary link feedback”. I decided to test a color change when the mouse hovers over the button.

Because in most western societies, we are trained from a young age that “red means stop” and “green means go”, using green for my secondary feedback was a logical choice. (I’ve tested several other colors as well, but green usually wins by a wide margin.)

Here are the results from the final submit button test round…

Red Border: 38.0% Opt-in rate.

Red Border, Green Roll Over: 41.6% Opt-in rate.

So…

Starting with a “standard” submit button, and simply by continually testing new ways to draw attention and “get the click”, we were able to move from a “control” opt-in rate of 28.4% to a 41.6% opt-in rate.

That represents a 46.5% improvement in response, by simply testing a small handful of the 18+ submit button test variables in my arsenal.

Even after 6,000+ tests, it never ceases to amaze and surprise me, how seemingly small changes can produce such huge impacts on conversion rates.

Now it’s time for you to stop reading… and START TESTING!

Oh… wait… I guess I did promise to show you the code for this trick, didn’t I?

Okay… Here it is:

CSS Code to go in your style sheets:

.submit {
  border: 1px solid #000000;
  background-color: #FFFFFF;
  padding: 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  cursor: default;
 
}
#submitpad {
  padding: 5px;
  background-color: #ff0000;
  margin: 0px;
  border-width: 3px;
  border-color: #ff0000;
  border-spacing: 0;
}

HTML code for your submit button area:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap id="submitpad"
onMouseDown="this.style.backgroundColor='#009900'"
onMouseOver="this.style.backgroundColor='#009900'"
onMouseOut="this.style.backgroundColor='#ff0000'">
<span style="cursor:pointer;">
<input name="submit" type='submit' style="cursor:pointer; font-size: 16px;" value='Give Me My FREE Report Now! &gt;&gt;'/></span>
</td>
</tr>
</table>

There you have it! Everything you need to go out and test this trick on your own site.

Just remember, every niche and target audience responds a little bit different to each of these elements, so test each of these variables on your own sites and with your own traffic.

If a red boarder doesn’t do the trick, test green or blue.

If a big button helps a tiny bit, try an even bigger button. (Or better yet a FRIGGIN’ HUGE BUTTON!)

Have fun with this stuff…

Just keep testing!

Eric Graham,
“The Conversion Doctor”

P.S. ““ Want some help figuring out what (or how) to test on YOUR site? Then you might want to checkout my Conversion Booster Video Website Evaluation Service.

P.P.S. ““ UPDATE: I’ll be darn! Have a peek at what my good buddy Michel Fortin is testing right now on his Copy Doctor site…

His button was already BIG. But the primary (finger) and secondary (green) feedback looks new to me!

That right there is the critical difference between those who make millions online and those who struggle to survive… Quick, Decisive and MASSIVE action!

Like I said… Don’t just read this stuff. TEST IT!

Popularity: 20% [?]

Related Posts:

The Conversion Doctor’s Blog Is “Not Helpful”?

Submit Button Usability Split Test Results: Size DOES Matter!

WHAT!? Michel Fortin Just Called Me A FANATIC! (And he says you should give your visitors “The Finger”…)

What in the Heck is “Secondary Link Feedback”?! (And how can it help you sell more?)

The Headline Testing Secrets Revealed Webinar Reply is LIVE!

Free Webinar Recording Replay (For a few days only!)

The SECOND Winner of The Ask Michel Fortin Your Question Contest is”…

Help The Children and Grow a $10k per Month Income at the Same Time!

Fortin on Headlines…

Can Listening To One 52 Minute Interview Boost Your Conversion Rates?

This entry was posted on Thursday, March 8th, 2007 at 4:41 am and is filed under Affiliate Conversion, Conversion Rate Improvement, Copywriting, Email Conversion, Landing Page Conversion, Marketing, Multivariate Testing, Online Marketing, Pay Per Click Conversion, Split Testing, Success and Mindset, Testing and Tracking, Usability Testing, Web Analytics, Web Usability, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.
Print This Article | Email This Article