CSS personnalisé

Overview

Custom CSS gives you complete control over the visual appearance of your forms and Fuse activities. NueForm provides a comprehensive set of CSS class selectors and CSS custom properties (variables) that you can target in your custom styles.

Adding Custom CSS

NueForm (Standard Forms)

1. Open your form in the builder.
2. Navigate to the Design tab in the settings panel.
3. Scroll to the Custom CSS section.
4. Enter your CSS rules.
5. Changes are reflected in the live preview immediately.

Fuse Activities

1. Open your Fuse activity in the builder.
2. Navigate to the Design tab.
3. Scroll to the Custom CSS section.
4. The CSS editor shows selectors specific to your chosen activity type.

NueForm CSS Selectors

These selectors are available for standard forms:

Layout & Container

Question Elements

Interactive Elements

Branding

Example

/* Make buttons fully rounded */
.fc-button {
  border-radius: 9999px;
}

/* Add a thicker bottom border to inputs */
.fc-input {
  border-bottom-width: 3px;
}

/* Add a hover slide effect to choices */
.fc-choice:hover {
  transform: translateX(4px);
}

/* Style the selected choice */
.fc-choice.selected {
  border-color: var(--fc-accent);
  background-color: var(--fc-accent-10);
}

/* Increase progress bar height */
.fc-progress-bar {
  height: 6px;
}

Fuse Activity CSS Selectors

Fuse activities have their own set of CSS selectors, organized into general, shared activity, and activity-specific categories.

General Selectors

These apply to every Fuse activity:

Shared Activity Selectors

These selectors are shared across multiple activity types:

Activity-Specific Selectors

Each activity type has unique selectors:

Classic Poll

Multi-Vote Poll

Image Poll

Ranked Poll

Elimination Poll

Hot Takes

Would You Rather / This or That

Sliding Scale

Word Cloud

Collaborative List

Ranked List

Rate & Reveal

Pros & Cons

Top N

Predictions

Caption This

Map Pins

Q&A Board

Tier List

Bracket

CSS Custom Properties (Variables)

In addition to class selectors, you can reference CSS custom properties in your rules. These are set by the theme system and adapt to each form's configuration.

Using CSS Variables in Custom CSS

You can reference these variables in your custom CSS to create styles that adapt to the form's theme:

/* Custom border using the theme's accent color */
.fc-choice {
  border: 2px solid var(--fc-accent-30);
}

/* Custom input styling using theme colors */
.fc-input {
  background-color: var(--fc-input-bg);
  border-color: var(--fc-border);
}

/* Fuse activity with theme-aware styling */
.fuse-option {
  border: 1px solid var(--fc-border);
  border-radius: 20px;
}

Per-Question Custom Classes

In addition to form-level custom CSS, you can add custom CSS class names to individual questions and their media elements:

• Question Custom Class Name (customClassName): Applied to the question container.
• Media Custom Class Name (media.customClassName): Applied to the media element.

This lets you target specific questions in your CSS:

/* Only style the "hero" question differently */
.hero-question .fc-question-title {
  font-size: 3rem;
  text-align: center;
}

Then set the question's custom class name to hero-question in the builder.

Tips and Best Practices

1. Use CSS variables: Reference var(--fc-accent) and other theme variables instead of hard-coding colors. This ensures your custom styles adapt when the theme changes.
2. Test in preview: Always preview your form after adding custom CSS to verify the styles look correct on both desktop and mobile.
3. Specificity: NueForm's built-in styles use low specificity. Your custom CSS should override them without needing !important in most cases.
4. Responsive design: Use media queries in your custom CSS if you need different styles on mobile vs. desktop.
5. Avoid breaking layout: Be careful with properties like position, display, and overflow that can break the form's layout.

Example: Complete Custom Theme

/* Rounded, card-style questions */
.fc-container {
  padding: 2rem;
}

/* Pill-shaped buttons */
.fc-button {
  border-radius: 9999px;
  padding: 12px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Underline-style inputs */
.fc-input {
  border: none;
  border-bottom: 2px solid var(--fc-border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

.fc-input:focus {
  border-bottom-color: var(--fc-accent);
}

/* Choice cards with hover effect */
.fc-choice {
  border-radius: 12px;
  transition: all 0.2s ease;
}

.fc-choice:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Larger rating icons */
.fc-rating-icon {
  font-size: 2rem;
}

/* Subtle progress bar */
.fc-progress-bar {
  height: 3px;
  opacity: 0.5;
}