Pgina 1
JotForm 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 JotForm, 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
JotForm 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
JotForm 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
JotForm 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 Dropbox uma soluo 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 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
JotForm ao Dropbox 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 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 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 Dropbox aberto, onde teremos que acessar o DB e
conceder o acesso conta ao JotForm, clicando 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/;
Dvidas e Informaes sobre esta ferramenta e outras destinadas a
Inovao s acessar:
http://inovaday.igovsp.net/