Riassunto AI
Introduzione
Vuoi abilitare una casella di controllo dopo aver letto un disclaimer o i termini del servizio? Scopri come sfruttare il potenziale della funzionalità Abilita visualizzazione disclaimer/termini del servizio per i campi Casella di controllo. Questa funzionalità consente agli utenti di esprimere il proprio accordo con i tuoi termini del servizio. Tuttavia, se sei desideroso di disattivare questo campo finché gli utenti non avranno letto interamente il tuo disclaimer, questo tutorial è fatto apposta per te!
Creazione del modulo
Inizia creando il tuo modulo e aggiungendo i tuoi campi. Se hai bisogno di aiuto nella creazione del tuo modulo, ti preghiamo di consultare questa utile guida.
Abilitazione dei Termini del Servizio
Una volta aggiunti gli altri campi, aggiungi un campo Casella di controllo e fai clic sulla scheda Avanzate. In questa scheda, vedrai un'opzione per Abilita visualizzazione disclaimer/termini del servizio. Attiva questa opzione e aggiungi il tuo testo nel campo Descrizione.
Una volta abilitato, torna alla scheda Generale per aggiungere il tuo testo nella Descrizione.
Aggiunta dello snippet
Ora è il momento di aggiungere lo snippet al tuo sito. Per assistenza su come e dove aggiungere snippet al tuo sito, ti preghiamo di consultare questo tutorial.
/**
* 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 );
Questo snippet esaminerà la descrizione del campo Casella di controllo utilizzando il codice div#wpforms-3658-field_14-description. Il nostro ID modulo è 3658 e il nostro ID campo per il campo Casella di controllo è 14. Imposterà quindi due attributi su questo campo: readonly e overflow-y, scroll. Lo facciamo in modo da poter calcolare la posizione di scorrimento della descrizione, in modo da sapere quando i nostri visitatori scorrono fino in fondo al nostro disclaimer.
La sezione successiva dello snippet aggiungerà un attributo disabled al campo Casella di controllo utilizzando l'ID del campo #wpforms-3658-field_14 input.
Mentre l'utente scorre il disclaimer, calcoleremo la posizione dello scorrimento; quando raggiungerà 0, rimuoveremo l'attributo disabled e i nostri visitatori potranno quindi fare clic sulla Casella di controllo per accettare.
Mentre i tuoi visitatori visualizzano il tuo modulo, non potranno accettare la tua casella di controllo disclaimer finché non avranno scorrevano fino in fondo al disclaimer.
E questo è tutto! Vuoi contare le selezioni delle caselle di controllo all'interno del tuo modulo? Dai un'occhiata al nostro articolo su Come contare le selezioni delle caselle di controllo all'interno del tuo modulo.
Correlati
Riferimento Azione: wpforms_wp_footer_end