O tutorial fica dividido por partes, para facilitar a compreensão, e melhor organizar o conteúdo da postagem:
- Registrando-se no JotForm
- Iniciando seu primeiro formulário
- Validando os campos
- Configurar endereços de emails
- Publicar no seu blog
Siga cada passo do tutorial conforme é feito na postagem, para que o formulário funcione correctamente. Vamos ao que interessa!
1. REGISTRANDO-SE NO JOTFORM
O registro é o passo inicial para a criação de nosso primeiro formulário de contacto. 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 contacto. Após registrar-se, será direccionado 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, seleccionar 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á direccionado 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 exemplo@email.com seja inserido no campo. Como o formulário que estou a criar é 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 seleccione "Definições deste campo".
Vá até a sessão "Validação" e seleccione a opção que melhor se adequar ao campo do seu formulário. Como estou a validar o campo nome, seleccionarei o formato "Alfabética", permitindo apenas letras no campo.
Para validação de email é o mesmo procedimento, basta seleccionar 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 mexida aprenderá a usá-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 da 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, basta 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 "Contacto", que será aonde iremos inserir o código do nosso formulário.
Com a página criada, precisamos de copiar o código de incorporação do formulário. No painel do JotForm, vamos clicar em "Setup & Embed", e seleccionar 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 contacto. Lembre-se de habilitar a opção "HTML", na página de contacto, conforme mostra a imagem abaixo:
Por fim, publique a página, e verá que o formulário de contacto está a funcionar 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.