Style Forms With CSS

TABLE OF CONTENTS

• CSS - Submit Action Edits
• CSS- Editing the Thank You Page
• CSS - Resources draft
• CSS - Editing the Width of One Field
• CSS - Mobile Version
• CSS - Form formatting
• CSS - Header-Footer Edits
• Custom Form Themes and CSS
• CSS - Field Edits
• Quick Start- Customize Your Forms Theme

CSS - Submit Action Edits

The submit area of the form can be quickly customized by copying and pasting the CSS below to the Theme that is applied to the form. The submit area can contain a Next, Previous, and Submit button.

Pease note: This article takes you through how to configure CSS on an older version of our Form Builder(V2&V3). If you've recently updated your Form Builder version to V4, we'd recommend checking out this article instead. For more information on this update and why you should migrate your forms to the newest version, check out this article. 

...remove grey footer behind submit button (version 2 forms)

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

...remove margin from top of submit button (next/previous buttons also)

.fsForm .fsSubmit  {
   margin-top:0;
}

...hide the submit button on a form

.fsSubmit input.fsSubmitButton  {
   display:none;
}

...hide the submit button on a multi-page form

.fsSubmit input.fsSubmitButton  {
   display:none !important;
}

...set a height/width for submit button and round the edges

.fsSubmit input.fsSubmitButton  {
   height:  50px;
   width:  100px;
   border-radius:  5px !important;
   -moz-border-radius: 5px !important;
   -webkit-border-radius: 5px !important;
}

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

.fsPreviousButton  {
   display: none;
}

.fsPagination .fsNextButton  {
 float: none;
 height: 55px;
 width: 150px;
}

...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.

Next and Previous Buttons on Mobile Forms 

The Next and Previous buttons have alternative CSS when you view the page on mobile forms. You can override these images with additional CSS.

...to change the look of the mobile Next and Previous buttons

@media only screen and (max-width:699px){
    .fsPagination .fsNextButton, .fsPagination .fsPreviousButton, .fsSubmitButton {
      background: #47DA47 !important;text-indent:0;}
}
}

CSS- Editing the Thank You Page

If you use the default Thank You Page with Formstack the appearance settings are the same as the Section settings. This means the background color, text color, text size, spacing and font family are all the same as the Section settings for the form. However, if this is not ideal, you can use CSS to edit just the Thank You Page to avoid this.

First, you will want to figure out what you want to edit, the Default Thank You Page is shown below and each section that is normally edited is labeled with a number.

These are the four main options you can edit:

1. The Submission Checkmark

??(#fsSubmissionCheckmark)

The most common edits for this are to remove it or change the color.

Remove the checkmark:

#fsSubmissionCheckmark{

   display: none;

?}

Change the color:

Unfortunately, the checkmark is an image so you can't change the color but you can replace the checkmark with another image. All you need is the URL of the image you want to replace the checkmark with and you can then enter it into the CSS below where it says, "ENTER URL HERE"

#fsSubmissionCheckmark {

          background-image: url("ENTER URL HERE");

}

Once you have the image replaced, you may need to edit the size of the image, check out the CSS below for how to do this:  

?#fsSubmissionCheckmark {

   margin: 10px 0; < ---- Adjusts the spacing around the image

   padding-top: 200px; <----- If your image is taller than ours, you can use this to make the space where the image was entered larger.

   background-image: url("ENTER URL HERE");

   background-size: 417px; <--- You can use CSS with background-size to adjust the size of the image.

}

If you don't want to adjust the image with CSS, you can also use the "Custom Message" option and add an image with the editor there. This does not require any Custom CSS.  

More information on making a Custom Message can be found here!

2. Thank you page heading text

??(.fsBody .fsForm .fsTable .fsSectionHeading)

This is the "Thank You" text on the Default Message. The most common requests to change here are color and alignment.

To change the color of the text to blue*:

.fsBody .fsForm .fsTable .fsSectionHeading{

   color: blue;

}

To change the alignment of the text:

.fsBody .fsForm .fsTable .fsSectionHeading{

   text-align: left;

}

3. Thank you page paragraph text

??(.fsBody .fsForm .fsTable .fsSectionText)

This is the text that says, "The form was submitted successfully". The most common edits for this are text size and space around the text.

To change the font-size:

??.fsBody .fsForm .fsTable .fsSectionText{

   font-size: 20px;

}

To change the spacing around the text:

??.fsBody .fsForm .fsTable .fsSectionText{

   line-height: 30px;

}

4. The message background

