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.

SelectATheme.gif

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.

EditCSS.gif

Component Breakdown

.ff-form The class of the overall <form>
.ff-logo The class above the main form reserved for a logo contained within the header
.ff-header The class directly above the form
.ff-form-main The main class for the form
#dvFastForms .ff-section-header The class for each section header
#dvFastForms .ff-group-row Classes generated with each section of a form
#dvFastForms .ff-footer-group The class for the form's footer
#dvFastForms .ff-label-col The 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-submit Submit button class

#dvFastForms .ff-label,

#dvFastForms .ff-footnote-label

Label for footer text
#dvFastForms .ff-label Label text for fields
#dvFastForms .ff-required-mark Label for required text
#dvFastForms .ff-field-col Used 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-msg Styling for validation labels
#dvFastForms .ff-btn-submit:hover Submit 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-item Styling for page bread crumbs at top of form
#dvFastForms .ff-page-header Multi page form headers
#dvFastForms .ff-page-col Multi 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;
}

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;
}
Was this article helpful?
3 out of 7 found this helpful

Comments

0 comments

Please sign in to leave a comment.