Várias Dicas para Blogs: Formulário de Contato do Blogger personalizado
Formulário de Contato do Blogger personalizado
Bom pessoal! Neste tutorial, aprenderemos a personalizar o formulário de contato padrão do blogger utilizando CSS. O seguinte procedimento é bem fácil de ser feito, e não tem complicação para quem é iniciante. Isso é bastante interessante, pois você pode personalizar o formulário e deixá-lo com uma aparência bem agradável...
Clique link para vê: DEMONSTRAÇÃO
Então, você viu na demonstração que o formulário está aparecendo em uma determinada página do Blog com a aparência totalmente diferente comparada com a padrão. Agora o formulário possui cor de fundo e bordas diferenciadas, e os campos "nome, e-mail, e mensagem" estão com o tamanhos diferentes, enquanto ao botão "Enviar" ele também sofreu alterações. Enfim, você poderá alterar as cores e deixá-las aparente com a cor do layout do seu blog.
Personalizando Formulário de Contato do Blog
Primeiramente, essa personalização é proporcional para quem utiliza o Gadget Formulário de Contano em uma determinada página do Blog, certo. Então, se você não sabe como colocar, peço que leia o tutorial anterior, e em seguida prossiga a continuação dessa aula.
Formulário de Contato em uma determinada página do blog.
1º Passo: No painel de edição do blog, clique sobre a opção "Páginas".
Agora, se você já possui uma página para Contatos no seu Blog, clique na opção "Editar", e se por acaso, não tem uma página para contato crie uma "Nova Página"
2º Passo: Estando com a página aberta, abra o HTML da página, clicando na opção "HTML".
3º Passo: Copie o código disponibilizado logo abaixo, e depois cole no HTML da página, e depois Salve :
<div class="background-contact">
<hr style="align: center; background: #CDCDCD; border: 0px; height: 1px; width: 100%;" />
4º Passo: Pronto, depois de ter salvo a página de contato, em seguida vá na opção "Modelo" >> depois em "Editar HTML".
5º Passo: Agora, procure por esta seguinte Tag "]]></b:skin>" no HTML do blog, para facilitar a localização, utilize as teclas de atalho (Ctrl+F) do seu teclado.
Quando localizar, logo acima da Tag acrescente esse código CSS:
/*-----Formulário de Contato---*/
.background-contact {
background: #E6E8FA;
.contact-form-name,
color: #000000Y;
border-color: #3232CD;
border-color: #23238E;
Pronto! Após acrescentar o CSS no HTML, clique em visualizar para certificar que não vai aparece nem uma mensagem de erro, em seguida Salve o Modelo. Agora acesse sua página de contato e aproveite o novo formulário.
Editando as Cores do Formulário
Caso você deseja alterar as cores do formulário, é fácil, mais precisa de atenção pra realizar a alteração no código. Então, vamos lá!
Osb.: Vamos fazer as alterações no segundo código.
Plano de Fundo: Para alterar, basta você substituir a seguinte parte destacada em cor "Cinza": #E6E8FA por uma outra cor desejada. (Escolha uma Cor)
Bordas: Para mudar a cor das Bordas substitua a parte destacada em vermelho: #C0C0C0. (Escolha uma Cor)
Cores do Botão:
Cor da Borda do Botão: Substitua a parte destacada em cor Azul: #3232CD .(Escolha uma Cor)
Cor de Fundo do Botão: Substitua a parte destacada em cor de Rosa: #007FFF .(Escolha uma Cor)
Cor da Letra: altere a parte destacada em cor Verde: #fff .(Escolha uma Cor)
Cor de fundo 2 do botão: Quando passamos o mouse sobre o botão, ele muda de cor, para mudar essa cor altere a parte destacada em cor "Laranja": #23238E. (Escolha uma Cor)
Cor da Borda 2 do Botão: Altere a parte destacada em cor "Verde limão" : #23238E.
Cor da Letra 2 do Botão: Altere a parte destacada em vermelha: #fff.
Agora, é só salvar as alterações.
Bom pessoal! essa é a lógica para poder alterar as cores do formulário, é fácil, não tem complicação, mas espero que os exemplos mostrados logo acima tenham sidas úteis.
Espero que tenham gostado da dica, deixem comentário do que acharam. Ajudem nosso Blog Seguindo e curtindo nossa Fan Page no facebook. Obrigado
Postado por Kelven no dia sábado, janeiro 04, 2014
Allisswe CP 19 de janeiro de 2014 07:23
ei eu n to conseguindo enviar mensagens pelo formulario eu clico em enviar e n vai oque aconteceu?
Karina Corrêa 23 de janeiro de 2014 14:23
Nao deu nada certo!
Kelven pedro 5 de fevereiro de 2014 19:06
olá Karina Corrêa!
eu acabei de revisar o código apliquei o mesmo que esta no tutorial da mesma forma e ocorreu tudo certo. Não sei o que houve, possa ser que você tenha aplicado o código de forma errada. Queria que você tentasse novamente com mais atenção e depois deixasse comentário se conseguiu ou não.
Cecilia Cristina de Sousa 3 de abril de 2014 17:27
as cores não deram certo
lucas mateus 27 de janeiro de 2014 23:08
nao funfo!
Kelven pedro 5 de fevereiro de 2014 19:09
oi Lucas Mateus!
eu já revisei o código e ta tudo certo, queria que você tentasse novamente com mais atenção e em seguida deixasse uma comentário informando se conseguiu desta vez ou não, fico aguardando. obrigado!
Casadiverona Festa 14 de fevereiro de 2014 05:32
como eu faco para adicionar novos espacos ao formulario?
Kelven pedro 15 de fevereiro de 2014 13:18
Olá Casadiverona Festa!!!
Eu ja adicionei novos "campos de preenchimento no formulário", porém não consegui fazer com que os novos campos adicionados funcionassem perfeitamente, certo...
Mas em breve trarei mais novidades sobre o formulário de contato para Blog. Obrigado!
Luiz Carlos 26 de março de 2014 16:49
Pra onde vai os emails?
Kelven pedro 27 de março de 2014 17:41
Os e-mail's enviado através deste formulário serão destinado para seu e-mail, aquele mesmo e-mail que você utiliza para administrar o seu Blog (e-mail do Gmail).
Para visualizar, é só acessar seu e-mail e verificar sua caixa de entrada, e o e-mail estará com o remetente informando que este foi enviado pelo formulário de contato do blog...
espero ter ajudado. Obrigado!!!
Ateliê Dfestas 16 de julho de 2014 12:39
o botão nao quer mudar de cor de jeito nenhum, continua azul (sem selecionar) o resto deu tudo certo
Experiências Vividas 1 de dezembro de 2014 09:23
Nossa ^^ Salvou minha pele... foi o único tutorial que conseguiu me ajudar! Obrigada
Vanessa Diniz 23 de setembro de 2015 05:49
Aqui deu tudo certo! Muito obrigada!
joao silva 21 de julho de 2016 17:54
ficou bonito mas num envia as mensagens , talvez não seja compatível com alguns modelos de template.http://www.cineprojetor.tk/p/blog-page.html
PG 16 de janeiro de 2017 20:36
Olá, é preciso inserir o id do blog no html ou no css? Fiz conforme conforme sua orientação, ficou bonito mas não funciona, ou seja, a gente preenche todos os campos do formulário mas não consegue enviar.