TUTORIAL ATUALIZADO: Colocando Formulário de Contato no Blog - Versão 2

quarta-feira, março 15, 2017



Boa tarde ❤!!! Hoje trouxe um ótimo tutorial que vai ser bastante útil para quem está começando, ou para quem já está na blogosfera a algum tempo, mas fornece apenas o link do e-mail sem ter um formulário adequado.




Para quem deseja alguma parceria, deixando o blog com um ar mais profissional, ou mesmo, quem deseja ter uma maior proximidade com os leitores, um FORMULÁRIO DE CONTATO é de extrema importância em um blog. É através dele que muitas pessoas podem entrar em contato com você e evita que você comece a receber milhares de e-mails na sua caixa de entrada pessoal, afinal, supõe-se que você criou um e-mail pessoal para o seu blog, certo?! Você criou não é?! Caso não...CRIE!!! URGENTEMENTE!

Voltando...Eu já havia feito um tutorial aqui explicando, se não viu, click AQUI...Para mim esse formulário funcionou muito bem, e foi o que eu usei até pouco tempo aqui no blog, mas, devido a quantidade de códigos que insiro no HTML, acho que deve ter causado algum shock e quando fui tentar alterar a cor do formulário, para se adequar melhor ao novo layout do blog, ele simplesmente parou de funcionar; só aparecia o nome do site e não aparecia o formulário.

Fiquei desesperada, afinal era um formulário muito bom e fácil de ser instalado. Procurei vários sites, vídeos ensinando como fazer um novo formulário e nada! Visitei inúmeros sites para fazer o formulário e nada...Então recorri ao formulário do Google. Infelizmente ele não supria as minhas necessidades, mas como tinha sido o único que tinha funcionado, resolvi ficar com ele.

Até que finalmente minha saga pela busca do formulário acabou e eu encontrei um site que permitiu fazer um formulário bem interessante, personalizado e GRÁTIS.  Então vou ensinar a vocês um novo passo-a-passo para colocarem um novo FORMULÁRIO DE CONTATO em seus blogs. O tutorial é bem facinho, então sem mais delongas...


BORA LÁ!


O SITE: JOTFORM.COM

O TUTORIAL:


1º) Entre no site e CADASTRE-SE!



2º) Após o cadastro e a confirmação do e-mail, você será direcionado a sua área específica no site. É nela que você poderá criar os seus formulários. Click então em CRIAR FORMULÁRIO:



3º) Aparecerá algumas OPÇÕES, como você poderá conferir abaixo, na imagem, você pode escolher criar o seu modelo personalizado, utilizar algum modelo já existente e configurá-lo para as suas escolhas ou importar um pronto.



4º) Click em FORMULÁRIO EM BRANCO (caso escolha um modelo pronto aparecerá uma janela com alguns modelos para que você escolha qual acha mais interessante para o seu site), para um modelo personalizado.




5º) Aparecerá então a opção de nomear o seu formulário. Coloque o nome que você deseja (Contato, Entre em Contato, Formulário de Contato) e click em CONTINUAR!



6º) Nessa área você começará a editar o seu formulário de acordo com as suas preferências.



7º) Em “ADD FORM ELEMENT” você adicionará os recursos necessários como CABEÇALHO, NOME, E-MAIL, ENDEREÇO, NÚMERO DE TELEFONE, DATA, HORÁRIO, IMAGEM (se assim desejar), e CAIXAS DE TEXTO. Poderá também configurar o botão de ENVIAR. Em “DESIGN DE FORMULÁRIO” você ajusta cores e afins para deixar bem bonitinho o formulário.



8º) Como pode ver na imagem abaixo. É recomendado que, como será um formulário para que um leitor ou empresa entre em contato diretamente com você, através de um e-mail, o formulário seja simples e conciso. O necessário é CABEÇALHO, NOME, ASSUNTO, E-MAIL, WEBSITE e MENSAGEM. No meu caso eu adiciono "Data" para organizar meus pedidos de tutoriais, mas, normalmente não é necessário.



9º) Após ter configurado todo para o seu gosto e estilo, click em CONFIGURAÇÕES e coloque o e-mail para onde as mensagens irão e então em PUBLICAR, abrirá a seguinte opção, e você clicará em PLATFORMS. Escolha a opção desejada, no meu caso escolhi BLOGGER, pois é a plataforma que utilizo.




10º) Copie todo esse código da imagem abaixo:






Agora vamos instalar no nosso site!


INSTALANDO NO BLOG O FORMULÁRIO:


1º) Adicione uma PÁGINA EM BRANCO em seu blog. Caso você não saiba como fazer isso click AQUI e siga o passo a passo!


