¿Te gustaría personalizar cómo aparece el texto en los campos de tus formularios? Desde tamaños y colores de fuente hasta transformación de texto, puedes mejorar fácilmente los campos de texto de tu formulario con un simple CSS.
Esta guía le mostrará cómo aplicar estilo a varios campos basados en texto, como Correo electrónico, Texto de una línea y Texto de párrafo.
Configuración del formulario
En primer lugar, tendrá que crear el formulario y añadir los campos. En este tutorial, vamos a añadir los campos Nombre, Correo electrónico, Texto de una línea y Texto de párrafo.
Si necesita ayuda para crear su formulario, consulte nuestra documentación de creación de formularios.
Añadir estilos personalizados
Veamos diferentes formas de dar estilo a tus campos de texto. Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial sobre cómo añadir CSS personalizado.
Tamaño del texto
Para cambiar el tamaño del texto dentro de los campos de formulario:
Para todas las formas
.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 de formulario:
Para todas las formas
.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 el uso de mayúsculas en el texto:
Para todas las formas
.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 de transformación de texto disponibles:
- minúsculas: Obliga a que todo el texto esté en minúsculas.
- mayúsculas: Obliga a que todo el texto esté en mayúsculas.
- mayúsculas: 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 un montón de tutoriales CSS. Por qué no echa un vistazo a otros tutoriales CSS viendo nuestra lista completa. Los actualizamos regularmente, así que no deje de visitarnos. Pero si está buscando información más específica sobre CSS, ¡por favor únase a nuestro Círculo VIP WPForms y pregúntenos allí!
Si tienes peticiones específicas para ver más tutoriales sobre CSS, ¡no dudes en enviarnos un ping dentro de la Comunidad VIP de WPForms en Facebook!