Jotform tutorial - inovaday - setembro 2011

JotForm é um serviço online existente, que permite a criação de formulários 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 público de maneira rápida, simples e eficientes, além de ser uma opção gratuita e muito completa para websites / blogs de porte pequeno ou médio.

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

JotForm é desenvolvida principalmente para os webmasters, mas qualquer pessoa com uma

conexão de Internet pode usá-lo, pois é um WYSIWYG (What You See Is What You Get), cuja tradução remete a algo como "O que você vê é o que você obtém", que significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma 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 cadastro para 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, 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 formulário web. Aqui está 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 seu

website, e recolher contribuições de seus usuários sem qualquer custo. Para uso Premium, o valor é de R $ 9.95/mês.

Figura 3 : Tabelo de preços da Ferramenta JotForm

Na barra lateral esquerda estão os componentes e tudo o que você pode colocar no

formulá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á configurar seu 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.

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ão enviadas 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ção de nosso formulário:

Figura 7: Ferramentas de Formulário, Rápidas e de Questões

Figura 8: Ferramentas Avançadas e Ferramentas de Pagamento

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 (Nome Completo), podemos acessar a opção Propriedades do Campos.

Figura 10: Propriedades de um campo no formulário

Figura 10: Propriedades de um campo no formulário

Figura 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:

Figura 13: Exemplos de temas do JotForm

Caso queira poderá configurar ao tamanho da Largura do formulário, Largura e Alinhamento

do Rótulo:

Figura 14: Configurando opções de Formulário e Campos

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 de

Email ( ) : e adicionar novo email:

Figura 12: Configurando Alertas de Email de um Formulário

Figura 13: Customizando o Alertas de Email de um Formulário

Figura 14: Configurando o Autoresponder de Email de um Formulário

Figura 15: Customizando o AutoResponder de Email de um Formulário

Configuraremos o nosso Formulário de Contato para exibir uma mensagem de obrigado, após

o 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

Obs.: Evitar colocar palavras com acentos na personalização de Agradecimentos, pois o editor é HTML e só aceita código ASCII.

Podemos obter o Código Fonte do nosso Formulário de Contato. Clicar na barra de menus e

na 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. Clicar

na barra de menus e na opção Incorporar ( ):

Figura 20: Exemplos de websites / blogs que aceitam utilizar o nosso fomulário

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" e selecionado o botão "Código Fonte".

Agora, é só acessar o Painel do seu Website / Blog e clique na Aba "Postagem”, em seguida

clique 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 colar

có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 / blog

e 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 do

JotForm ao Dropbox e depois, publicá-lo.

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”.

Figura 24: Tela dos formulários enviados

Na próxima tela, ainda não haverá resultados a serem exibidos, pois precisamos habilitar a

integração 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 integração entre JotForm e Dropbox

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 e

conceder o acesso à conta ao JotForm, clicando em “Allow”. A qualquer momento é possível

revogar essa permissão.

Figura 26: Tela de acesso ao DropBox

De volta ao JotForm, a checkbox do Dropbox, uma mensagem informa se o procedimento foi bem sucedido.

Figura 27: Tela de acesso ao DropBox

Para terminar, iremos incorporar o nosso formulário ao nosso website / blog. Retornar a tela

principal dos formulários, clicar em “My Forms”, no topo da página, selecione o formulário e clique em “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 redes sociais/sistemas de publicação, e tudo o mais.

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 arquivos

enviados 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 dados

contido no formulário. Lembrando-se que existem limitações de formatos de arquivos e não podem ser superiores a

500 KB.

Além do JotForm, existe outras ferramentas para criação de formulários, tais como:

Google Docs - Formulários

http://wufoo.com/

http://www.contactify.com/

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/

Jotform tutorial - inovaday - setembro 2011

Education

Transcript of Jotform tutorial - inovaday - setembro 2011