Como colocar um Formulário de Contato personalizado na página do blog

junho 14, 2017


Konnichiwa fadinhas & elfos! Como estão? Chegando com mais uma diquinha para o blog de vocês! Que tal fazer um formulário de contato em uma pagina fixa do blog? E ainda, deixa-lo apresentável com uma personalização rápida? Nesse post ensinarei como criar e ainda vou disponibilizar um modelo para usarem! Espero do fundo do meu  que gostem! Então.. Let's Go!

Primeiramente vamos criar a página né? Vá la no seu blogger -> páginas, e clique em nova página, No titulo digite ''Contato'' e então, no botão logo abaixo, deixe no modo HTML



Agora copie e cole o código abaixo:

 <form name='contact-form'>
<div>Seu Nome:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<br/><br/>
<div>Seu E-mail: <em>(obrigatório)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/><br/>
<div>Sua mensagem: <em>(obrigatório)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar Mensagem'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>



Personalizando
Mas ele vai está assim, meio feinho, vamos deixar mais bonitinho? Lembrando que, caso não goste dessa personalização abaixo, eu fiz um outro post com várias opções, é só (ver aqui)


Agora para aplicar a personalização. Vá em Layout, Editar HTML, Procure por ]]></b:skin> e ACIMA DELE cole:

#ContactForm1{ display:none!important;} 


