contactus form using jquery slideup and slidedown effect
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
.slideUp( [ duration ], [ callback ] )
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
.slideDown( [ duration ], [ callback ] )
The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
Duration: A string or number determining how long the animation will run.
Callback: A function to call once the animation is complete.
<head>
<style type="text/css">
body{
margin: 0px;
text-align:center;
font-family:Arial, Sans-Serif;
font-size:0.75em;
}
label
{
text-align:left;
}
#contactFormContainer
{
height:177px;
width:231px;
}
#contactForm
{
height:350px;
width:241px;
display:none;
border:1px solid #CCCCCC;
}
#contactForm fieldset
{
padding:30px;
border:none;
}
#contactForm label
{
display:block;
color:#001838;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm input[type=submit]
{
background-color:#001838;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#contactLink
{
height:40px;
width:200px;
display:block;
cursor:pointer;
}
#messageSent
{
color:#008000;
display:none;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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);
}
</script>
</head>
<body>
<div align="center">
<div style="width:200px;">
<a id="contactLink">Contact US </a>
</div>
<div id="contactFormContainer">
<div id="contactForm">
<fieldset>
<label for="Name">Name</label>
<input id="name" type="text" />
<label for="Name">Mobile No</label>
<input id="mobno" type="text" />
<label for="Email">Email address</label>
<input id="Email" type="text" />
<label for="Email">Message</label>
<textarea id="message" cols="20" rows="3"></textarea>
<input id="sendMail" type="submit" value="Subscribe" name="submit" onClick="closeForm()" /><br>
<span id="messageSent">Your message have sent successfully!</span>
</fieldset>
</div>
</div>
</div>
</body>
</html>
how to get this working in blogger?
ReplyDeletehow to give our email ID to get the message when bsend button is clicked
ReplyDelete