Estilo Elegante Para o Formulário de Contato do Blogger
Índice
Alguns meses atrás o Blogger lançou o gadget de Formulário de Contato do Blogger, um formulário que nossos leitores pedem se comunicar de forma privada conosco sem a necessidade de enviar um e-mail. O gadget formulário de contato do Blogger é muito útil, e ainda que não tenha muitas opções de personalização inclui os campos mais básicos e suficientes que a maioria dos blogueiros precisa. A vantagem deste gadget é que não temos que depender de serviços externos que nos limitam com um número mensal de envios e nos obrigam a manter o link deles visível.
A desvantagem é que o modelo padrão do formulário de contato do Blogger é muito simples, e talvez seja uma das razões porque muitos usuários do Blogger não querem usa-lo.
A boa noticia é que podemos fazer algumas modificações e adaptá-lo ao modelo do nosso blog. Inclusive alguns meses atrás eu publiquei um tutorial ensinando como Criar página de contato com gadget formulário de contato oficial do Blogger
Hoje lhes trago uma dica muito legal; um Estilo Elegante para o formulário de contato do Blogger!
Se quiser você pode ver a demonstração: AQUI
É muito simples, é só copiar o código e colar. Primero você precisa ter o gadget Formulário de contato do Blogger instalado no seu blog, se você ainda não tem; siga os seguintes passos.
1. Entre na opção layout como mostrado no exemplo abaixo.
2. Adicionar Gadget
3. Mais gadget
4. E escolha Formulário de Contato
5. Clique em salvar.
Depois de colocar o gadget formulário de contato no seu blog entre em Modelo | Editar HTML e antes de ]]></b:skin> copie e cole o código do estilo elegante para o formulário de contato do blogger.
Clique em Salvar Modelo e está feito.
/* Formulário de Contato, Estilo elegante
----------------------------------------------- */
.contact-form-widget {
width:100%;
max-width: 320px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zpoONaml296aEPfZk89oMWNCwc6OM32HkzPO-eHNPkOjZn2IB77YD9BkZLCdvEyrJkbroP3YPfM4_ko-ahRXmy8fgqVDDnai_bk1ivaXJ_dQr6uLND4euZyfeFO1SCkZBJ8-S77nmGSY/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.contact-form-widget div.form {
background: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwe6Q7661HsdFTz2ep2UULCrHCc7OoRx0LWtmAUH9IGNmXhI9Rjs3ftFKqEvES7VJeCIA1vqSbnVzEq5q5x2cvCuMamyakiERz48GVNKCzbU6AMHH-lKcNnq0EHmkulGxjZS3q8uKAKi-e/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 1px;
}
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
.contact-form-button-submit {
width: 100%;
max-width: 45%;
height: auto;
background: #28597a;
padding: 2px 2px;
border-radius: 2px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}
Espero que você tenha gostado dessa novidade.