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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; } .contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 6px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .contact-form-name { background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px; } .contact-form-email { background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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?
ExcluirAhhh obrigada, coloquei no meu blog, deu certo <3
ResponderExcluirYohanna Ferraz
https://pravocesaber-pedagogia.blogspot.com/
Aaah 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
Excluirobrigada 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. :(
ResponderExcluirBoa noite!
ResponderExcluirEspero que esteja tudo bem com você, com sua família e todos ao teu redor!
Apliquei no blog, fiz o teste e não está funcionando. O que poderá ter dado errado?
copie 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...
ExcluirObrigada, 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
Excluirto usando até para mandar mensagens sms, para o bin ladem no inferno..., GRANDE formulário rsrsrsrsrs...
ResponderExcluirnossa kk
ExcluirEu 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