6 MODELOS DE FORMULÁRIO DE CONTATO HTML PARA BLOGGER BLOGSPOT

CLIQUE  NA IMAGEM

 <style>

.tb-contact-form-widget{

background-color:#444;

color:#ffffff;

padding:25px;

}

.srbtn{display:inline-block;}

.cform-button, .btn-reset{

background-color:#f1f1f1;

padding:5px 30px;

}

.cform-button:hover {

background-color: #35617d;

color: #fff;

}

.btn-reset:hover {

background-color: #8b0a00;

color: #fff;}

.tb-contact-form-widget h3{

text-align:center;

margin:20px 0;

padding:10px 0;

border-top: 1px dotted #f5f5f5;

}

.c-form-name, .c-form-email {

width: 50%;

max-width: 50%;

margin-bottom: 10px;

padding: 10px;

border: 1px solid #CCC;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

}

.c-form-email-message {

width: 95%;

max-width: 95%;

margin-bottom: 10px;

padding: 10px;

border: 1px solid #CCC;

border-radius: 5px;

box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

}

.c-form-name, .c-form-email, .c-form-email-message input:focus{

background-color: #FFF;

box-shadow: 0 0 0 1px #ccc inset;

border-color: #ccc;

outline: none;

-moz-box-shadow: 0 0 0 1px #cccc inset;

-webkit-box-shadow: 0 0 0 1px #ccc inset;}

.b-social-buttons{list-style-type:none;text-align:center;}

.b-social-buttons li{

display:inline-block;

padding:15px;

background-color:#f5f5f5;

border-radius:5px;

}

.b-social-buttons li a{

color:#333;

text-decoration:none;

}

#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{

width:100%;

margin-top:35px;

}

</style>

<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Seu nome: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> Endereço de e-mail: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Mensagem:</span><br /> <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /><input type="reset" class="btn-reset" value="Limpar" /></div><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>

<h3>Redes sociais</h3>

<ul class="b-social-buttons">

<li><a class="btn-lg" href="https://www.instagram.com/samaroneoficial"><i class="fa fa-instagram"><span class="network-name">Instagram</span></i></a></li>

<li><a class="btn-lg" href="https://www.facebook.com/blogdosamarone"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>

<li><a class="btn-lg" href="https://youtu.be/oBwaxp7k8Gw"><i class="fa fa-youtube-play"><span class="network-name">Youtube</span></i></a></li>

<li><a class="btn-lg" href="https://t.me/blogdosamarone"><i class="fa fa-telegram"><span class="network-name">Grupo do Telegram</span></i></a></li

</ul>

</div>

</form>

</div>

CLIQUE NA IMAGEM

<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 />
<div>
Seu Email: <i>(*)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Sua Mensagem: <i>(*)</i></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />

<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<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>

CLIQUE NA IMAGEM

<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:#777;

background:#f4f4f4;

border:1px solid #eeeeee;

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

bottom:-32px;

content:'';

position:absolute;

right:50%;

margin-right:-100px}

.contactf-message:before{

border-left:80px solid #eeeeee;

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,#FF0073 0%,#B70052 100%);

box-shadow:0 1px 1px rgba(255,0,115,0.5);

border:0;

-webkit-border-radius:20px;

-moz-border-radius:20px;

border-radius:20px}

