Formulário de contato personalizado

Aye, sir! Peguei essa mania por causa do Happy, ignorem =3'

Tudo okay com vocês? O tutorial de hoje é até um tanto inútil se você ver por um lado, já que temos mais de mil e um ~le exagerada~ meios de comunicação de leitor>blogueiro nesse mundo. Mas eu acho fofo dependendo do que você escolher, claro ~dã~. Eu estarei passando o código para vocês personalizarem como quiserem ^-^ Qualquer dúvida, ou sugestão já sabem, né? Chamem o senhor comentário e.e

E não esqueçam de creditar eu e o MB, meus jovens. Se não a dona July vai ficar que nem a Santan Soul da Mira-san. Pera, era esse o nome? Deu branco agora, que merda SHUESHEU >.< 

1. Antes de tudo, adicione um gadget formulário de contato, como? 

Vá em Layout >> Adicionar um Gadget >> Mais gadgets >> Formulário de contato

Salve tudo e agora lá vamos nós para a segunda parte, caso você queira deixar o fomulário na sua sidebar (barra lateral) pule essa parte. E para quem não quer, não se preocupem pois ele ficará temporariamente na sua sidebar.

2. Agora vamos colocar o formulário em uma página, ok? 

Crie uma página (avá), já no editor clique em "HTML" e cole o código abaixo:

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

Salve e página, e logo logo estaremos 'dando vida' ao nosso formulário >.< 

3. Agora nós vamos nada mais nada menos que personalizar esse formulário sem vida (não sei de onde tirei isso)

Vá em Modelo >> Editar HTML >> E... vocês já sabem, né? Pesquisem por ]]><

Acima da tag procurada, cole esse código:

/*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---*/
}

Já está explicando onde deve editar, caso queiram colocar algo a mais, estão livres pra isso ;) 

Agora é só salvar e pronto ^-^

Vou dar dois mini avisos para vocês:

1- Nunca, nunquinha na sua vida exclua o gadget do formulário. E ele não vai aparecer no blog, relax.
2- Antes de colocarem "algo a mais" no código, tenham o conhecimento básico de HTML primeiro, em breve estarei postando sobre isso. 

bye bye, pandas =3' || July-chan ||
Até o próximo post...