Comment désactiver un champ de formulaire pour empêcher la saisie utilisateur

Souhaitez-vous empêcher les utilisateurs de saisir des données dans un champ de formulaire spécifique ? Désactiver un champ ou le rendre en lecture seule peut être utile si vous souhaitez que les utilisateurs voient la valeur du champ sans pouvoir la modifier. Dans ce tutoriel, nous vous expliquerons comment désactiver un champ de formulaire, empêchant ainsi toute saisie utilisateur.

Cette approche peut également être précieuse lorsque vous souhaitez inclure cette valeur dans l'étiquette intelligente {all_fields} pour les e-mails de notification ou dans une exportation CSV.

Création de votre formulaire

Pour commencer, créez un nouveau formulaire. Dans ce tutoriel, nous allons utiliser un champ Texte de paragraphe qui inclura un message avec une étiquette intelligente représentant la date actuelle sous forme d'horodatage pour la soumission du formulaire.

Si vous avez besoin d'aide pour le processus de création de formulaire, veuillez consulter ce tutoriel pour obtenir des instructions étape par étape.

Après avoir créé votre formulaire avec succès, insérez un champ Texte de paragraphe. Dans l'onglet Avancé du champ, incluez wpf-disable-field comme Nom de classe CSS pour activer la fonctionnalité de désactivation du champ.

Désactivation du champ de formulaire

Il est maintenant temps d'ajouter le fragment de code qui rassemblera tout cela.

Si vous avez besoin d'aide pour ajouter du code à votre site, veuillez consulter ce tutoriel.

/**
 * Make standard form fields to make read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
 
function wpf_dev_disable_field() {
    <script type="text/javascript">
 
    jQuery(function($) {
 
        $( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
         
    });
 
    </script>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

Le code ci-dessus désactivera non seulement tout champ de formulaire sur n'importe quel formulaire avec la classe CSS wpf-disable-field, mais ignorera également ces champs lorsque l'utilisateur naviguera de champ en champ.

Et c'est tout ce dont vous avez besoin pour configurer vos champs de formulaire en lecture seule. Souhaitez-vous modifier les sous-libellés du champ Nom ? Notre article sur Comment modifier les sous-libellés pour le champ Nom vous guidera à travers les étapes pour y parvenir.

Action de référence

wpforms_wp_footer_end

FAQ

Q : Puis-je l'utiliser pour d'autres champs également ?

R : Absolument ! Tant que vous appliquez wpf-disable-field aux champs, cela couvrira chacun d'eux.

Par exemple, ce extrait désactivera un champ de formulaire Liste déroulante.

/**
 * Make standard form fields read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to the field in the form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
function wpf_dev_disable_field() {
    <script type="text/javascript">
      jQuery(function($) {
        $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select').attr({
          disabled: true,
          tabindex: '-1'
        });

        $('.wpforms-form').on('wpformsBeforeFormSubmit', function(){
          $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select')
            .removeAttr('disabled');
        });
      });
    </script>
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_field', 30);