Introduzione
Desiderate attivare una casella di controllo dopo aver letto un disclaimer o i termini di servizio? Imparate a sfruttare il potenziale della funzione Abilita la clausola di esclusione di responsabilità/la visualizzazione dei termini di servizio per i campi Checkbox. Questa funzionalità consente agli utenti di esprimere il proprio consenso ai termini di servizio. Tuttavia, se volete disattivare questo campo fino a quando gli utenti non avranno letto interamente la vostra clausola di esclusione di responsabilità, questo tutorial è fatto su misura per voi!
Creazione del modulo
Iniziare a creare il modulo e ad aggiungere i campi. Se avete bisogno di aiuto per la creazione del modulo, consultate questa utile guida.
Abilitazione dei termini di servizio
Una volta aggiunti gli altri campi, aggiungere un campo Checkbox e fare clic sulla scheda Avanzate. In questa scheda è presente un'opzione che consente di attivare la visualizzazione di Disclaimer / Termini di servizio. Attivare questa opzione e aggiungere il testo nel campo Descrizione.
Una volta attivata, fare clic sulla scheda Generale per aggiungere il testo alla Descrizione.
Aggiunta dello snippet
Ora è il momento di aggiungere lo snippet al vostro sito. Per sapere come e dove aggiungere gli snippet al vostro sito, consultate 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 esamina la descrizione dell'oggetto Casella di controllo utilizzando il campo div#wpforms-3658-field_14-description. L'ID del nostro modulo è 3658e l'ID del campo per l'elemento Casella di controllo campo è 14. Verranno quindi impostati due attributi su questo campo: solo in lettura e overflow-y, scroll. In questo modo possiamo calcolare la posizione di scorrimento della descrizione, in modo da sapere quando i visitatori scorrono fino alla fine del disclaimer.
La sezione successiva dello snippet aggiungerà un attributo di disabilitato sul Casella di controllo utilizzando l'ID del campo #wpforms-3658-field_14 input.
Man mano che l'utente scorre verso il basso la clausola di esclusione della responsabilità, calcoleremo la posizione dello scorrimento; quando raggiunge lo 0, rimuoviamo l'attributo disabled e i visitatori possono fare clic sulla casella di controllo per accettare.
Quando i visitatori visualizzano il modulo, non saranno in grado di accettare la casella di controllo dell'esclusione di responsabilità fino a quando non saranno scesi in fondo al modulo.
E questo è tutto! Volete contare le selezioni delle caselle di controllo all'interno del vostro modulo? Date un'occhiata al nostro articolo su Come contare le selezioni delle caselle di controllo all'interno del vostro modulo.
Correlato
Riferimento azione: wpforms_wp_footer_end