CSS: How to add custom CSS to style your forms
(Pro Plan Only) Add custom CSS to your forms to stylize and enhance their appearance. Jump into practical examples below, or follow the steps to add and customize CSS for your form.
Step-by-Step Guide
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:
- 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.
- 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.
- 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.
4. Hide Checkboxes
.block-select-multiple.checkboxes .theme-check {
display: none;
}
5. Hide Radio Circles
.theme-radio {
display: none;
}
6. Disable Submit Button Until Checkbox is Selected
/* disable button design /
/ Root variables for the disable button design /
:root {
--disabled-bg: linear-gradient(139deg, #d2d2d2, #d2d2d2);
--enabled-bg: linear-gradient(139deg, #2ca070, #48cb94);
}
/ This dynamic class is attached from JS to the button to apply a disabled button design.
Change the class name according to your project /
.buttonDisabled {
pointer-events: none;
cursor: not-allowed !important;
background-image: var(--disabled-bg) !important;
}
/ disable continue button /
.form-container:has(div:not([role="checkbox"][aria-checked="true"])) .block-submit[type="submit"] {
pointer-events: none;
cursor: not-allowed;
background-image: var(--disabled-bg);
}
/ enable continue button */
.form-container:has([role="checkbox"][aria-checked="true"]) .block-submit[type="submit"] {
pointer-events: auto !important;
cursor: pointer !important;
background-image: var(--enabled-bg) !important;
}
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!