Como colocar um Formulário de Contato personalizado na página do blog
Konnichiwa fadinhas & elfos! Como estão? Chegando com mais uma diquinha para o blog de vocês! Que tal fazer um formulário de contato em uma pagina fixa do blog? E ainda, deixa-lo apresentável com uma personalização rápida? Nesse post ensinarei como criar e ainda vou disponibilizar um modelo para usarem! Espero do fundo do meu

Agora copie e cole o código abaixo:
<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/><br/> <div>Seu E-mail: <em>(obrigatório)</em></div> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <br/><br/> <div>Sua mensagem: <em>(obrigatório)</em></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 Mensagem'/> <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>
Mas ele vai está assim, meio feinho, vamos deixar mais bonitinho? Lembrando que, caso não goste dessa personalização abaixo, eu fiz um outro post com várias opções, é só (ver aqui)
(preview)
Agora para aplicar a personalização. Vá em Layout, Editar HTML, Procure por ]]></b:skin> e ACIMA DELE cole:
#ContactForm1{ display:none!important;} /*---- Compatible contact Form by WG -----*/ .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 350px; width: 100%; font-weight:bold; } .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 16px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 10px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } .contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; } .contact-form-email-message:hover { border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; } .contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 16px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; } .contact-form-button { cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; } .contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background: #f9e5e5; } .contact-form-button:hover { text-decoration: none; background: #e5d0d0; border-color:#fff; } .contact-form-button:active { position: relative; top: 1px; background: #e5d0d0; } .WG-btnLogin { -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:15px; background:#edd7f4; background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0); background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')"; border:1px solid #edd7f4 !important; cursor: pointer; padding:11px 16px; font:bold 11px/14px Verdana, Tahomma, Geneva; text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff; -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px; } .WG-btnLogin:hover, .btnLogin:focus, .btnLogin:active{ background:#edd7f4; background:-moz-linear-gradient(top, #e5d0d0, #e5d0d0); background:-webkit-gradient(linear, center top, center bottom, from(#e5d0d0), to(#edd7f4)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')"; } .WG-btnLogin:active { text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; } .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 0px; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 6px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6XGq1jaalVgLnfUFc9hJwG0igZDyTwL-sCT3YXw3Hf26lSnB3oGo1LEnmEZLHxVSQvzbR6wvocHQytvquUIJ5QEVlCLuYDKsBdKN0G0hVcTjcrGTltiGDHBO5mFi2PxLMQiep4-N_v4/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzOryx-3CH4h5MAaqaPVP-BakCG5uLopGvz-TETR9dNNGwlZtfs3gVVyPUgeNxVMMECawQ1Hm4U17pWNTyPHwzosea0ZaKfbRg8BtBaXOKmxflDfFwlG-Or2pNxIVWAeRR53HYPcs0gI/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px; } .contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; } .contact-form-button { height: 28px; }
E prontinho! Se quiser mudar a cor do botão, mude essas cores: #e5d0d0 e #edd7f4 . (Para saber a # da cor que quer dê uma olhada nesse site: Colors code) Visualize e veja como ficou
Para onde irá as mensagens? Para o seu e-mail principal, o mesmo que você usou para criar o seu blog ,veja :
Os elementos não ficaram um abaixo do outro? Simples, vá na página mesmo e de um enter!
Como aumentar o tamanho dos elementos? Caso seja os títulos, modifique na página, se for letras que são digitados, modifique em font-size no código, e tamanho dos quadrados em max-width: 350px; width: 100%;
Se quiser tirar qualquer duvida é só comentar ok? Espero que tenham gostado! Até mais e Kissus! Tem postagem toda segunda (new!), quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *
Adorei a dica. Vou salvar seu link e alterar minha página de contatos.
ResponderExcluirVidas em Preto e Branco
Que bom que gostou! Altere, qualquer duvida é só falar aqui tá?
ExcluirObrigada pela visita! ♡
Eu não acho os códigos que você cita pra personalizar. O que estou fazendo de errado? simplesmente copiei o código...
ExcluirA parte da personalização? Não achou /head> ? Bem, todo blog tem a parte de / b : s k in > , sabe, aquela parte que todas as letras são azuis (É o css de todo o blog) Tenta a segunda opção. A personalização vc tem que colar lá, Clique Ctrl+F e pesquise por /b:skin , e cole.
ExcluirObs: Mas vc tem que ter feito o primeiro passo pra ver, o formulário, tem que colar o primeiro codigo na versão de HTML da pagina. É só clicar aqui: https://1.bp.blogspot.com/-SXH2nXVH7vE/V4_qkvhhxJI/AAAAAAAAOWM/gQXSlFFrcB8_jWULgmKhUSqF3NegHdehwCLcB/s640/html%2Bimagem%2Bdentro%2Bda%2Bpostagem.jpg
Se ainda não achar me manda um print. E-mail: juciane.damasceno2@hotmail.com , G+: https://plus.google.com/u/0/+JuneDamasceno
Eu adoro esses tutoriais que tu posta aqui! Esses dias testei um, mas no fim não deixei pq mexi em mais coisas e acabei esquecendo. Adorei!
ResponderExcluirBeijoss
http://tipsnconfessions.blogspot.com
Aaaah obrigada! Tentou qual? Vi lá, mudou o cabeçalho e menu né? Que legal, mas pra frente vou compartilhar essa parte também, se algum daqui não ir ou qualquer duvida é só falar tá?
ExcluirObrigada pela visita! ♡
Adoro blogueiras que divide experiencias e dica parabéns viu!
ResponderExcluirFica com deus sua linda juizo no corpo e na alma,
Um beijo da Ju Margarida.
Ei venha me ver mais vez em to te esperando la no blog moça
BLOG:
http://www.politicamenteincorreta.com/
Obrigada! Adoro ajudar, sempre ♡
ExcluirTe desejo o mesmo! Obrigada pela visita!
~ Visitei, e amei seu cabeçalho *-* Kissus!
Caramba! Adoreeeei esse passo a passo.
ResponderExcluirVou tentar fazer no meu.
Muito obrigada!
Um super beijo
Que bom que gostou! Tenta!
ExcluirVai ficar completo e ainda meigo! Obrigada você pela visita e por comentar ♡
Kissus
Fiz ontem deu super certo,Ameeeeiii!!! Obrigada por compartilhar seu trabalho com a gente! 💕
ResponderExcluirBeijos
Tamara
tamaravilhosamente.com
Que bom, ficou ótimo, só aconselho deixar o (enviar) embaixo também, é só dar um enter hehe. Que nadaaa, obrigada você! Kissus!
Excluirola vc me ajudou muito parabéns
ResponderExcluirQue bom, fico muito feliz em saber!
ExcluirEu apliquei ao meu blog, adorei! Porém, quando o leitor vai em contatos para enviar-me uma mensagem, quando ele clica em enviar, só fica carregando. O que houve?
ResponderExcluirFaltou fazer a parte do ID, te respondi por e-mail, e fico feliz que conseguiu resolver! Kissus!
Excluirestou com o mesmo problema que ela, pode me ajudar?
ExcluirAaah fico feliz em saber que deu certo! Mas vale lembrar que, você pode descer o botão de enviar apertando enter okay? Kissus e obrigada pela visita <3
ResponderExcluirobrigada gata :)
ResponderExcluirApaixonei. Mas, não funcionou. Quando eu clico em "enviar", simplesmente nada acontece.
ResponderExcluirPois estou com o mesmo problema, já conseguiu resolver??
ExcluirDescobri a resposta, primeiramente você tem que criar um wiget de formulario lateral em seu blogger ai vai funcionar o codigo do tutorial.
ExcluirDesculpe a demora... Consegui sim, mas não com esse tutorial. Eu estudei um pouco de PHP e fiz um formulário top.
ExcluirNão consegui fazer o meu blog não tem esse numero de ID que é muito ruim, não consigo colocar o link do blog?
ResponderExcluirO seu é blogger? Todo Blogger tem
ExcluirAdorei. Quando eu clico em "enviar", simplesmente nada acontece., pode me ajudar por favor 😕?
ResponderExcluirDeixe aqui seu blogger para eu dar uma olhada! Mas vê se copiou os codigos certinhos, tenta adicionar o formulário padrão na sidebar e apaga-lo depois, as vezes é algum bug
ExcluirIsyandradee.blogspot.com
ExcluirOlá, eu fui lá e testei, para mim mostrou que a mensagem foi enviada, o aviso aparece bem rápido mesmo, dê uma olhada no seu e-mail se chegou
ExcluirEntão é enviada mas não chega no meu e-mail
ExcluirSeu post foi muito útil, consegui fazer no meu blog
ResponderExcluirFico feliz em saber que gostou e que ainda funcionou certinho! Obrigadaa
ExcluirAdorei o post! Você explica muito bem.
ResponderExcluirResolveu meu problema!
Fico feliz em saber que ajudou! Obrigadaa
ExcluirFui lá no ]]><b: skin e colei em cima o código como você orienta. Não deu certo para mim. :(
ResponderExcluirto usando até para mandar mensagens sms, para o bin ladem no inferno..., GRANDE formulário rsrsrsrsrs...
ResponderExcluirnossa kk
Excluircopie o formulário de novo e tente novamente mais tarde, fique fazendo isso até inteirar umas 300000000 vezes seguidas, tente fazer isso rápido, e intermitentemente, rsrs... ahamm...
ResponderExcluirObrigada, te desejo o mesmo! Infelizmente esta postagem é bem antiga. Porém eu uso esse formulário até hoje e continua funcionando. As vezes alguns templates não pegam, principalmente os prontos da Internet. Deixe seu blog para poder dar uma olhada! Kissus
ResponderExcluirEu tbm tenho tentando colocar alguns formulários, mas percebi que o botão em si nunca funcionava... acabei descobrindo que o gadget de formulário padrão do blog tem que estar visível para o meu formulário de página interna funcionar. Ainda to tentando resolver isso... alguma sugestão?
ResponderExcluirAcredito que essa parte #ContactForm1{ display:none!important;} oculta
ExcluirNossa! Muitissimo obrigado, me evitou o trabalho de digitar esses códigos tudo, kkkkkkkk!! :p
ResponderExcluirE o layout inicial é perfeito pro meu blog, que tem o background preto.
Mais uma vez, muitíssimo obrigado.
Que bom que gostou, obrigada pela visita e por comentar!
ExcluirQualquer coisa tem mais estilos de formulários em outro post! Vou atualizar lá jaja