Visión general
¿Le gustaría colocar sub-etiquetas sobre los campos de formulario con WPForms? Por defecto, las sub-etiquetas para todos los campos aparecerán debajo del propio campo.
Sin embargo, utiliza CSS, esta posición puede cambiarse fácilmente utilizando CSS. Estamos aquí para guiarte a través del proceso utilizando un toque de magia CSS. ¡Sumerjámonos y hagámoslo realidad!
Añadir el CSS
Para colocar las sub-etiquetas encima de los campos de formulario, añada este CSS a su sitio.
Si necesitas ayuda sobre cómo y dónde añadir CSS a tu sitio, echa un vistazo a este tutorial.
/**
* Position sub-labels above form fields
* @link https://wpforms.com/developers/how-to-position-sub-labels-above-form-fields/
*/
/* Address field */
.wpforms-field-address .wpforms-field-row > div,
/* Time field */
.wpforms-field-date-time .wpforms-field-row > div,
/* Date field (date picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Date field (date dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Password with confirmation enabled */
.wpforms-field-password .wpforms-field-row > div,
/* Email with confirmation enabled */
.wpforms-field-email .wpforms-field-row > div {
display: flex;
flex-wrap: wrap;
}
/* Address field */
.wpforms-field-address .wpforms-field-row > div input,
.wpforms-field-address .wpforms-field-row > div select,
/* Time field */
.wpforms-field-date-time .wpforms-field-row > div input,
/* Date field (date picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Date field (date dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Password with confirmation enabled */
.wpforms-field-password .wpforms-field-row > div input,
/* Email with confirmation enabled */
.wpforms-field-email .wpforms-field-row > div input {
order: 2;
margin-top: 5px;
}
/* Skip Validation errors */
.wpforms-field-address.wpforms-has-error em {
width: 100%;
order: 4;
}
Con este CSS, cada sub-etiqueta aparecerá ahora encima del campo del formulario.
¡Y eso es todo lo que necesitas! ¿Quieres personalizar el campo de carga de archivos usando CSS? Eche un vistazo a nuestro tutorial sobre Cómo cambiar el estilo del botón de carga de archivos.