Come capitalizzare gli input dei campi modulo

Introduzione

Vuoi maiuscolizzare gli input dei campi modulo sul tuo WPForms? Puoi facilmente usare CSS e text-transform per formattare i valori di input, ma la voce verrà salvata esattamente come è stata digitata. Usando un piccolo snippet JavaScript puoi, in tempo reale, garantire che questi valori vengano visualizzati e memorizzati con la maiuscola.

In questo tutorial, ti guideremo passo dopo passo su come ottenere questo risultato.

Creazione del modulo

Per prima cosa, dovrai creare il tuo modulo. Ai fini di questo tutorial, abbiamo aggiunto un campo modulo Testo Paragrafo e un campo Testo Riga Singola al nostro modulo.

Se hai bisogno di aiuto nella creazione di un modulo, ti preghiamo di consultare questa documentazione.

Aggiunta della classe CSS

Successivamente, utilizzeremo una classe CSS per ciascuno di questi campi modulo per attivare il CSS che utilizzerà la regola CSS text-transform che aggiungeremo in un altro passaggio. Per aggiungere la classe CSS richiesta, fai clic sul campo Testo Riga Singola nel tuo modulo builder e quindi fai clic per aprire Avanzate.

Sotto Classi CSS, aggiungi capitalize e ripeti questi passaggi anche per il campo Testo Paragrafo.

Opzioni di implementazione

Utilizzo solo CSS (facoltativo)

Questo CSS personalizzato farà sì che il campo modulo venga visualizzato in maiuscolo, ma la voce mostrerà comunque i valori del campo esattamente come sono stati digitati.

Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, ti preghiamo di consultare questo tutorial.

Copia e incolla semplicemente questo CSS sul tuo sito.

.capitalize {
    text-transform: capitalize;
}

Utilizzo solo JavaScript (consigliato)

Per maiuscolizzare i valori di input dei campi modulo al volo mentre il modulo viene completato, e per assicurarti che le informazioni della voce vengano memorizzate con la maiuscola, aggiungeremo un piccolo script che maiuscolizza immediatamente il campo mentre il testo viene digitato.

Per aiuto nell'aggiungere JavaScript al tuo sito, ti preghiamo di consultare questo 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 );

Questo snippet cercherà qualsiasi campo modulo che abbia non solo la classe CSS predefinita di wpforms-field, ma anche la classe CSS di capitalize, in modo che mentre l'utente digita, il testo venga automaticamente maiuscolizzato e quando il modulo viene inviato, la voce memorizzerà quei campi con le lettere maiuscole.

FAQ

E se volessi maiuscolizzare tutto il testo, non solo la prima lettera?

Se desideri che il testo sia completamente in maiuscolo (ad esempio, "ciao" viene visualizzato come "CIAO"), usa text-transform: uppercase invece di text-transform: capitalize. Per maggiori dettagli sulle proprietà CSS per la trasformazione del testo, puoi fare riferimento alla documentazione di Mozilla su text-transform.

E questo è tutto ciò di cui hai bisogno! Vuoi impedire agli utenti di inserire URL nei tuoi campi modulo? Dai un'occhiata al nostro articolo su Come bloccare gli URL all'interno dei campi modulo.

Correlati

Riferimento Azione: wpforms_wp_footer_end