Custom Form Themes and CSS

Although Formstack's Themes are a powerful way to customize your forms, sometimes you want to do something with your form that's a little off the map. That's where the Custom CSS rules come in.  You can easily add custom CSS styles to your form, no matter whether it's a Formstack-hosted form or embedded on your own site.

Did you know...Formstack offers in-house Professional Services & Packaged Solutions for those who want to customize their Forms but do not have the time or internal resources to get these projects completed.  To see more on these offerings and book your consultation, please click here! 

Editing CSS with the Advanced CSS Editor

You can find the CSS editor by going into the Form Builder, clicking the 'Style' button at the top left, hovering over the Theme in question to reveal the 'Edit' option, then choosing the 'Advanced Code Editor'. If the 'Edit' button doesn't appear and you instead see 'Make a Copy', this indicates you're attempt to edit a stock Theme and will need to first make a copy to make it a custom Theme.



Once you are in the Advanced Code Editor you can choose the CSS tab to edit the CSS.

If you are unsure of the class you should use to edit an option on the form you can click on "Open CSS Helper" in the code editor. Once you click on this a column will appear to the right of the builder that will list all of your form fields and clicking them will load the CSS needed for that field into the editor automatically.

Click on an area to edit and the class will automatically appear in the black editing area. All you need to do now is add the property, and the edits will automatically change the form to the right. I'm changing the background color of the form body in the above gif.


CSS Classes & IDs

The following is a basic guide of the available CSS classes and IDs you can use in your theme rules to style your form the way you want it. At the bottom of the list are some concrete examples to get you started.


the class of the <form>. Each form also has a unique ID



the <h1> element that holds the heading for a section



the descriptive text in a section header



the text used to help describe the field



supporting text used as a callout box



a row in the table



a row that contains form fields



the individual <td> in the form table



the cell that holds the section header content



a class to denote a section field



the label for a form field



the label for a required form field



the image at the bottom of the form



the image at the top of the form



a class applied to the field cell when a form field is focused on



a field that is read-only



a class applied to the containing <td> when a form field has invalid input



...change the label color

.fsLabel { color: #aabbcc; }

...change the text color on the text fields

.fsRowBody input[type=text] { color: #aabbcc; }

...change the text color on the text areas

.fsRowBody textarea { color: #aabbcc; } align form fields

.fsBody .fsPage { text-align: center; } align matrix column labels

.fsBody .fsForm .fsMatrix th, .fsBody .fsForm .fsMatrixLabel { text-align: center; }

..change the text color of the supporting text

.fsSupporting { color: #aabbcc; }

...change the background color of the form

.fsRowBody { background-color: #aabbcc; }

...change the color of the placeholder text

.fsForm ::-webkit-input-placeholder{ color: #097AB6; }

.fsForm ::-moz-placeholder { color: #097AB6; }

...change the background color of the form

.fsRowBody { background-color: #aabbcc; }

...change the spacing between form rows

.fsFieldRow  { padding-bottom: 18px; }

...set the Checkbox options to bold

labels.fsOptionLabel{font-weight: 700: }

...remove the section header highlight

.fsSectionRow .fsRowBody { background-image: none; }

...remove section borders (remove form border)

.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }

...change font style of section header

.fsBody .fsForm .fsSectionHeading { font-family: "Times New Roman"; }

...set the form's width

@media (min-width: 800px) {

.fsBody .fsForm { width: 800px; }


...remove top margin

body#fsLocal { margin-top: 0; }

...remove focus from fields (yellow highlighting)

.fsFieldFocused { background-color: transparent; }

(Change the color of the highlighting by replacing "transparent" with the name of a specific CSS HTML Color)


...remove margin from top of submit button

.fsPagination { margin-top: 0; }

...remove nearly all margins / padding

.fsForm { margin: 0 auto; padding: 0; }

.fsForm .fsCell { padding: 2px; }

.fsSectionRow + .fsFieldRow .fsCell { padding-top: 0; }

.fsFieldRow { padding-bottom: 0px; }

.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }

.fsSectionRow .fsRowBody { padding: 0; }

...reduce space at top and bottom of the form

.fsForm .fsSectionHeading { line-height: 5px; }

.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }

.fsSpacerRow { display: none; }

.fsPagination { margin-top: 0; }

...change the font size of options in a select list

.fsForm select { font-size: 11px; }

...remove the calendar from a date/time field

.fsBody .ui-datepicker-trigger { display: none; }

...change the "Apply Discount" link from the Discount Code Plugin

a:link {

color: #FF0000;

font-size: 20px;

font-weight: bold;

text-decoration: underline;}

* In the example above, the link was changed to Font color Red, enlarged to 20 Pixels and styled to Bold.


...remove the submit button from a form

.fsSubmit input.fsSubmitButton { display: none; }

...remove the previous button from a multi-page form

.fsPreviousButton { display: none !important; }

...use your own image for the submit button on a form

.fsSubmit input {

  background: url(http://www.YOUR_URL_HERE.png) no-repeat scroll 0 0 transparent;

  border: medium none;

  height: 100px;

  margin: 0;

  padding: 0;

  width: 300px;


NOTE: When you replace the Submit button with your own image, you need to go to Build > Form Extras > Submit Button and erase the text in the 'Submit' button by deleting all the text shown in the button and then entering a single space in the text field. You will also need to remove all other Submit button settings, as these will override with the added CSS. Check out this link to see the step-by-step process.


...change the color of the required asterisk

.fsRequiredMarker { color: #ffffff; }

...hide the required asterisk

.fsRequiredMarker { display: none; }

...change font size of the the text the user inputs when they fill out a field

.fsFieldRow input[type="text"], .fsForm textarea { font-size: 10px; }

...change font type of the the text the user inputs when they fill out a field

.fsFieldRow input[type="text"], .fsForm textarea { font-family: "Times New Roman, serif"; }

...removing the bolding from the text the user inputs when they fill out a field

.fsFieldRow input[type="text"], .fsForm textarea { font-weight: normal; }

...make the form background transparent

.fsBody .fsForm { background-color: transparent; }

...removes gray background from section headings

.fsBody .fsForm .fsSectionHeader { background-color: transparent; }

...rounds the corners on the form

.fsBody .fsForm { border-radius: 5px; }

...remove form border

.fsBody .fsForm { border: none !important; }

.fsboxshadow .fsBody .fsForm { box-shadow: none; }

...remove grey footer

.fsForm .fsSubmit { background-color: transparent !important; }

...remove box shadow around form

.fsboxshadow .fsBody .fsForm {box-shadow:none !important;}

...changes the color of the field focus outline

.fsForm :focus {outline-color: #75BFE2;}

...removes the green checkmark from the default "Thank You" message submit action

#fsSubmissionCheckmark { display: none; }

...changes the background color of the "Thank You" message without changing the color of your form section headers

.fsBody .fsForm .fsTable .fsSectionHeader { background-color: blue; } align the text within tables

.fsBody table { text-align: center; }

...add borders to tables

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

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

...Use your own image in place of the green checkmark on Thank You page

#fsSubmissionCheckmark {

background: url(http://"YOUR IMAGE LINK HERE") no-repeat scroll 0 0 transparent;

border: medium none;

height: 100px;

margin: 0;

padding: 0;

width: 300px;


..stop the Long Answer field from resizing

.fsBody .fsForm textarea.fsField { resize: none; }

Was this article helpful?
17 out of 22 found this helpful