Como Colocar Formulário ou Página de contato no Blogger

Neste post, vou mostrar como colocar o formulário de contato padrão do blogger, na barra lateral e em uma página estática.

Vejamos:

1. Adicionar gadget formulário de contato na barra lateral

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

Clique em “Mais gadgets” e escolha a opção “Formulário de contato”:

Salve as modificações.

Bom, com isso o formulário já estará funcionando na barra lateral do seu blog. Mas se a sua intenção é deixar o formulário de contato em uma página estática, não seria interessante que o formulário aparecesse, também na sua barra lateral. Bom vamos continuar então.

2. Adicionar formulário de contato na página estática do blogger:

Crie uma página estática, coloque o titulo da página como 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>

Não altere nada no código!

3.Personalizar o formulário de contato padrão do blogger:

É possivel aplicar alguns estilos CSS ao formulário de contato, como por exemplo, aumentar a largura de modo que se adeque a largura da sua página estática.
Acesse o menu “modelo >> Editar HTML >> e procure por:
]]></b:skin>
Ao lado desta tag você verá uma setinha preta. Clique nela. 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---*/

}

Caso tenha dificuldade em localizar essa tag, recomendo que leia o tópico Como localizar o Código CSS no novo editor , no tutorial sobre o editor html.

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.

Bom, é isso!! Espero que gostem. 

Sei que ando “meia sumida”, e estou devendo muitos tutoriais para vocês. Tive que dar uma “desacelerada” nos tutoriais por motivos pessoais, mas aos poucos estou retornando, e me atualizando sobre alguns recursos novos para poder trazer coisas legais pra vocês.