### [Cómo capitalizar las entradas de los campos del formulario](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/) **Publicado:** 9 de junio de 2021 **Autor:** Equipo Editorial **Extracto:** Este tutorial te mostrará cómo usar CSS junto con JavaScript para aplicar dinámicamente el texto que se capitalizará a medida que se completa el campo. **Contenido:** ## Introducción ¿Te gustaría capitalizar las entradas de los campos de tu formulario en WPForms? Puedes usar fácilmente CSS y **text-transform** para dar formato a los valores de entrada, pero la entrada se guardará exactamente como se escribió. Usando un pequeño fragmento de JavaScript, puedes garantizar en tiempo real que estos valores se muestren y almacenen con mayúsculas. En este tutorial, te guiaremos paso a paso sobre cómo lograr esto. ## Creación del formulario Primero, necesitarás crear tu formulario. Para el propósito de este tutorial, hemos agregado un campo de formulario de **Texto de Párrafo** y un campo de **Texto de Línea Única** a nuestro formulario. Si necesitas ayuda para crear un formulario, [revisa esta documentación](https://wpforms.com/docs/creating-first-form/ "Creación de tu primer formulario"). ## Añadir el nombre de la clase CSS A continuación, vamos a usar una clase CSS para cada uno de estos campos del formulario para activar el CSS y usar la regla CSS **text-transform** que añadiremos en otro paso. Para añadir la clase CSS requerida, haz clic en el campo **Texto de Línea Única** en tu constructor de formularios y luego haz clic para abrir **Avanzado**. En **Clases CSS**, añade **capitalize** y repite estos pasos también para el campo **Texto de Párrafo**. ## Opciones de implementación ### Usando solo CSS (opcional) Este CSS personalizado hará que el campo del formulario se muestre en mayúsculas, pero la entrada seguirá mostrando los valores del campo exactamente como se escribieron. Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, [revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo añadir estilos CSS personalizados para WPForms"). Simplemente copia y pega este CSS en tu sitio. ``` .capitalize { text-transform: capitalize; } ``` Si deseas ver qué más puede usar la propiedad CSS de `text-transform`, [consulta la documentación de Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). ### Usando solo JavaScript (recomendado) Para capitalizar los valores de entrada de los campos del formulario sobre la marcha mientras se completa el formulario, así como para asegurarnos de que la información de la entrada se almacene con la capitalización, vamos a añadir un pequeño script que capitaliza inmediatamente el campo a medida que se escribe el texto. Para obtener ayuda sobre cómo añadir JavaScript a tu sitio, [echa un vistazo a este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo añadir PHP o JavaScript personalizado para WPForms"). ``` /* * Capitalizar texto del campo del formulario * * @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ */ function wpf_dev_capitalize() { ?> **Categorías:** Tutoriales **Etiquetas:** CSS, Javascript, JS, PHP ---