Come scrivere in maiuscolo gli input dei campi dei moduli

Introduzione

Volete scrivere in maiuscolo gli input dei campi dei moduli in WPForms? Potete facilmente usare i CSS e la trasformazione del testo per formattare i valori di input, ma l'immissione verrà salvata esattamente come è stata digitata. Utilizzando un piccolo snippet JavaScript è possibile, in tempo reale, garantire che questi valori siano mostrati e salvati con la maiuscola.

In questo tutorial vi illustreremo tutti i passaggi per raggiungere questo obiettivo.

Creazione del modulo

Per prima cosa, è necessario creare il modulo. Ai fini di questa esercitazione, abbiamo aggiunto al nostro modulo un campo di tipo Paragraph Text e un campo di tipo Single Line Text.

Se avete bisogno di aiuto per creare un modulo, consultate questa documentazione.

Aggiunta del nome della classe CSS

Successivamente, utilizzeremo una classe CSS per ciascuno di questi campi del modulo, in modo da attivare il CSS per utilizzare la regola CSS di trasformazione del testo che aggiungeremo in un altro passaggio. Per aggiungere la classe CSS richiesta, fate clic sul campo Testo a riga singola nel costruttore di moduli e poi fate clic per aprire la sezione Avanzate.

Sotto le Classi CSS, aggiungete Maiuscolo e ripetete questi passaggi anche per il campo Testo del paragrafo.

Opzioni di implementazione

Utilizzo dei soli CSS (opzionale)

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

Se avete bisogno di aiuto su come e dove aggiungere i CSS personalizzati, consultate questo tutorial.

Basta copiare e incollare questo CSS nel vostro sito.

.capitalize {
    text-transform: capitalize;
}

Utilizzando solo JavaScript (consigliato)

Per capitalizzare al volo i valori dei campi di input del modulo mentre il modulo viene compilato e per assicurarsi che le informazioni inserite vengano memorizzate con la capitalizzazione, aggiungeremo un piccolo script che capitalizzi immediatamente il campo mentre il testo viene digitato.

Per un aiuto nell'aggiunta di JavaScript al vostro sito, consultate 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 del modulo che non solo abbia la classe CSS predefinita wpforms-field, ma che abbia anche la classe CSS capitze, in modo che, mentre l'utente digita, il testo venga automaticamente capitalizzato e, quando il modulo viene inviato, l'inserimento memorizzerà i campi con le lettere maiuscole.

FAQ

E se volessi scrivere in maiuscolo tutto il testo, non solo la prima lettera?

Se si desidera che il testo sia completamente maiuscolo (ad esempio, "hello" viene visualizzato come "HELLO"), usare text-transform: uppercase invece di text-transform: capitalize. Per maggiori dettagli sulle proprietà CSS per la trasformazione del testo, è possibile fare riferimento a Documentazione di Mozilla sulla trasformazione del testo.

E questo è tutto ciò di cui avete bisogno! Volete impedire agli utenti di inserire URL nei campi dei vostri moduli? Date un'occhiata al nostro articolo su Come bloccare gli URL nei campi del modulo.

Correlato

Riferimento azione: wpforms_wp_footer_end