Resumo de IA
Visão geral
Gostaria de posicionar sub-rótulos acima dos campos do formulário com o WPForms? Por padrão, os sub-rótulos de todos os campos aparecerão abaixo do próprio campo.
No entanto, usando CSS, esta posição pode ser facilmente alterada com CSS. Estamos aqui para guiá-lo através do processo usando um toque de magia CSS. Vamos mergulhar e fazer acontecer!
Adicionar o CSS
Para posicionar sub-rótulos acima dos campos do formulário, adicione este CSS ao seu site.
Se precisar de ajuda sobre como e onde adicionar CSS ao seu site, por favor, dê uma olhada neste 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;
}
Com este CSS, cada sub-rótulo aparecerá agora acima do campo do formulário.
E é tudo o que precisa! Gostaria de personalizar o campo Upload de Ficheiro usando CSS? Dê uma olhada no nosso tutorial sobre Como Alterar o Estilo do Botão de Upload de Ficheiro.