Formulayt style management
The Formulayt administration portal includes a SASS/CSS style management area for customizing the appearance of your gates. All accounts come with default styles that reset gate CSS attributes and apply generic styling. While these default styles cannot be edited directly, you can override or add to them using the style editor.
This feature requires CSS knowledge. If you need help using these features, contact your account manager.
The style editor contains two tabs: "Basic Styles" and "Media Queries."
Style compilation order
Styles added to each tab compile alongside default stylesheets in this order:
Default base styles (not editable)
Account specific Basic Styles
Default responsive styles (not editable)
Account specific Responsive Styles
You can write styles in CSS, SASS, or a combination of both. Styles automatically compile to vanilla CSS when published. You can either nest SASS rules to avoid long selector names or target specific elements using long selectors in individual rules.
HTML/CSS Conventions
The best way to identify which elements to target and what changes to make is to use your browser's element inspector. To override a rule from the default stylesheet, you must use the exact same selector as the original rule. Using the "!important" declarator is not recommended as it can cause problems with responsive styling and inheritance.
General principles for Formulayt gate markup
All elements have a class name prefixed with 'gcdc-'. Here's how the gate elements are structured:
Outer gate element wrapper
<div class="gcdc-gate gcdc-modal-dialog gcdc-gate-culture-en"></div>
"gcdc-modal-dialog" indicates a modal gate (inline gates don't have this class)
"gcdc-gate-culture-en" varies by language and allows language-specific customization
Gate wrappers also contain a class with the gate ID for targeting specific gates
Main gate components
Within each gate wrapper are two main elements:
The form element:
<form class="gcdc-form-render gcdc-form-render-EmailOnlyGatingForm">
"gcdc-form-render-EmailOnlyGatingForm" varies by form type for targeting specific form types
The content element:
<div class="gcdc-content-render"></div>
Inner content varies by gate type
This element only renders when the gate is open (you may need to submit the form first to inspect it)
Form fields and content elements
Form fields are grouped in wrapper elements:
<div class="gcdc-form-group gcdc-form-group-emailAddress gcdc-form-group-hasvalue gcdc-form-group-valid"></div>
"gcdc-form-group-emailAddress" varies by field name for targeting specific fields
"-hasvalue" and "-valid" classes target completed/empty fields or fields with validation issues
Internal markup varies by field type
Use browser inspection tools to determine the exact markup and classes for different field types to create proper CSS selectors.