Adicionar formulário de contato padrão do blogger na página estática
Como adicionar formulário de contato padrão do blogger em uma página estática.
Há um tempo atras o Blogger lançou um novo gadget de Formulário de Contato padrão.
A sua instalação é simples e fácil de incorporar, sem precisar de adições de códigos ou configurações.
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.
A sua instalação é simples e fácil de incorporar, sem precisar de adições de códigos ou configurações.
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.
Neste tutorial, vou mostrar como implementar o formulário de contato padrão do blogger, em uma página estática.
Vejamos:]
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 adicionar 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”:
Clique em “Mais gadgets” e escolha a opção “Formulário de contato”:
Salve as modificações.
Se a sua intenção é deixar o formulário de contato apenas na página estática, é óbvio que não seria interessante que o formulário aparecesse, também na sua barra lateral.
Calma que este formulário ficará temporariamente na sua barra lateral, continue seguindo os passos do tutorial que eu vou ensinar uma maneira pra deixar o formulário só na página, sem que ele perca sua funcionalidade.
Se a sua intenção é deixar o formulário de contato apenas na página estática, é óbvio que não seria interessante que o formulário aparecesse, também na sua barra lateral.
Calma que este formulário ficará temporariamente na sua barra lateral, continue seguindo os passos do tutorial que eu vou ensinar uma maneira pra deixar o formulário só na página, sem que ele perca sua funcionalidade.
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:
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>
Publique a página.
3.PERSONALIZAR O FORMULÁRIO DE CONTATO PADRÃO DO BLOGGER:
É possível 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:
Ao lado desta tag você verá uma setinha preta. Clique nela. Agora cole o seguinte código logo ACIMA desta tag.
]]></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
Todos os trechos do código que você pode editar, já estão destacados.
Bom, é isso!! Espero que gostem.
#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.