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:
1. Text Buttons
Our first example changes the basic colors and spacing of the default form submit button. Take a look at the submit button CSS below..fsSubmitButton
{
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: #c4f1fe;
font-weight: bold;
color: #2d525d;
}
- The CSS class of .fsSubmitButton is the class of the submit button itself.
- Occasionally, you'll need to add the "!important" tag to some styles if they don't appear to work. This tag forces the web browser to use that style over all others. This can be an issue if there are other CSS rules already set for your submit button.
Of course, you can modify this CSS to use colors specific to your website. The above CSS rules will make your button look like this:Submit my Form
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:
Button Style 1
Submit my Form.fsSubmitButton
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
Button Style 2
Submit my Form.fsSubmitButton
{
padding: 10px 20px 11px !important;
font-size: 21px !important;
background-color: #F36C8C;
font-weight: bold;
text-shadow: 1px 1px #F36C8C;
color: #ffffff;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border: 1px solid #F36C8C;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
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.
