Bom galera hoje vou trazer mais um tutorial de JQuery que eu pessoalmente acho interresante, pois podemos dizer que é diferente de todos.É um processo simples e eficaz.Vamos ao tutorial:

Formulários de contato são uma parte indispensável de qualquer website. Em sua maioria, são executados em uma página separada e raramente mostram criatividade, e é isso o que vamos fazer neste tutorial.
A imagem abaixo mostra o layout de nosso objetivo. No canto superior direito do conteúdo contem o botão “Contate-nos”. Quando o usuário clica nele, o formulário de contato irá deslizar para baixo. Quando o usuário envia o formulário que irão receber uma mensagem dizendo que sua mensagem foi enviada com sucesso e dentro de dois segundos, o formulário inteiro vai deslizar para cima.

Demonstração / Download dos arquivos

A estrutura

Como não há muito o que explicar, vamos ao código:

<div class=”box”>
<div id=”contactFormContainer”>
<div id=”contactForm”>
<fieldset>
<label for=”Name”>Nome *</label>
<input id=”name” type=”text” />
<label for=”Email”>E-mail*</label>
<input id=”Email” type=”text” />
<label for=”Message”>Mensagem *</label>
<textarea id=”Message” rows=”3″ cols=”20″></textarea>
<input id=”sendMail” type=”submit” name=”submit” onClick=”closeForm()” />
<span id=”messageSent”>Mensagem enviada com sucesso!</span>
</fieldset>
</div>
<div id=”contactLink”></div>
</div>

Nesta parte há somente o código do formulario de contato e, como podem ver são feitas divisões(div) que são chamadas de dentro do css.

CSS

Temos “contactForm” e “contactLink” (divs) dentro da “contactFormContainer”, que está posicionado de maneira absoluta. Veja o código:

#contactFormContainer
{
position:absolute;
left:600px;
float:right;
}
#contactForm
{
height:277px;
width:351px;
background-image:url(’bkg.jpg’);
display:none;
}
#contactForm fieldset
{
padding:30px;
border:none;
}
#contactForm label
{
display:block;
color:#ffc400;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#contactForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#contactLink
{
height:40px;
width:351px;
background-image:url(’slidein_button.png’);
display:block;
cursor:pointer;
}
#messageSent
{
color:#ff9933;
display:none;
}

O efeito

E para fazer este trabalho, temos de acrescentar um toque no jQuery(na página mesmo):

$(document).ready(function(){
$(”#contactLink”).click(function(){
if ($(”#contactForm”).is(”:hidden”)){
$(”#contactForm”).slideDown(“slow”);
}
else{
$(”#contactForm”).slideUp(“slow”);
}
});
});
function closeForm(){
$(”#messageSent”).show(“slow”);
setTimeout(’$(”#messageSent”).hide();$(”#contactForm”).slideUp(“slow”)’, 2000);
}

Deixe-me explicar resumidamente o código acima. Clicando sobre # contactLink div irá alternar formulário de contato visibilidade. Depois que o usuário clica em enviar, a mensagem “Sua mensagem foi enviada com sucesso!” Vai aparecer e toda a forma vai deslizar até ao seu estado original.Até a próxima.