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
To add your own CSS to a form:
- 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.
- 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.
- Set the HTML Tag property to "link".
- Add a new Attribute with Attribute Name "rel" and Value "stylesheet".
- Add a new Attribute Name "type" and Value "text/css".
- 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.
