Boas aqui estou eu com mais uma partilha de formulário de contato para página estática.
Como mostra a imagem acima ,fica mais menos assim ,mas click menu do meu blog em (Ajuda) e veja melhor o resultado finál do formulário de contato.Antes de mais este widget tem direitos de autôr, Sudhansu Nayak ,eu simplesmente fiz algumas alterações então todos créditos são dele.
Bem vamos lá começár a colocár no seu blog este estilo...
Antes de tudo faça uma cópia do seu template/tema...
(1)Vá no seu blog entre em (esquema) adicione gadget contact form:
(2) Agora entre (modelo) do seu blog e procure algo assim:
(3)Espanda / abra na setinha:
(4)Agora apague tudo estiver dentro <b:includable id=´> </b:includable>
(5)Vamos aplicár css procure este trecho :
]]></b:skin>
/*CSS Code BY Sudhansu Nayak Contact Us *Modificado:best-tuga*/
.contact-form h1 {
background: #666;
font-family:Lobster;
font-size: 1.75em;
padding: 0.6em 0 0.6em 0em;
color: fcfcfc;
text-shadow:0 1px 0 #000;
position: relative;
text-align:center;box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.9);
}
.contact-form-widget {
margin-left: auto;
margin-right:auto;
max-width: 100%;width: 600px;
color: #fff;
text-align:center;padding: 0px;
}
.fm_name, .fm_email {
float: center;
padding: 10px;
width: 97%;background:#2c2c2c;
}
.fm_message {
padding: 10px;width: 97%;background:#666;
}
#ContactForm1 input:focus, #ContactForm1 textarea:focus {
border: 2px solid #000;
color: #666;
outline: none;
padding: 13px 13px 13px 20px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-name {
background:#fcfcfc
padding: 0px 5px 3px 10px;
line-height:2em;
border: 1px solid #666;
}
.contact-form-name:focus {
background:#fcfcfc
padding: 0px 5px 3px 10px;
line-height:2em;
border: 1px solid #666;
}
}
.contact-form-email{
background:#fcfcfc
padding: 0px 5px 3px 10px;
line-height:2em;
border: 1px solid #666;
}
.contact-form-email:focus{
background:#fcfcfc
padding: 0px 5px 3px 10px;
line-height:2em;
border: 1px solid #666;
}
.contact-form-email-message {
border:1px solid #000;
width: 100%;
max-width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 13px 13px 13px 40px;
font-size: 16px;
}
.contact-form-button-submit {
border:1px solid #fcfcfc;
background: #222;
color: #666;
width: 100%;
max-width: 100%;
height: 40px;
font-family:Lobster;
text-shadow:0 1px 0 #fcfcfc;
font-size: 16px;
text-align: center;
margin: 0 auto;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.9);
display: block;
padding: 13px 0px 34px 0px !important;
}
.contact-form-button-submit:hover {
background: #ffffff;
color: #000000;
border: 1px solid #000;
cursor: pointer;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
}
.contact-form-error-message-with-border {
background: #e74c3c;
border: 1px solid #fff;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #222;
text-shadow:0 1px 0 #fcfcfc;
font-size: 18px;
font-weight: bold;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
padding: 11px 15px;
}
.post-bodyy imgg, .post-body .tr-caption-container {
padding: 5px;
vertical-align: middle;
padding: 0;
height: 20px;
width: 20px;
cursor: pointer;
margin-left: 8px;
}
.contact-form-success-message-with-border{
background: #00bfa5;
border: 1px solid #fcfcfc;
padding: 11px 15px;
font-size: 18px;
font-weight: bold;
color: #222;text-shadow:0 1px 0 #fcfcfc;
}
(7) Salve e vamos aplicár pagina crie uma página nova:
(8) Agora cole este meu código dentro html da pagina que criou:
<div class="widget ContactForm" id="ContactForm1">Feito isto então visualize e veja como ficou, alguma questão deixe recado...Até outra partilha.
<div class="contact-form">
<h1>
Contato</h1>
</div>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Seu Nome 💌
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
Seu Email 📧
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="fm_message">
Sua Mensagem 📩
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Click Aqui" />
<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>
Mostra SmilesOculta Smiles