Comment mettre en majuscules les entrées des champs de formulaire

Introduction

Souhaitez-vous mettre en majuscules les saisies des champs de formulaire sur votre WPForms ? Vous pouvez facilement utiliser CSS et text-transform pour formater les valeurs des entrées, mais l'entrée sera enregistrée telle qu'elle est tapée. En utilisant un petit extrait de JavaScript, vous pouvez, en temps réel, garantir que ces valeurs sont affichées et stockées avec la mise en majuscules.

Dans ce tutoriel, nous vous guiderons à travers chaque étape pour y parvenir.

Création du formulaire

Tout d'abord, vous devrez créer votre formulaire. Aux fins de ce tutoriel, nous avons ajouté un champ de formulaire Texte de paragraphe et un champ Texte sur une seule ligne à notre formulaire.

Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.

Ajout de la classe CSS

Ensuite, nous allons utiliser une classe CSS pour chacun de ces champs de formulaire afin de déclencher le CSS pour utiliser la règle CSS text-transform que nous ajouterons à une autre étape. Pour ajouter la classe CSS requise, cliquez sur le champ Texte sur une seule ligne dans votre constructeur de formulaire, puis cliquez pour ouvrir les Paramètres avancés.

Sous Classes CSS, ajoutez capitalize et répétez ces étapes pour le champ Texte de paragraphe également.

Options d'implémentation

Utilisation de CSS uniquement (facultatif)

Ce CSS personnalisé signifie que le champ de formulaire s'affichera en majuscules, mais l'entrée affichera toujours les valeurs du champ exactement comme elles sont tapées.

Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, veuillez consulter ce tutoriel.

Copiez et collez simplement ce CSS sur votre site.

.capitalize {
    text-transform: capitalize;
}

Utilisation de JavaScript uniquement (recommandé)

Pour mettre en majuscules les valeurs saisies dans les champs du formulaire à la volée pendant que le formulaire est complété, ainsi que pour vous assurer que les informations saisies sont stockées avec la mise en majuscules, nous allons ajouter un petit script qui mettra automatiquement en majuscules le champ au fur et à mesure que le texte est tapé.

Pour obtenir de l'aide sur l'ajout de JavaScript à votre site, veuillez consulter ce tutoriel.

/*
 * 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 );

Ce extrait recherchera tout champ de formulaire qui possède non seulement la classe CSS par défaut wpforms-field, mais aussi la classe CSS capitalize. Ainsi, pendant que l'utilisateur tape, le texte sera automatiquement mis en majuscules et lorsque le formulaire sera soumis, l'entrée stockera ces champs avec les lettres capitales.

FAQ

Et si je veux mettre en majuscules tout le texte, pas seulement la première lettre ?

Si vous souhaitez que le texte soit entièrement en majuscules (par exemple, « bonjour » s'affiche comme « BONJOUR »), utilisez text-transform: uppercase au lieu de text-transform: capitalize. Pour plus de détails sur les propriétés CSS de transformation de texte, vous pouvez vous référer à la documentation de Mozilla sur text-transform.

Et c'est tout ce dont vous avez besoin ! Souhaitez-vous empêcher les utilisateurs d'entrer des URL dans vos champs de formulaire ? Consultez notre article sur Comment bloquer les URL dans les champs de formulaire.

Articles associés

Référence d’action : wpforms_wp_footer_end