Resumen de IA
Descripción general
¿Le gustaría posicionar las subetiquetas encima de los campos del formulario con WPForms? Por defecto, las subetiquetas de todos los campos aparecerán debajo del propio campo.
Sin embargo, usando CSS, esta posición se puede cambiar fácilmente. Estamos aquí para guiarle a través del proceso con un toque de magia CSS. ¡Vamos a sumergirnos y hacerlo realidad!
Añadir el CSS
Para posicionar las subetiquetas encima de los campos del formulario, añada este CSS a su sitio.
Si necesita ayuda sobre cómo y dónde añadir CSS a su sitio, por favor, eche 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 subetiqueta aparecerá ahora encima del campo del formulario.
¡Y eso es todo lo que necesita! ¿Le gustaría 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.