How to Style the Flex Survey with CSS (SoluCX)

This guide explains how to visually customize the Flex Survey using CSS, even if you don't yet know the entire internal structure of SoluCX.

Everything here is based exclusively on the actual structure of the Flex Survey.

Where to Insert CSS

Inside the platform:

Form Structure > Custom Style

This field accepts pure CSS. The inserted code is injected inside the form's iframe.

Understanding the Flex Survey Structure

Before styling, you need to understand how the HTML is organized.

Main Container

.default-container-wrapper

Outer form container.

.default-container-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.default-container-content

Inner content container.

.default-container-content {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Pages

Each page has a dynamic ID:

  • #pageId-1
  • #pageId-2
  • #pageId-3

You can style a specific page:

#pageId-1 {
    background: #f5f5f5;
}

Columns

.column-wrapper — Outer column container

.column — Inner column

Dynamic border classes:

  • .rounded
  • .rounded-left
  • .rounded-right

Example:

.column-wrapper {
    padding: 20px !important;
}

.rounded-left {
    border-top-left-radius: 16px;
}

Question Structure

Each question has this structure:

.wrapper-form-question
    ├── .question
    ├── .description
    └── .wrapperComponent

Question Container

.wrapper-form-question

Main question class:

.wrapper-form-question {
    background: white;
    border-radius: 12px;
    padding: 20px !important;
}

When required and invalid:

.invalid-feedback-warning {
    border: 1px solid red;
}

Also receives: .required-field

Question Title

.question

Default style:

.wrapper-form-question .question {
    font-size: 20px;
    font-weight: 900;
}

Custom example:

.wrapper-form-question .question {
    font-size: 24px !important;
    color: #1E3A8A !important;
    font-weight: 700 !important;
}

Question Description

.description

Default:

.wrapper-form-question .description {
    font-size: 16px;
    font-weight: 700;
}

Customization:

.wrapper-form-question .description {
    font-size: 14px;
    color: #6B7280;
}

Component Container

.wrapperComponent

Where the actual input is rendered.

.wrapperComponent {
    margin-top: 10px;
}

Question Components

Below are the main available component types:

  • NumericButtonComponent
  • EmojiComponent
  • LikeDislikeComponent
  • ButtonSelectComponent
  • SimpleTextComponent
  • NumbersComponent
  • FreeTextComponent
  • ImageComponent
  • RadioButtonComponent
  • ParentGroupComponent
  • AutoCompleteComponent
  • ParameterQuestionComponent

Selection Buttons

.button-select

.buttonSingleSelect

Example:

.button-select {
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 16px;
}

Numeric Buttons

.score-button-gap

Controls spacing:

.score-button-gap {
    margin-right: 10px !important;
}

Footer and Navigation

.form-footer

Footer container.

.form-footer {
    background: #F9FAFB;
    padding: 20px !important;
}

Buttons

.steps-control-buttons

.send-form-button

Default size:

.form-footer .steps-control-buttons,
.form-footer .send-form-button {
    min-width: 136px;
    max-width: 136px;
}

Mobile default:

@media (max-width: 575px) {
    .form-footer .steps-control-buttons,
    .form-footer .send-form-button {
        width: 100%;
    }
}

Form Card

.form-card-body

.form-card-body {
    border: 1px solid var(--secondary);
}

You can remove it:

.form-card-body {
    border: none !important;
}

Survey Card (Legacy Repository)

If using SurveyCard:

  • .survey-card
  • .survey-card-none
  • .primary
  • .secondary

Example:

.survey-card {
    border-radius: 20px;
}

.survey-card .primary {
    background: #111827;
    color: white;
}

Available Bootstrap Classes

Flex uses Bootstrap 4.

You can use:

  • .btn
  • .form-control
  • .row
  • .col-*
  • .d-flex
  • .justify-content-*
  • .align-items-*
  • .p-*
  • .m-*

Example:

.btn {
    border-radius: 10px !important;
}

Ready-to-Use Styling Examples

Below are complete examples you can copy and paste directly into the Form Structure > Custom Style field.

Example 1 — Rounded Borders (Soft UI)

Applies rounded corners to all main form elements, creating a soft and modern look.

.form-card-body {
    border-radius: 24px !important;
}

.wrapper-form-question {
    border-radius: 16px !important;
}

.button-select {
    border-radius: 50px !important;
}

.form-control {
    border-radius: 12px !important;
}

.form-footer .send-form-button,
.form-footer .steps-control-buttons {
    border-radius: 50px !important;
}

.column-wrapper .rounded {
    border-radius: 20px !important;
}

Example 2 — Sharp Borders (Corporate Style)

Removes all rounding for a more formal and institutional look.

.form-card-body {
    border-radius: 0 !important;
}

.wrapper-form-question {
    border-radius: 0 !important;
}

