Résumé IA
Introduction
Souhaitez-vous activer une case à cocher après avoir lu un avertissement ou les conditions d'utilisation ? Découvrez comment exploiter le potentiel de la fonctionnalité Afficher l'avertissement / les conditions d'utilisation pour les champs de type Case à cocher. Cette capacité permet aux utilisateurs d'exprimer leur accord avec vos conditions d'utilisation. Cependant, si vous souhaitez désactiver ce champ jusqu'à ce que les utilisateurs aient entièrement fait défiler votre avertissement, ce tutoriel est fait pour vous !
Création du formulaire
Commencez par créer votre formulaire et ajouter vos champs. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter ce guide utile.
Activation des conditions d'utilisation
Une fois que vous avez ajouté vos autres champs, ajoutez un champ Case à cocher et cliquez sur l'onglet Avancé. Sur cet onglet, vous verrez une option pour Afficher l'avertissement / les conditions d'utilisation. Activez cette option et ajoutez votre texte dans le champ Description.
Une fois activé, revenez à l'onglet Général pour ajouter votre texte dans la Description.
Ajout du snippet
Il est maintenant temps d'ajouter le extrait de code à votre site. Pour obtenir de l'aide sur comment et où ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.
/**
* Disable checkbox until terms of service has been read
*
* @link https://wpforms.com/developers/how-to-enable-a-checkbox-after-reading-disclaimer/
*/
function wpf_dev_tos_confirmation( ) {
?>
<script type="text/javascript">
jQuery(document).ready( function() {
// Set an attribute on the checkbox description to readonly
jQuery( "div#wpforms-3658-field_14-description" ).attr( "readonly","readonly" );
// Set an attribute on the checkbox description to overflow-y scroll to check the scroll position
jQuery( "div#wpforms-3658-field_14-description" ).attr( "overflow-y","scroll" );
// Set an attribute on the checkbox field to disabled
jQuery( "#wpforms-3658-field_14 input" ).attr( "disabled","true" );
// As the user scrolls through the description, envoke this function
jQuery( "div#wpforms-3658-field_14-description" ).scroll(function () {
// Evaluate the scroll position inside the checkbox description
if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - jQuery(this).innerHeight() || jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight ) {
// When user has scrolled to the bottom of the description, remove the disabled attribute
jQuery( "#wpforms-3658-field_14 input" ).removeAttr( "disabled" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_tos_confirmation', 30 );
Cet extrait de code examinera la description du champ Case à cocher en utilisant le sélecteur div#wpforms-3658-field_14-description. Notre ID de formulaire est 3658, et notre ID de champ pour le champ Case à cocher est 14. Il définira ensuite deux attributs sur ce champ : readonly et overflow-y, scroll. Nous faisons cela afin de pouvoir calculer la position de défilement de la description pour savoir quand nos visiteurs font défiler jusqu'en bas de notre avertissement.
La section suivante de l'extrait de code ajoutera un attribut disabled au champ Case à cocher en utilisant l'ID du champ #wpforms-3658-field_14 input.
Au fur et à mesure que l'utilisateur fait défiler l'avertissement, nous allons calculer la position du défilement. Lorsqu'elle atteint 0, c'est à ce moment-là que nous supprimerons l'attribut disabled et que nos visiteurs pourront alors cliquer sur la Case à cocher pour accepter.
Lorsque vos visiteurs consultent votre formulaire, ils ne pourront pas accepter la case à cocher de votre avertissement avant d'avoir fait défiler l'avertissement jusqu'en bas.
Et voilà ! Souhaitez-vous compter les sélections de cases à cocher dans votre formulaire ? Consultez notre article sur Comment compter les sélections de cases à cocher dans votre formulaire.
Articles associés
Référence d’action : wpforms_wp_footer_end