4 de janeiro de 2014

15

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.
Formulário de Contato do Blogger


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.

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 :
Clique na imagem para visualizar
<center>
<div class="background-contact">
<form name="contact-form">
<div>
Seu Nome: </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<hr style="align: center; background: #CDCDCD; border: 0px; height: 1px; width: 100%;" />
<div>
Seu e-mail: </div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<hr style="align: center; background: #CDCDCD; border: 0px; height: 1px; width: 100%;" />
<div>
Sua Mensagem:</div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea>
<br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />

<br />
<div style="text-align: center&quot; max-width: width: 450px;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</center>


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 {
width: 500px;
text-align: center;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #E6E8FA;
border-color: #C0C0C0;
border-style:solid;
border-radius:10px 10px 0 0;
}

#formcontact{
background: #f00;}

.contact-form-name, 
.contact-form-email{
width: 250px;
max-width: 250px;
border-color: #333333;
color: #000000Y;   


.contact-form-email-message{
width: 100%;
max-width: 100%;
border-color: #333333;
color: #000000Y;
}

.contact-form-button-submit {
margin-bottom: 10px;
}

.contact-form-button-submit {  
width: 100px;  
height:30px;    
font-size: 18px;   
border-color: #3232CD
background: #007FFF;  
color: #fff;   
}
.contact-form-button-submit:hover { 
border-color: #23238E;  
background: #3366FF;  
color: #fff;  
}


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 

15 comentários:

  1. ei eu n to conseguindo enviar mensagens pelo formulario eu clico em enviar e n vai oque aconteceu?

    ResponderExcluir
  2. Respostas
    1. 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.
      no aguardo. obrigado!

      Excluir
  3. Respostas
    1. 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!

      Excluir
  4. como eu faco para adicionar novos espacos ao formulario?

    ResponderExcluir
    Respostas
    1. 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!

      Excluir
  5. Respostas
    1. Olá Luiz Carlos!
      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!!!

      Excluir
  6. o botão nao quer mudar de cor de jeito nenhum, continua azul (sem selecionar) o resto deu tudo certo

    ResponderExcluir
  7. Nossa ^^ Salvou minha pele... foi o único tutorial que conseguiu me ajudar! Obrigada

    ResponderExcluir
  8. 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

    ResponderExcluir
  9. 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.
    Att,
    Ramires Gaspar.

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook