Como Ativar uma Caixa de Seleção Após Ler o Aviso

Introdução

Gostaria de ativar uma caixa de seleção após a leitura de um aviso ou termos de serviço? Aprenda a aproveitar o potencial do recurso Ativar Exibição de Aviso / Termos de Serviço para campos de Caixa de Seleção. Essa funcionalidade permite que os utilizadores expressem a sua concordância com os seus termos de serviço. No entanto, se estiver interessado em desativar este campo até que os utilizadores tenham percorrido completamente o seu aviso, este tutorial foi feito à medida das suas necessidades!

Criação do Formulário

Comece por criar o seu formulário e adicionar os seus campos. Se precisar de ajuda na criação do seu formulário, por favor, reveja este guia útil.

Ativar Termos de Serviço

Depois de adicionar os seus outros campos, adicione um campo de Caixa de Seleção e clique no separador Avançadas. Neste separador, verá uma opção para Ativar Exibição de Aviso / Termos de Serviço. Ative esta opção e adicione o seu texto ao campo Descrição.

Depois de ativado, volte ao separador Geral para adicionar o seu texto à Descrição.

Adição do trecho de código

Agora, é hora de adicionar o snippet ao seu site. Para obter assistência sobre como e onde adicionar snippets ao seu site, por favor, reveja este 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 );

Este snippet analisará a descrição do campo Caixa de Seleção usando o div#wpforms-3658-field_14-description. O ID do nosso formulário é 3658 e o ID do nosso campo para o campo Caixa de Seleção é 14. Em seguida, definirá dois atributos neste campo: readonly e overflow-y, scroll. Fazemos isto para podermos calcular a posição de rolagem da descrição, para sabermos quando os nossos visitantes rolam até ao fundo do nosso aviso.

A próxima secção do snippet adicionará um atributo disabled ao campo Caixa de Seleção usando o ID do campo #wpforms-3658-field_14 input.

À medida que o utilizador rola o aviso, calcularemos a posição da rolagem; quando atingir 0, removeremos o atributo disabled e os nossos visitantes poderão então clicar na Caixa de Seleção para concordar.

À medida que os seus visitantes visualizam o seu formulário, não poderão concordar com a sua caixa de seleção de aviso até terem rolado até ao fundo do aviso.

E é tudo! Gostaria de contar as seleções de caixas de seleção dentro do seu formulário? Dê uma vista de olhos ao nosso artigo sobre Como Contar Seleções de Caixas de Seleção Dentro do Seu Formulário.

Relacionado

Referência de Ação: wpforms_wp_footer_end