«  
  »

The ULTIMATE Submit Button REVEALED! Putting all the Pieces Together…

Written by | Print This Post Print This Post

puzzle.jpgIf 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

red-bord002.gif

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

goog-bord.jpg

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

ulti-sub.gif

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-bord002.gif

Red Border, Green Roll Over: 41.6% Opt-in rate.
ulti-sub.gif
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…

mf-ulti-sub.gif
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!

About the Author

Eric Graham is a serial entrepreneur, author, speaker, copywriter and consultant. Enter your name and email address below to get notified when new response boosting tips, tested conversion strategies, updates, articles and videos are posted.

You'll also get immediate access to a powerful 90 minute Conversion Boosting video as a free gift for signing up (and a lot more!)

And while you're here, go ahead and follow Eric on Twitter!

Claim Your FREE Conversion
Boosting Video!

Fill out the form below and you'll immediately receive (via email) full instructions on how to watch this powerful recording!

Enter Your First Name:
Enter Your Primary Email Address:
I respect your privacy. I'll NEVER sell,
rent or share your email address.
That's more than a policy, it's my personal guarantee!
0

Related posts:

  1. Submit Button Usability Split Test Results: Size DOES Matter!
  2. What in the Heck is “Secondary Link Feedback”?! (And how can it help you sell more?)
  3. The Conversion Doctor’s Blog Is “Not Helpful”?
  4. Increase Website Conversion Rates With These 29 Posts
  5. Private Email Based Coaching: Only 3 Spots Left!

Category: 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
Email This Post Email This Post | Print This Post Print This Post

41 comments to The ULTIMATE Submit Button REVEALED! Putting all the Pieces Together…

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>