.button-select {
    border-radius: 0 !important;
}

.form-control {
    border-radius: 0 !important;
}

.form-footer .send-form-button,
.form-footer .steps-control-buttons {
    border-radius: 0 !important;
}

Example 3 — Dark Theme (Dark Mode)

Transforms the form into an elegant dark theme.

.default-container-wrapper {
    background: #0f172a !important;
}

.form-card-body {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
}

.wrapper-form-question {
    background: #1e293b !important;
    border-radius: 12px !important;
}

.wrapper-form-question .question {
    color: #f1f5f9 !important;
}

.wrapper-form-question .description {
    color: #94a3b8 !important;
}

.button-select {
    background: #334155 !important;
    border: 1px solid #475569 !important;
    color: #e2e8f0 !important;
    border-radius: 10px !important;
}

.button-select:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.form-control {
    background: #334155 !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}

.form-footer {
    background: transparent !important;
}

.form-footer .send-form-button {
    background: #3b82f6 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

.form-footer .send-form-button:hover {
    background: #2563eb !important;
}

Example 4 — Clean Minimalist Theme

Lightweight interface, no borders, with plenty of white space.

.default-container-wrapper {
    background: #ffffff !important;
}

.form-card-body {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 40px !important;
}

.wrapper-form-question {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

.wrapper-form-question .question {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.wrapper-form-question .description {
    font-size: 14px !important;
    color: #9ca3af !important;
}

.button-select {
    border: 1px solid #e5e7eb !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.button-select:hover {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

.form-control {
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
}

.form-control:focus {
    border-bottom-color: #111827 !important;
    box-shadow: none !important;
}

.form-footer .send-form-button {
    background: #111827 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

Example 5 — Shadow and Elevation Cards (Material Design)

Style inspired by Material Design with shadows and card elevation.

.default-container-wrapper {
    background: #f5f5f5 !important;
}

.form-card-body {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    padding: 32px !important;
}

.wrapper-form-question {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.2s ease !important;
}

.wrapper-form-question:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.wrapper-form-question .question {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #212121 !important;
    letter-spacing: 0.15px !important;
}

.wrapper-form-question .description {
    font-size: 14px !important;
    color: #757575 !important;
}

.button-select {
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fafafa !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
}

.button-select:hover {
    background: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3) !important;
}

.form-control {
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
}

.form-control:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2) !important;
}

.form-footer .send-form-button {
    background: #1976d2 !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3) !important;
}

.form-footer .send-form-button:hover {
    background: #1565c0 !important;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.4) !important;
}

Example 6 — Colorful Gradient (Vibrant Branding)

Gradient background with vibrant colors for brands that want to stand out.

.default-container-wrapper {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

.form-card-body {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    padding: 40px !important;
}

.wrapper-form-question {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.wrapper-form-question .question {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

.wrapper-form-question .description {
    color: #6b7280 !important;
}

.button-select {
    border-radius: 12px !important;
    border: 2px solid #e0e7ff !important;
    background: #f0f4ff !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.button-select:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.form-control {
    border-radius: 12px !important;
    border: 2px solid #e0e7ff !important;
}

.form-control:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

.form-footer .send-form-button {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.form-footer .send-form-button:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
    transform: translateY(-1px);
}

Example 7 — Large and Accessible Typography

Increases fonts and spacing for better readability and accessibility.

.wrapper-form-question .question {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
}

.wrapper-form-question .description {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

.button-select {
    font-size: 18px !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
}

.form-control {
    font-size: 18px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
}

.form-footer .send-form-button {
    font-size: 18px !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
}

.wrapper-form-question {
    padding: 32px !important;
    margin-bottom: 24px !important;
}

Example 8 — Colored Border Style (Accent Border)

Adds a colored side border to question cards for visual emphasis.

.wrapper-form-question {
    background: #ffffff !important;
    border-radius: 0 12px 12px 0 !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.wrapper-form-question .question {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.wrapper-form-question .description {
    font-size: 14px !important;
    color: #64748b !important;
}

.form-card-body {
    border: none !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.button-select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
}

.button-select:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

.form-footer .send-form-button {
    background: #3b82f6 !important;
    border: none !important;
    border-radius: 8px !important;
}

.invalid-feedback-warning {
    border-left: 4px solid #ef4444 !important;
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

Best Practices

1. Use the Inspector (F12)

Inspect elements to confirm classes.

2. Use !important when necessary

CSS is injected into the iframe and may need to override existing rules.

3. Always test on mobile

The form has responsive behavior.

Quick Reference of Main Classes

ElementClass
Question container.wrapper-form-question
Title.question
Description.description
Selection button.button-select
Score buttons.score-button-gap
Footer.form-footer
Submit button.send-form-button
Column.column-wrapper
Page#pageId-{n}
Glossary
Glossary of terms commonly used in the context of integrations