Personalización del estilo de los campos individuales del formulario

¿Te gustaría dar estilo a campos específicos en tus formularios, sin afectar a otros campos de formulario? Con el selector CSS adecuado, puedes cambiar los estilos de cualquier componente del formulario para adaptarlo a tus necesidades.

En este tutorial, le proporcionaremos una lista de casi cualquier selector que pueda necesitar para dar estilo a campos individuales en sus formularios.

Nota: Este tutorial es un poco más avanzado y requiere algunos conocimientos de CSS. Si prefieres no usar ningún código, puedes ver nuestra guía sobre cómo estilizar WPForms en el editor de bloques.

Cómo utilizar el código

A continuación se muestra una lista de los selectores CSS que necesitará para orientar los campos de formulario individuales con su código CSS.

Incluido abajo, también encontrará los estilos por defecto que WPForms aplica automáticamente a esos selectores. Para personalizar cualquier parte de su formulario, puede comenzar copiando un fragmento de CSS de este tutorial en su sitio, y luego editarlo según sea necesario.

Nota: ¿No estás seguro de cómo añadir CSS a tu sitio? Echa un vistazo al tutorial de WPBeginner sobre cómo añadir CSS personalizado a tu sitio WordPress.

Selectores y estilos predeterminados de WPForms

Algunos de los estilos que ve en su formulario (como la fuente) provendrán de su tema. WPForms también incluye algunos estilos básicos para ayudar a que sus formularios se vean bien en cualquier tema. Sin embargo, no importa de donde provenga el estilo inicial, usualmente puede ser anulado usando selectores CSS muy específicos.

Nota: Al añadir CSS a su sitio, puede ser necesario incluir !important antes del punto y coma para asegurarse de que sus estilos personalizados se aplican correctamente. Esto ayudará a anular cualquier CSS añadido por tu tema u otros plugins. Echa un vistazo a nuestro Guía de solución de problemas de CSS para más detalles.

A continuación se muestra una lista de selectores CSS que son específicos para cada parte de un formulario, así como los estilos que se incluirán por defecto a través de WPForms.

Título y descripción del formulario
Indicador de progreso multipágina
Selectores globales de campos de formulario
Mensaje de confirmación
Campos obligatorios
- Asteriscos "obligatorios
- Errores de validación
Campos estándar

Título y descripción del formulario

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Descripción del formulario

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Indicador de progreso multipágina

Nota: Para cambiar el color de relleno verde del indicador de progreso, utilice las opciones multipágina del generador de formularios.

Indicador de progreso Página Título

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Pasos del indicador de progreso

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Indicador de progreso Paso actual

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Indicador de progreso Barra de progreso

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Indicador de progreso Barra de progreso (sólo relleno)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Indicador de progreso: Círculos

Círculos escalonados (los colores sólo se aplican a los no activos)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Círculo de pasos actual

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Conector del indicador de progreso

Paso Secciones

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Selectores globales de campos de formulario

Todas las etiquetas de campo

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Todos los subcampos

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Descripciones de todos los campos

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Recuadros alrededor de todos los campos de entrada

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Relleno entre todos los campos

.wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}

Todos los campos de entrada pequeños

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Todos los campos de entrada del medio

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Todos los campos de entrada grandes

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Mensaje de confirmación

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Campos obligatorios

Asterisco "obligatorio

Campo obligatorio asterisco

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Errores de validación

Caja de campo

.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}

Mensaje de validación

.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}

Icono de error de validación

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Campos estándar

Texto de una línea

Relleno de texto de una línea

.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}

Etiqueta de texto de una línea

.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Cuadro de entrada de texto de una línea

.wpforms-form .wpforms-field.wpforms-field-text input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Texto del párrafo

Relleno de texto de párrafo

.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}

Etiqueta de texto de párrafo

.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Cuadro de entrada de párrafo

.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Elección múltiple

Relleno de campos de opción múltiple

.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}

Etiqueta de opción múltiple

.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Etiquetas de opciones de elección múltiple

.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Casillas de verificación

Casillas de verificación Relleno

.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}

Casillas de verificación Etiqueta

.wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Etiquetas de opción de casilla de verificación

.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Números

Números Relleno

.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}

Números Etiqueta

.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Cuadro de introducción de números

.wpforms-form .wpforms-field.wpforms-field-number input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Nombre

Casilla de entrada del nombre

.wpforms-form input[type=text].wpforms-field-name-first {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Casilla de introducción del segundo nombre

.wpforms-form input[type=text].wpforms-field-name-middle {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Casilla de entrada de apellidos

.wpforms-form input[type=text].wpforms-field-name-last {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Correo electrónico

Relleno de correo electrónico

.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}

Etiqueta de correo electrónico

.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Casilla de entrada de correo electrónico (sólo principal)

.wpforms-form input[type=email].wpforms-field-email-primary {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Casilla de entrada de correo electrónico (sólo confirmar correo electrónico)

.wpforms-form input[type=email].wpforms-field-email-confirmation {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Subetiquetas de correo electrónico

.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Deslizador numérico

Número Relleno deslizante

.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}

Etiqueta deslizante numérica

.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Barra deslizante numérica

.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}

.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Ya está. Ahora puede utilizar estos selectores para aplicar CSS personalizado a los campos estándar de sus formularios.

¿Desea personalizar el estilo de otros campos en WPForms? No deje de consultar nuestros tutoriales sobre cómo personalizar el estilo de los campos de fantasía y los campos de pago.