Introducción
¿Le gustaría poner en mayúsculas las entradas de los campos de formulario en sus WPForms? Puede utilizar fácilmente CSS y la transformación de texto para dar formato a los valores de entrada, pero la entrada se guardará exactamente con la forma en que se escribe. Usando un pequeño fragmento de JavaScript puede, en tiempo real, garantizar que estos valores se muestren y guarden con mayúsculas.
En este tutorial te explicaremos paso a paso cómo conseguirlo.
Creación del formulario
Primero, necesitarás crear tu formulario. Para el propósito de este tutorial, hemos añadido un campo de texto de párrafo y un campo de texto de línea única a nuestro formulario.
Si necesita ayuda para crear un formulario, consulte esta documentación.
Añadir el nombre de la clase CSS
A continuación, vamos a utilizar una clase CSS para cada uno de estos campos de formulario para activar el CSS para utilizar la regla CSS de transformación de texto que vamos a añadir en otro paso. Para añadir la clase CSS requerida, haz clic en el campo Texto de una línea en tu constructor de formularios y luego haz clic para abrir la opción Avanzado.
En las Clases CSS, añada mayúsculas y repita estos pasos también para el campo Texto de párrafo.
Opciones de aplicación
Utilizar sólo CSS (opcional)
Este CSS personalizado significará que el campo del formulario se mostrará en mayúsculas, pero la entrada seguirá mostrando los valores del campo exactamente como se escriben.
Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, revisa este tutorial.
Sólo tienes que copiar y pegar este CSS en tu sitio.
.capitalize {
text-transform: capitalize;
}
Utilizar sólo JavaScript (recomendado)
Para poner en mayúsculas los valores de entrada del campo de formulario sobre la marcha mientras se completa el formulario, así como asegurarse de que la información de entrada se almacena con la capitalización, vamos a añadir una pequeña secuencia de comandos que inmediatamente poner en mayúsculas el campo como el texto se está escribiendo.
Si necesita ayuda para añadir JavaScript a su sitio, consulte 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 snippet buscará cualquier campo de formulario que no sólo tenga la clase CSS por defecto de wpforms-field sino que también tenga la clase CSS de capitalize por lo que a medida que el usuario vaya escribiendo, el texto se pondrá automáticamente en mayúsculas y cuando se envíe el formulario la entrada almacenará esos campos con las mayúsculas.
PREGUNTAS FRECUENTES
¿Y si quiero poner en mayúsculas todo el texto y no sólo la primera letra?
Si necesita que el texto aparezca completamente en mayúsculas (por ejemplo, "hola" se muestra como "HELLO"), utilice text-transform: uppercase en lugar de text-transform: capitalize. Para más detalles sobre las propiedades CSS para la transformación de texto, puede consultar Documentación de Mozilla sobre la transformación de texto.
Y eso es todo lo que necesita. ¿Quieres evitar que los usuarios introduzcan URLs en los campos de tus formularios? Echa un vistazo a nuestro artículo sobre Cómo bloquear URLs dentro de los campos de formulario.
Relacionado
Acción de referencia: wpforms_wp_footer_end