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

Introdução

Gostaria de habilitar uma caixa de seleção após a leitura de um aviso ou termos de serviço? Saiba como aproveitar o potencial do recurso Exibir Aviso / Termos de Serviço para campos de Caixa de Seleção. Essa funcionalidade permite que os usuários expressem sua concordância com seus termos de serviço. No entanto, se você estiver interessado em desativar este campo até que os usuários tenham rolado completamente o seu aviso, este tutorial foi feito sob medida para suas necessidades!

Criação do Formulário

Comece criando seu formulário e adicionando seus campos. Se precisar de ajuda para criar seu formulário, revise este guia útil.

Habilitando Termos de Serviço

Depois de adicionar seus outros campos, adicione um campo de Caixa de Seleção e clique na guia Avançado. Nesta guia, você verá uma opção para Exibir Aviso / Termos de Serviço. Ative esta opção e adicione seu texto ao campo Descrição.

Uma vez ativado, volte para a guia Geral para adicionar seu texto à Descrição.

Adicionando o snippet

Agora, é hora de adicionar o snippet ao seu site. Para obter assistência sobre como e onde adicionar snippets ao seu site, revise 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. Nosso ID de formulário é 3658 e nosso ID de campo para o campo Caixa de Seleção é 14. Em seguida, ele definirá dois atributos neste campo: readonly e overflow-y, scroll. Fazemos isso para que possamos calcular a posição de rolagem da descrição, para que saibamos quando nossos visitantes rolam até o final do nosso aviso.

A próxima seçã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 usuário rola o aviso, calcularemos a posição da rolagem; quando atingir 0, removeremos o atributo disabled e nossos visitantes poderão clicar na Caixa de Seleção para concordar.

À medida que seus visitantes visualizarem seu formulário, eles não poderão concordar com a caixa de seleção de aviso até que tenham rolado até o final do aviso.

E é isso! Gostaria de contar as seleções de caixa de seleção dentro do seu formulário? Dê uma olhada em nosso artigo sobre Como Contar Seleções de Caixa de Seleção Dentro do Seu Formulário.

Relacionado

Referência de Ação: wpforms_wp_footer_end