??(.fsBody .fsForm .fsTable .fsSectionHeader)

This is the grey background that you see in the picture above. It's the background for the Thank You Message. The most common edits for this are to have it gone or to change the color.

To remove the background:

.fsBody .fsForm .fsTable .fsSectionHeader{

   background-color: transparent;

}

To change the color to blue*:

.fsBody .fsForm .fsTable .fsSectionHeader{

   background-color: blue;

}

If you don't want the color to be blue, you can enter whatever color you need using a hex code.

CSS - Resources draft

Link to hex codes

http://www.w3schools.com/tags/ref_colorpicker.asp 

Color picker plugin allows you to find the hex value for a color already on your site

Chrome

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg/reviews?hl=en

Firefox

https://addons.mozilla.org/en-US/firefox/addon/colorpicker/

Internet Explorer

http://www.howtogeek.com/tips/how-to-activate-the-hidden-color-picker-in-internet-explorer/

CSS - Editing the Width of One Field

You can edit one field on the form at a time by using that field's unique ID and the Advanced Code Editor. Each field in a form has a specific ID. If you target that specific field, you can make a change to just that field.

For example, we will go through how to change the label color for one field. In order to do this, first, you need to find the field's ID.

There are two ways to find the ID for a specific field. The first option is through your browser's Developer Tool options. Developer options are going to be different for each browser. On Google Chrome and Mozilla Firefox, you can right-click and then choose Inspect Element. If you are using Safari, you will need to turn Developer options on and then you will have the option for Develop in the top menu bar.  If you are using Internet Explorer and are on the latest version, you can click F12.  

We will use the example of Google Chrome. You can right click on the page and select Inspect Element. Once you click this option you can click on the magnifying glass in the left hand side select the field that you want to change. Once you click on the field, the specific ID will show in the inspector. See example, below.

If you do not want to use Developer Tools, you can access this ID through Formstack. If you go to specific form > Settings > Emails & Actions > Notification Emails you can create a new email. When you create a new email you can choose the option for a Custom Message for Content. When you pick this option you will see a Message area.

Under the Message area, there are form fields. You can drag and drop the field you would like to edit to the Message area. You'll then need to click on the "Code View (</>)" icon to show the field ID. For example, the option that would show in the Message upon clicking on the "Code View" icon would look similar to this:  <p>{$76687977 Work Phone}</p>. The field ID would then be 76687977.

Either of these options would show the same field ID on your form.  

Once you have the field ID you can go to the form > Build and click Style in the upper left-hand side of the screen.

When you click this option you will see a list of themes in use and the option to create a new one, so you will either mouse over a current one and edit it or click "Create Theme" to make a new one. (If the Edit option is greyed out that just means you're using one of our Stock Themes and you'll need to click on Make a Copy to edit the Theme.) Then click on Advanced Code Editor to expand it.

In the editor, you can then use the field ID in your selector, the format to use is, in this case, is #field(fieldID). You add the # in front because it is an ID and label because we are specifically looking at the field. Lastly, you will add the declaration for changing the width of a field.  

For example:

#field76687977{

    width: 20%;

}

Hint: When you add changes to specific fields they might not show in the form builder depending on the change you are making. Once you click save at the top of the theme section then view live form or go to the publish link you will see the change.

CSS - Mobile Version

Our forms are mobile friendly when using the link on the Publish page of the form or when embedded by using the Javascript embed code.  Below is a little bit of CSS that you can copy and paste to your theme to make changes to the mobile versions of the forms.

...forces a width only above a certain size

@media screen and (min-width:800px) {

.fsForm.fsSingleColumn, .fsForm.fsMultiColumn {width:800px;}

}

...makes rows auto width for anything under this pixel size

@media only screen and (max-width:900px) {

.fsForm .fsFieldRow .fsRowBody {width:auto;}

}
 

...compresses fsPage over this pixel size - size up form fields to stretch across

@media only screen and (min-width:500px) {

.fsBody .fsPage {max-width: 500px; margin: 0 auto;}

}

...makes 4 column rows respond to mobile while embedded

@media screen and (min-width:680px) {

.fsBody.fsEmbed .fs4Col {min-width: 680px;}



 }

...prevents text type fields from going wider under 640px

@media (max-width: 640px) {

.fsBody .fsFieldRow input[type="text"] {width: 100%; font-size: inherit; }

}

...lets email, tel, textarea field input types expand to 100% under 640px

@media (max-width: 640px) {

.fsBody .fsFieldRow input[type="email"], .fsBody .fsFieldRow input[type="tel"], .fsBody .fsForm textarea { width: 100%; }

 }

