Furmulário de contato em página estática personalizável

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

 

Demonstração

• 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 == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" 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>

Segundo modelo de formulário

<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 == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" 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>

Terceiro modelo 

<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 == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" 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 == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" 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.