Inserindo formulário de contato em páginas estáticas do blogger
2
- Agora precisamos ocultar o formulário adicionado. Para esta tarefa, abra o
editor de HTML do seu blog e procure pela tag ]]></b:skin>.
Acima dela cole o seguinte código e salve:
#ContactForm1 {display: none! Important;}
3
- Agora, crie a nova página para o formulário de contato e cole nela o seguinte
código de formulário padrão:
<center>
<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/><br/>
<div>Seu E-mail: <em>(obrigatório)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<br/><br/>
<div>Sua mensagem: <em>(obrigatório)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar Mensagem'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</center>
Caso queira um formulário com estilos e cores personalizadas, utilize os códigos abaixo:
<style type="text/css">
.contact-form-widget{
margin-left:auto;
margin-right:auto;
width:100%;
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; /* CORES DO TOPO */
}
.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; /* TAMANHO DA FONTE DOS CAMPOS PREENCHÍVEIS */
color:#cccccc; /* COR DA FONTE DOS CAMPOS PREENCHÍVEIS */
border-color:#E8E8E8; /* COR DA BORDA DOS CAMPOS PREENCHÍVEIS */
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; /* TAMANHO DA FONTE DO BOTÃO ENVIAR MENSAGEM*/
color:#ffffff; /* COR DA FONTE DO BOTÃO ENVIAR MENSAGEM */
text-align:center;
text-shadow:0 1px 2px rgba(0,0,0,0.25);
background:#35617d; /* COR DO BOTÃO ENVIAR MENSAGEM */
border:0;
border-bottom:2px solid #1c4c6a; /* COR DA BORDA DO BOTÃO ENVIAR MENSAGEM */
outline:none;
cursor:pointer;
-webkit-box-shadow:inset 0 -2px #1c4c6a; /* COR DA BORDA DO BOTÃO ENVIAR MENSAGEM */
box-shadow:inset 0 -2px #1c4c6a; /* COR DA BORDA DO BOTÃO ENVIAR MENSAGEM */
}
.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="Nome" onblur="if (this.value == "") {this.value = "Nome";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Nome" /></div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="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 = "";}" size="30" type="text" value="Endereço de e-mail" /></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 = "Digite sua mensagem aqui...";}" onfocus="if (this.value == "Digite sua mensagem aqui...") {this.value = "";}" rows="5" type="text" value="Digite sua mensagem aqui..."></textarea><input class="contact-form-button contact-form-button-submit" 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>
</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:#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>
<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>
<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>
<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>
<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 href="ENDEREÇO DO SEU INSTAGRAM" class="btn-lg"><i class="fa fa-instagram"><span class="network-name">Instagram</span></i></a></li>
<li><a href="ENDEREÇO DO SEU FACEBOOK" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="ENDEREÇO DO SEU TWITTER" class="btn-lg"><i class="fa fa-twitter"><span class="network-name">Twitter</span></i></a></li>
<li><a href="ENDEREÇO DO CANAL YOUTUBE" class="btn-lg"><i class="fa fa-youtube-play"><span class="network-name">Youtube</span></i></a></li>
</ul>
</div>
</form>
</div>
