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

4 comentários:

  1. Ahh eu acho esse post bem legal e muito útil sim, mas acho que combina mais com aqueles layouts estilo Crazy Girl, Depois dos quinze e por ai vai.. Dependendo do modelo do layout parece que fica meio nada ver sabe? Mas eu mesma já usei esse tuto e amava >.< Beijos amor =3

    ResponderExcluir
    Respostas
    1. a Roh aqui de novo? tá me mimando de mais u.u
      realmente, não é todo layout que combina, tem uns que ficam mais legais colocar a Ask na sidebar
      besos <33

      Excluir
  2. é um ótimo tuto, juju!
    dps vou experimentar usá-lo asgjhdg <33
    eu atualizava teu blogue todo dia pra ver se tu já tinha postado, não faça isso comigo não, muié!
    agr leve a sério o meu "posta logo", ok?
    POSTA LOGO, mas é LOGO mesmo, viu?
    beijooooss <33
    Brunaaaa

    ResponderExcluir
    Respostas
    1. usa sim, senão vou descer com tijolo pra cima de ti u.u
      eu não postava por falta de tempo, vou tentar ser mais pontual <3
      vou levar a sério sim, minha jovem, amen ~ doim shueuse
      besooooooooooooooooos no core =3

      Excluir

Yoo chokito ^y^
Vejo que está indo comentar, fico feliz por isso, cada comentário pra mim é uma voz dizendo "Continue, não se desvie do seu sonho!" então muito obrigada... Mas, antes eu vou dizer algumas regrinhas, ok?

- Por favor, não fique no anônimo apenas para xingar alguém. E se não me engano, isso é o quê as blogueiras mais pedem. Eu ficarei muito agradecida se ninguém aqui praticar coisas do tipo, até porque estamos num pedacinho do céu, e temos que preservar a paz, certo? Certo!

- Se quiser pedir afiliação, é só ir na página que está no menu lá em cima. Querem uma asinha para subir? =3

- Desculpem, mas não faço parte do "Seguindo, segue de volta?", até porque aqui não é Twitter, né? E mesmo assim, eu visitarei todos os blogs, e seguirei se gostar do conteúdo. Não me importo com o layout, até porque estamos aqui para ajudar uns aos outros, né?

- Em breve estarei fazendo uma Ask para o blog, mas enquanto isso podem perguntar por aqui mesmo.

Bom... Eu acho que é só isso! Se quiserem algum tuto ou tag, podem pedir à vontade. Besitos, amo vocês! <3