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.

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.

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

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