2º) Quando abrir, clique na opção HTML em seguida COLE o código que você copiou nesse espaço. Click para VISUALIZAR, se estiver tudo OKAY é só SALVAR!!! PRONTO seu formulário está em seu blog e agora tudo que escreverem nele será enviado para o e-mail que você configurou!


3º) Caso quando você clicar em visualizar a imagem apareça cortada, ajuste as medidas no HTML da postagem para height="156" e width="640" (procure esses números no código que você postou) e vá visualizando e ajustando até o tamanho ficar adequado a sua área do layout.




RESULTADO:

Após ter ajustado para o meu blog, arrumado e configurado ao meu estilo o meu formulário ficou assim:





Você pode conferir o resultado mais de perto clicando AQUI   e visitando meu formulário. Se quiser deixar um pedido de tutorial basta me enviar uma mensagem através dele.


CONFIRA TAMBÉM A VERSÃO 1 CLICANDO>>>  AQUI 


Então é isso aí! Para os que tentaram eu espero que tenham conseguido e gostado do tutorial! Deixem nos comentários a opinião de vocês, vou amar lê-las. Se quiserem ver mais algum tutorial feito aqui no blog basta clicar aqui : GOODIES e você encontrará vários tutoriais e utilitários legais. Beijocas!!!







IMPORTANTE: Esse tutorial foi exclusivamente feito por mim, é terminantemente proibida qualquer cópia sem os devidos créditos

You Might Also Like