.cbluebutton span .contact-form-button-submit{

background:linear-gradient(to bottom,#FF0073 0%,#B70052 100%);

font:bold 16px "Helvetica Neue",sans-serif;

height:35px;

width:100%;

color:#ffffff;

display:inline-block;

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"><div class="form"><form name="contact-form"><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Message" rows="5" value="Digite sua mensagem aqui" onblur='if (this.value == "") {this.value = "Digite sua mensagem aqui";}' onfocus='if (this.value == "Digite sua mensagem aqui") {this.value = "";}'></textarea>

</div>

<div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span></div><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Nome" onblur='if (this.value == "") {this.value = "Nome";}' onfocus='if (this.value == "Nome") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><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>

CLIQUE NA IMAGEM

<style type="text/css">

.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 cursive;

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

</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget">

<div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="Endereço de e-mail" size="30" type="text" value="Endereço de e-mail" onblur='if (this.value == "") {this.value = "Endereço de e-mail";}' onfocus='if (this.value == "Endereço de e-mail") {this.value = "";}'/></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="Escreva sua mensagem aqui..." rows="5" value="Escreva sua mensagem aqui..." onblur='if (this.value == "") {this.value = "Escreva sua mensagem aqui...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar e-mail" /><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>

CLIQUE NA IMAGEM

<style type="text/css">
.widget.ContactForm{z-index:1}
.contact-form-widget{
margin-left:auto;
margin-right:auto;
width:600px;
max-width:100%;
padding:25px 0;
background:#EBEBE3;
-webkit-border-radius:2%;
-moz-border-radius:2%;
border-radius:2%}
.contact-form-widget .form{width:91%;margin:0 auto}
.ribbon{
font:16px Arial;
text-shadow:0 1px 2px rgba(0,0,0,0.25);
position:relative;
background:#cc1473;
color:#fff;
text-align:center;
padding:1em 2em;
margin:0 -16px}
.ribbon:before,.ribbon:after{
content:"";
position:absolute;
display:block;
bottom:-1em;
border:1.5em solid #cc1473;
z-index:-1}
.ribbon:before{
left:-1.7em;
border-right-width:1.2em;
border-left-color:transparent}
.ribbon:after{
right:-1.7em;
border-left-width:1.2em;
border-right-color:transparent}
.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{
content:"";
position:absolute;
display:block;
border-style:solid;
border-color:#880b4b transparent transparent;
bottom:-1em}
.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}
.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}
.contactf-name,.contactf-email,.contactf-message{
text-align:left;
margin-top:25px;
color:#a1937b;
font-size:13px;
}
.contactf-name,.contactf-email{float:left;width:100%}
.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:10px 0 0;
padding:10px;
font-size:12px;
color:#aaa;
border-color:#DBD6D1;
border-width:1px;
box-shadow:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px}
.contact-form-name,.contact-form-email{height:35px}
.contact-form-email-message{height:100px}
.contact-form-button-submit,.contact-form-button-submit:hover{
margin-top:25px;
width:100%;
height:37px;
font:normal 12px Arial;
outline:none;
letter-spacing:1px;
color:#fff;
text-align:center;
cursor:pointer;
color:#ffffff;
border:1px solid #cc1473;
background:#cc1473;
}.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"><h2 class="ribbon"><strong class="ribbon-content">Fale com a gente!</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Seu nome:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Nome" size="30" type="text" value="Nome" onblur='if (this.value == "") {this.value = "Nome";}' onfocus='if (this.value == "Nome") {this.value = "";}' /></div><div class="contactf-email">E-mail:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="Seu endereço de e-mail aqui" size="30" type="text" value="Seu endereço de e-mail aqui:" onblur='if (this.value == "") {this.value = "Seu endereço de e-mail aqui";}' onfocus='if (this.value == "Seu endereço de e-mail aqui") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message">Mensagem:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Digite sua mensagem aqui..." rows="5" value="" placeholder="Digite sua mensagem aqui..." value="Digite sua mensagem aqui..." onblur='if (this.value == "") {this.value = "Digite sua mensagem aqui...";}' onfocus='if (this.value == "Digite sua mensagem aqui...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar e-mail" /><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>

CLIQUE NA IMAGEM

<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:14px;
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:19%;
height:30px;
font:normal 14px Arial;
letter-spacing:1px;
color:#fff;
display:block;
outline:none;
margin-bottom:20px;
text-align:center;
background:#35617d;
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">
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Seu nome aqui" onblur='if (this.value == "") {this.value = "Seu nome aqui";}' onfocus='if (this.value == "Seu nome aqui") {this.value = "";}'  />
</div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="Seu endereço de e-mail aqui" onblur='if (this.value == "") {this.value = "Seu endereço de e-mail aqui";}' onfocus='if (this.value == "Seu endereço de e-mail aqui") {this.value = "";}'/></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="email-message" rows="5" value="Mensagem aqui" onblur='if (this.value == "") {this.value = "Mensagem aqui";}' onfocus='if (this.value == "Mensagem aqui") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /><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></div></div>