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.

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).

Visit MDN to read generally about CSS Custom Properties.

Customing Theme 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>
);

Customing Theme 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;
}

Customing 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>

List of all CSS Variables that Formally supports

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

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 it 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 changes to Formally (such as new CSS Variables) could suffice, and please suggest CSS Variables.

If despite these warnings 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.