Top Banner

of 22

Jotform Tutorial

Oct 16, 2015

Download

Documents

fach26
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • 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/