- O formulário de contato é um item essencial em nosso blog, afinal temos como objetivo realizar contatos com marcas e futuros parceiros, clientes para gerarmos renda com nosso blog.
- Dessa maneira esse item é indispensável ao nosso blog, além de disponibilizar um formulário o mais profissional possível ele deve estar sempre visível no menu facilitando que sejamos encontrados.
-
- O template do blog possui um widget de formulário de contato nativo que pode ser customizado, mas a ferramenta estará localizada na barra lateral ou rodapé do blog, o que na minha opinião não torna o blog tão profissional.
- A boa notícia é que podemos transferi-lo para uma página estática, personalizá-lo e até mesmo incluir nossas informações de contato das redes sociais, deixando tudo bem profissional.
-
- Deixarei tudo bem explicado, primeiro como desativar a visualização do formulário na barra lateral (sidebar), depois como inserir na página estática por último personalizar.
- Lembre-se sempre de que você instalar algum código novo no blog antes testar no blog de teste, e realizar um backup antes de instalar no blog oficial, caso algo dê errado.
- Confira com ficará o seu formulário, na página abaixo escolhi o segundo modelo.
- A primeira etapa é abrir o painel do blog, ir ao layout e instalar o widget do formulário de contato.
-
- Agora, use ctrl + f e digite o assunto na caixa de pesquisa aberta, personalizar, editar HTML e digite o seguinte trecho:
]]> </ b: Skin>
- Cole o seguinte código acima desta observação final:
# ContactForm1 {Display: Nenhum! importante;}
- Salve e volte ao painel página estática, adicione uma nova, nomeie a página, no lado esquerdo do editor de postagem, você verá um clique de lápis para expandi-la, e seu formulário será instalado na visualização escrita de HTML.
- Bônus três personalizações diferentes para você deixar o formulário combinando com seu layout, confira!
Primeiro modelo de formulário
<style type="text/css">
.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:#C71585;box-shadow:5em 0 0 0 #fffafc,10em 0 0 0 #ff1493,15em 0 0 0 #d09080,20em 0 0 0 #c71585,25em 0 0 0 #d09080,30em 0 0 0 #ff1493,35em 0 0 0 #ff00ff,40em 0 0 0 #c71585,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%;margin:25px 0 0;padding:10px;font-size:15px;color:403c52;border-color:#6e688d;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:#fffafc;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#de817d;border:0;border-bottom:2px solid #c71585;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;}
</style>
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<hr />
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" />
</div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == "") {this.value = "E-mail address";}" onfocus="if (this.value == "E-mail address") {this.value = "";}" size="30" type="text" value="E-mail address" />
</div>
<div style="clear: both;"></div>
<div class="contactf-message">
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == "") {this.value = "Type your message here...";}" onfocus="if (this.value == "Type your message here...") {this.value = "";}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form>
</div>
</div>
</div>
<style type="text/css">.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:#cdc9a5;background:#f7f9f8;border:1px solid #f7f9f8;-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 #cdc9a5;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #eee9bf;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,#cdc9a5 0%,#eee9bf 100%);box-shadow:0 1px 1px rgba(205, 201, 165);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#cdc9a5 10%,#eee9bf 80%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #f7f9f8;display:inline-block;box-shadow:0 1px 1px rgba(205, 201, 165) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.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;width:11px !important;height:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr /><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == "") {this.value = "E-mail address";}" onfocus="if (this.value == "E-mail address") {this.value = "";}" size="30" type="text" value="E-mail address" /></div><div style="clear: both;"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == "") {this.value = "Type your message here...";}" onfocus="if (this.value == "Type your message here...") {this.value = "";}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>
<style type="text/css">.contact-form-widget{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:#b5cbcc;background:#f2fcfe;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:#ffffff;display:block;outline:none;margin-bottom:20px;text-align:center;background:#b5cbcc;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;height:11px !important;width:11px !important;}</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr /><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == "") {this.value = "E-mail address";}" onfocus="if (this.value == "E-mail address") {this.value = "";}" size="30" type="text" value="E-mail address" /></div><div style="clear: both;"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == "") {this.value = "Type your message here...";}" onfocus="if (this.value == "Type your message here...") {this.value = "";}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>
- Agora, basta seguir as etapas para definir o formulário de contato de sua escolha.
- Se você tiver alguma dúvida, deixe nos comentários e responderei o mais breve possível.
- Para escolher as cores consultem a tabela de cores.
Nenhum comentário , comente também!
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.