Custom CSS

You can customise the look of your hosted Reforms by writing custom CSS.

Adding custom CSS

If you've created a form you can add custom CSS under the 'Code' tab found in the sidebar.

Styling your form

There are several ways to target specific elements on the form page.

Pages

If you want to target elements on a specific page you can use the page selectors:

/* Targets a specific page */
#page-4f1ba767-7805-4a81-a408-66fcc89d1da3 {}

/* Targets the thank you page */
#page-thank-you {}

/* Targets the closed page */
#page-closed {}

To find a specific page ID you can click on the 'Page settings' button in the form builder and select 'Copy ID'.

Block types

If you want to target specific block types you can use the following selectors:

/* Heading 1 blocks */
.block-heading-1 {}

/* Heading 2 blocks */
.block-heading-2 {}

/* Text blocks */
.block-rich-text {}

/* Image blocks */
.block-image {}

/* Embed blocks */
.block-embed {}


/* Name blocks */
.block-name {}

/* Email blocks */
.block-email {}

/* Phone blocks */
.block-phone {}

/* URL blocks */
.block-url {}

/* Short text blocks */
.block-short-text {}

/* Long text blocks */
.block-long-text {}


/* Number blocks */
.block-number {}

/* Currency blocks */
.block-currency {}

/* Percent blocks */
.block-percent {}


/* Checkbox blocks */
.block-checkbox {}

/* Dropdown blocks */
.block-dropdown {}

/* Select one blocks */
.block-select-one {}

/* Select multiple blocks */
.block-select-multiple {}

/* Scale (0-10) blocks */
.block-scale {}


/* Hidden blocks */
.block-hidden {}

/* File upload blocks */
.block-file-upload {}

Specific blocks

If you want to target a specific block only you can use the following selector:

#block-d1660739-2218-4335-b841-0e1ce4039af5 {}

To find a specific block ID you can click on the gear icon next to a block in the form builder and select 'Copy ID'.

Viewing your changes

Custom CSS is not visible in the form builder. If your form hasn't been published yet you can 'preview' the form and view your changes. If your form is already published then you can see the changes on the form page.