5 Estilos de Formulários de contato para Blogger

março 12, 2019


Konnichiwaa fadinhas e elfos! Como vocês estão? O meu post de como colocar fomulário de contato em página fixa, ajudou algumas pessoas. Recentemente percebi que tem algumas visitas e um aumento na taxa de rejeição, achei necessário trazer esse post, para as pessoas que gostaria de ter outro design de formulário poder ter opção de escolha, separei 5 designs, veja qual você prefere e personalize o seu! E então, let's go?



Se você ainda não colocou um formulário de contato na sua página, siga esse tutorial COMO COLOCAR UM FORMULÁRIO DE CONTATO PERSONALIZADO NA PÁGINA DO BLOG na parte de PERSONALIZANDO pare e venha para esse post! Caso você queira algum desses abaixo copie algum desses, okay? Vamos lá!

Vá em Layout, Editar HTML e procure por /b:skin , então acima dele cole alguma das personalizações abaixo, escolha o que mais gostar e salve!

Formulário de contato simples/cute

Gostou? Copie e cole acima de /b:skin 

#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; }


Formulário de contato profissional



Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} /*---- Formulario Pro -----*/.contact-form margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;}

Formulário de contato com linha arco-íris



Gostou? Copie e cole acima de /b:skin 

hr {

    position:relative;

    height:.25em;

    border:0;

    overflow:hidden;

}

hr:before {

    content:"";

    display:block;

    position:absolute;

    top:0;

    left:0;

    height:.25em;

    width:5em;

    background:red;

    box-shadow:

        5em 0 0 0 orange,

        10em 0 0 0 yellow,

        15em 0 0 0 green,

        20em 0 0 0 blue,

        25em 0 0 0 indigo,

        30em 0 0 0 violet;

}



#ContactForm1{ display:none!important;} /*---- Formulario Rainbow -----*/ .contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}

Observação: Para a linha aparecer, é necessário que na página fixa você adicione um <hr> , é só colocar no inicio mesmo, não precisa fechar nem nada, apenas adicione <hr> junto com o codigo anterior do formulário nesse post, salve e pronto!


Formulário de contato negrito


Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} /*---- Formulario BOLD -----*/ .contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px arial;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Arial";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}


Formulário de contato vintage


Gostou? Copie e cole acima de /b:skin 

#ContactForm1{ display:none!important;} /*---- Formulario Vintage -----*/ .contact-form-widget margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px} .contact-form-button-submit,.contact-form-button-submit:hover{border-radius: 20px; background:#CBC7C4!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;} 

Por hoje é só! O que acharam? Qualquer dúvida é só perguntar nos comentários! Atenção: Tem apenas 8 dias para participar do sorteio da Kawaii Box aqui no blog, siga o blog e fique atento!  Fonte: Helpblogger. Redes Sociais do Sweet Magic: Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus

Leia também:

16 comentários

  1. Gostei do formulário em Negrito. Vai combinar com meu layout! Adorei :D

    Apenas eu, Day

    ResponderExcluir
    Respostas
    1. Legal que gostou, use, qualquer dúvida me fala!
      Kissus <3

      Excluir
  2. Gostei do negrito e do arco iris :3. Ótimos estilos para disponibilizar *-*
    Beijos,
    Mundo Perdido da Carol
    Instagram: @carolinsweet
    Fan Page

    ResponderExcluir
  3. Ameii, e estou o usando o Formulário de contato vintage!

    Seu blog é fofo, amo aqui <3

    Blog de uma Estudante de Pedagogia

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Mas uma dica, apegue a primeira personalização, você tá usando duas agora! Ache a antiga, pesquisando: Compatible contact , e apague

      Obrigada! <3 KIssus

      Excluir
    2. Olá, Achei essa parte, só não sei até onde apago kk
      Pode me ajudar?

      Excluir
    3. Oii, é até contact-form-button {
      height: 28px;
      }

      Excluir
  4. June, que dica maravilhooosa! Vou fazer isso com certeza! <3
    Não fazia ideia de como fazia e esse post ajudou muuito!

    Beijo!
    Cores do Vício

    ResponderExcluir
    Respostas
    1. Que bom que gostou!! Faça sim <3
      Tem poucos estilos na internet né? Espero que ajude!

      Kissus!

      Excluir
  5. Oii June!
    Gostei bastante dos estilos, um mais bonitinho que o outro. Eu até coloquei um no meu blog de receitas, mas o botão de "enviar" a mensagem não funciona. Você sabe me dizer como posso arrumar? Tentei várias vezes fazer alguma coisa mas não vai ;-;

    ResponderExcluir
    Respostas
    1. Oláa! Você colocou o seu número de ID?
      Normalmente é apenas isso, ver seu ID do blog e adiciona! Eu vou atualizar a postagem pois muita gente está esquecendo de fazer isso! Espero que dessa vez vá! Obrigada pela visita e kissus!

      Excluir
  6. Eii Juh! Eu já usava seu formulário no blog, agora coloquei no meu novo site e personalizei. Acontece que ele não estava funcionando em nenhum dos sites :( fui pesquisar o erro e encontrei este tutorial aqui:
    https://ferramentasblog.com/como-usar-o-novo-formulario-de-contato-do-blogger-em-paginas-estaticas/
    Eu segui as orientações e funcionou. Não sei se o problema é com meus templates, só sei que só voltou a funcionar depois que fiz o que ta neste post ai q coloquei. Resolvi comentar porque pode acontecer com mais gente.
    Beijos e obrigada mais uma vez por sempre compartilhar coisas fofas com a gente! amo seu blog <3

    Tamara
    tamaravilhosamente.com

    ResponderExcluir
    Respostas
    1. Oláa, legal você compartilhar, eu atualizei a postagem também.
      Outras pessoas ficaram confusas, principalmente porque precisava colocar ID e o pessoal passava reto de passo-a-passo, muito obrigada viu? Kissus

      Excluir