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 a Partner Consulting program where you can team up with third party Certified Formstack experts to bring your custom projects to life. For those who want to customize their Forms but do not have the time or internal resources to get these projects completed. For more information on pricing and to 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 image.
Note: If you enter custom HTML for the HTML Header, any changes made under the CSS tab will be disregarded.
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.
Note: If you are migrating, or have migrated your forms to our newest form version (V4), the new form version utilizes variable class names (ex. jnnwJH or hCMMok) and utility class names (ex. fsSubmit or fsPage). The utility classes will never change but the variable classes may change with large form updates. All of the examples in this document use utility classes and we highly recommend only using utility classes as well. “If there is an item you want to target that doesn’t have a utility class, please reach out! We can add additional classes.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fsCallout |
|
|
.fsSection | |
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
How-to...
...change the label color
.fsLabel { color: #aabbcc; }
...change the text color on the text fields
.fsBody input[type="text"] {
color: red;
}
...change the text color on the text areas
.fsBody textarea {
- color: red; }
...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
.fsBody form {background-color: red; }
...change the color of the placeholder text
.fsForm ::-webkit-input-placeholder{ color: #097AB6; }
.fsForm ::-moz-placeholder { color: #097AB6; }
...set radio and checkbox options to bold
fieldset label {font-weight: 700;}
...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 margin from top of submit button
.fsSubmit { margin-top: 0; }
...reduce space at top and bottom of the form
.fsForm .fsSectionHeading { line-height: 5px; }
.fsPagination { margin-top: 0; }
...change the font size of options in a select list
.fsForm select { font-size: 11px; }
...remove the calendar icon from a date/time field
fsDatePickerAdornment {
display: none;
}
...remove the submit button from a form
.fsSubmit {
display: none;
}
...hide the submit button on a form
.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 button {
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
.fsForm input[type="text"], .fsForm textarea { font-size: 10px; }
...change font type of the the text the user inputs when they fill out a field
.fsForm input[type="text"], .fsForm textarea { font-family: "Times New Roman, serif"; }
...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; }
...changes the color of the field focus outline
.fsForm :focus {outline-color: #75BFE2;}
...changes the background color of the "Thank You" submission message without changing the color of your form section headers
.fsBody .fsForm .fsTable .fsSectionHeader { background-color: blue; }
...Use your own image in place of the checkmark on “Thank You” submission 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 { resize: none; }
...change the font size of vertically aligned checkbox/radio button options
.fsLabelVertical fieldset label { font-size: 20px; }
...change the font size of horizontally aligned checkbox/radio button options
.fsLabelHorizontal fieldset label { font-size: 20px; }
...To left align the table's label
.fsTable th{
text-align: left;
}