Pgina 1

J ot For m um servio online existente, que permite a criao de formulrios 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 pblico de maneira rpida,
simples e eficientes, alm de ser uma opo gratuita e muito completa para websites / blogs de
porte pequeno ou mdio.
Para utilizar o J ot For m, acesse http://www.jotform.com/dropbox/ no seu browser, ou em seu
buscador de Internet.

Figura 1 : Ferramenta JotForm integrada a ferramenta DropBox
Pgina 2


J ot For m desenvolvida principalmente para os webmasters, mas qualquer pessoa com uma
conexo de Internet pode us-lo, pois um WYSIWYG (What You See Is What You Get), cuja
traduo remete a algo como " O que voc v o que voc obtm" , que significa a capacidade de
um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a
mesma aparncia de sua utilizao, usualmente sendo considerada final a forma impressa.
Abaixo a tela principal, demostrando a facilidade de uso, alm de no precisar fazer cadastro
para comear a usar, sendo ele todo a plataforma de criao do formulrio.

Figura 2 : Tela Principal da Ferramenta JotForm para criao de formulrio

J ot For m suporta todos os padres web tipos de campo de formulrio. Alm 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 formulrio web. Aqui
est uma pequena lista de exemplos de documentos a serem criado:
Formulrio de Contato Blog Contato / Pesquisa Calendrio de Eventos
RSVP para uma festa ou casamento Pesquisa de Satisfao Folha de tempo
Formulrio de Solicitao de emprego Uploader de documento Formulrio de Reserva

J ot For m totalmente gratuito para uso simples, podendo criar formas, integr-los em seu
website, e recolher contribuies de seus usurios sem qualquer custo. Para uso Premium, o valor
de R $ 9.95/ms.
Pgina 3


Figura 3 : Tabelo de preos da Ferramenta JotForm

Na barra lateral esquerda esto os componentes e tudo o que voc pode colocar no
formulrio, basta achar o que deseja e arrastar para a rea de Estilo do Formulrio .

Figura 4: Menu lateral com as Ferramentas de Formulrio

No topo, h duas barras de ferramentas, que determina a maneira como voc ir configurar
seu formulrio. Se deixar marcada a aba Estilo do Formulrio ver como escolher temas, fontes,
cores do plano de fundo, tamanho do formulrio e dos campos.
Pgina 4


Figura 5: Aba Estilo do Formulrio

Depois de criar e configurar o formulrio ao seu gosto poder publicar em seu website / blog,
clicando na outra aba, Configurar e compartilhar para escolher para onde as mensagens sero
enviadas e como incorporar em seu website / blog, cdigo fonte e at a integrao com Facebook.

Figura 6: Aba Estilo do Formulrio

Criando um formulrio com JotForm
Acessamos o menu lateral, onde exibe o tipo de ferramentas a serem utilizadas na elaborao
de nosso formulrio:

Figura 7: Ferramentas de Formulrio, Rpidas e de Questes

Figura 8: Ferramentas Avanadas e Ferramentas de Pagamento
Pgina 5


Utilizando a Ferramenta Rpidas, clicar e arrastar para a tela principal as opes desejadas
(Nome completo, E-mail e Endereo):

Figura 9: Formulrio utilizando Ferramentas Rpidas

Ao clicar com o boto direito do mouse ou simples clique no campo desejado (Nome
Completo), podemos acessar a opo Propriedades do Campos.

Figura 10: Propriedades de um campo no formulrio
Pgina 6


Figura 10: Propriedades de um campo no formulrio


Figura 10: Itens da Propriedades de um campo no formulrio
Pgina 7


Figura 11: Formulrios com as Propriedades de um campo


Figura 12: Formulrios utilizando Captcha

Pgina 8

Agora vamos customizar o nosso formulrio, acessar o menu superior e clicar na opo
Temas e escolher a qual lhe agradar:


Figura 13: Exemplos de temas do JotForm

Caso queira poder configurar ao tamanho da Largura do formulrio, Largura e Alinhamento
do Rtulo:

Figura 14: Configurando opes de Formulrio e Campos




Pgina 9


Nosso Formulrio de Contato terminado as configuraes:

Figura 15: Formulrio de Contato final

Configuraremos o nosso Formulrio de Contato para quando um usurio preencher,
receberemos em nosso e-mail ou auto responder. Clicar na barra de menus e na opo Alertas de
Email ( ) : e adicionar novo email:

Figura 12: Configurando Alertas de Email de um Formulrio

Pgina 10


Figura 13: Customizando o Alertas de Email de um Formulrio
Pgina 11


Figura 14: Configurando o Autoresponder de Email de um Formulrio


Figura 15: Customizando o AutoResponder de Email de um Formulrio
Pgina 12

Configuraremos o nosso Formulrio de Contato para exibir uma mensagem de obrigado, aps
o usurio preencher. Clicar na barra de menus e na opo Obrigado ( ) :

Figura 16: Pgina padro de Agradecimento


