Skip to main content
Contact Support

Edit Style Templates and CSS

Ryan J.

Add custom CSS styles to your Forms for Salesforce form to personalize your form even further to match your Company's brand. 

 

Note: Custom template recipes are not maintained by Formstack's product and engineering teams.  Each is treated as a custom code and as such, support is limited.
 

Update your theme

 

While editing your form you can click the Edit Style tab and use any of our existing CSS Templates.

 

Screen Shot 2023-03-01 at 2.37.39 PM.png

 

Note: If you want to embed your form onto your website, use the 'none' template on your form. This will ensure that all styles will be inherited from your site.


Customize your themes

 

Directly under the template section window on the right side, you have two modes of further customizing the styles on your form.  You can directly edit your form's CSS, more on that below, or use our UI to customize your form.

 

Using our UI to customize your form breaks your form down into four different sections.

Form - This section is the overall style of the form.  You can add a logo to your form as well as modify settings like your form's background colors here.

Fields - This section can customize the look of individual field types on your form.  Modify the size of your fields by type as well as adjust the positioning and font size here.

Multi-Page - This section will let you customize the size and style of your multi-page navigation.  You will need to have a multi-page form and enable navigation in your form settings in order to see this in action.

Buttons & Links - This section will let you customize your calls to action on your form by adjusting the size, color, and fonts used for buttons and links for your form.

 

Note that when you make modifications to these elements you will see them take effect on the preview panel on the left side of the screen.  You can also toggle to a mobile view by clicking the mobile icon in the top right corner of your preview panel.


Edit Form CSS

 

You can also customize any of the styles for your form by clicking the Edit CSS button from the Edit Styles tab.

 

EditCSS.gif



Component Breakdown

 

.ff-formThe class of the overall
.ff-logoThe class above the main form reserved for a logo contained within the header
.ff-headerThe class directly above the form
.ff-form-mainThe main class for the form
#dvFastForms .ff-section-headerThe class for each section header
#dvFastForms .ff-group-rowClasses generated with each section of a form
#dvFastForms .ff-footer-groupThe class for the form's footer
#dvFastForms .ff-label-colThe class used for label column

#dvFastForms .ff-type-text,

#dvFastForms .ff-textarea,

#dvFastForms select.ff-select-type,

#dvFastForms .ff-fileupload-drop-area,

#dvFastForms .select2-container .select2-choice,

#dvFastForms .select2-container .select2-choices

Input field classes
#dvFastForms .ff-btn-submitSubmit button class

#dvFastForms .ff-label,

#dvFastForms .ff-footnote-label

Label for footer text
#dvFastForms .ff-labelLabel text for fields
#dvFastForms .ff-required-markLabel for required text
#dvFastForms .ff-field-colUsed to determine column size

#dvFastForms .ff-field-col,

#dvFastForms .ff-rating-widget a

Styling for Matrix and Rating fields

#dvFastForms .ff-type-text,

#dvFastForms .ff-textarea,

#dvFastForms select.ff-select-type,

#dvFastForms .ff-fileupload-drop-area,

#dvFastForms .select2-container

Styling for file upload field
#dvFastForms .ff-invalid-msgStyling for validation labels
#dvFastForms .ff-btn-submit:hoverSubmit button hover styling

#dvFastForms .ff-type-text,

#dvFastForms .ff-textarea,

#dvFastForms select.ff-select-type,

#dvFastForms .ff-fileupload-drop-area,

#dvFastForms .select2-container,

#dvFastForms .select2-container .select2-choice,

#dvFastForms .select2-container .select2-choices

Multi file upload styling
#dvFastForms .ff-page-bread-itemStyling for page bread crumbs at top of form
#dvFastForms .ff-page-headerMulti page form headers
#dvFastForms .ff-page-colMulti page form columns

 

CSS Recipes

 

Here are some common CSS modifications that have helped others maximize their Formstack use cases.

 

1) How to resize the lookup field dialog box.

 



#ffLookupDialog{
 min-height: 350px !important;
} 


 


2) How to ensure our form's dialogs are higher on an existing sites z-index.


 


div.ui-widget-overlay.ui-front {
 z-index: auto !important;
}




 


3) How to move where validation messages are displayed.


 


.ff-invalid-msg {
 position: relative;
 bottom: 185px;
 }
.ff-footer-group {
 overflow: visible !important;
 }
.ff-item-row{
 overflow: visible !important;
}


 




4) How to adjust column sizes per section.




.group-1 .ff-col-1 {
 /* This will adjust styles for the second secion on a page */
 max-width: 50% !important;
}

.group-1 .ff-col-2 {
/* This will adjust styles for the second secion on a page */
width: 45% !important;
}




5) Using custom fonts on your form.


 


@font-face {
 font-family: “ShadowsIntoLight”;
 src: url(https://fonts.gstatic.com/s/shadowsintolight/v8/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD55TecYQ.woff2) format('woff2');
 }

/*



You can now call your imported font-family into any class. For example if we wanted to change the section header class we could use the following:


 


*/

.ff-section-header {
 font-family: 'ShadowsIntoLight', cursive;
 }


 


6) To create explicit javascript for your auto generated submission pdfs you can create custom code that follows .form-pdf.




.form-pdf .ff-section-header {
 display: none;
 }




7) If you have a lengthy amount of text on your option labels for radio button fields, this CSS snippet will neatly wrap the text for you.



.ff-radio-li {
    cursor: pointer;
    min-height: 0 !important;
    padding: 0;
    height: auto;
    margin: 0;
    list-style-type: none !important;
    display: flex;
    margin-top: 5px;
}
.ff-radio-li label {
    height: auto;
    display: flex;
    float: left;
    padding-left: 10px;
    padding-top: 1px;
    cursor: pointer !important;
    overflow-wrap: anywhere;
    width: calc(95% - 19px);
}



Inject styles with Javascript


 


Want to create completely custom styles?  With our custom javascript engine, you can inject any new CSS Classes onto targetted fields of your form.


 


To add custom javascript to your form click Form Settings and scroll down to the Javascript Code section.


 


function FF_OnAfterRender() {
fs("#YourObject\\.YourFieldName__c").addClass("YourCSSClass");
}


 


This script is an example of how you could add a new CSS Class to a field on your form.  You would replace the code with your form's specific object/field/section names and create a unique Class Name for your custom CSS.


 


After this is added to your form you can add custom CSS class to your Edit Styles. For example:


 


.YourCSSClass {
 background-color:#000000;
 width: 400px;
 }


 


          

          
        

      


      

      

        
          

        
        
          
  

    
      
Related articles