Formstack

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.

 

Editing CSS with the Advanced CSS Editor


You can find the CSS editor by going to the form > Build > Theme and then choosing "Edit Theme" or (if you are using a Default Theme ) making a copy of the theme by clicking the ... in the top right hand corner of the Theme and then clicking "Make A Copy". Then you can Edit the Theme. 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 the CSS. 




If you are unsure of the class you should use to edit an option on the form you can click on "Show CSS Classes" in the code editor. Once you click on this you can hover over your form to view the different areas that can be edited with CSS. 

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 on 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.
.fsForm
the class of the <form>. Each form also has an unique ID

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

.fsSectionText
the descriptive text in a section header

.fsSupporting
the text used to help describe the field

.fsCallout
supporting text used as a callout box

.fsRow
a row in the table

.fsFieldRow
a row that contains form fields

.fsCell
the individual <td> in the form table

.fsSectonCell
the cell that holds the section header content

.fsSection
a class to denote a section field

.fsLabel
the label for a form field

.fsRequiredLabel
the label for a required form field

#fsFooterImage
the image at the bottom of the form

#fsHeaderImage
the image at the top of the form

.fsFieldFocused
a class applied to the containing <td> when a form field is focused on

.fsReadOnly
a field that is read-only

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


How-to...

 
...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; }
...center align form fields
.fsBody .fsPage { text-align: center; }
...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; }
...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; }
...center 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; }