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 ...
Vamos iniciar nosso formulário com um cabeçalhoBasta clicar em cabeçalho que será gerado um campo para preencher o conteúd...
Note que em cada campo criado há dois botões superiores, uma engrenagem e um x.A engrenagem são as propriedades daquele ca...
No menu principal encontramos vários itens.Primeiro, vamos clicar no campo de e-mail e depois escolhemos o botão Validação...
Para finalizar, vamos criar o botão de envio e configurar para que as mensagens vão diretamente para nosso e-mail.Clicamos...
Clicamos sobre o botão Adicionar novo e-mailNo assistente de e-mail temos duas opções.Em Email de Notificação, a gente pod...
Nessa próxima tela, vamos configurar a formatação do e-mail que iremos receberhttp://www.usandobits.com.br                ...
Em Assunto, configuramos qual vai ser o assunto da mensagem que receberemos. Escolhi deixar apenas comoContato Recebido do...
Agora vamos escolher o botão Thank You Page SettingNeste momento, podemos configurar duas formas de envio de agradecimento...
Aqui a mensagem está em Inglês, então vamos traduzir e clicamos em finalizar.Formulário concluído, agora basta a gente ger...
Agora vamos testar nosso formulário, para ver se está tudo ok.No site, no formulário de contato, vamos preencher as inform...
Bom é isso pessoal, caso prefiram ver este tutorial em vídeo, acesse nosso canal no Youtube.Referencias:Site Jotform: http...
Próximos SlideShares
Carregando em…5
×

Como criar formulário de contato

3.789 visualizações

Publicada em

Caso prefira ver este tutorial em vídeo acesse - http://youtu.be/qw-g3-nkIzM

Publicada em: Tecnologia
1 comentário
0 gostaram
Estatísticas
Notas
  • VOCÊ É DO TAMANHO DO SEU SONHO

    Vou Te Mostrar Como Ter Outra Renda Sem Precisar Ter Outro Emprego!

    Trata-se de Uma Oportunidade de Negócio (Não é Emprego).

    Empresa internacional te paga para visualizar e compartilhar publicidade na internet 01 x por dia em média 15 minutos.

    Feita Para Pessoas Que Gostam de Ganhar Dinheiro e Queriam Melhorar de Vida.

    Baixo investimento!

    Não Tem Horário Fixo Para Trabalhar, Você Pode Trabalhar Nas Suas Horas Vagas.
    Sistema de Trabalho Testado e Aprovado Em Vários
    Países!
    Cada pessoa possui o seu. E você, tem SONHOS?

    Podem ser:

    Ter estilo de vida?
    Pagar a escola ou faculdade dos filhos?
    Ter mais tempo para a família;
    Ter o seu dinheiro sem depender de outra pessoa da família?
    Pagar dívidas?
    Ajudar a família?
    Comprar ou trocar de carro?
    Comprar ou trocar de casa?
    Viajar?

    Contatos:

    valdileisalesmmn@gmail.com
    Skype: valdilei.sales1
    whatsApp 47-9190-2586
    47-9730-5057 tim
    47-9190-2586 vivo
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
3.789
No SlideShare
0
A partir de incorporações
0
Número de incorporações
348
Ações
Compartilhamentos
0
Downloads
24
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Como criar formulário de contato

  1. 1. http://www.usandobits.com.br Página 1
  2. 2. 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 podemauxiliar 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 deformulá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 ocadastro, é 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 queo 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 Página 2
  3. 3. Vamos iniciar nosso formulário com um cabeçalhoBasta clicar em cabeçalho que será gerado um campo para preencher o conteúdo, No nosso caso, vamos fazer umformulá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 vezesAgora nosso formulário está assimhttp://www.usandobits.com.br Página 3
  4. 4. 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 ficamacima 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 sobreo 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-mailhttp://www.usandobits.com.br Página 4
  5. 5. 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çãoAlfanumérica, alfabética e apenas Numérico.No nosso formulário, agora falta criarmos um campo de mensagem. Então nas ferramentas escolhemos Area deTexto.http://www.usandobits.com.br Página 5
  6. 6. 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 amensagem 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-mailhttp://www.usandobits.com.br Página 6
  7. 7. Clicamos sobre o botão Adicionar novo e-mailNo 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 nossoformulário.No nosso caso, o objetivo é que a gente receba a mensagem, então deixamos a primeira opção marcada e clicamosno botão próximo.Aqui neste ponto, basicamente tudo já está configurado, nós só precisamos inserir o Destinatário de e-mail e clicarem próximo.http://www.usandobits.com.br Página 7
  8. 8. Nessa próxima tela, vamos configurar a formatação do e-mail que iremos receberhttp://www.usandobits.com.br Página 8
  9. 9. Em Assunto, configuramos qual vai ser o assunto da mensagem que receberemos. Escolhi deixar apenas comoContato 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 emnegrito, 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á assimBasta clicar em Finalizar.Pronto, agora para realmente concluir nosso formulário, vamos personalizar a mensagem de confirmação de envioque o usuário verá.Então clicamos na imagem da engrenagem no botão de envio e escolhemos Mostrar Propriedades.http://www.usandobits.com.br Página 9
  10. 10. Agora vamos escolher o botão Thank You Page SettingNeste momento, podemos configurar duas formas de envio de agradecimento, ou podemos redirecionar nossousuá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.http://www.usandobits.com.br Página 10
  11. 11. 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 eescolher 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 JotFormhttp://www.usandobits.com.br Página 11
  12. 12. 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.http://www.usandobits.com.br Página 12
  13. 13. 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.usandobits.com.br Página 13

×