Using the theme editor to style your form

PassFort allows you to add your custom CSS styles to the form in order to create a seamless, branded experience for your customers when they complete your request for additional documentation or registration details.

There are two panes in the theme editor. There is a preview pane on the left-hand side and a configuration pane on the right-hand side. Once you commit a change in the configuration pane, using CSS properties, it is reflected in the preview pane immediately, so that you can see your changes as soon as you make them.

When you are finished making the changes, copy the style code and send it to the PassFort Support team.

 Note that PassFort does not support custom fonts. Use web safe fonts or the appropriate CSS font fallbacks.

To edit a style option:

  1. Use the dropdown arrows to find the style that you want to edit.
  2. Hover over the style you want to edit, then click the edit icon ().
  3. Make your changes in the grey box and click the green tick icon. You'll see your changes in the form immediately.

To copy a change from one style to another, click the copy to Clipboard icon () and make your changes using steps 1-3, or click the remove icon () to remove that style altogether.

Use your browser's refresh button to reset your styles.

The style options in ui_styles include:

CSS property



Style the buttons that appear on the first page of the form, such as Upload a document to verify your address.


Set the style for the buttons shown in the form. This includes the Finish button as well as the Continue and upload file buttons.


Set the style for Cancel buttons.


Set the styles for the free text fields and other UI elements without a specific class assigned to it.


Style your header logo. You can set the size and padding in pixels (px) and percentages (%).


Set the background shaded colour for questions that use radio buttons, or Boolean questions.


Set the styles for dropdown questions. You can style the colour and font entries.


Style the Need help? text, including the dropdown arrow. You can style the colour and font entries.

Edit the color styles to change the overall colour scheme of the text shown in the form, such as the field labels, the *required text and hint text that appears below a field if a user needs assistance.

Edit the content styles to change social media links and settings.

Edit the global styles to change various universal settings, such as font size for headings.

Not all CSS properties are supported, so we recommend that you use the existing styles.

To learn more about customer request customisation, read our Customer request integration guide.

Once you are done making your changes to the styles, click the copy icon at the root and then paste the code into a TXT file in order to raise a change request.

How did we do?

Powered by HelpDocs (opens in a new tab)