Cómo personalizar el divisor de sección de WPForms con CSS

Descripción general

¿Le gustaría personalizar el campo de formulario Divisor de sección de WPForms? Usando un poco de CSS puede cambiar el estilo no solo del divisor en sí, sino también del texto que se utiliza con el divisor. En este artículo, le guiaremos a través de los pasos necesarios para personalizar el estilo del campo de formulario Divisor de sección.

Creación del formulario

Para empezar, crearemos un formulario, añadiremos nuestros campos y luego separaremos estos campos con el Divisor de sección.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Para el propósito de esta documentación, estamos creando un formulario que capturará información personal, historial médico e información del seguro principal. Dado que el formulario será muy largo, queremos dividirlo en secciones que definan claramente qué es cada sección y, para ello, vamos a utilizar Divisores de sección para dividir el formulario.

Añadir el CSS

Ahora es el momento de añadir el CSS que personalizará el estilo del Divisor de sección.

Para obtener ayuda para añadir CSS a su sitio, consulte este tutorial.

form#wpforms-form-220 .wpforms-field-divider h3 {
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

form#wpforms-form-220 .wpforms-field-divider {
    padding: 20px;
    background-color: #e27730;
    border-radius: 3px;
}

Estamos apuntando al ID del formulario 220. Deberá actualizar este ID para que coincida con el ID de su propio formulario. Para obtener ayuda para encontrar este ID, consulte este tutorial.

Ahora, con el CSS añadido, nuestro Divisor de sección tiene un aspecto completamente diferente.

Y eso es todo lo que necesita para personalizar el Divisor de sección. ¿Le gustaría también personalizar el estilo de los elementos de Casilla de verificación? Eche un vistazo a nuestro artículo sobre Cómo personalizar los campos de casilla de verificación y radio para que parezcan botones.

Preguntas frecuentes

P: ¿Qué pasa si quisiera hacer este cambio para todos mis formularios?

R: Para usar este CSS en todos los WPForms, simplemente añada su CSS a su sitio y elimine el ID del formulario prefijado.

.wpforms-field-divider h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
}

.wpforms-field-divider {
    padding: 20px !important;
    background-color: #e27730 !important;
    border-radius: 3px !important;
}