All for Joomla All for Webmasters

Fazendo formulário no JotForm

Eu descobri um ótimo site para se fazer formulários! É o JotForm! Com vários recursos, seu formulário vai ter todo um toque profissional.

1. Acesse o site do JotForm.

2. No menu superior, do lado do logotipo do site, clique em Meus formulários.

3. Na nova página, clique em Novo Formulário.

4. Na janelinha que vai se abrir, selecione a opção Formulário em Branco e clique em Próximo.

5. Agora, mãos à obra do seu formulário! Se quiser um item que está no menu, você vai clicar, não soltar e arrastá-lo até a parte em branco que fica do lado esquerdo do seu painel.

Lembrando que você tem que arrastar sempre um pouco acima do botão Enviar Formulário. Você vai entender o que eu estou falando a partir do segundo campo que você for adicionar.

cabeçalho

Quando quiser um título para separar cada etapa do formulário ou para simplesmente colocar no topo do formulário, selecione a ferramenta Cabeçalho no menu.

funções básicas

Caixa de Texto: caixa de texto simples, para campos pequenos. Exemplo: links de sites e blogs.

Área de texto: um espaço maior para textos. Exemplo: para escrever mensagens.

Menu suspenso: menu dropdown. Exemplo: para datas de nascimento, selecionar seu emprego ou assuntos específicos.

Botão Radial: aquele botão redondo para fazer uma única escolha. Exemplo: usado em enquetes.

Caixa de seleção: aquele botão quadrado para fazer mais de uma escolha. Exemplo: também usado em enquetes.

Carregar arquivo: quer que as pessoas também possam enviar arquivos pelo formulário? Use essa ferramenta.

Botão de envio: botão de enviar formulário. Não precisa, afinal, quando você inicia um formulário, o botão já aparece ali embaixo, a partir do momento em que você coloca qualquer coisa no formulário.

funções rápidas

Para funções rápidas, clique em Ferramentas rápidas. Nesta ferramenta já estão contidos alguns campos prontos, como Telefone, Nome completo, E-mail, Data de Nascimento, etc, que são os campos mais utilizados em formulários. É só clicar, arrastar para a parte branca do painel, não soltar e pronto.

funções avançadas

Em Ferramentas Avançadas, existem campos para colagem específica de HTML, campos de senha, data e hora e o famoso Captcha, que é o antispam. Eu aconselho usar o captcha nos formulários.

Existem dois tipos de captcha. O captcha comum:

E o recaptcha:

Para ter o recaptcha: quando arrastar a função Captcha para a parte em branco do seu painel, vai surgir uma barra em cima do seu formulário com a seguinte opção:

Clique nessa opção!

funções de pagamento

Em Ferramentas de Pagamento, caso seu formulário seja de venda, você pode acoplar a sua conta no Paypal ou em qualquer outro site de pagamentos via web com o seu formulário. São várias opções! Quando você arrasta o Paypal (exemplo) para o formulário, automaticamente se abre uma janela para configurar a função com a sua conta no Paypal.

para um campo do formulário ser requerido/obrigatório

Arraste o campo que você quer para a parte em branco do painel. Logo, vai aparecer uma barra em cima do formulário que você está criando com a opção: Requerido.

Clique nessa opção!

para ter uma explicação sobre o campo

Às vezes, em algum campo que você for fazer, você vai necessitar elaborar uma explicação, para o preenchedor da ficha entender o que você está querendo propor. Quando arrastar um campo para a parte branca do painel, vai aparecer sempre a opção Sub Label.

Clique em Sub Label e logo vai aparecer um campinho para você digitar a explicação. Digite e aperte OK.

A explicação vai ficar assim:

Lembrando que não são todos os campos que tem essa função, beleza?

personalizando seu formulário

Você pode editar a fonte, as cores e até o tema do seu formulário!

1. Clique na aba Estilo do formulário.

2. Vai aparecer sobre o formulário um menu com várias opções. Selecione a que você desejar e divirta-se!

Lembrando que, antes de começar a editar, clique em uma parte vazia do seu painel branco em que você está o criando formulário. Exemplo:

Porque? Porque com nenhum campo selecionado, você vai editar todo o formulário de uma vez. Com um campo seleciona, você vai ter que editar campo por campo, o que é mais cansativo. A não ser que você aplique um tema.

publicando seu formulário em seu blog

Primeiro, salve o formulário.

Se o ícone de disquete estiver apagado, como no caso da imagem, não precisa nem clicar. O formulário tem a opção de salvar automaticamente. Caso aconteça alguma catástrofe com seu computador e ele desligue sozinho, você não perdeu nada!

Não esqueça de editar o título do seu formulário:

Passe o mouse sobre o título, clique e edite com o nome que quiser.

Bem, agora vamos publicar o formulário.

1. Clique na aba Setup & Embed.

2. Vamos editar passo à passo. No menu que apareceu sobre o formulário, clique em Alertas de Email.

3. Clique em Notification.

4. Edite o Assunto, mudando para o que você quer.

Na parte de baixo da janela, tem as opções de e-mail e remetente, em que você pode editar essas opções de quem te mandou o e-mail. E para testar o formulário (para ver se ele realmente está enviando as fichas), selecione Teste de E-mail.

Para resposta automática (assim que a pessoa enviar o formulário, ela vai receber um e-mail seu de volta), clique em: Adicionar novo e-mail.

Selecione a opção: E-mail Autoresponder. Clique em Próximo e edite da forma que deseja a próxima etapa. Depois, clique em Próximo de novo.

Depois de tudo isso, clique em Finalizado e saia da janela.

obrigado

A opção “Obrigado” é para redirecionar a pessoa para algum site assim que ela preencheu o formulário.

Clique em Obrigado. Você pode escolher a Página Padrão de Agradecimento, que vai ser uma página do próprio JotForm. Caso criou uma página para o redirecionamento dos seus visitantes, selecione URL Personalizada e clique em Próximo.

No próximo passo, cole o link da página que você criou para redirecionamento e clique em Finalizado.

publicar formulário

Agora sim, vamos publicar seu formulário!

1. Clique em Incorporar Formulário.

2. Vai abrir uma janelinha, né? Selecione a opção Iframe.

3. O código vai ser algo parecido com isso:

<iframe allowtransparency="true" src="http://form.jotform.com/form/20305133517" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no">
</iframe>

4. Depois, clique em Fechar.

O link do seu formulário é o que está entre src=” e ” frameborder, caso queira apenas linká-lo numa página.

Pronto! Você criou o seu formulário na web com sucesso.