/*---- Compatible contact Form by WG -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message { 
max-width: 350px; 
width: 100%; 
font-weight:bold; 

}
      
.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 16px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
} 
     
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px;
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{ 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover { 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); 
padding: 10px; 
}
.contact-form-email-message { 
background: #FFF; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: arial; 
font-size: 16px; 
margin: 0; 
margin-top: 5px; 
padding: 10px; 
vertical-align: top; 
max-width: 350px!important; 
height: 150px; 
border-radius:4px; 
}

.contact-form-button { 
cursor:pointer; 
height: 32px; 
line-height: 28px; 
font-weight:bold; 
border:none; 
}

.contact-form-button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #f9e5e5;
} 
.contact-form-button:hover { 
text-decoration: none;
background: #e5d0d0;
border-color:#fff; 
} 
.contact-form-button:active { 
position: relative; 
top: 1px;
background: #e5d0d0;
 
}

.WG-btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#edd7f4;
    background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: &quot;progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#badff3&#39;, EndColorStr=&#39;#7acbed&#39;)&quot;;
    border:1px solid #edd7f4 !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.WG-btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#edd7f4;
    background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0);
    background:-webkit-gradient(linear, center top, center bottom, from(#e5d0d0), to(#edd7f4));
    -ms-filter: &quot;progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#7acbed&#39;, EndColorStr=&#39;#badff3&#39;)&quot;;
}
.WG-btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; 
}

.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px; 
}
   
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; 
padding: 15px 15px 15px 28px;

}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 8px; 
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{ 
padding: 15px 15px 15px 28px; 
}

.contact-form-button { 
height: 28px;
}

E prontinho! Se quiser mudar a cor do botão, mude essas cores:  #e5d0d0 e #edd7f4 . (Para saber a # da cor que quer dê uma olhada nesse site: Colors code) Visualize e veja como ficou 

Para onde irá as mensagens? Para o seu e-mail principal, o mesmo que você usou para criar o seu blog ,veja :


Os elementos não ficaram um abaixo do outro? Simples, vá na página mesmo e de um enter!
Como aumentar o tamanho dos elementos? Caso seja os títulos, modifique na página, se for letras que são digitados, modifique em font-size no código, e tamanho dos quadrados em max-width: 350px; width: 100%;

Se quiser tirar qualquer duvida é só comentar ok? Espero que tenham gostado! Até mais e Kissus!  Tem postagem toda segunda (new!), quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest * 

Leia também:

40 comentários

  1. Adorei a dica. Vou salvar seu link e alterar minha página de contatos.

    Vidas em Preto e Branco

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Altere, qualquer duvida é só falar aqui tá?
      Obrigada pela visita! ♡

      Excluir
    2. Eu não acho os códigos que você cita pra personalizar. O que estou fazendo de errado? simplesmente copiei o código...

      Excluir
    3. A parte da personalização? Não achou /head> ? Bem, todo blog tem a parte de / b : s k in > , sabe, aquela parte que todas as letras são azuis (É o css de todo o blog) Tenta a segunda opção. A personalização vc tem que colar lá, Clique Ctrl+F e pesquise por /b:skin , e cole.

      Obs: Mas vc tem que ter feito o primeiro passo pra ver, o formulário, tem que colar o primeiro codigo na versão de HTML da pagina. É só clicar aqui: https://1.bp.blogspot.com/-SXH2nXVH7vE/V4_qkvhhxJI/AAAAAAAAOWM/gQXSlFFrcB8_jWULgmKhUSqF3NegHdehwCLcB/s640/html%2Bimagem%2Bdentro%2Bda%2Bpostagem.jpg

      Se ainda não achar me manda um print. E-mail: juciane.damasceno2@hotmail.com , G+: https://plus.google.com/u/0/+JuneDamasceno

      Excluir
  2. Eu adoro esses tutoriais que tu posta aqui! Esses dias testei um, mas no fim não deixei pq mexi em mais coisas e acabei esquecendo. Adorei!

    Beijoss
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaaah obrigada! Tentou qual? Vi lá, mudou o cabeçalho e menu né? Que legal, mas pra frente vou compartilhar essa parte também, se algum daqui não ir ou qualquer duvida é só falar tá?
      Obrigada pela visita! ♡

      Excluir
  3. Adoro blogueiras que divide experiencias e dica parabéns viu!
    Fica com deus sua linda juizo no corpo e na alma,
    Um beijo da Ju Margarida.
    Ei venha me ver mais vez em to te esperando la no blog moça
    BLOG:
    http://www.politicamenteincorreta.com/

    ResponderExcluir
    Respostas
    1. Obrigada! Adoro ajudar, sempre ♡
      Te desejo o mesmo! Obrigada pela visita!
      ~ Visitei, e amei seu cabeçalho *-* Kissus!

      Excluir
  4. Caramba! Adoreeeei esse passo a passo.
    Vou tentar fazer no meu.
    Muito obrigada!

    Um super beijo

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Tenta!
      Vai ficar completo e ainda meigo! Obrigada você pela visita e por comentar ♡
      Kissus

      Excluir
  5. Fiz ontem deu super certo,Ameeeeiii!!! Obrigada por compartilhar seu trabalho com a gente! 💕
    Beijos
    Tamara
    tamaravilhosamente.com

    ResponderExcluir
    Respostas
    1. Que bom, ficou ótimo, só aconselho deixar o (enviar) embaixo também, é só dar um enter hehe. Que nadaaa, obrigada você! Kissus!

      Excluir
  6. Eu apliquei ao meu blog, adorei! Porém, quando o leitor vai em contatos para enviar-me uma mensagem, quando ele clica em enviar, só fica carregando. O que houve?

    ResponderExcluir
    Respostas
    1. Faltou fazer a parte do ID, te respondi por e-mail, e fico feliz que conseguiu resolver! Kissus!

      Excluir
    2. estou com o mesmo problema que ela, pode me ajudar?

      Excluir
  7. Ahhh obrigada, coloquei no meu blog, deu certo <3

    Yohanna Ferraz

    https://pravocesaber-pedagogia.blogspot.com/

    ResponderExcluir
    Respostas
    1. Aaah fico feliz em saber que deu certo! Mas vale lembrar que, você pode descer o botão de enviar apertando enter okay? Kissus e obrigada pela visita <3

      Excluir
  8. Apaixonei. Mas, não funcionou. Quando eu clico em "enviar", simplesmente nada acontece.

    ResponderExcluir
    Respostas
    1. Pois estou com o mesmo problema, já conseguiu resolver??

      Excluir
    2. Descobri a resposta, primeiramente você tem que criar um wiget de formulario lateral em seu blogger ai vai funcionar o codigo do tutorial.

      Excluir
    3. Desculpe a demora... Consegui sim, mas não com esse tutorial. Eu estudei um pouco de PHP e fiz um formulário top.

      Excluir
  9. Não consegui fazer o meu blog não tem esse numero de ID que é muito ruim, não consigo colocar o link do blog?

    ResponderExcluir
  10. Adorei. Quando eu clico em "enviar", simplesmente nada acontece., pode me ajudar por favor 😕?

    ResponderExcluir
    Respostas
    1. Deixe aqui seu blogger para eu dar uma olhada! Mas vê se copiou os codigos certinhos, tenta adicionar o formulário padrão na sidebar e apaga-lo depois, as vezes é algum bug

      Excluir
    2. Olá, eu fui lá e testei, para mim mostrou que a mensagem foi enviada, o aviso aparece bem rápido mesmo, dê uma olhada no seu e-mail se chegou

      Excluir
    3. Então é enviada mas não chega no meu e-mail

      Excluir
  11. Seu post foi muito útil, consegui fazer no meu blog

    ResponderExcluir
    Respostas
    1. Fico feliz em saber que gostou e que ainda funcionou certinho! Obrigadaa

      Excluir
  12. Adorei o post! Você explica muito bem.

    Resolveu meu problema!

    ResponderExcluir
  13. Fui lá no ]]><b: skin e colei em cima o código como você orienta. Não deu certo para mim. :(

    ResponderExcluir
  14. Boa noite!
    Espero que esteja tudo bem com você, com sua família e todos ao teu redor!
    Apliquei no blog, fiz o teste e não está funcionando. O que poderá ter dado errado?

    ResponderExcluir
    Respostas
    1. copie o formulário de novo e tente novamente mais tarde, fique fazendo isso até inteirar umas 300000000 vezes seguidas, tente fazer isso rápido, e intermitentemente, rsrs... ahamm...

      Excluir
    2. Obrigada, te desejo o mesmo! Infelizmente esta postagem é bem antiga. Porém eu uso esse formulário até hoje e continua funcionando. As vezes alguns templates não pegam, principalmente os prontos da Internet. Deixe seu blog para poder dar uma olhada! Kissus

      Excluir
  15. to usando até para mandar mensagens sms, para o bin ladem no inferno..., GRANDE formulário rsrsrsrsrs...

    ResponderExcluir