Figura 17: Inserindo URL para Agradecimento


Figura 18: Mensagem de Agradecimento Personalizada
Pgina 13

Obs.: Evitar colocar palavras com acentos na personalizao de Agradecimentos, pois o
editor HTML e s aceita cdigo ASCII.
Podemos obter o Cdigo Fonte do nosso Formulrio de Contato. Clicar na barra de menus e
na opo Cdigo Fonte ( ):

Figura 19: Cdigo Fonte do Formulrio

Podemos incorporar o nosso Formulrio de Contato em diversos servios de websites. Clicar
na barra de menus e na opo Incorporar ( ):

Figura 20: Exemplos de websites / blogs que aceitam utilizar o nosso fomulrio
Pgina 14


Publicando o formulrio em seu website / blog:

Podemos incorporar o nosso Formulrio de Contato em diversos servios de websites,
copiando o cdigo Script incorporado, aps ter clicado na aba " Configurar e Compartilhar" e
selecionado o boto " Cdigo Fonte" .
Agora, s acessar o Painel do seu Website / Blog e clique na Aba " Postagem , em seguida
clique na " Sub-aba" e " Editar pginas" .
Clicar no Boto " Nova pgina" , na Aba " Editar HTML" dentro do Editor da pgina e colar
cdigo fonte do formulrio e publicar a pgina.

Integrando o Dropbox ao formulrio em seu website / blog:


Figura 21: Pgina principal do JotForm com Dropbox

O Dr opbox uma soluo de sincronia de arquivos com a nuvem com alta disponibilidade,
gratuito at o limite de 10 GB.
Podemos integrar o Dr opbox ao J ot For m, colocando um formulrio em nosso website / blog
e permitir que outras pessoas envie arquivos atravs do mesmo.
Aps criarmos o nosso formulrio e ter salvado, somente precisamos autorizar o acesso do
J ot For m ao Dr opbox e depois, public-lo.
Pgina 15

Nesta forma de integrao, precisamos escolher a opo Carregar Arquivo na caixa de
Ferramentas de Formulrio , para podermos receber os arquivos e envi-los ao Dropbox .

Figura 22: Exemplo de formulrio para carregar arquivos

Aps ter salvado o formulrio, clicar no menu principal, no topo, em My Forms .

Figura 23: Topo do menu principal do JotForm

Voc ser levado a uma pgina contendo seus formulrios. D um clique simples no recm-
criado, para selecion-lo, e ento clique, na barra de ferramentas, no topo da pgina, no item
Submissions .
Pgina 16


Figura 24: Tela dos formulrios enviados

Na prxima tela, ainda no haver resultados a serem exibidos, pois precisamos habilitar a
integrao com o Dr opbox . Clique na engrenagem, no canto superior direito da janela, e no menu
que surge, clique em Send Submissions to Dropbox .

Figura 24: Habilitando a integrao entre JotForm e Dropbox
Pgina 17

Caso apaream as telas de mensagens abaixo, teremos que desabilitar a proteo Anti-PopUp do
navegador:

Figura 25: Tela de mensagem para desabilitar proteo anti - PopUp

Abrir uma nova janela com o site do Dr opbox aberto, onde teremos que acessar o DB e
conceder o acesso conta ao J ot For m, cl icando em Allow . A qualquer momento possvel
revogar essa permisso.

Figura 26: Tela de acesso ao DropBox
De volta ao JotForm, a checkbox do Dropbox, uma mensagem informa se o procedimento foi
bem sucedido.

Pgina 18


Figura 27: Tela de acesso ao DropBox

Para terminar, iremos incorporar o nosso formulrio ao nosso website / blog. Retornar a tela
principal dos formulrios, clicar em My Forms , no topo da pgina, selecione o formulrio e clique
em Edit .


Figura 28: Tela de edio de formulrios enviados

De volta pgina de edio, clique, na barra de ferramentas, no cone Embed Form . Voc
ter vrias opes, das mais simples at outras elaboradas, para realizar a integrao com redes
sociais/sistemas de publicao, e tudo o mais.
Pgina 19


Figura 29: Tela de incorporao de formulrios


Figura 30: Tela de incorporao de formulrios

Escolha o seu e copie o cdigo informado em seu website / blog para receber os arquivos
enviados pelos usurios, sendo que no Dropbox, eles ficam na pasta JotForm/Nome do formulrio,
onde cada submisso fica numa pasta prpria ( Arquivo, vai um documento em PDF com os dados
contido no formulrio.
Lembrando-se que existem limitaes de formatos de arquivos e no podem ser superiores a
500 KB.

Pgina 20

Alm do JotForm, existe outras ferramentas para criao de formulrios, tais como:
Google Docs - Formulrios


Pgina 21

http://wufoo.com/

http://www.contactify.com/


Pgina 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/;
Dvi das e I nf or ma es sobr e est a f er r ament a e out r as dest i nadas a
I nova o s ac essar :
http://inovaday.igovsp.net/