como criar formulário de contato

http://www.usandobits.com.br Página 1


Muitos dos contratempos que encontramos, está na criação de um formulário web.

Conhecimentos em PHP e HTML são necessários para esta finalidade, porém existem ferramentas que podem

auxiliar nesta criação, sem conhecimento algum em programação.

Nós da Usando Bits apresentamos a ferramenta JotForm que tem o principal propósito auxiliar a criação de

formulários, e ao final, gera um código que poderá ser usado em qualquer site.

A primeira coisa que recomendamos é, criação de um cadastro, apesar de não ser necessário, mas quando criamos o

cadastro, é possível em uma data futura editar os formulários criados anteriormente.

Para se registrar vá nos passos na pagina inicial, na parte inferior a direita, e clique em criar uma conta.

Preencha as informações e certifique-se que todas as opções estão com a checagem ao lado e a confirmação de que

o nome de usuário, email e senhas estão ok.

Depois é só clicar em criar minha conta, e verificar no seu email cadastrado a confirmação do cadastro.

Tudo pronto, iniciaremos a criação do nosso primeiro formulário.

http://www.usandobits.com.br/


Vamos iniciar nosso formulário com um cabeçalho

Basta clicar em cabeçalho que será gerado um campo para preencher o conteúdo, No nosso caso, vamos fazer um

formulário de contato para o site Usando Bits.

Preenchemos o cabeçalho do nosso formulário. Basta clicar no campo indicado e escrever a solicitação.

Agora vamos criar os campos que serão preenchidos por nosso visitante.

Vamos clicar em Caixa de Texto e preenchemos.

Vamos criar dois campos, um solicitando e-mail e outro o nome. Para isso basta clicar duas vezes

Agora nosso formulário está assim



Note que em cada campo criado há dois botões superiores, uma engrenagem e um x.

A engrenagem são as propriedades daquele campo

Ao clicar verificamos as propriedades. Neste caso estamos

configurando a caixa de e-mail.

Na opção de Requerido, obrigamos ao usuário que preencha a

informação, tornando assim uma informação obrigatória para ser

preenchida.

Em Subir, organizamos a ordem dos campos. Sendo assim, em

Descer tem a mesma função.

Quando escolhemos a opção Encolher,

Tornamos o nosso formulário com uma estrutura diferente. Onde as informações que devem ser preenchidas ficam

acima e a caixa embaixo.

A propriedade de Duplicar faz com que o campo seja copiado.

E por sua vez, a propriedade Apagar, apaga aquele campo criado. Também é possível excluir o campo clicando sobre

o x ao lado da engrenagem.

Outro item bastante importante na criação de formulário é a Validação, pois precisamos ter a certeza que o que será

enviado, será uma informação valida. Então vamos validar o campo de e-mail


No menu principal encontramos vários itens.

Primeiro, vamos clicar no campo de e-mail e depois escolhemos o botão Validação.

Nesta opção encontramos vários itens.

No nosso caso, vamos escolher Email, mas dependendo do nosso formulário, podemos optar entre validação

Alfanumérica, alfabética e apenas Numérico.

No nosso formulário, agora falta criarmos um campo de mensagem. Então nas ferramentas escolhemos Area de

Texto.


Para finalizar, vamos criar o botão de envio e configurar para que as mensagens vão diretamente para nosso e-mail.

Clicamos na opção Botão de Envio, e posicionamos no final do nosso formulário.

Vamos verificar as propriedades, clicamos na imagem da engrenagem, e vamos em mostrar propriedades.

Nesta parte, podemos configurar duas coisas, a mensagem final, após o envio do formulário, e o e-mail onde a

mensagem será enviada.

Bom, vamos primeiro configurar o e-mail, escolhemos E-Mail Settings.

Ao clicar em e-mail Settings, abre no menu principal uma opção para adicionar um e-mail


Clicamos sobre o botão Adicionar novo e-mail

No assistente de e-mail temos duas opções.

Em Email de Notificação, a gente pode configurar um e-mail para onde o formulário será enviado.

E em email Autoresponder, configuramos uma mensagem automática para a pessoa que preencher o nosso

formulário.

No nosso caso, o objetivo é que a gente receba a mensagem, então deixamos a primeira opção marcada e clicamos

no botão próximo.

Aqui neste ponto, basicamente tudo já está configurado, nós só precisamos inserir o Destinatário de e-mail e clicar

em próximo.


Nessa próxima tela, vamos configurar a formatação do e-mail que iremos receber


Em Assunto, configuramos qual vai ser o assunto da mensagem que receberemos. Escolhi deixar apenas como

Contato Recebido do site para facilitar a identificação na caixa de mensagem.

Na configuração das informações, a gente pode configurar mais algumas coisas, deixar algumas informações em

negrito, criar tabelas, ou solicitar o IP da pessoa que nos mandou a mensagem.

Aqui, neste momento, vou apenas retirar a imagem do JotForm clicando sobre ela e apertando delete.

Então a configuração ficará assim

Basta clicar em Finalizar.

Pronto, agora para realmente concluir nosso formulário, vamos personalizar a mensagem de confirmação de envio

que o usuário verá.

Então clicamos na imagem da engrenagem no botão de envio e escolhemos Mostrar Propriedades.


Agora vamos escolher o botão Thank You Page Setting

Neste momento, podemos configurar duas formas de envio de agradecimento, ou podemos redirecionar nosso

usuário a uma página do nosso site.

Vamos personalizar nossa página de agradecimento, então marcamos a terceira opção e clicamos em Próximo.


Aqui a mensagem está em Inglês, então vamos traduzir e clicamos em finalizar.

Formulário concluído, agora basta a gente gerar o código para aplicar ao nosso site.

No menu principal, clicamos em Código Fonte e será mostrado uma linha de código.

Aqui basta clicar sobre o código e copiar. Pode usar o atalho Ctrl+C ou clicar com o botão direito do mouse e

escolher a opção copiar.

Vou aplicar este código na minha página de contatos, no site Usando Bits.

Como utilizo o Wordpress no site, vou apenas escolher a opção HTML e colar o código gerado pelo JotForm



Agora vamos testar nosso formulário, para ver se está tudo ok.

No site, no formulário de contato, vamos preencher as informações e enviar.

Verificando nosso e-mail, a configuração da mensagem recebida fica assim.


Bom é isso pessoal, caso prefiram ver este tutorial em vídeo, acesse nosso canal no Youtube.

Referencias:

Site Jotform: http://www.jotformz.com/

http://www.youtube.com/usandobits

http://www.jotformz.com/

como criar formulário de contato

Technology