...controls mobile button: replaces next/prev arrow buttons, sizes down to fit next/prev button. Other attributes included for preventing problems on embed. When using, you must set bg color to override next/prev button backgrounds

@media only screen and (max-width:699px) {

span.fsFull {display:block;}

span.fsSlim {display:none;}

.fsPagination .fsNextButton, .fsPagination .fsPreviousButton, .fsSubmitButton {

background: #ff1918 !important;text-indent:0; width:auto; height:auto; font-size:12px !important; padding: 15px 35px !important;}

 }

Note: Factors like browsers, screen sizes, operating systems, and version updates will affect how forms appear across devices. It is recommended to always test forms on any device you need to support.

CSS - Form formatting

...set the form's width

.fsBody .fsForm {width:800px;}

...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;}

...remove top margin

body#fsLocal {margin-top:0;}

...change the spacing between form rows

.fsFieldRow  { padding-bottom:18px; }

...make the form background transparent

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

...removes gray background from section headings

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

...remove box shadow around form

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

...rounds the corners on the form

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

...remove form border

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

CSS - Header-Footer Edits

The image at the bottom of the form

#fsFooterImage  {                                                                      
  width:  700px;                                                                      
   text-align: center;                                                             
}

The image at the top of the form

#fsHeaderImage  {
  width: 700px;
 text-align: center;
}

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 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.
 

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; }

CSS - Field Edits

This article contains a list of CSS that can be copy and pasted to the Theme that is applied to the form.

All fields

...change the label color

.fsLabel {
color: #aabbcc;
}

...center align Form fields

.fsBody .fsPage {
text-align: center;
}

...change the text color of the supporting text

.fsSupporting {
color: #aabbcc;
}

...change the color of the placeholder text

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

...add focus background for a field (yellow highlighting)

.fsFieldFocused:not(.fsValidationError) {
background-color: yellow;
}

(Change the color of the highlighting by replacing "transparent" with the name or CSS color of the color)

...changes the color of the field focus outline

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

// name fields

.fsBody .fsForm input.fsField[type="name"]  {
width: 100px;
}

// short answer fields

.fsBody .fsForm input.fsField[type="text"]  {
width: 100px;
}


.fsBody .fsForm input.fsRequired[type="text"] {
width: 100px;
}

// long answer fields

.fsBody .fsForm textarea.fsField  {
width: 100px;
}

.fsForm textarea.fsRequired {
width: 100px;
}

// number fields

.fsForm input.fsField[type="number"]  {
width: 100px;
}

// checkbox fields

// radio buttons

// phone number fields

.fsBody .fsForm input.fsRequired[type="tel"]  {
width: 100px;
}

// address fields

// email address fields

.fsBody .fsForm input.fsRequired[type="email"]  {
width: 100px;
}

// matrix fields

...increase the width of the label

.fsBody .fsForm .fsMatrix th, .fsBody .fsForm .fsMatrixLabel  {
width: 94%;
}

// dropdown field

...change the font size of options in a dropdown

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

// date/time field

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

.fsCalendarPickerLink{
display: none;
}

// signature fields

...increase the width and height of a signature field

.fsSignature  {
height: 120%;
width: 120%;
}

// required asterisk

...change the color of the required asterisk

.fsRequiredMarker {
color: #FFFFFF;
}
 

...hide the required asterisk

.fsRequiredMarker span { color: transparent; }

Quick Start- Customize Your Forms Theme

Did you know that you have the power to change the look and feel of your forms through custom themes? This quick 

Users with access to make and edit themes can can go to the "Style" area of their form to customize themes.

Here are 3 things you can do quickly to instantly make your Formstack form feel more like personalized while making changes to your theme:

1. Change your font

Changing your font is a quick and easy way to give your form a custom feel from the Quick Style section. 

2. Customize your colors

You can change your theme's colors in the Color Editor under edit Form colors in quick styles. If your organization uses a specific shade, you can type in the exact color hex code.

Example: Formstack's Medium Green color hex code is HEX: #8FD6B0. By entering "#8FD6B0" the exact color from our branding guide is selected. 

3. Insert a standard header or footer image

Using a standard header or footer image, such as your organization's logo, is an easy way to make your Formstack theme and form look like a seamless companion to your existing materials. Need help customizing or editing your header or footer, check out this article or find the option under Advanced Styles - General. 
 

Want to do even more with themes? 

You can use CSS code to further customize the look and feel of your form's themes. More information available here.