Jotform tutorial - inovaday - setembro 2011

  • 2,877 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,877
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
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