Using Custom CSS

Using your own CSS offers infinite flexibility in form design, layout and theming.  Using CSS, you can impact positioning and styling on most Components, in addition to overriding default styling behaviors if desired.  Note that while it may be possible to alter the core styles of GlobalForms itself, this is not recommended or supported.  If you want to impact core components, you should override the default styles with your own classes. 

Deploy CSS Files

GlobalForms 10.3+

GlobalForms 10.3 greatly streamlines the process of adding Custom CSS to a form.

To add your own CSS to a form:

1. Place the .CSS file into the form viewer's base directory (by default, C:\GlobalForms\client\dist\view).  If a customer already has CSS available on an accessible web server, you can also reference that live style sheet versus referencing a copy of it, but we would encourage working with a local version of any CSS files.

2. Click on the “Add Another” under the “Links” section at the top of the form editor

3. Update the “href” to match the path of the CSS file (“./mystyles.css”)

Deploy CSS Files (GlobalForms version older than 10.3)

To add your own CSS to a form:

1. Place the .CSS file into the form viewer's base directory (by default, C:\GlobalForms\client\dist\view).  If a customer already has CSS available on an accessible web server, you can also reference that live style sheet versus referencing a copy of it, but we would encourage working with a local version of any CSS files.

2. Add an HTML component to the top of your Form.  You will need to alter some of the default settings for this component when the settings dialog opens.

3. Set the HTML Tag property to "link".

4. Add a new Attribute with Attribute Name "rel" and Value "stylesheet".

5. Add a new Attribute Name "type" and Value "text/css".

6. Add a new Attribute Name "href" and Value "./mystyles.css" where "mystyles" represents your CSS file's name.
   
   The Component properties should be similar to the values in the image below:
   
   

   

By placing the CSS in the viewer's base directory, the styles will only be applied to forms loaded for viewing / completion by end users.  The form designer will not display the styles.  This is the best practice when working with custom styles on a form.  Applying custom styles in the designer can impact your ability to work effectively with components in design mode and is discouraged.

Assigning Styles To Components

Almost every GlobalForms component has a "CSS Class" property on it's Display tab.  To apply custom styles to a specific component, specify the class name in the CSS Class property.  In the example below form a Text Component, the CSS class called firstName is being referenced.

See Also

The examples below illustrate some common CSS styles.  You will need to add the CSS styles to a file as described above before seeing any of the expected changes to the display.  

Remember

Custom CSS can negatively impact the GlobalForms design surface. With this in mind, custom styles are intentionally not applied in the designer to ensure design users maintain all design capabilities. To view the result of a custom style on a component, access the Form's view display link by clicking the View button next to the Form name in the designer: