Cómo Estilizar el Flex Survey con CSS (SoluCX)

Esta guía explica cómo personalizar visualmente el Flex Survey usando CSS, aunque aún no conozcas toda la estructura interna de SoluCX.

Todo aquí se basa exclusivamente en la estructura real del Flex Survey.

Dónde Insertar el CSS

Dentro de la plataforma:

Estructura del Formulario > Estilo Personalizado

Este campo acepta CSS puro. El código insertado se inyecta dentro del iframe del formulario.

Entendiendo la Estructura del Flex Survey

Antes de estilizar, necesitas entender cómo está organizado el HTML.

Contenedor Principal

.default-container-wrapper

Contenedor externo del formulario.

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

.default-container-content

Contenedor interno del contenido.

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

Páginas

Cada página tiene un ID dinámico:

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

Puedes estilizar una página específica:

#pageId-1 {
    background: #f5f5f5;
}

Columnas

.column-wrapper — Contenedor externo de la columna

.column — Columna interna

Clases dinámicas de borde:

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

Ejemplo:

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

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

Estructura de Preguntas

Cada pregunta tiene esta estructura:

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

Contenedor de la Pregunta

.wrapper-form-question

Clase principal de la pregunta:

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

Cuando es obligatoria e inválida:

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

También recibe: .required-field

Título de la Pregunta

.question

Estilo por defecto:

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

Ejemplo personalizado:

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

Descripción de la Pregunta

.description

Por defecto:

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

Personalización:

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

Contenedor del Componente

.wrapperComponent

Donde se renderiza el input real.

.wrapperComponent {
    margin-top: 10px;
}

Componentes de Pregunta

A continuación se muestran los principales tipos de componentes disponibles:

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

Botones de Selección

.button-select

.buttonSingleSelect

Ejemplo:

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

Botones Numéricos

.score-button-gap

Controla el espaciado:

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

Pie de Página y Navegación

.form-footer

Contenedor del pie de página.

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

Botones

.steps-control-buttons

.send-form-button

Tamaño por defecto:

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

Móvil por defecto:

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

Card del Formulario

.form-card-body

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

Puedes eliminarlo:

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

Survey Card (Repositorio Legacy)

Si estás usando SurveyCard:

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

Ejemplo:

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

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

Clases Bootstrap Disponibles

Flex usa Bootstrap 4.

Puedes usar:

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

Ejemplo:

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

Ejemplos Listos de Estilización

A continuación se muestran ejemplos completos que puedes copiar y pegar directamente en el campo Estructura del Formulario > Estilo Personalizado.

Ejemplo 1 — Bordes Redondeados (Soft UI)

Aplica esquinas redondeadas a todos los elementos principales del formulario, creando una apariencia suave y moderna.

.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;
}

Ejemplo 2 — Bordes Rectos (Estilo Corporativo)

Elimina todo el redondeo para un aspecto más formal e institucional.

.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;
}

Ejemplo 3 — Tema Oscuro (Slate/Blue)

Transforma el formulario en un tema oscuro elegante.

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

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

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

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

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

.button-select {
    background: #1f2937 !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
}

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

.button-select:active {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

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

.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

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

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

.form-footer .send-form-button:hover {
    background: #1d4ed8 !important;
}

.form-footer .send-form-button:active {
    background: #1e40af !important;
}

Ejemplo 4 — Tema Minimalista Clean

Interfaz ligera, sin bordes, con mucho espacio en blanco.

.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;
}

Ejemplo 5 — Material Mint (Emerald/Mint)

Estilo inspirado en Material Design con sombras y elevación de cards.

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

.form-card-body {
    background: #ffffff !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    padding: 32px !important;
}

.wrapper-form-question {
    background: #ffffff !important;
    border: 1px solid #d1fae5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.wrapper-form-question:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.16) !important;
}

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

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

.button-select {
    border-radius: 10px !important;
    border: 1px solid #6ee7b7 !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
}

.button-select:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28) !important;
}

.button-select:active {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

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

.form-control:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
}

.form-footer .send-form-button {
    background: #10b981 !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.28) !important;
}

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

.form-footer .send-form-button:active {
    background: #047857 !important;
}

Ejemplo 6 — Gradiente Indigo/Slate (Branding Moderno)

Fondo en gradiente con colores vibrantes para marcas que quieren destacar.

.default-container-wrapper {
    background: linear-gradient(135deg, #4f46e5, #334155) !important;
}

.form-card-body {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    padding: 40px !important;
}

.wrapper-form-question {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

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

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

.button-select {
    border-radius: 12px !important;
    border: 1px solid #c7d2fe !important;
    background: #eef2ff !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.button-select:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.28) !important;
}

.button-select:active {
    background: #4338ca !important;
    color: #ffffff !important;
    border-color: #4338ca !important;
}

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

.form-control:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22) !important;
}

.form-footer .send-form-button {
    background: #4f46e5 !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.28) !important;
}

.form-footer .send-form-button:hover {
    background: #4338ca !important;
}

.form-footer .send-form-button:active {
    background: #3730a3 !important;
}

Ejemplo 7 — Tipografía Grande y Accesible

Aumenta fuentes y espaciado para mejor legibilidad y accesibilidad.

.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;
}

Ejemplo 8 — Bordes con Acento (Slate/Blue)

Agrega un borde lateral colorido a los cards de preguntas para énfasis visual.

.wrapper-form-question {
    background: #ffffff !important;
    border-radius: 0 12px 12px 0 !important;
    border-left: 4px solid #2563eb !important;
    padding: 24px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

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

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

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

.button-select {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transition: all 0.15s ease !important;
}

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

.button-select:active {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}

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

.form-footer .send-form-button:hover {
    background: #1d4ed8 !important;
}

.form-footer .send-form-button:active {
    background: #1e40af !important;
}

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

Buenas Prácticas

1. Usa el Inspector (F12)

Inspecciona los elementos para confirmar las clases.

2. Usa !important cuando sea necesario

El CSS se inyecta en el iframe y puede necesitar sobrescribir reglas existentes.

3. Siempre prueba en móvil

El formulario tiene comportamiento responsivo.

Referencia Rápida de Clases Principales

ElementoClase
Contenedor de pregunta.wrapper-form-question
Título.question
Descripción.description
Botón de selección.button-select
Botones de puntuación.score-button-gap
Pie de página.form-footer
Botón enviar.send-form-button
Columna.column-wrapper
Página#pageId-{n}
Glosario
Glosario de términos comúnmente empleados en el contexto de integraciones