O documento fornece instruções passo-a-passo para criar um formulário web usando a ferramenta JotForm sem necessidade de conhecimento de programação. Ele explica como se registrar no JotForm, adicionar campos como caixas de texto e áreas de texto, configurar validações e envio de e-mail, e gerar o código do formulário.

1. http://www.usandobits.com.br Página 1

2. Muitos dos contratempos que encontramos, está na criação de um formulário web.
Conhecimentos em PHP e HTML são necessários para esta finalidade, porém existem ferramentas que podem
auxiliar nesta criação, sem conhecimento algum em programação.
Nós da Usando Bits apresentamos a ferramenta JotForm que tem o principal propósito auxiliar a criação de
formulários, e ao final, gera um código que poderá ser usado em qualquer site.
A primeira coisa que recomendamos é, criação de um cadastro, apesar de não ser necessário, mas quando criamos o
cadastro, é possível em uma data futura editar os formulários criados anteriormente.
Para se registrar vá nos passos na pagina inicial, na parte inferior a direita, e clique em criar uma conta.
Preencha as informações e certifique-se que todas as opções estão com a checagem ao lado e a confirmação de que
o nome de usuário, email e senhas estão ok.
Depois é só clicar em criar minha conta, e verificar no seu email cadastrado a confirmação do cadastro.
Tudo pronto, iniciaremos a criação do nosso primeiro formulário.
http://www.usandobits.com.br Página 2

3. Vamos iniciar nosso formulário com um cabeçalho
Basta clicar em cabeçalho que será gerado um campo para preencher o conteúdo, No nosso caso, vamos fazer um
formulário de contato para o site Usando Bits.
Preenchemos o cabeçalho do nosso formulário. Basta clicar no campo indicado e escrever a solicitação.
Agora vamos criar os campos que serão preenchidos por nosso visitante.
Vamos clicar em Caixa de Texto e preenchemos.
Vamos criar dois campos, um solicitando e-mail e outro o nome. Para isso basta clicar duas vezes
Agora nosso formulário está assim
http://www.usandobits.com.br Página 3

4. Note que em cada campo criado há dois botões superiores, uma engrenagem e um x.
A engrenagem são as propriedades daquele campo
Ao clicar verificamos as propriedades. Neste caso estamos
configurando a caixa de e-mail.
Na opção de Requerido, obrigamos ao usuário que preencha a
informação, tornando assim uma informação obrigatória para ser
preenchida.
Em Subir, organizamos a ordem dos campos. Sendo assim, em
Descer tem a mesma função.
Quando escolhemos a opção Encolher,
Tornamos o nosso formulário com uma estrutura diferente. Onde as informações que devem ser preenchidas ficam
acima e a caixa embaixo.
A propriedade de Duplicar faz com que o campo seja copiado.
E por sua vez, a propriedade Apagar, apaga aquele campo criado. Também é possível excluir o campo clicando sobre
o x ao lado da engrenagem.
Outro item bastante importante na criação de formulário é a Validação, pois precisamos ter a certeza que o que será
enviado, será uma informação valida. Então vamos validar o campo de e-mail
http://www.usandobits.com.br Página 4

5. No menu principal encontramos vários itens.
Primeiro, vamos clicar no campo de e-mail e depois escolhemos o botão Validação.
Nesta opção encontramos vários itens.
No nosso caso, vamos escolher Email, mas dependendo do nosso formulário, podemos optar entre validação
Alfanumérica, alfabética e apenas Numérico.
No nosso formulário, agora falta criarmos um campo de mensagem. Então nas ferramentas escolhemos Area de
Texto.
http://www.usandobits.com.br Página 5

6. Para finalizar, vamos criar o botão de envio e configurar para que as mensagens vão diretamente para nosso e-mail.
Clicamos na opção Botão de Envio, e posicionamos no final do nosso formulário.
Vamos verificar as propriedades, clicamos na imagem da engrenagem, e vamos em mostrar propriedades.
Nesta parte, podemos configurar duas coisas, a mensagem final, após o envio do formulário, e o e-mail onde a
mensagem será enviada.
Bom, vamos primeiro configurar o e-mail, escolhemos E-Mail Settings.
Ao clicar em e-mail Settings, abre no menu principal uma opção para adicionar um e-mail
http://www.usandobits.com.br Página 6

7. Clicamos sobre o botão Adicionar novo e-mail
No assistente de e-mail temos duas opções.
Em Email de Notificação, a gente pode configurar um e-mail para onde o formulário será enviado.
E em email Autoresponder, configuramos uma mensagem automática para a pessoa que preencher o nosso
formulário.
No nosso caso, o objetivo é que a gente receba a mensagem, então deixamos a primeira opção marcada e clicamos
no botão próximo.
Aqui neste ponto, basicamente tudo já está configurado, nós só precisamos inserir o Destinatário de e-mail e clicar
em próximo.
http://www.usandobits.com.br Página 7

8. Nessa próxima tela, vamos configurar a formatação do e-mail que iremos receber
http://www.usandobits.com.br Página 8

9. Em Assunto, configuramos qual vai ser o assunto da mensagem que receberemos. Escolhi deixar apenas como
Contato Recebido do site para facilitar a identificação na caixa de mensagem.
Na configuração das informações, a gente pode configurar mais algumas coisas, deixar algumas informações em
negrito, criar tabelas, ou solicitar o IP da pessoa que nos mandou a mensagem.
Aqui, neste momento, vou apenas retirar a imagem do JotForm clicando sobre ela e apertando delete.
Então a configuração ficará assim
Basta clicar em Finalizar.
Pronto, agora para realmente concluir nosso formulário, vamos personalizar a mensagem de confirmação de envio
que o usuário verá.
Então clicamos na imagem da engrenagem no botão de envio e escolhemos Mostrar Propriedades.
http://www.usandobits.com.br Página 9

10. Agora vamos escolher o botão Thank You Page Setting
Neste momento, podemos configurar duas formas de envio de agradecimento, ou podemos redirecionar nosso
usuário a uma página do nosso site.
Vamos personalizar nossa página de agradecimento, então marcamos a terceira opção e clicamos em Próximo.
http://www.usandobits.com.br Página 10

11. Aqui a mensagem está em Inglês, então vamos traduzir e clicamos em finalizar.
Formulário concluído, agora basta a gente gerar o código para aplicar ao nosso site.
No menu principal, clicamos em Código Fonte e será mostrado uma linha de código.
Aqui basta clicar sobre o código e copiar. Pode usar o atalho Ctrl+C ou clicar com o botão direito do mouse e
escolher a opção copiar.
Vou aplicar este código na minha página de contatos, no site Usando Bits.
Como utilizo o Wordpress no site, vou apenas escolher a opção HTML e colar o código gerado pelo JotForm
http://www.usandobits.com.br Página 11

12. Agora vamos testar nosso formulário, para ver se está tudo ok.
No site, no formulário de contato, vamos preencher as informações e enviar.
Verificando nosso e-mail, a configuração da mensagem recebida fica assim.
http://www.usandobits.com.br Página 12

13. Bom é isso pessoal, caso prefiram ver este tutorial em vídeo, acesse nosso canal no Youtube.
Referencias:
Site Jotform: http://www.jotformz.com/
http://www.usandobits.com.br Página 13