Your SlideShare is downloading. ×
Jotform  tutorial - inovaday - setembro 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jotform tutorial - inovaday - setembro 2011

2,970
views

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
2,970
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. Figura 10: Propriedades de um campo no formulárioFigura 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 Alinhamentodo 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 deEmail ( ) : 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árioFigura 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ó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. 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. 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. 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 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. 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. 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. 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. 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

×