728x90 AdSpace

segunda-feira, 8 de junho de 2015
Home > Tutoriais > Adicione e customize o widget formulário de contato do Blogger

Adicione e customize o widget formulário de contato do Blogger

Neste post eu vou explicar como criar uma página de contato numa página específica (página estática) com impressionante efeito de deslizamento, conforme se vê no site Seleções Web.

Primeiro temos que adicionar o “widget” formulário de contato na “sidebar” (barra lateral) do Blogger.


Feito isto, agora você tem que esconder esse “widget” na barra lateral. Para tanto, proceda da seguinte forma:

1. Vá para Painel do Blogger > Modelo> Editar HTML



2. Clique em Ir para um widget > ContactForm1



3. Clique na setinha lateral esquerda para expandir o widget, depois do widget expandido, delete a parte do código conforme está destacado na imagem, cuidando para não deletar nada além disso:



Sendo que esta parte do código deve ficar assim:



Feito isto, SALVE...

4. Em seguida, clique em Páginas > Nova página, e adicione título a sua página estática que agora servirá com Página de Contato:



5. Agora que você deu um título à sua página, selecione HTML. Copie o Código abaixo e cole na seção de HTML da página e então clique em Publicar.


-----------------------------------------------------------------------------------
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<section id="contact">
 <div class="sectionheader">
<h1>
Fale Conosco</h1>
</div>
<article>
 Envie-nos a sua mensagem<br />

  
   <label class="contactbutton" for="checkcontact"><div class="mail">
</div>
</label><input id="checkcontact" type="checkbox" />

   <form name="contact-form">
<div class="input_wrapper">
<input id="ContactForm1_contact-form-name" name="name" type="text" value="" /><label for="ContactForm1_contact-form-name">NOME</label></div>
<div class="input_wrapper">
<input id="ContactForm1_contact-form-email" name="email" type="text" value="" /><label for="ContactForm1_contact-form-email">EMAIL</label></div>
<div class="textarea_wrapper">
<textarea id="ContactForm1_contact-form-email-message" name="email-message"></textarea></div>
<div class="submit_wrapper">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
    
</div>
<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>
</article></section>

</div>
---------------------------------------------------------------------------------------------------------------


6. Após salvar e publicar a página, volte em Modelo > Editar HTML  e procure pela tag </head> (use ctrl+f dentro da caixa, se preferir) e logo acima dessa tag </head> adicione o código abaixo:

---------------------------------------------------------------------------------------------------------------

<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{
  background: #F0F0F0;
  font-family: Open Sans ,sans-serif;
  line-height:1.5em;
}
#contact {
width: 500px;
margin:2em auto;
background:white;
position: relative;
}
#contact::after {
content: &quot;&quot;;
display: block;
height: 30px;
width: 90%;
left: 5%;
bottom: 0;
position: absolute;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
border-radius: 100%;
z-index: -1;
}
#contact article {
  padding: 1em;
}
#contact h1 {
background: #0066B3;
font-family: Oswald ,sans-serif;
font-size: 1.75em;
padding: 0.6em 0 0.6em 0.4em;
color: white;
text-shadow: 0 0.06em 0 #424242;
position: relative;
}
.contactbutton {
background: #0066B3;
-webkit-box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
text-align: center;
display: block;
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 2px;
cursor: pointer;
}
.contactbutton:hover {
-webkit-box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
.mail {
margin-top: 11px;
font-size: 15px;
display: inline-block;
border-top: 2em solid transparent;
border-left: 2.6em solid #80C8FE;
height: 0;
width: 0;
position: relative;
}
.mail:before {
content: &#39;&#39;;
top: -2.5em;
left: -2.95em;
display: block;
position: absolute;
border-top: 1.2em solid #80C8FE;
border-left: 1.6em solid transparent;
border-right: 1.6em solid transparent;
border-bottom: 1em solid transparent;
font-size: 0.8em;
}
.mail::after {
display: block;
content: &quot;&quot;;
position: absolute;
border-top: 2em solid transparent;
border-right: 2.6em solid #80C8FE;
height: 0;
width: 0;
left: -2.18em;
bottom: 0;
}
#checkcontact{
position: absolute;
left: -9999px;
}
.contactform {
overflow: hidden;
max-height: 0px;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
-ms-transition: all linear 1s;
transition: all linear 1s;
}
#checkcontact:checked + .contactform {
max-height: 1000px;
}
.input_wrapper {
position: relative;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
}
.input_wrapper input[type=&quot;text&quot;] {
margin-top: 1em;
display: block;
width: 100%;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
text-indent: 15%;
}
.input_wrapper input[type=&quot;text&quot;]:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #0066B3;
outline: none;
text-indent: 0;
}
.input_wrapper label {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #0066B3;
color: white;
font-family: Oswald ,sans-serif;
box-sizing: border-box;
width: 15%;
text-align: center;
line-height: 2.8em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.input_wrapper input[type=&quot;text&quot;]:focus + label {
left: 85%;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
  min-height:150px;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
}
.textarea_wrapper textarea:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #0066B3;
outline: none;
}
.submit_wrapper {
text-align: center;
}
.submit_wrapper input {
text-align: center;
display: inline-block;
width: 40%;
height: 50px;
margin-top: 1em;
margin-bottom: 6px;
cursor: pointer;
background: #0066B3;
color: white;
font-family: Oswald ,sans-serif;
font-size: 1em;
border: none;
-webkit-box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
-webkit-appearance: none;
  -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.submit_wrapper input:hover {
-webkit-box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}

@media (max-width: 500px){
#contact {
width: 100%;
}
  .input_wrapper label {
line-height: 3.5em;
font-size: 0.8em;
}
}
</style>

--------------------------------------------------------------------------------------------------------

Pronto, agora você só precisa incluir um link de acesso á esta página de contato na página inicial do seu blog.

Créditos: 

BLOG IN BRIEF

Por: at 18:03
  • Blogger Comments
  • Facebook Comments
Item Reviewed: Adicione e customize o widget formulário de contato do Blogger Rating: 5 Reviewed By: Site Web Lista
Scroll to Top