Introdução
Gostaria de ativar uma caixa de verificação depois de ler uma declaração de exoneração de responsabilidade ou termos de serviço? Aprenda a aproveitar o potencial da funcionalidade Ativar apresentação da declaração de exoneração de responsabilidade / termos de serviço para campos de caixa de verificação. Esta capacidade permite que os utilizadores expressem a sua concordância com os seus termos de serviço. No entanto, se quiser desativar este campo até que os utilizadores tenham percorrido toda a sua declaração de exoneração de responsabilidade, este tutorial foi feito à medida das suas necessidades!
Criar o formulário
Comece por criar o seu formulário e adicionar os seus campos. Se precisar de ajuda para criar o seu formulário, consulte este guia útil.
Ativação das condições de serviço
Depois de ter adicionado os outros campos, adicione um campo Caixa de verificação e clique no separador Avançadas. Neste separador, verá uma opção para Ativar a apresentação da declaração de exoneração de responsabilidade/termos de serviço. Active esta opção e adicione o seu texto ao campo Descrição.
Uma vez ativado, clique novamente no separador Geral para adicionar o seu texto à Descrição.
Adicionar o snippet
Agora, é hora de adicionar o snippet ao seu site. Para obter ajuda sobre como e onde adicionar snippets ao seu site, consulte 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 vai olhar para a descrição do Caixa de verificação utilizando o campo div#wpforms-3658-field_14-description. O nosso ID de formulário é 3658e o nosso ID de campo para o Caixa de verificação campo é 14. De seguida, define dois atributos para este campo: só de leitura e overflow-y, scroll. Fazemo-lo para podermos calcular a posição de deslocação da descrição, de modo a sabermos quando os nossos visitantes se deslocam até ao fim da nossa declaração de exoneração de responsabilidade.
A próxima secção do snippet irá adicionar um atributo de desativado no Caixa de verificação utilizando o ID de campo de #wpforms-3658-field_14 input.
À medida que o utilizador percorre a declaração de exoneração de responsabilidade, vamos calcular a posição do scroll e, quando chegar a 0, removemos o atributo desativado e os nossos visitantes podem clicar na caixa de verificação para concordar.
À medida que os visitantes visualizam o formulário, só poderão concordar com a caixa de verificação da declaração de exoneração de responsabilidade depois de percorrerem o ecrã até ao fim da mesma.
E já está! Gostaria de contar as selecções de caixas de verificação dentro do seu formulário? Consulte o nosso artigo sobre Como contar as selecções de caixas de verificação no seu formulário.
Relacionadas
Referência da ação: wpforms_wp_footer_end