36 comentários

  1. Olá!
    Acredita que eu preciso atualizar também? Esse post veio em boa hora =)
    ótimo dia para vocÊ
    Beijinhos ❤
    Blog Ale Canofre
    YouTube

    ResponderExcluir
    Respostas
    1. Obrigada Ale <3 fico muito feliz que o post tenha lhe sido útil :D obrigada por sua visita, que você possa vir mais vezes. Beijocas! :3

      Excluir
  2. Gostei muito do tutorial.
    Você saber me ajudar a colocar um link para responder dentro da caixinha de comentários?

    Um beijo,

    www.purestyle.com.br

    ResponderExcluir
    Respostas
    1. Oi Fernanda, você quer dizer tipo assim: Sorriso Jovem | SJ Oficial Fanpage

      Se sim, eu posso fazer um tutorial, bem simples!

      Obrigada por sua visita, espero te ver novamente por aqui. Aguardo a sua resposta! Beijocas! :3

      Excluir
  3. Oi,
    adorei sua dica, é bom estar ajudar,
    um dia eu vou fazer, muito obrigada pelo ajuda :D
    Beijos

    ResponderExcluir
    Respostas
    1. Oi Karol! Obrigada por sua visita, fico muito feliz que tenha gostado *-* espero te ver novamente por aqui. Beijocas!

      Excluir
  4. Eu tinha no wordpress mas vários e-mails iam pra caixa de spam e aí acabei tirando :( ...ótimo tutorial

    ResponderExcluir
    Respostas
    1. Compreendo Gabriela :/ obrigada por seu comentário, espero te ver novamente por aqui. Beijocas!

      Excluir
  5. Super útil essa postagem. Lembro no início do blog o quanto eu procurei por algo assim.

    Blog Profano Feminino

    ResponderExcluir
    Respostas
    1. Nem me fale...Agora que retornei com o blog fiquei piradinha quando deu pau no meu outro formulário...Para encontrar esse foi bem complicado! Obrigada por sua visita, espero te rever novamente por aqui. Beijocas!

      Excluir
  6. Nossa, super adorei, pois estou enfrentando problemas na minha área de contato já faz um certo tempo. Com certeza irei mudar para este método. Parabéns pela postagem e blog, ambos ótimos!

    Beijos,
    paginasincriveis.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Julia, fico muito feliz que tenha gostado e que lhe será útil :3 espero te encontrar mais vezes por aqui. Obrigada pelo carinho! Beijocas! <3

      Excluir
  7. Acho super válido ter formulário de contato, vou colocar no meu também, fica bem mais profissional como você disse! Muito bem explicado o post!
    Beijos, Gi.
    Blog About Girls

    ResponderExcluir
    Respostas
    1. Oi Gi *-* obrigada por sua visita e comentário. Fico imensamente feliz que a dica tenha lhe sido útil. Obrigada pela visita, és sempre bem vinda! Beijocas! :3

      Excluir
  8. No meu tem isso, mas a menina que paguei para fazer o layout que instalou.
    Bom saber, para da próxima não precisar pagar kkk

    ResponderExcluir
    Respostas
    1. HUHEUHUEHUH concordo Thais, e é muito fácil! Basta seguir o passo a passo...Depois que se pega a manha vai de boa. :D obrigada por sua visita e comentário. Espero te ver novamente por aqui :3 Beijocas!

      Excluir
  9. Que legla esta dica é muito bom ter um formulário de contato para comunicar melhor com as pessoas interessadas no seu trabalho. Beijos

    ResponderExcluir
    Respostas
    1. Num é?! É bem legal, principalmente para quem quer profissionalizar a função de blogger :)

      Excluir
  10. Boas dicas! Parece ser bem útil, mas não tenho ainda no meu blog. Bjs.

    ResponderExcluir
    Respostas
    1. Oi Quel, te recomendo colocar! É bem legal e se tornará mais fácil para quem quer te enviar uma mensagem :) obrigada por sua visita, espero te ver mais vezes por aqui, és bem vinda. Beijocas! :3

      Excluir
  11. Acredita que eu não sabia o passo a passo?! Adorei o tutorial, tudo bem explicadinho. Vou tentar aplicar no meu blog. Obrigada pela dica, bjs!

    ResponderExcluir
    Respostas
    1. Oi Luciana, fico muito feliz que tenha gostado, obrigada por sua visita. Espero que coloque no seu blog e que te seja muito útil :3 Beijocas! <3

      Excluir
  12. O blogger tem um gagdet mais simples que esse para usar, como uso no meu blog - mas esse com certeza é mais bonito!
    Um beijo, www.josya.com.br

    ResponderExcluir
    Respostas
    1. Oi Josy ^-^ obrigada por sua visita...É como vc disse mesmo, esse é mais intuitivo e mais bonito :3 Beijocas e obrigada por sua visita!

      Excluir
  13. O que utilizo no blog também é do JotForm. Conheço o site desde que comecei na blogosfera, em 2012, o site é super útil e tem algumas opções de personalização que são muito lindas.

    Com carinho,
    Conto Paulistano.

    ResponderExcluir
    Respostas
    1. Conheci ele agora a pouco e estou amando hahahaha!!! Obrigada por sua visita Selma, és sempre bem vinda por aqui! Beijocas <3

      Excluir
  14. adorei Hilda! vou fazer lá no meu blog e colocar os créditos. é tão bom encontrar post assim por aqui, porque sou uma completa leiga quando se trata de códigos html e em mexer no blog kkkkkk sempre preciso pedir a ajuda de alguém kkkkk sos

    ResponderExcluir
    Respostas
    1. Oi Isa, eu sempre que possível, coloco aqui alguns tutos pq sei da dificuldade de algumas meninas com isso. Eu também tinha muita, hj eu desenrolo aos poucos kkkkk obrigada por sua visita, espero te ver mais vezes por aqui. Beijocas!

      Excluir
  15. gostei muito do tutorial. bem explicativo e fácil de entender!
    sabe que uma vez tentei colocar formulário e nao deu certo, vou tentar com esse e ai de aviso^^

    beijos

    ResponderExcluir
    Respostas
    1. Oi Nana, avisa sim!!! Ficarei feliz de ler o seu feedback! Tenta colocar, tenho certeza que vc conseguirá. Beijoca, espero te encontrar mais por aqui :3

      Excluir
  16. Agora fooooi! Eu amo blogs que trazem esses tutoriais e o seu tá tão explicadinho♥ Até salvei aqui pra repaginar o meu😊 parabéns!

    ResponderExcluir
    Respostas
    1. <3 Oi Jéssica!!! Salva e tenta, você vai conseguir! Fico feliz que tenha gostado do tuto, espero que faça. Obrigada por sua visita, espero te ver novamente por aqui. Beijocas!

      Excluir
  17. Uso o Jotform em meu BLOG e ele é super eficiente nesta tarefa!
    Seu tutorial está muito detalhado, adoro conhecer gente que compartilha o que sabe!
    Beijo ♥

    ResponderExcluir
    Respostas
    1. Obrigada Karol :) fico muito feliz que tenha gostado e que já use! :3 Beijocas, espero te ver novamente por aqui :3

      Excluir
  18. Muito bom o post e útil, já coloquei no meu blog, mas foi de outra maneira. Sucesso :)
    Já estou seguindo o blog <3

    ResponderExcluir
    Respostas
    1. Que bom que gostou :D sucesso pra vc também querida! Beijocas e volte sempre que puder! ^-^

      Excluir

~REGRAS PARA COMENTAR~

-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente é uma forma de incentivar a trazer sempre novidades.

Related Posts Plugin for WordPress, Blogger...

Subscribe