Cómo capitalizar las entradas de los campos del formulario

Introducción

¿Te gustaría capitalizar las entradas de los campos del formulario en tus 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, en tiempo real, garantizar 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 añadido un campo de formulario de Texto de Párrafo y un Texto de Línea Única a nuestro formulario.

Si necesitas ayuda para crear un formulario, por favor revisa esta documentación.

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.

Debajo de 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, por favor revisa este tutorial.

Simplemente copia y pega este CSS en tu sitio.

.capitalize {
    text-transform: capitalize;
}

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 asegurarte de que la información de la entrada se almacena con las mayúsculas, 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, por favor echa un vistazo a este tutorial.

/*
 * Capitalize form field text
 *
 * @link  https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ 
 */

function wpf_dev_capitalize() {
    ?>
    <script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery( '.wpforms-field.capitalize input' ).keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
				});
		jQuery( '.wpforms-field.capitalize textarea' ).keyup(function() {
				jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + 	jQuery(this).val().substr(1).toLowerCase());
			});
	});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_capitalize', 30 );

Este fragmento buscará cualquier campo del formulario que no solo tenga la clase CSS predeterminada de wpforms-field, sino que también tenga la clase CSS de capitalize, de modo que a medida que el usuario escribe, el texto se capitalizará automáticamente y cuando se envíe el formulario, la entrada almacenará esos campos con las letras mayúsculas.

Preguntas frecuentes

¿Qué pasa si quiero capitalizar todo el texto, no solo la primera letra?

Si necesitas que el texto esté completamente en mayúsculas (por ejemplo, "hola" se muestra como "HOLA"), usa text-transform: uppercase en lugar de text-transform: capitalize. Para más detalles sobre las propiedades CSS para la transformación de texto, puedes consultar la documentación de Mozilla sobre text-transform.

¡Y eso es todo lo que necesitas! ¿Te gustaría evitar que los usuarios introduzcan URLs en los campos de tu formulario? Echa un vistazo a nuestro artículo sobre Cómo bloquear URLs dentro de los campos del formulario.

Relacionado

Referencia de acción: wpforms_wp_footer_end