1. JotForm é um serviço online existente, que permite a criação de formulários Jotform e
conectá-los com sua conta do Dropbox, podendo acessar seus arquivos carregados
instantaneamente no seu computador ou telefone celular.
Ideal para quem precisa montar mecanismos de contato com o seu público de maneira rápida,
simples e eficientes, além de ser uma opção gratuita e muito completa para websites / blogs de
porte pequeno ou médio.
Para utilizar o JotForm, acesse http://www.jotform.com/dropbox/ no seu browser, ou em seu
buscador de Internet.
Figura 1 : Ferramenta JotForm integrada a ferramenta DropBox
Página 1

2. JotForm é desenvolvida principalmente para os webmasters, mas qualquer pessoa com uma
conexão de Internet pode usá-lo, pois é um WYSIWYG (What You See Is What You Get), cuja
tradução remete a algo como "O que você vê é o que você obtém", que significa a capacidade de
um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a
mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa.
Abaixo a tela principal, demostrando a facilidade de uso, além de não precisar fazer cadastro
para começar a usar, sendo ele todo a plataforma de criação do formulário.
Figura 2 : Tela Principal da Ferramenta JotForm para criação de formulário
JotForm suporta todos os padrões web tipos de campo de formulário. Além disso, ele
permite que você use novos campos e intuitivo na sua forma como o selecionador de data Time,
Star Ratings, ou cheques de CAPTCHA. Você poderá criar qualquer tipo de formulário web. Aqui
está uma pequena lista de exemplos de documentos a serem criado:
Formulário de Contato Blog Contato / Pesquisa Calendário de Eventos
RSVP para uma festa ou casamento Pesquisa de Satisfação Folha de tempo
Formulário de Solicitação de emprego Uploader de documento Formulário de Reserva
JotForm é totalmente gratuito para uso simples, podendo criar formas, integrá-los em seu
website, e recolher contribuições de seus usuários sem qualquer custo. Para uso Premium, o valor
é de R $ 9.95/mês.
Página 2

3. Figura 3 : Tabelo de preços da Ferramenta JotForm
Na barra lateral esquerda estão os componentes e tudo o que você pode colocar no
formulário, basta achar o que deseja e arrastar para a “Área de Estilo do Formulário”.
Figura 4: Menu lateral com as Ferramentas de Formulário
No topo, há duas barras de ferramentas, que determina a maneira como você irá configurar
seu formulário. Se deixar marcada a aba “Estilo do Formulário” verá como escolher temas, fontes,
cores do plano de fundo, tamanho do formulário e dos campos.
Página 3

4. Figura 5: Aba Estilo do Formulário
Depois de criar e configurar o formulário ao seu gosto poderá publicar em seu website / blog,
clicando na outra aba, “Configurar e compartilhar” para escolher para onde as mensagens serão
enviadas e como incorporar em seu website / blog, código fonte e até a integração com Facebook.
Figura 6: Aba Estilo do Formulário
Criando um formulário com JotForm
Acessamos o menu lateral, onde exibe o tipo de ferramentas a serem utilizadas na elaboração
de nosso formulário:
Figura 7: Ferramentas de Formulário, Rápidas e de Questões
Figura 8: Ferramentas Avançadas e Ferramentas de Pagamento
Página 4

5. Utilizando a Ferramenta Rápidas, clicar e arrastar para a tela principal as opções desejadas
(Nome completo, E-mail e Endereço):
Figura 9: Formulário utilizando Ferramentas Rápidas
Ao clicar com o botão direito do mouse ou simples clique no campo desejado (Nome
Completo), podemos acessar a opção Propriedades do Campos.
Figura 10: Propriedades de um campo no formulário
Página 5

6. Figura 10: Propriedades de um campo no formulário
Figura 10: Itens da Propriedades de um campo no formulário
Página 6

7. Figura 11: Formulários com as Propriedades de um campo
Figura 12: Formulários utilizando Captcha
Página 7

8. Agora vamos customizar o nosso formulário, acessar o menu superior e clicar na opção
”Temas” e escolher a qual lhe agradar:
Figura 13: Exemplos de temas do JotForm
Caso queira poderá configurar ao tamanho da Largura do formulário, Largura e Alinhamento
do Rótulo:
Figura 14: Configurando opções de Formulário e Campos
Página 8

9. Nosso Formulário de Contato terminado as configurações:
Figura 15: Formulário de Contato final
Configuraremos o nosso Formulário de Contato para quando um usuário preencher,
receberemos em nosso e-mail ou auto responder. Clicar na barra de menus e na opção Alertas de
Email ( ) : e adicionar novo email:
Figura 12: Configurando Alertas de Email de um Formulário
Página 9

10. Figura 13: Customizando o Alertas de Email de um Formulário
Página 10

11. Figura 14: Configurando o Autoresponder de Email de um Formulário
Figura 15: Customizando o AutoResponder de Email de um Formulário
Página 11

