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.
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
36 comentários
Olá!
ResponderExcluirAcredita que eu preciso atualizar também? Esse post veio em boa hora =)
ótimo dia para vocÊ
Beijinhos ❤
Blog Ale Canofre
YouTube
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
ExcluirGostei muito do tutorial.
ResponderExcluirVocê saber me ajudar a colocar um link para responder dentro da caixinha de comentários?
Um beijo,
www.purestyle.com.br
Oi Fernanda, você quer dizer tipo assim: Sorriso Jovem | SJ Oficial Fanpage
ExcluirSe sim, eu posso fazer um tutorial, bem simples!
Obrigada por sua visita, espero te ver novamente por aqui. Aguardo a sua resposta! Beijocas! :3
Oi,
ResponderExcluiradorei sua dica, é bom estar ajudar,
um dia eu vou fazer, muito obrigada pelo ajuda :D
Beijos
Oi Karol! Obrigada por sua visita, fico muito feliz que tenha gostado *-* espero te ver novamente por aqui. Beijocas!
ExcluirEu tinha no wordpress mas vários e-mails iam pra caixa de spam e aí acabei tirando :( ...ótimo tutorial
ResponderExcluirCompreendo Gabriela :/ obrigada por seu comentário, espero te ver novamente por aqui. Beijocas!
ExcluirSuper útil essa postagem. Lembro no início do blog o quanto eu procurei por algo assim.
ResponderExcluirBlog Profano Feminino
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!
ExcluirNossa, 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!
ResponderExcluirBeijos,
paginasincriveis.blogspot.com.br
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
ExcluirAcho 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!
ResponderExcluirBeijos, Gi.
Blog About Girls
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
ExcluirNo meu tem isso, mas a menina que paguei para fazer o layout que instalou.
ResponderExcluirBom saber, para da próxima não precisar pagar kkk
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!
ExcluirQue legla esta dica é muito bom ter um formulário de contato para comunicar melhor com as pessoas interessadas no seu trabalho. Beijos
ResponderExcluirNum é?! É bem legal, principalmente para quem quer profissionalizar a função de blogger :)
ExcluirBoas dicas! Parece ser bem útil, mas não tenho ainda no meu blog. Bjs.
ResponderExcluirOi 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
ExcluirAcredita 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!
ResponderExcluirOi 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
ExcluirO blogger tem um gagdet mais simples que esse para usar, como uso no meu blog - mas esse com certeza é mais bonito!
ResponderExcluirUm beijo, www.josya.com.br
Oi Josy ^-^ obrigada por sua visita...É como vc disse mesmo, esse é mais intuitivo e mais bonito :3 Beijocas e obrigada por sua visita!
ExcluirO 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.
ResponderExcluirCom carinho,
Conto Paulistano.
Conheci ele agora a pouco e estou amando hahahaha!!! Obrigada por sua visita Selma, és sempre bem vinda por aqui! Beijocas <3
Excluiradorei 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
ResponderExcluirOi 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!
Excluirgostei muito do tutorial. bem explicativo e fácil de entender!
ResponderExcluirsabe que uma vez tentei colocar formulário e nao deu certo, vou tentar com esse e ai de aviso^^
beijos
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
ExcluirAgora 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<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!
ExcluirUso o Jotform em meu BLOG e ele é super eficiente nesta tarefa!
ResponderExcluirSeu tutorial está muito detalhado, adoro conhecer gente que compartilha o que sabe!
Beijo ♥
Obrigada Karol :) fico muito feliz que tenha gostado e que já use! :3 Beijocas, espero te ver novamente por aqui :3
ExcluirMuito bom o post e útil, já coloquei no meu blog, mas foi de outra maneira. Sucesso :)
ResponderExcluirJá estou seguindo o blog <3
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.