Optimizing Your Form Buttons

Follow these 7 tips toward better form submit buttons.


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 2014 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 1/3 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.

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

comments powered by Disqus

Share this video

About This Video

2 min 38 sec

We dive into 7 tips for making better submit buttons on your html forms. We've included general best practices, techniques to avoid, and a bad joke to close. We've also included some buttons below that you can use on your Formstack themes.

Related Content