12. Configuraremos o nosso Formulário de Contato para exibir uma mensagem de obrigado, após
o usuário preencher. Clicar na barra de menus e na opção Obrigado ( ):
Figura 16: Página padrão de Agradecimento
Figura 17: Inserindo URL para Agradecimento
Figura 18: Mensagem de Agradecimento Personalizada
Página 12

13. Obs.: Evitar colocar palavras com acentos na personalização de Agradecimentos, pois o
editor é HTML e só aceita código ASCII.
Podemos obter o Código Fonte do nosso Formulário de Contato. Clicar na barra de menus e
na opção Código Fonte ( ):
Figura 19: Código Fonte do Formulário
Podemos incorporar o nosso Formulário de Contato em diversos serviços de websites. Clicar
na barra de menus e na opção Incorporar ( ):
Figura 20: Exemplos de websites / blogs que aceitam utilizar o nosso fomulário
Página 13

14. Publicando o formulário em seu website / blog:
Podemos incorporar o nosso Formulário de Contato em diversos serviços de websites,
copiando o código “Script” incorporado, após ter clicado na aba "Configurar e Compartilhar" e
selecionado o botão "Código Fonte".
Agora, é só acessar o Painel do seu Website / Blog e clique na Aba "Postagem”, em seguida
clique na "Sub-aba" e "Editar páginas".
Clicar no Botão "Nova página", na Aba "Editar HTML" dentro do Editor da página e colar
código fonte do formulário e publicar a página.
Integrando o Dropbox ao formulário em seu website / blog:
Figura 21: Página principal do JotForm com Dropbox
O Dropbox é uma solução de sincronia de arquivos com a nuvem com alta disponibilidade,
gratuito até o limite de 10 GB.
Podemos integrar o Dropbox ao JotForm, colocando um formulário em nosso website / blog
e permitir que outras pessoas envie arquivos através do mesmo.
Após criarmos o nosso formulário e ter salvado, somente precisamos autorizar o acesso do
JotForm ao Dropbox e depois, publicá-lo.
Página 14

15. Nesta forma de integração, precisamos escolher a opção “Carregar Arquivo” na caixa de
“Ferramentas de Formulário”, para podermos receber os arquivos e enviá-los ao Dropbox.
Figura 22: Exemplo de formulário para carregar arquivos
Após ter salvado o formulário, clicar no menu principal, no topo, em “My Forms”.
Figura 23: Topo do menu principal do JotForm
Você será levado a uma página contendo seus formulários. Dê um clique simples no recém-
criado, para selecioná-lo, e então clique, na barra de ferramentas, no topo da página, no item
“Submissions”.
Página 15

16. Figura 24: Tela dos formulários enviados
Na próxima tela, ainda não haverá resultados a serem exibidos, pois precisamos habilitar a
integração com o Dropbox. Clique na engrenagem, no canto superior direito da janela, e no menu
que surge, clique em “Send Submissions to Dropbox”.
Figura 24: Habilitando a integração entre JotForm e Dropbox
Página 16

17. Caso apareçam as telas de mensagens abaixo, teremos que desabilitar a proteção Anti-PopUp do
navegador:
Figura 25: Tela de mensagem para desabilitar proteção anti - PopUp
Abrirá uma nova janela com o site do Dropbox aberto, onde teremos que acessar o DB e
conceder o acesso à conta ao JotForm, clicando em “Allow”. A qualquer momento é possível
revogar essa permissão.
Figura 26: Tela de acesso ao DropBox
De volta ao JotForm, a checkbox do Dropbox, uma mensagem informa se o procedimento foi
bem sucedido.
Página 17

18. Figura 27: Tela de acesso ao DropBox
Para terminar, iremos incorporar o nosso formulário ao nosso website / blog. Retornar a tela
principal dos formulários, clicar em “My Forms”, no topo da página, selecione o formulário e clique
em “Edit”.
Figura 28: Tela de edição de formulários enviados
De volta à página de edição, clique, na barra de ferramentas, no ícone “Embed Form”. Você
terá várias opções, das mais simples até outras elaboradas, para realizar a integração com redes
sociais/sistemas de publicação, e tudo o mais.
Página 18

19. Figura 29: Tela de incorporação de formulários
Figura 30: Tela de incorporação de formulários
Escolha o seu e copie o código informado em seu website / blog para receber os arquivos
enviados pelos usuários, sendo que no Dropbox, eles ficam na pasta JotForm/Nome do formulário,
onde cada submissão fica numa pasta própria ( Arquivo, vai um documento em PDF com os dados
contido no formulário.
Lembrando-se que existem limitações de formatos de arquivos e não podem ser superiores a
500 KB.
Página 19

20. Além do JotForm, existe outras ferramentas para criação de formulários, tais como:
Google Docs - Formulários
Página 20

21. http://wufoo.com/
http://www.contactify.com/
Página 21

22. http://www.emailmeform.com/
Bibliografia:
 JotForm em http://www.jotform.com; DropBox em http://www.dropbox.com/;
 Meio Bit em http://meiobit.com/; Google em http://www.google.com.br/;
Dúvidas e Informações sobre esta ferramenta e outras destinadas a
Inovação é só acessar:
http://inovaday.igovsp.net/
Página 22