Custom display variants

Last updated: 01 July, 2025

Form elements in the Formcentric Editor are provided with the Display variant field. For certain elements, predefined display variants can already be selected here, such as alternative layouts.

You also have the option of entering custom CSS classes. This allows you to make individual visual changes directly using the style sheet from your embedding web page – which is perfect for project-specific designs and layouts.

Define the CSS class in the Editor

Navigate to your chosen form element.
Go to the Display variant field.
Enter your custom CSS class instead.

The class you enter is automatically added as an additional class in the corresponding form element’s HTML.

Creating and including the CSS file

Step 1: Creating the CSS file

Create a new CSS file, such as my-custom.css, and save this in a suitable directory in your website folder structure.

Step 2: Including the CSS file in the HTML

Include the CSS file in the <head> area of your web page:

Example:

<link rel="stylesheet" href="/path/to/my-custom.css">

Step 3: Defining CSS rules

Add the corresponding style definitions to your CSS file:

Example:

.my-display-variant {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
}

Adjusting specific elements

For precise adjustments to individual elements within a form element, you will need the corresponding CSS selectors. Browser developer tools can help you to identify these selectors:

Using developer tools

Open the form in your browser.
Start the developer tools:
1. Windows/Linux: Strg + Shift + C
2. macOS: Cmd + Option + I
Activate the element selection (arrow symbol on the toolbar).
Click the element you’re interested in.

Screenshot showing a form on the left with a selected area, and the HTML structure of the corresponding element highlighted in the browser developer tools on the right.

Analysing element information

After you activate element selection, the developer tool will display the HTML of elements clicked in the form, alongside their class name and applied CSS properties.

Screenshot of a web form with the browser’s developer tools open. A radio group label is highlighted in both the form and the HTML code using the element inspection tool.

Extended CSS adjustments

By using the information provided by the browser developer tools, you can now extend your display variant to make precise adjustments to the presentation of specific elements:

.my-display-variant .fc-radio__label {
  background-color: white;
  font-size: 1.2em;
}

.my-display-variant input[type=radio]:checked+label {
  background-color: #c5ffd566
}

.my-display-variant input[type=radio]:checked+label:before {
  background-color: #00fc45
}