JotForm é um serviço online existente, que permite a criação de formulários Jotform econectá-los com sua conta do Dropbox,...
JotForm é desenvolvida principalmente para os webmasters, mas qualquer pessoa com umaconexão de Internet pode usá-lo, pois...
Figura 3 : Tabelo de preços da Ferramenta JotForm      Na barra lateral esquerda estão os componentes e tudo o que você po...
Figura 5: Aba Estilo do Formulário      Depois de criar e configurar o formulário ao seu gosto poderá publicar em seu webs...
Utilizando a Ferramenta Rápidas, clicar e arrastar para a tela principal as opções desejadas(Nome completo, E-mail e Ender...
Figura 10: Propriedades de um campo no formulárioFigura 10: Itens da Propriedades de um campo no formulário               ...
Figura 11: Formulários com as Propriedades de um campo       Figura 12: Formulários utilizando Captcha                    ...
Agora vamos customizar o nosso formulário, acessar o menu superior e clicar na opção”Temas” e escolher a qual lhe agradar:...
Nosso Formulário de Contato terminado as configurações:                                Figura 15: Formulário de Contato fi...
Figura 13: Customizando o Alertas de Email de um Formulário                                                              P...
Figura 14: Configurando o Autoresponder de Email de um FormulárioFigura 15: Customizando o AutoResponder de Email de um Fo...
Configuraremos o nosso Formulário de Contato para exibir uma mensagem de obrigado, apóso usuário preencher. Clicar na barr...
Obs.: Evitar colocar palavras com acentos na personalização de Agradecimentos, pois oeditor é HTML e só aceita código ASCI...
Publicando o formulário em seu website / blog:      Podemos incorporar o nosso Formulário de Contato em diversos serviços ...
Nesta forma de integração, precisamos escolher a opção “Carregar Arquivo” na caixa de“Ferramentas de Formulário”, para pod...
Figura 24: Tela dos formulários enviados      Na próxima tela, ainda não haverá resultados a serem exibidos, pois precisam...
Caso apareçam as telas de mensagens abaixo, teremos que desabilitar a proteção Anti-PopUp do                              ...
Figura 27: Tela de acesso ao DropBox      Para terminar, iremos incorporar o nosso formulário ao nosso website / blog. Ret...
Figura 29: Tela de incorporação de formulários                            Figura 30: Tela de incorporação de formulários  ...
Além do JotForm, existe outras ferramentas para criação de formulários, tais como:                                Google D...
http://wufoo.com/http://www.contactify.com/                             Página 21
http://www.emailmeform.com/                                            Bibliografia:   JotForm em http://www.jotform.com;...
Upcoming SlideShare
Loading in...5
×

Jotform tutorial - inovaday - setembro 2011

3,082

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,082
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Jotform tutorial - inovaday - setembro 2011"

  1. 1. JotForm é um serviço online existente, que permite a criação de formulários Jotform econectá-los com sua conta do Dropbox, podendo acessar seus arquivos carregadosinstantaneamente 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 deporte pequeno ou médio. Para utilizar o JotForm, acesse http://www.jotform.com/dropbox/ no seu browser, ou em seubuscador de Internet. Figura 1 : Ferramenta JotForm integrada a ferramenta DropBox Página 1
  2. 2. JotForm é desenvolvida principalmente para os webmasters, mas qualquer pessoa com umaconexão de Internet pode usá-lo, pois é um WYSIWYG (What You See Is What You Get), cujatradução remete a algo como "O que você vê é o que você obtém", que significa a capacidade deum programa de computador de permitir que um documento, enquanto manipulado na tela, tenha amesma 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 cadastropara 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, elepermite 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. Aquiestá 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 seuwebsite, 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. 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 noformulá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á configurarseu 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. 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ãoenviadas 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çãode 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. 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 (NomeCompleto), podemos acessar a opção Propriedades do Campos. Figura 10: Propriedades de um campo no formulário Página 5
  6. 6. Figura 10: Propriedades de um campo no formulárioFigura 10: Itens da Propriedades de um campo no formulário Página 6
  7. 7. Figura 11: Formulários com as Propriedades de um campo Figura 12: Formulários utilizando Captcha Página 7
  8. 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 Alinhamentodo Rótulo: Figura 14: Configurando opções de Formulário e Campos Página 8
  9. 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 deEmail ( ) : e adicionar novo email: Figura 12: Configurando Alertas de Email de um Formulário Página 9
  10. 10. Figura 13: Customizando o Alertas de Email de um Formulário Página 10
  11. 11. Figura 14: Configurando o Autoresponder de Email de um FormulárioFigura 15: Customizando o AutoResponder de Email de um Formulário Página 11
  12. 12. Configuraremos o nosso Formulário de Contato para exibir uma mensagem de obrigado, apóso 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. 13. Obs.: Evitar colocar palavras com acentos na personalização de Agradecimentos, pois oeditor é HTML e só aceita código ASCII. Podemos obter o Código Fonte do nosso Formulário de Contato. Clicar na barra de menus ena 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. Clicarna 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. 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" eselecionado o botão "Código Fonte". Agora, é só acessar o Painel do seu Website / Blog e clique na Aba "Postagem”, em seguidaclique 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 colarcó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 / bloge 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 doJotForm ao Dropbox e depois, publicá-lo. Página 14
  15. 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. 16. Figura 24: Tela dos formulários enviados Na próxima tela, ainda não haverá resultados a serem exibidos, pois precisamos habilitar aintegração com o Dropbox. Clique na engrenagem, no canto superior direito da janela, e no menuque surge, clique em “Send Submissions to Dropbox”. Figura 24: Habilitando a integração entre JotForm e Dropbox Página 16
  17. 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 econceder o acesso à conta ao JotForm, clicando em “Allow”. A qualquer momento é possívelrevogar essa permissão. Figura 26: Tela de acesso ao DropBox De volta ao JotForm, a checkbox do Dropbox, uma mensagem informa se o procedimento foibem sucedido. Página 17
  18. 18. Figura 27: Tela de acesso ao DropBox Para terminar, iremos incorporar o nosso formulário ao nosso website / blog. Retornar a telaprincipal dos formulários, clicar em “My Forms”, no topo da página, selecione o formulário e cliqueem “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 redessociais/sistemas de publicação, e tudo o mais. Página 18
  19. 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 arquivosenviados 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 dadoscontido no formulário. Lembrando-se que existem limitações de formatos de arquivos e não podem ser superiores a500 KB. Página 19
  20. 20. Além do JotForm, existe outras ferramentas para criação de formulários, tais como: Google Docs - Formulários Página 20
  21. 21. http://wufoo.com/http://www.contactify.com/ Página 21
  22. 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

×