PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

22/06/2017

Como criar um formulário de contato gratuito para colocar no seu blog ou site

Resultado de imagem para jotform logo

Formulário de contato gratuito

Neste artigo vamos mostrar como criar um formulário de contato com os seus leitores para você inserir este formulário no blog ou site que você administra.

O formulário de contato é um elemento essencial para o seu blog. Com ele você cria um canal direto com os seus leitores, podendo receber sugestões, críticas e  informações que podem ajudar você a melhorar o conteúdo, layout e navegabilidade do seu blog.

Veja a seguir como criar um formulário de contato simples com o aplicativo JotForm:

Criando um formulário simples com JotForm

Acesse o site: JotForm

Clique [SIGN UP] para fazer o cadastro gratuito.

image

Preencha o formulário e clique no botão [CREAT MY ACCOUNT].

image

Clique no botão [SKIP].

image

Entre no seu navegador de e-mail e na mensagem do JotForm clique no botão [Verify Now].

image

Clique em [Let’s go!].

image

Você será redirecionado para a página de criação do formulário.

image

Clique em [Adicionar Elemento] para inserir os elementos do seu formulário…

image

Como nosso formulário será o mais simples possível, vamos acrescentar somente os campos Nome Completo, E-mail, Assunto, Mensagem e Código Captcha (código de segurança).

Observe que o aplicativo permite itens BÁSICOS, PAGAMENTOS e WIDGETS. No nosso exemplo vamos utilizar apenas elementos básicos. Depois, você poderá testar elementos mais avançados no seu formulário de contato.

image

Para criar o nosso primeiro elemento, “Nome Completo”, arraste o elemento Entrada de Texto Curta para o campo “Arraste sua primeira pergunta da esquerda para cá”.

image

Clique no ícone para configurar o elemento…

image

Na guia Geral, digite o nome do campo em Texto da Pergunta, defina o alinhamento em Alinhamento do Rótulo e se o campo é obrigatório deixando Obrigatório como SIM.

image

Depois na guia OPÇÕES, defina o tamanho do campo. Se desejar, clique em Largura para definir o número máximo de caracteres permitido.

image

Na guia AVANÇADO, você poderá ainda inserir outros recursos como Controle de Conteúdo, Texto Ajuda, Valor Pré-definido e opção para Somente Leitura.

image

Depois de configurado o nosso primeiro elemento, volte para o menu [Adicionar Elemento].

image

Da mesma forma que o elemento anterior, arraste e configure os elementos E-mail e Entrada de Texto Longa.

Obs.: Se você inseriu um elemento fora de posição, não se preocupe. Basta arrastar o elemento para a posição desejada…

Obs.: Não esqueça de deixar todos campos como obrigatório.

image

Finalmente, vamos colocar o último elemento do nosso último elemento, o código de segurança Captcha.

image

Se deseja, altere o nome do Cabeçalho.

image

Se desejar, clique em [+Add Your Logo] para inserir o logo do seu site.

image

Carregue o arquivo da logomarca,

image

Veja como está ficando nosso formulário.

image

Alterando o layout do formulário

Para alterar o layout do formulário, clique no ícone com um rolo de pintura.

image

Você poderá alterar as Cores, Estilo, CSS (Folha de estilo para HTML) e Temas.

image

No nosso exemplo vamos adicionar o tema Brick Wall que aparece em Feature Themes.

image

Para remover o tema, passe o mouse sobre Tema Atual e clique em [Remover Tema].

image

Observe que quando você altera o tema do layout, é necessário inserir novamente a logomarca. Clique novamente em [+Add Your Logo] e carregue o arquivo da logomarca.

image

Visualizando o seu Formulário

Clique no botão Pré-visualizar formulário.

image

Na figura abaixo, veja como ficou o nosso formulário:

image

Para voltar ao editor, clique novamente Pré-visualizar formulário. Faça as alterações que desejar.

image

Outras Configurações

Você poderá fazer configurações do formulário como status, condições, e-mails, integrações e página de agradecimento.

image

Para alterar os e-mails para o recebimento dos dados, clique em [EMAILS].

Observe que o e-mail de NOTIFICAÇÃO1 é o e-mail que você cadastrou no site. Para alterar clique no ícone com formato de lápis. Para acrescentar outros e-mails, clique no botão [ + ].

image

Teste os recursos para conhecê-los melhor.

Publicando o formulário no blog ou site

No menu superior, clique em [PUBLICAR].

image

Na guia lateral acesse [INCORPORAR]. Em INCORPORAR, clique no botão [COPIAR]. Depois cole o código no blog ou site.

image

Se desejar, teste antes o código como mostramos a seguir…

Testando o formulário no Squids Editor

Abra o Squids Editor: Squids Editor

Cole o código que você copiou no lado esquerdo do editor. Clique no botão [Executar].

image

Preencha os dados do formulário e envie para verificar se você está recebendo as informações.

image

Depois de enviar a mensagem, abra o seu e-mail e verifique se recebeu os dados.

image

Verificado seu formulário, copie e cole o código no seu blog ou site.

Veja abaixo como ficou o nosso formulário. Aproveite para mandar uma mensagem para nós…

Editando seu formulário de contato

Acesse o site: JotForm

Se você não estiver logado, faça o login. Vá em [Meus Formulários] e clique sobre o formulário que deseja editar.

image

Clique em [Editar].

image

Faça as alterações desejadas.

Observação: Não é necessário copiar e colar novamente o código do formulário. Toda alteração no formulário é realizada em tempo real onde o código foi inserido.

Criando um novo formulário

Em Meus Formulários, clique no botão [Criar formulário].

Obs.: Se você não foi direcionado para a página abaixo, acesse o link: www.jotform.com/myforms

image

Clique no botão [Criar].

Observação: Se desejar, você poderá utilizar um modelo pronto clicando  [Selecionar].

image

Dê um nome para o seu formulário. Clique em [Continue].

image

Aguarde alguns instantes. Clique em [Add Form Element] para inserir os elementos do seu formulário como já mostramos antes..

image

Preços e Planos

Se você deseja algo mais, veja todos os planos do JotFom: JotForm Preços.

O Plano FREE permite a criação de até 5 formulários com no máximo 1.000 visualizações.

image

byALF

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics