Theming

Formally has default CSS designed to inherit your page styles, and to be themed.

If you wish to customise the HTML or other behaviour of Formally instead try the React SDK Custom Controls.

Theme variables (recommended)

CSS Custom Variables (aka CSS Custom Properties) builds upon the default CSS that Formally provides, and makes for easy upgrades in the future. Visit MDN to read generally about CSS Custom Properties.

Using CSS Variables is the recommended approach to theming as it doesn't fork Formally's default CSS.

A complete list of the CSS Variables that Formally understands is at the end of the page (see "List of all CSS Variables that Formally supports" heading).

How to know which theme variables to use

In your browser developer tools inspect the element that you wish to theme and ensure that element is selected.

Tip: if you're looking to customise radio buttons or checkboxes look for the ::before or ::after pseudo elements.

In the list of styles associated with the element look for CSS classes that begin with "formally-" (eg "formally-input") and then look for CSS property values that contain var(-- (eg var(--formally-text-border-radius)).

Note: Only CSS properties containing Formally CSS Variables can be configured. Please contact support if there isn't a CSS variable for the CSS Property that you wish to configure.

With the CSS Variable name you can now override that variable to change that CSS property value.

List of all CSS Variables that Formally supports

Would you like to style something not mentioned here? Please let us know.

Customising CSS Variables in React

React itself has a variety of methods of applying CSS.

This example uses inline style, however there are alternative examples that follow.

import { Formally } from 'formally';
import 'formally/build/styles.min.css';

export const MyForm = () => (
  <div style={{ '--formally-color-brand': 'red' }}>
    <Formally />
  </div>
);

Customising CSS Variables in React with Next.js

// _app.tsx

import 'formally/build/styles.min.css';
import './my-formally-theme.css';

const MyApp = ({ Component, pageProps }) => (
  return <Component {...pageProps} />
);

export default MyApp;

/* my-formally-theme.css */
.formally-container {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}

Customising Theme Variables in React with Styled Components

import 'formally/build/styles.min.css';

const FormallyWrapper = styled.div`
  --formally-color-brand: red;
`;

export const MyForm = () => (
  <FormallyWrapper>
    <Formally />
  </FormallyWrapper>
);

Customising Theme Variables in React with CSS Modules

import 'formally/build/styles.min.css';
import styles from './my-formally-theme.module.css';

export const MyForm = () => (
  <div className={styles.myFormallyWrapper}>
    <Formally />
  </div>
);

/* my-formally-theme.module.css */
.myFormallyWrapper {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}

Customising Theme Variables in HTML / CSS

<link rel="stylesheet" href="https://form-data.getformally.com/styles.min.css" />
<style>
.formally-container {
  /* configure any Formally CSS Variables here */
  --formally-color-brand: red;
}
</style>

Overriding Formally CSS classes

This approach uses Formally CSS but also your own CSS that matches CSS classes used by Formally.

This is slightly risky because if you upgrade to a later version of Formally the CSS classes may change. Formally makes no guarantees about CSS class name stability.

However if you test your CSS after you upgrade this may be an appropriate choice.

Warning: Considering entirely Custom CSS?

From a technical standpoint Formally's CSS is optional and as such developers may ignore it and instead use their own CSS.

However this isn't recommended as you will incur a significant development effort to start with, and an ongoing maintenance burden when upgrading to newer versions of Formally.

Instead please consider whether configuring Formally's CSS Variables could sufficient, and please feel free to suggest new CSS Variables (contact support!).

If you choose this approach please ensure that you use a specific version of Formally via NPM or UNPKG to avoid breaking changes. Do not use our CDN hosted version which is always the latest version and may have breaking changes against your custom CSS.

We do not support or recommend this approach.