Edit Style Templates 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.

Note: any recipes in this article are not maintained by our product and engineering teams.  Each is treated as custom code and as such, support provided is limited.

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.  For more information on pricing and to book your consultation, please click here!

Changing Your Theme

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

Note: that if you are wanting to embed your form onto your website you should use the 'none' template on your form.  This will ensure that all styles will be inherited from your site.

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

Editing Form CSS

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

Component Breakdown

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

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