Blog

Customize Your Form Submit Button with CSS

Blog

Customize Your Form Submit Button with CSS

Blog

Customize Your Form Submit Button with CSS

Blog

Customize Your Form Submit Button with CSS

Blog

Customize Your Form Submit Button with CSS

Download PDFDownload PDF
Blog

Customize Your Form Submit Button with CSS

Noah Coffey
/
June 3, 2010
Blog

Customize Your Form Submit Button with CSS

MIN
/
June 3, 2010
About the Episode
Episode Highlights
Meet our Guest
Episode Transcript

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.

optimizing your form buttons
Blog

Customize Your Form Submit Button with CSS

Blog

Customize Your Form Submit Button with CSS

Get the Report

Great, thank ya!

You can now access the content.
Oops! Something went wrong while submitting the form.
Blog

Customize Your Form Submit Button with CSS

Panelists
No items found.
Introduction
Introduction

Great, thank ya!

You can now access the content.
Download NowDownload Now
Oops! Something went wrong while submitting the form.

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.

optimizing your form buttons
Panelists
No items found.
Infographic

Customize Your Form Submit Button with CSS

Customize your form submit button css with these great tips! Discover quick and easy text and graphic options for your Formstack form submit buttons.
Download InfographicDownload Infographic

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.

optimizing your form buttons

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.

optimizing your form buttons

Collecting payments with online forms is easy, but first, you have to choose the right payment gateway. Browse the providers in our gateway credit card processing comparison chart to find the best option for your business. Then sign up for Formstack Forms, customize your payment forms, and start collecting profits in minutes.

Online Payment Gateway Comparison Chart

NOTE: These amounts reflect the monthly subscription for the payment provider. Formstack does not charge a fee to integrate with any of our payment partners.

FEATURES
Authorize.Net
Bambora
Chargify
First Data
PayPal
PayPal Pro
PayPal Payflow
Stripe
WePay
ProPay
Monthly Fees
$25
$25
$149+
Contact First Data
$0
$25
$0-$25
$0
$0
$4
Transaction Fees
$2.9% + 30¢
$2.9% + 30¢
N/A
Contact First Data
$2.9% + 30¢
$2.9% + 30¢
10¢
$2.9% + 30¢
$2.9% + 30¢
$2.6% + 30¢
Countries
5
8
Based on payment gateway
50+
203
3
4
25
USA
USA
Currencies
11
2
23
140
25
23
25
135+
1
1
Card Types
6
13
Based on payment gateway
5
9
9
5
6
4
4
Limits
None
None
Based on payment gateway
None
$10,000
None
None
None
None
$500 per transaction
Form Payments
Recurring Billing
Mobile Payments
PSD2 Compliant

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.

optimizing your form buttons

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.

optimizing your form buttons

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.

optimizing your form buttons

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.

optimizing your form buttons

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.

optimizing your form buttons
Noah Coffey
Noah is a former Formstack UX developer with a bachelor's degree in media arts and science from Indiana University's School of Informatics and Computing.
More Articles
Meet The Host
CEO of
Connect
Chris is on a mission to turn people into great leaders. He's passionate about helping problem solvers see more value in the work they do every day.