Form Tip Friday: Optimizing Your Form Buttons Video

Written by Lance Padgett on August 8, 2014

Posted in Form Optimization

We don’t want you to just create forms. We want you to build rockstar forms. There are all sorts of details you can tweak on your form. But one crucial piece is often overlooked: the submit button. Have you ever thought about how the button your form can influence submission rates? Have you ever considered how to boost that final click?

In this short video, we’ll reveal tips and tricks to make sure this powerful button is optimized to get all the clicks. Find out what button copy gets the most conversions. Learn about colors, sizing, font, and style. Check out this video to take your submit button to the next level.

Video Transcript

Optimizing your form button might seem pointless, but it’s the final touch between your user and the form submission. So here are seven tips to help your buttons perform the best they can.

Number one. Make your text specific. One thing we learned from our 2015 conversion report was that more specific button text showed a correlation with higher conversion rates. Get away from using generic words like “send” or “submit.” And instead, try using text that’s form specific, such as “send application” or “register now.”

Number two. Use a good button width. Our rule of thumb is to make your button about ⅓ the width of your form. This gives the bottom of your form a nice visual balance and follows the rule of thirds for composition. If you’ve built your form to be short and narrow, then you can break this rule and use a wide button that matches the width of your fields.

Number three. Go with all caps. To maintain visual balance inside the button, use all caps for your button text. This creates balance from left to right, and ensures even letter height by eliminating ascenders and descenders in your text.

Number four. Make it pop. Use a good contrasting button color that matches your brand. Replicate your brand color if you can. But for everyone’s sake, avoid bright neon colors or using a text color other than white. Occasionally a lighter version of your background color can look good as a text color, but just be careful. Remember, the legibility of your button is the main goal here.

Number five. Use subtle movement. A bit of movement or color change on hover, gives the indication this is a button I can click. Avoid elaborate button transformations, as they’ll only distract users from the goal of clicking. We suggest subtle color changes or very slight movements.

Number six. Don’t use an image. Try to avoid using images as button backgrounds. We only see this occasionally, but in general, this is not a best practice for the web. It also creates multiple steps to update button CSS and makes hover states more difficult. Virtually any effect you want to accomplish can be done with today’s CSS.

Number seven. Don’t forget about mobile users. We’ve all experienced how difficult it can be to select something on a mobile device. With CSS, you can change your button based on the screen size. This will let you expand a button to full width on mobile devices to make clicking even easier the users.

Not that you have these tips, go optimize – so that everyone wants to push your buttons.