Formulário de contato

Oi Augusto, eu tive problema semelhante. Resolvi o meu usando o código abaixo em página estática e acima do </html> cola o seguinte:

<b:section class='contact' id='contact' showaddelement='yes'>

  <b:widget id='ContactForm1' locked='true' title='Formulário de contato' type='ContactForm' version='1'>

    <b:includable id='main'>

<div class='contact-form-widget'/>

</b:includable>

  </b:widget>

</b:section>

Envia direitinho para o meu email e fica bem bonito no blog. Esses modelos prontos de formulário online não gostei:

Na página estática:

==================================

<style>

.form, .contact-form-email-message, .contact-form-email, .contact-form-name, .contact-form-telefone{

margin: 0 auto;

max-width: 700px;

width: 100%;

font-family: Oswald;

font-size: 16px;

outline:none;

}

*:focus {

    outline: none;

}

.contact-form-name {

background:#FFF url('https://1.bp.blogspot.com/-8bwBiPxOQ_4/WT3EyJjW2PI/AAAAAAAAAqc/ozuJ4Ssml0cJCs3fjxOBotkVpyQzRSDwgCLcB/s1600/111-user.png') no-repeat 5px 8px;

border: 1px solid #F99EB4;

box-sizing: border-box;

color: #000;

display: inline-block;

height: 50px;

margin: 0;

margin-top: 5px;

padding: 8px 5px 8px 40px;

vertical-align: top;

outline:none;

text-transform: capitalize;

}

.contact-form-telefone {background:#FFF url('https://2.bp.blogspot.com/-i7yDTD3Pwzc/WT3ExuvHyVI/AAAAAAAAAqY/3RDFv4QiXXcobpXXkp7AYMZ3eTomWIyuQCLcB/s1600/Deep_Telephone.png') no-repeat 5px 8px;

border: 1px solid #F99EB4;

outline:none;

box-sizing: border-box;

color: #000;

display: inline-block;

height: 50px;

margin: 0;

margin-top: 5px;

padding: 8px 5px 8px 40px;

vertical-align: top;

}

.contact-form-email {background: #FFF url('https://3.bp.blogspot.com/-68IzsjhzW-k/WT3ExIwr3eI/AAAAAAAAAqU/-moEYjSGjXsKuNZ-jXNg5sQN0kuGg8IkwCLcB/s1600/Email.png') no-repeat 5px 8px;

border: 1px solid #F99EB4;

outline:none;

box-sizing: border-box;

color: #000;

display: inline-block;

height: 50px;

margin: 0;

margin-top:10px;

padding: 8px 5px 8px 40px;

vertical-align: top;

}

.contact-form-email-message {background:#FFF url('https://2.bp.blogspot.com/-5ZPv247_vHs/WT3EwjpdwKI/AAAAAAAAAqQ/2o0qiiUmUUQU96rIRxINQidtkgZxU8X-wCLcB/s1600/Notes.png') no-repeat 5px 8px;

padding: 8px 5px 8px 100px;

border: 1px solid #F99EB4;

box-sizing: border-box;

outline:none;

resize: none;

color: #000;

display: inline-block;

font-family: Oswald;

font-size: 18px;

margin: 0;

margin-top:10px;

vertical-align: top;

height: 300px;

}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-telefone:hover, .contact-form-email-message:hover {

border: 1px solid #703824;

}

.contact-form-button {

height: 30px;

line-height: 20px;

vertical-align: baseline;margin: 0 2px;

outline: none;

cursor: pointer;

color:#fff;

text-align: center;

font-family: Oswald;

font-size: 14px;

padding: .5em 2em .55em;

box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

text-decoration: none;

}

.contact-form-button:active {position: relative;top: 1px;

background: #703824;

color: #fff;}

.contact-form-button-submit, .button-color {

margin-top:10px;

border-radius: 0px;

border: none;

background: #F99EB4;

color: #703824;

}

.button-color:active, .button-color:hover {

border: none;

background: #703824;

color: #fff;

}

#ContactForm1_contact-form-error-message {

color: #703824;

background-color: #F99EB4;

font-size: 20px;

text-align: center;

margin-top: 15px;

border: none;

}

#ContactForm1_contact-form-success-message {

color: #fff;

background-color: #703824;

margin-top: 15px;

border: none;

text-align: center;

font-size: 20px;

}

</style>

<br />

<div class="form">

Oi, gostaria de falar comigo? Me mande uma mensagem!

<br />

<form name="contact-form">

<input autocomplete="off" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Nome&quot;;}" onfocus="if (this.value == &quot;Nome&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Nome" />

<input autocomplete="off" class="contact-form-telefone" id="ContactForm1_contact-form-telefone" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Telefone&quot;;}" onfocus="if (this.value == &quot;Telefone&quot;) {this.value = &quot;&quot;;}" size="30" telefone="telefone" type="text" value="Telefone" />

<input autocomplete="off" class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email&quot;;}" onfocus="if (this.value == &quot;Email&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email" />

<textarea autocomplete="off" class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Texto da mensagem...&quot;;}" onfocus="if (this.value == &quot;Texto da mensagem...&quot;) {this.value = &quot;&quot;;}" type="text" value="Texto da mensagem..."></textarea>

<input class="contact-form-button contact-form-button-submit button-color" type="reset" value="APAGAR" />

<input class="contact-form-button contact-form-button-submit button-color" id="ContactForm1_contact-form-submit" type="button" value="ENVIAR MENSAGEM" />

<br />

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

</form>

</div>

Read Full Story...