Como criar um formulário de contato com o JotForm

15 de janeiro de 2014

2 comentários:
A interação entre o autor e o leitor é muito importante em um blog. Neste tutorial estarei ensinando como proceder na criação de um formulário de contato para seu blog utilizando o site JotForm. O JotForm permite a criação de diversos formulários, com modelos variados, desde formulários simples, até formulários mais complexos, com funções diferenciadas.

Dividirei o tutorial em algumas partes para facilitar a compreensão, e melhor organizar o conteúdo da postagem:

  1. Registrando-se no JotForm
  2. Iniciando seu primeiro formulário
  3. Validando os campos
  4. Configurando endereços de emails
  5. Publicando em seu blog
Siga cada passo do tutorial conforme é feito na postagem, para que o formulário funcione corretamente. Vamos ao que interessa!

1. Registrando-se no JotForm

O registro é o passo inicial para a criação de nosso primeiro formulário de contato. Inicialmente, vamos acessar o site do JotForm. No canto superior da página, clique em "Registre-se", e preencha os campos conforme indico na imagem abaixo:


Após o preenchimento de todos os campos do formulário de registro, clique em "Create My Account". O procedimento é bem rápido, não sendo necessário a confirmação por email, como muitos outros sites solicitam.

2. Iniciando seu primeiro formulário

Agora começaremos com o que interessa: a criação do nosso primeiro formulário de contato. Após registrar-se, você será direcionado a esta página. Nela, clique em "Criar formulário", no canto superior esquerdo da tela. Será aberta esta tela:


Neste momento você terá duas escolhas: criar um formulário do 0, começando um formulário em branco, ou então, selecionar um formulário já pronto. Para o tutorial, estarei ensinando como criar um formulário em branco, portanto, fica a escolha de cada um. Então, estarei clicando em "Criar", na sessão do "Formulário em branco".

Você será direcionado a tela de criação do formulário, aonde escolheremos os campos que desejamos que apareçam no formulário. Criarei um formulário básico, com apenas 3 campos: Nome, Email, Mensagem.

Com o que deseja criar no formulário já definido, iremos arrastar os campos para dentro da tela em branco: vá até a sessão "Campos de inquérito", e arraste os campos que deseja em seu formulário até a tela em branco. O meu formulário ficou assim:

O formulário já está com seu formato definido, e adiantando um pouco, já defini também o título para cada campo do formulário.

3. Validando os campos

Validar os campos de um formulário, é definir qual a função de cada campo. Por exemplo: fazer com que o campo email só possibilite o envio do formulário caso um endereço no formato nome@email.com seja inserido no campo. Como o formulário que estou criando é bem pequeno, a validação será rápida, pois apenas 2 campos serão validados: o Nome e Email.

Clique com o botão direito sobre o campo do formulário e selecione "Definições deste campo". 


Vá até a sessão "Validação" e selecione a opção que melhor se adequar ao campo do seu formulário. Como estou validando o campo nome, selecionarei o formato "Alfabética", permitindo apenas letras no campo.


Para validação de email é o mesmo procedimento, bastando selecionar a opção "E-mail", ao invés da opção anterior.

A outras definições que podem ser configuradas no formulário, não estarei citando uma-a-uma ou exemplificando para encurtar o tutorial. Mas não são muito complexas, dando uma mexidinha você aprenderá a usa-las facilmente.

4. Configurando endereços de emails

Uma das grandes vantagens do JotForm é a facilidade na publicação de formulários. Conforme você cria a conta, o mesmo email que é utilizado para a criação de sua conta é associado aos seus formulários. A não ser que queira configurar outro email nos formulários, não haverá necessidade de realizar nenhuma configuração quanto a isso.


Caso queira inserir outro email para receber as respostas do formulário, bastará clicar em "Setup & Embed", e em "Alertas de e-mail". Lá poderá configurar novos endereços de email para seu formulário.

5. Publicando em seu blog

A publicação do formulário deve ser feita em uma página específica do seu blog. Portanto, antes de mais nada, crie uma nova página denominada "Contato", que será aonde iremos inserir o código do nosso formulário.

Com a página criada, precisaremos copiar o código de incorporação do formulário. No painel do JotForm, vamos clicar em "Setup & Embed", e selecionar a opção "Código-fonte". Será aberta esta janela:


Vamos copiar o código que foi gerado e cola-lo no HTML da página de contato. Lembre-se de habilitar a opção "HTML", na página de contato, conforme mostra a imagem abaixo:



Por fim, publique a página, e verá que o formulário de contato está funcionando perfeitamente. Chegamos assim, ao fim de mais um tutorial. Caso tenham dúvidas ou sugestões, publique-as através dos comentários que serão respondidos o mais breve possível.


2 comentários:

  1. COMO FAZER TUDO ISSO? ESTOU PERDIDA, E PRECISO DISSO. VOCE PODE ME AJUDAR?

    ResponderExcluir
    Respostas
    1. O tutorial já está de forma resumida, explicando os mínimos detalhes de como tudo deve ser feito. Infelizmente é o máximo que posso fazer.

      Excluir