Post last updated on February 9, 2016.
One common support request we see here at Formstack involves customers needing help customizing the look of their forms using CSS. Specifically, we often get questions about how to make the form submit button at the bottom of forms look different or better conform to a website's color scheme. Today, I thought I would go over a little light CSS that you can use to jazz up your submit buttons. (Some of the CSS selectors I'll use are specific to Formstack, but the CSS code can be reused for any HTML form.)In order to add custom CSS to your form, you will need to either add this CSS to a form theme inside Formstack or add it directly to your website (if you are embedding your form on your website).Here are a couple examples of ways you can customize your form submit button CSS:
2. Graphic Buttons
Another popular method of styling submit buttons is to use a graphic instead of changing individual button styles. If you are able to create a button graphic and host it on your website, you can use CSS rules to use the graphic as your button instead of the default button. Take a look at the submit button CSS below..fsSubmitButton
{
background-image: url(signup.png);
background-repeat: no-repeat;
background-color: transparent;
height: 66px;
width: 182px;
border: none;
text-indent: -999em;
}
- The "url()" part of the rule will contain the link to your hosted button image.
- The height and width rules will change depending on how large you make your button image.
- The background-color and border rules are set to turn off the default button style so only your button image is visible.
- The text-indent line pushes the default button text off the screen so your button image can be seen clearly. This method allows screen readers to still find your button text.
The above CSS rules will make your submit button look like this:
As you can see, we are only scratching the surface of the many possible ways you can style your submit buttons. Sometimes the best method is to play around with different styles and values until you get the look you want.
More CSS Examples
Want to see more submit button styling examples? Here are two additional CSS examples to give you a great starting point for your new online form:
Improve Your Form Submit Buttons
Does all this CSS have your head spinning? If you're a Formstack user, there's good news: You can customize your submit button quickly and easily right in the form builder! Check out our Support doc on How to Modify the Submit Button for detailed instructions.And to learn all about form button optimization, watch our video with seven steps to improve your submit buttons.
