Como adicionar formulário de contato padrão do blogger numa página


Pra quem usa o Blogger já notou que a própria plataforma tem seu Formulário de contato.
A sua instalação é simples e fácil de incorporar, sem precisar de adições de códigos ou configurações.
Mas por padrão só é possível colocá-lo nas laterais, neste tutorial você vai aprender como colocá-lo numa página, como se fosse um post.
O seu funcionamento é bem prático, e toda vez que alguém enviar uma mensagem para você através do formulário,a mensagem será enviada diretamente para o seu Gmail (o mesmo que você usa para administrar seu blog). Caso seu blog tenha mais de um administrador, todos eles receberão a mensagem.

Sua página vai ficar como no foto acima.



01) Primeiro coloque o Formulário da forma convencional (ou seja, nas laterais).
Acesse o painel do Blogger, clique no menu “Layout” e em seguida, escolha o local para adcionar o formulário na sua barra lateral, e clique em “Adicionar um Gadget”.

02) Clique em “Mais gadgets” e escolha a opção “Formulário de contato”. Salve as modificações.

03) Clique em criar uma "Nova postagem", no título coloque "Formulário de contato" ou o nome que preferir.
No editor de texto do post, clique na aba “HTML” e cole o seguinte código:

===========================  ==============================

<div id="formcontact">
<p>
Preencha os campos abaixo para entrar em contato.
Não esqueça de preencher o campo com seu e-mail para respondermos, se for necessário.

<font style="font-size:12px">Os campos marcados com "*" são obrigatórios.</font></p>

<form name='contact-form'>
<div>
<b>Seu Nome:</b> *</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='60' type='text' value=''/>

<div>
<b>Seu E-mail:</b> *</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='60' type='text' value=''/>

<div>
<b>Sua mensagem:</b> *</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'/>
<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>
</div> 

===============================  =============================

04) Publique a página.



Personalizando o Formulário

01) Acesse o menu “modelo >> Editar HTML >>, dê um clique dentro da caixa do código, dê um Control+F e na caixinha que abrir procure por: ]]></b:skin>
Agora cole o seguinte código logo ACIMA desta tag.

==============================   ==============================
/*Formulário de contato Blogger */
#formcontact{
background:#ffffff; /*---cor de fundo do formulário---*/
max-width: 100%;
margin: 0 auto;
padding: 30px;
}
#formcontact p{   /*---referente aos estilos da fonte dos campos---*/
color:#000;
}
.contact-form-name, .contact-form-email, 
.contact-form-email-message, 
.contact-form-button-submit { /*---referente aos campos---*/
width: 100%;
max-width: 100%;
margin-bottom: 10px;
color: #f1f1f1;   /*---cor da fonte dos campos---*/
}
.contact-form-button-submit {  /*-----referente ao Botão enviar---*/
width: 150px;  /*-----largura do botão---*/
height:40px;    /*-----altura do botão---*/
font-size: 18px;   /*-----tamanho da fonte---*/
border-color: #ccc;  /*-----cor da borda---*/
background: #333;   /*-----cor de fundo botão---*/
color: #fff;   /*-----cor da fonte---*/
}
.contact-form-button-submit:hover {  /*-----modo hover do Botão enviar---*/
border-color: #ccc;  /*-----cor da borda---*/
background: #FF8C00;   /*-----cor de fundo botão---*/
color: #fff;   /*-----cor da fonte---*/
}
#ContactForm1 {
display: none; /*-----esconder gadget da barra lateral---*/
}
=================================  ====================================== 

Note que no código acima, na linha abaixo de #ContactForm1 tem o comando “display:none“, isso eliminará a exibição do Gadget da barra lateral, mas manterá o funcionamento dos recursos do gadget na sua página estática.
Todos os trechos do código que você pode editar, já estão destacados.


Infelizmente a página ficará no blog como um post, só que sem uma categoria, ficará como uma página solta no blog. Copie a URL da página e coloque onde deseja.

Fonte: www.mundoblogger.com.br
 
Related Posts Plugin for WordPress, Blogger...