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, e cole o código abaixo:

 <script>
var blogId = '6600028043921';//este número deve ser, obrigatoriamente, editado.
//As frases abaixo também podem ser editadas
var contactFormMessageSendingMsg ='Enviando...';
var contactFormMessageSentMsg = 'Sua mensagem foi enviada com sucesso.';
var contactFormMessageNotSentMsg = 'A mensagem não pôde ser enviada. Por favor, tente novamente mais tarde.';
var contactFormEmptyMessageMsg ='Campo de mensagem não pode ficar vazio.';
var contactFormInvalidEmailMsg = 'É necessário um email válido.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<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 />
<div>
Seu Email: <em>(obrigatório)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<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>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Enviar" />

<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form> 

Coloque seu BlogID


Está tudo citado no próprio código caso queira fazer alguma alteração, mas o numero do ID do blog é obrigatório mudar! Faça que nem a foto acima, o numero do seu ID fica na parte inicial, copie e substitua no código! Agora só salvar!

Personalizando
Mas ele vai está assim, meio feinho, vamos deixar mais bonitinho?


Procure por ]]></b:skin> e ACIMA DELE cole:

#ContactForm1 {
display: none ! important; }

Agora procure por </head> e cole ABAIXO dele o seguinte código:

 
  
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
  <style> 
#ContactForm1{ display:none!important;} 
  </style> 
</b:if>

<style>
/*---- 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; 
}
</style>

      <!--[if IE 9]> 
    <style> 
    
.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; 
}
    </style> 
    <![endif]--> 
    
    <style> 
@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;
}
}
</style>


E prontinho! Se quiser mudar a cor do botão, mude essas cores:  #e5d0d0 e #edd7f4 . Visualize e veja como ficou 


Caso não tenha ido ou seu template não tenha como base do blogger, não use a personalização acima, cole esse css a seguir, acima de ]]></b:skin> :

 

#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;
}

Obs: Eu testo tudo que disponibilizo aqui, eu coloquei o primeiro e funcionou em templates com base do blogger como podem ver no preview, já nesse template que uso, que tem a base de site profissional ,não foi , então adaptei nesse código acima.

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! Deco-mail pictograms of Heart 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:

10 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

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers