Breadcrumbs

Using Custom CSS

Use your own CSS to control the position and styling of components, and to adjust how forms print or appear on mobile devices.

Style components by adding your own CSS classes, rather than changing GlobalForms' built-in styles. Changing built-in styles is not supported and may stop working after an update.

Step 1: Add your CSS to the form

Choose one of these methods:

Option A (recommended): Put the CSS in the form

  1. Add an HTML Element component at the top of the form.

  2. In its content, add your CSS inside <style> tags:

    HTML
    <style>
  .firstName input { font-weight: bold; }
</style>

  3. Save the form.

The CSS is saved with the form, so it is included when you export or import the form and is not affected by GlobalForms updates.

Use this when many forms share the same styles.

  1. Host the CSS file on a web server you control, using HTTPS, for example https://www.example.com/styles/forms.css.

  2. Allow that site in the Content Security Policy by adding it to style-src. See Security Headers.

  3. In the form builder, under Links at the top of the form, select Add Another and enter the file's address in href.

Do not place CSS files in the GlobalForms program folders, such as client\dist\view. Files added there are removed when GlobalForms is updated.

Step 2: Apply styles to components

Most components have a Custom CSS Class setting on the Display tab. Enter your class name there, for example firstName, and write CSS rules that target it.

See your styles

Custom styles are not applied in the form builder, so they can't interfere with editing. To see them, open the form's view link by selecting View next to the form name.

Ready-made styles