Resumen de IA
¿Le gustaría personalizar la apariencia del texto en los campos de su formulario? Desde tamaños de fuente y colores hasta la transformación del texto, puede mejorar fácilmente los campos de texto de su formulario con CSS simple.
Esta guía le mostrará cómo dar estilo a varios campos basados en texto como Correo electrónico, Texto de una sola línea y Texto de párrafo.
Configuración de tu formulario
Primero, deberá crear su formulario y agregar sus campos. Para este tutorial, vamos a agregar los campos Nombre, Correo electrónico, Texto de una sola línea y Texto de párrafo.
Si necesita ayuda para crear su formulario, revise nuestra documentación de creación de formularios.
Añadir estilos personalizados
Veamos diferentes formas de dar estilo a sus campos de texto. Para obtener ayuda con la adición de CSS a su sitio, consulte este tutorial sobre cómo añadir CSS personalizado.
Tamaño del texto
Para cambiar el tamaño del texto dentro de los campos del formulario:
Para todos los formularios
.wpforms-form input {
font-size: 20px !important;
}
Para un campo específico dentro de un formulario específico
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
Color del texto
Para modificar el color del texto en los campos del formulario:
Para todos los formularios
.wpforms-form input {
color: #000000 !important;
}
Para un campo específico dentro de un formulario específico
#wpforms-999-field_1-container input {
color: #000000 !important;
}
Transformación del texto
Para controlar la capitalización del texto:
Para todos los formularios
.wpforms-form input {
text-transform: capitalize !important;
}
Para un campo específico dentro de un formulario específico
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
Valores disponibles de text-transform:
- lowercase: Fuerza todo el texto a minúsculas
- uppercase: Fuerza todo el texto a mayúsculas
- capitalize: Pone en mayúscula la primera letra de cada palabra
Y eso es todo lo que necesita para personalizar el estilo de los campos de formulario basados en texto.
WPForms tiene muchísimos tutoriales de CSS. ¿Por qué no consultar otros tutoriales de CSS viendo nuestra lista completa? Los actualizamos regularmente, así que siga revisando. Pero si está buscando información más específica sobre cómo usar CSS, ¡únase a nuestro Círculo VIP de WPForms y pregúntenos allí!
Si tiene peticiones específicas para ver más tutoriales sobre CSS, no dude en contactarnos en la Comunidad VIP de WPForms en Facebook.