The look and feel of your gates can be customized in the Styles area located in the left side menu. There are two tabs: one for base styles and one for media queries used in responsive design. You can write styles using CSS and/or SASS.
Important: Changes in the manage styles area should only be made by users proficient in CSS and/or SASS.
Looking to customize the style of just one gate? Read more about gate-specific classes here.
Why Use Form Type for Styling?
When you build multiple gate experiences, styling often varies between them. Each layout may require different spacing, alignment, or structure. Using Form-Type based styling allows you to:
Apply consistent styling across similar gates
Avoid hardcoding styles to individual gates
Reuse styles for future gates with the same structure
Keep your CSS clean and scaleable
How Form Type Targeting Works
Formulayt automatically applies a class to each gate based on its Form Type Key.
The class structure is:
.gcdc-gate .gcdc-form-render-[FormTypeKey]
.gcdc-gate targets the parent Gate container
.gcdc-form-render-[FormTypeKey] targets the Gate layout (Form Type)
You can find the Form Type Key in the Basic Settings when editing a Form Type
Example: Styling Different Form Types
Below is an example of how to target two different form types.
// ContactUsSingleColumn
.gcdc-gate .gcdc-form-render-ContactUsSingleColumn {
/* Add styling here as needed, or target other elements within the form */
}
// WebinarSignUpTwoColumn
.gcdc-gate .gcdc-form-render-WebinarSignUpTwoColumn {
/* Add styling here as needed, or target other elements within the form */
}