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

Visió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 sólo 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 los dividiremos con el divisor de secciones.

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 primario. Debido a que el formulario será tan largo, queremos dividirlo en secciones que definan claramente lo que 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.

Si necesitas ayuda para añadir CSS a tu sitio, consulta 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;
}

Nuestro objetivo es el ID de formulario 220. Tendrá que actualizar este ID para que coincida con su propio ID de formulario. Si necesita ayuda para encontrar su 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 Separador de Secciones. ¿Le gustaría personalizar también el estilo de los elementos Checkbox? Eche un vistazo a nuestro artículo sobre Cómo personalizar los campos Checkbox y Radio para que parezcan botones.

PREGUNTAS FRECUENTES

P: ¿Y si quisiera hacer este cambio para todos mis formularios?

R: Para utilizar este CSS para todos los WPForms, sólo tiene que añadir su CSS a su sitio y eliminar 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;
}