How to add custom code (CSS) to your forms

Adding custom CSS to your forms can help you personalize and enhance their appearance. Follow the steps below to add and customize CSS for your form.

Step-by-Step Guide

1. Open Your Form

   • Begin by opening the form you want to add the custom CSS to.

     Navigate to the Code Option

   • On the left-hand menu, find and click on the "Code" option. This will open the Code page.

   • 

     Select the CSS Option

   • At the top of the Code page, you will see three options: Form Events, Parent Page Events, and CSS. Click on the "CSS" option.

   • 

     Writing Your CSS

   • In the CSS section, you can manually write your custom CSS code.
   • You will also have the opportunity to preview your changes as you write the code.

Targeting Specific Elements

To make it easier, we've provided selectors for targeting different types of elements on your form. Here are the ways you can target specific elements:

1. Targeting Specific Pages

• Using Page Selectors:

To target elements on a specific page, use the page selectors.

• Example: To target the thank you page, use the following code:

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

• Example: To target a specific page, use the following code:

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

• To find a specific page ID, click on the 'Page Settings' button in the form builder and select 'Copy ID'.

2. Targeting Blocks

• Using Block Type Selectors:
  • To target specific block types, you need to use block type selectors.
  • You can find a list of all block type selectors here.

Example: To target all Heading 1 blocks, use the following code:

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

• Targeting Specific Blocks Using Block Selectors:
  • To target a specific block, you need to use the block ID selector.

Example: To target a specific block, use the following code:

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

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

Writing the Custom CSS

Once you have decided which page or specific block you want to target, write the CSS code to apply the desired changes. Here are some examples:

1. Changing Text Color

{color: #fff;}

• This code will make the text color white. You can replace #fff with any hex color you like.

2. Changing Background Color of an Element

{background-color: #f0f0f0;}

• This code will change the background color to light grey. Replace #f0f0f0 with any hex color you prefer.

3. Adding Padding Around an Element

{padding: 10px;}

• This code adds 10 pixels of padding inside the element. Adjust the value as needed.

Examples

1. Changing the Text Color of Heading 1 Blocks

.block-heading-1 {color: #ff0000;}

This will change the text color of all Heading 1 blocks to red.

2. Changing the Background Color of a Specific Block

#block-d1660739-2218-4335-b841-0e1ce4039af5 {background-color: #00ff00;}

This will change the background color of the block with ID d1660739-2218-4335-b841-0e1ce4039af5 to green.

3. Centering Text on the Thank You Page

#page-thank-you {text-align: center;}

This will center-align all text on the thank you page.

Advanced Custom CSS Examples

1. Creating a Block with Rounded Corners and a Gradient Background

.block-select-multiple {
border-radius: 12px;
background: linear-gradient(45deg, #ff6b6b, #f06595);
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

• This code creates a select multiple block with a 12-pixel radius, a diagonal gradient background, white text, and no border.

2. Adding a Drop Shadow to a Form Container

.form-container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: #fff;
}

• This code adds a subtle shadow effect around the form container to give it a lifted appearance.

3. Customizing Placeholder Text in Input Fields

.block-email ::placeholder {
color: #999;
font-style: italic;
}

• This code makes the placeholder text in email blocks light grey and italic.

Previewing Changes

After writing your CSS code, you can preview the changes to ensure everything looks as expected. Make sure to save your changes once you are satisfied with the customization.

Feel free to experiment and combine different CSS properties to achieve the desired look and functionality for your forms. If you need further assistance, our support team is always here to help. Feel free to send us an email at: [email protected]

List of block type selectors:

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 {}

Please read this article to see more practical examples and applications of CSS in Reform.

If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!