Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Download PDFDownload PDF
Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Jessica Haas
/
March 15, 2017
Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

MIN
/
March 15, 2017
About the Episode
Episode Highlights
Meet our Guest

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Blog

Here to Help: Top CSS Hacks for Your Formstack Forms

Panelists
No items found.
Introduction

Great, thank ya!

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

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

Panelists
No items found.
Infographic

Here to Help: Top CSS Hacks for Your Formstack Forms

Online form hacks for control over your form customization. Find form CSS examples for description fields, submission buttons, thank you pages and more.
Download InfographicDownload Infographic

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

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

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

“Here to Help” is a support column written especially for Formstack’s awesome, loyal customers.Let’s face it: if the online forms on your site don’t have a branded and professional look, people will be less likely to fill them out. Luckily, Formstack’s Theme Editor was designed to help with most of your form customization needs—including countless options for colors, layouts, images, and fonts—without the hassle of CSS. But if you want to make more advanced edits to your forms, we also provide a handy CSS Editor.In this post, I’m going to break down all the essential information you need to know about using form CSS with Formstack, including my top three CSS hacks! Ready to dive in? Let’s get started.

Form CSS: The Basics

CSS (Cascading Style Sheets) is a code language that can be used to style online content like web pages and forms. With this code, you can tweak elements like fonts, colors, spacing, and layout. In the Formstack app, you can use the Advanced Code Editor to make CSS changes to your forms. First, open your form, select the Build tab, and click on Theme (at the bottom of the builder, in between Fields and History). From there, select "Edit Theme."Note: If you are using a Default Theme, be sure to make a copy of the theme before making any edits.When you scroll down in the Theme options, you will see the Advanced Code Editor. Once you are in the Advanced Code Editor, you can choose the CSS tab to edit your form CSS. After you have completed any edits to your form, be sure to scroll to the top of the theme editing section, and click “Save” to make the code changes stick!This is how my CSS will look inside the Advanced CSS Editor:

Note: To save your CSS changes and apply them to your current theme and form, select "Save and Activate." The changes will NOT reflect on your form without this step.Now that you know how to access the CSS Editor, here are three of my top hacks for CSS form customization!

Hack #1: Edit the Description Area Field

Using CSS form customization in the Description Area field lets you insert rich text (like images, formatted text, and links) into your forms. Here are a few ways you can use CSS to tweak these fields:Edit Line Height and SpacingModifying line height and spacing in the Description Area is one of the most common CSS questions that our Customer Support team gets. Use this code to make those changes:

.fsBody p { line-height: 15px}

Edit Tables in the Description AreaBy default, tables in the Description Area field have no borders:

You can add borders and modify column widths for tables in the Description Area by using the following code:

.fsBody table td {border-color: black;border-style: solid;border-width: 2px;width: 25%;}

Hack #2: Modify the Submit Button

The submit button is an important element on your form. If it doesn’t stand out, people won’t submit your forms!There are many different ways you can edit your form’s submit button using CSS. Here are a couple form CSS examples:Use a Custom Image for the Submit ButtonTo use a custom image as your submit button, paste the CSS shown below into the CSS Editor, and replace the background URL with the link to the image you'd like to use.

.fsSubmit input {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent !important;border:medium none !important;height: 100px !important;margin: 0 !important;padding: 0 !important;width: 300px !important;text-indent: -9999px !important;}

You may need to adjust the height (height: 100px;) and width (width: 300px;) to the dimensions of your image. Once you save these changes, the new submit button will show up on your form.Left Align the Submit ButtonLeft aligning your form’s submit button can also be accomplished through CSS. Just enter the following code in the CSS Editor:

.fsPagination {margin:25px 0 0 22px;text-align:left;}

Remove the Submit ButtonOccasionally, our users request to remove the submit button from their site. These requests typically come from customers that have built some sort of form calculator using our service. To accomplish this, add the following code to the page where you embedded the form (or to a style template):

.fsSubmit input.fsSubmitButton {display:none;}

Alternatively, you can remove the URL from the custom submit button code in the CSS Editor.Here are a few other examples of submit buttons that use CSS (and if you want to use any of them on your forms, just copy the code from this page!)

Hack #3: Modify the Thank-You Page

Your thank-you page is another important element of the form submission experience. Here are a few ways you can customize this page with CSS!Change the Background Color of Your Thank-You MessageIf you want to change the background color of the thank-you message without changing the color of your form section headers, enter the following code into the CSS Editor on your form:

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: #7BC143; }

Replace the HEX code above with the color of your choice.Change or Delete the Checkmark IconTo use your own image in place of the checkmark on the thank-you page, enter the following code:

#fsSubmissionCheckmark {background: url(http://www.YOUR_IMAGE_LINK_HERE.png) no-repeat scroll 0 0 transparent;
border: medium none;height: 100px;margin: 0;padding: 0;width: 300px;}

Again, replace the background URL in the code above with the link to the image you'd like to use in place of the checkmark.And to remove the checkmark all together, use this code:

#fsSubmissionCheckmark { display: none; }

Additional Information

  • If you’re new to CSS form customization with Formstack, our Custom Form Themes and CSS Guide is filled with form CSS examples, and will be a great resource to help you get started. Once you’re comfortable with form CSS, you can modify and save a theme, and apply those changes to multiple forms on your site.
  • Keep in mind that using custom CSS in the Advanced Code Editor will override any settings you make in the Quick and Advanced Styles sections.
  • You can turn on “No CSS” for your Javascript embed code to take the CSS styling from your site.

Want to learn more about Formstack’s custom theme options? Click below to check out other ways to beautify forms without CSS.

Jessica Haas
Jessica is the Director of CX & Professional Services at Formstack and has been with the company since 2012. Most of the time, her brain is consumed by thoughts of service design, customer happiness, and creative solutions. She wants to make a difference for people and hopes to someday become a master of zen.
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.