Introduction
Souhaitez-vous mettre en majuscules les entrées des champs de formulaire dans votre WPForms ? Vous pouvez facilement utiliser CSS et text-transform pour formater les valeurs d'entrée, mais l'entrée sera sauvegardée avec exactement la façon dont elle a été 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 des majuscules.
Dans ce tutoriel, nous allons vous expliquer chaque étape pour y parvenir.
Création du formulaire
Tout d'abord, vous devez créer votre formulaire. Pour les besoins de ce tutoriel, nous avons ajouté à notre formulaire un champ Texte de paragraphe et un champ Texte d'une ligne.
Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.
Ajouter le nom de la classe CSS
Ensuite, nous allons utiliser une classe CSS pour chacun de ces champs de formulaire afin de déclencher l'utilisation de la règle CSS de transformation de texte que nous ajouterons dans une autre étape. Pour ajouter la classe CSS requise, cliquez sur le champ Single Line Text dans votre générateur de formulaires, puis cliquez sur pour ouvrir la fenêtre Advanced.
Sous Classes CSS, ajoutez majuscule et répétez ces étapes pour le champ Texte du paragraphe.
Options de mise en œuvre
Utilisation de CSS uniquement (facultatif)
Cette feuille de style CSS personnalisée signifie que le champ du formulaire s'affichera en majuscules, mais que l'entrée affichera toujours les valeurs du champ telles qu'elles ont été saisies.
Si vous avez besoin d'aide pour savoir comment et où ajouter des feuilles de style CSS personnalisées, veuillez consulter ce tutoriel.
Il suffit de copier et de coller ce CSS sur votre site.
.capitalize {
text-transform: capitalize;
}
Utiliser uniquement JavaScript (recommandé)
Pour mettre en majuscules les valeurs saisies dans les champs de formulaire à la volée pendant que le formulaire est rempli et pour s'assurer que les informations saisies sont stockées avec la majuscule, nous allons ajouter un petit script qui mettra immédiatement en majuscules le champ au fur et à mesure que le texte est saisi.
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 );
Cet extrait recherchera tout champ de formulaire qui a non seulement la classe CSS par défaut de wpforms-field mais qui a également la classe CSS de majuscule. Ainsi, lorsque l'utilisateur tape, le texte est automatiquement mis en majuscule et lorsque le formulaire est soumis, l'entrée stocke ces champs avec les lettres majuscules.
FAQ
Que faire si je veux mettre en majuscules tout le texte et pas seulement la première lettre ?
Si vous souhaitez que le texte soit entièrement en majuscules (par exemple, "hello" s'affiche comme "HELLO"), utilisez l'option text-transform: uppercase au lieu de text-transform: capitalize. Pour plus de détails sur les propriétés CSS pour la transformation du texte, vous pouvez vous référer à Documentation de Mozilla sur la transformation de texte.
Et c'est tout ce dont vous avez besoin ! Vous souhaitez empêcher les utilisateurs de saisir des URL dans les champs de votre formulaire ? Consultez notre article sur la façon de bloquer les URL dans les champs de formulaire.
En rapport
Référence de l'action : wpforms_wp_footer_end