Como adicionar um formulário de contato do Blogger em uma página estática

Aqui mesmo no Entenda Web indicamos três formas de implantar um formulário de contato em seu blog. Mas após este artigo o Blogger disponibilizou um gadget que permite inserir um formulário de contato que pode ser incorporado de forma simples, sem necessitar adição de códigos ou configurações.

Este formulário de contato do Blogger funciona de forma bem prática. Quando alguém entrar em contato você receberá a mensagem diretamente em seu Gmail, o mesmo cadastrado no Blogger. Caso seu blog tenha mais de um administrador todos eles receberão a mensagem.

Por padrão o formulário será instalada na barra lateral do seu blog, mas vou ensiná-lo como colocar em uma página estática. Vamos lá, então!

Adicionando o gadget na barra lateral do seu Blog

Inicialmente acesse a área de administração do seu blog e clique em "Layout". Agora você deverá escolher o local onde o formulário deverá ficar e clique em "Adicionar um Gadget".

Na janela que será aberta clique em "Mais gadgets" e depois em "Formulário de contato".

Escolha um título, se quiser, e salve.

Neste momento o formulário aparece na barra lateral do seu blog, mas isso não é nada interessante. Não se preocupe, este é só um passo, depois iremos fazer com que ele não fique neste local, somente na página estática. Vamos seguir o tutorial e resolver esta questão.

2. Inserindo o formulário na página estática

Antes de mais nada você deverá criar uma página estática para o seu blog. Caso não saiba como criar esta página acesse nosso artigo Como criar páginas estáticas para seu blog do Blogger e crie uma.

Pronto! Página criada agora você deve abrir a edição da página e clicar no botão HTML.

Cole o código abaixo, recomendo não mudar o código, a menos que saiba o que esteja fazendo.

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

Publique a página.

Como personalizar o formulário de contato

Você já fez todos os passos, mas o formulário de contato ainda aparece na barra lateral de seu blog e você gostaria de personalizar o seu formulário de contato com outras cores e fontes. Tudo bem, vamos ver como podemos fazer isso.

No painel do Blogger clique em "Modelo", "Editar HTML" e tente localizar a linha abaixo:

]]></b:skin>

Cole o código abaixo logo acima da tag encontrada.

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

Lembra que o formulário de contato ainda está na página principal? Na verdade estava, observe que no final deste último código você encontra a instrução "display: none", e é esta instrução que esconderá o o gadget de sua barra lateral.

Se você conhece um pouco de CSS poderá alterar algumas partes do código e personalizar o seu formulário de contato.

Espero que tenha dado tudo certo e que você tenha gostado do artigo. Não perca o Entenda Web de vista, curta nossa página e entenda sempre mais.

Encontrei essa interessante dica no Mundo Blogger.

Veja também:
Top 10 sites para download de templates gratuitos para Blogger
Melhore as visitas no seu blog com o widget LinkWithin
Como colocar comentários do Facebook no seu blog - Sem duplicar nos posts

Conheça nossos blogs:
Entenda Games
Kpratu
Belamila

Share This:

Tags:

• Anterior
• Próximo