Gostaria de exigir que os usuários lessem e concordassem com seus Termos de Serviço ou Isenção de Responsabilidade antes de poderem enviar um formulário?
Este tutorial compartilhará duas maneiras fáceis de criar uma caixa de seleção de contrato obrigatório.
Adição de uma caixa de seleção de Termos de serviço
Para começar, você precisará criar um novo formulário ou editar um formulário existente.
Quando o construtor de formulários estiver aberto e você tiver adicionado os campos desejados, adicionaremos um campo Checkboxes.
Por padrão, esse campo exibirá três opções de caixa de seleção. Queremos apenas uma opção de caixa de seleção em nosso formulário, portanto, removeremos as outras duas clicando no campo Caixas de seleção para abrir a tela Opções de campo. Em seguida, basta clicar nos botões de menos (-) à direita de cada opção que queremos remover.
Também queremos ocultar o rótulo do campo Checkboxes. Para fazer isso, clique na guia Advanced (Avançado ) e selecione a opção Hide Label (Ocultar rótulo ).
Em seguida, queremos adicionar um texto descritivo à nossa única opção de caixa de seleção. Para este exemplo, usaremos o texto "I have read and agree to the Terms of Service" (Eu li e concordo com os Termos de Serviço).
Também marcaremos esse campo como Obrigatório para garantir que nossos usuários tenham que marcar essa caixa antes de prosseguir.
A seguir, veremos duas maneiras diferentes de adicionar texto aos seus Termos de Serviço.
A primeira opção criará um texto que, quando clicado, fará o download de um documento de Termos de Serviço. A segunda opção mostrará como adicionar seu texto de termos/isenção de responsabilidade diretamente ao formulário (sem necessidade de download), com formatação especial de texto.
Adição de um link a um documento separado de Termos de Serviço
Agora que temos nossa caixa de seleção e o texto prontos, precisamos de um documento para vincular nosso texto. Salve e saia do formulário ou abra uma nova guia para acessar o painel do WordPress. Clique em Mídia " Adicionar novo para carregar o arquivo dos Termos de serviço na Biblioteca de mídia do WordPress.
Se você carregar um novo documento ou clicar em uma mídia que já tenha carregado, verá um campo para o URL desse item.
Você precisará copiar esse URL e retornar ao construtor de formulários.
Para criar um link para esse documento, você precisará modificar o texto de suas escolhas para incluir algum HTML básico. Para o nosso exemplo, vamos vincular apenas as palavras "Terms of Service" (Termos de Serviço):
I have read and agree to the <a href="https://wpforms.com/wp-content/uploads/2024/07/Terms-of-Service.pdf">Terms of Service</a>
Certifique-se de adicionar esse HTML diretamente ao campo de texto de escolhas.
A maioria dos navegadores, por padrão, abrirá esse link na mesma guia do navegador em que o usuário estiver preenchendo o formulário. Para forçar o documento de Termos de Serviço a abrir em uma nova guia ou janela do navegador, adicionaremos target="_blank" dentro de nossa tag a.
Veja como ficará nosso HTML final:
I have read and agree to the <a href="https://wpforms.com/wp-content/uploads/2024/07/Terms-of-Service.pdf" target="_blank">Terms of Service</a>
Se você verificar a visualização do formulário no lado direito do construtor ou incorporar seu formulário e visualizá-lo no frontend, perceberá que qualquer texto entre as tags HTML será visto como texto vinculado.
A seguir, vamos dar uma olhada em como adicionar o texto dos Termos de Serviço diretamente ao formulário, em vez de criar um link para um documento separado.
Adição do texto dos Termos de Serviço diretamente a um formulário
Para essa opção, começaremos alterando o texto da caixa de seleção para "I have read and agree to the terms of service listed below" (Eu li e concordo com os termos de serviço listados abaixo).
Em seguida, você pode adicionar seus termos ou texto de isenção de responsabilidade à área Description (Descrição ). A área Descrição aceita texto normal e HTML.
Quando o texto da descrição estiver pronto, podemos adicionar uma formatação especial. Para isso, será necessário abrir a seção Advanced (Avançado ). Em seguida, você pode selecionar a opção Enable Disclaimer / Terms of Service Display (Ativar exibição de isenção de responsabilidade / termos de serviço).
Quando essa opção estiver marcada, o texto da descrição será colocado em uma caixa especialmente formatada com uma barra de rolagem vertical.
É isso aí! Esperamos que este tutorial o tenha ajudado a exigir que os usuários concordem com o documento de Termos de Serviço antes de enviar um formulário.
Em seguida, gostaria de personalizar seus e-mails de notificação de formulário? Não deixe de conferir nosso tutorial sobre a configuração de e-mails automáticos de formulários para obter todos os detalhes.