Criando uma Caixa de Texto Rolável para Termos e Condições

Última atualização: 3 de dezembro de 2021

ATUALIZAÇÃO: Agora temos esses dois widgets que fazem a mesma coisa que ensinamos neste guia. Não deixe de experimentar essas alternativas mais simples!

1. Termos Curtos Roláveis

2. Termos e Condições

A maioria dos formulários (se não todos) lidam com informações sensíveis dos usuários. Como um gestor responsável, você sabe da importncia de solicitar aos seus usuários a aceitação dos termos e condições antes de colher suas informações. É importante que ambas as partes entendam plenamente todas as condições colocadas antes de celebrarem um acordo, e que você tenha feito o seu melhor para prover o seu usuário com todas as informações.

Em muitos casos, um link para os “Termos do Contrato” já é o suficiente, porém um gestor exigente cuidará de exibir seus Termos e Condições na íntegra no próprio formulário. Para fazê-lo, você precisará incluir um campo de texto não-editável que o seu usuário possa percorrer. Confira o passo-a-passo a seguir:

1. No seu Criador de Formulários, clique em ADICIONAR ELEMENTO e adicione um campo de PARÁGRAFO ao seu formulário.

Criando uma Caixa de Texto Rolável para Termos e Condições Image-1

2. Selecione o campo e clique no ícone EDITAR TEXTO (lápis) para editar seu conteúdo.

Criando uma Caixa de Texto Rolável para Termos e Condições Image-2

3. Nas ferramentas de edição, clique no ícone <> para abrir seu CÓDIGO FONTE.

Criando uma Caixa de Texto Rolável para Termos e Condições Image-3

4. Cole os seus Termos e Condições como indicado na imagem abaixo. Você deve encapsular seu texto entre delimitadores div com uma classe CSS. Em nosso exemplo, utilizamos class=”termsx”

Criando uma Caixa de Texto Rolável para Termos e Condições Image-4

5. Em seguida, clique no ícone azul de rolo de tinta para abrir o assistente DESIGNER DE FORMULÁRIOS. Clique na aba ESTILOS e, na seção “Adicionar código CSS”, você deve colar o seguinte código CSS. Sinta-se à vontade para ajustar os valores abaixo como quiser (por exemplo, alterando altura ou largura).

.termsx {

overflow-y: scroll;

height: 300px;

width: 100%;

border: 1px solid #DDD;

padding: 10px;

}

Criando uma Caixa de Texto Rolável para Termos e Condições Image-5

Guia relacionado: Como Inserir Códigos CSS Personalizados

Veja um exemplo de formulário com este recurso implementado: https://www.jotform.com/72161879190967

Comentários e sugestões são bem-vindos abaixo. Se você tem uma pergunta, escreva para que o Fórum de Suporte possa ajudar você.

Contatar o Suporte:

Nossa equipe de suporte ao cliente está disponível 24 hrs e nosso tempo de resposta está entre uma e duas horas.
Nossa equipe pode ser contatada através dos links:

Fórum de Suporte: https://www.jotform.com/answers/

Contate o Suporte da Jotform: https://www.jotform.com/contact/