Jump to content
ralmeidasantos

Contacts From

Recommended Posts

ralmeidasantos

Boas tenho este codigo para contacts, como faço para que ele fique parado, sem scroll activo?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us Form</title>

<style>
#wraper{
width:250px;
height:480px;
padding:20px;
box-shadow:2px 2px 10px 10px #ccc;
-webkit-box-shadow:2px 2px 10px 10x #ccc;
-moz-box-shadow:2px 2px 10px 10px #ccc;
font-family:Calibri, Arial, Helvetica;
font-size:16px;
text-shadow: 1px 1px #cccccc;
border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px
-o-border-radius:3px;
-webkit-border-radius:3px;
top:50%;
left:50%;
margin-left:-145px;
margin-top:-260px;
position:fixed;
overflow:hidden;
}
#wraper input{
font-family:Calibri, Arial, Helvetica;
}
#wraper h1{
font-weight:normal;
font-size:24px;
}
#wraper label{
width:100%;
float:left;
margin-bottom:5px;
}
#wraper input[type=text],#wraper input[type=email],#wraper input[type=url],#wraper input[type=password], #wraper textarea{
width:240px;
height:20px;
float:left;
padding:4px;
border:1px solid #d5d5d5;
outline:none;
margin-bottom:15px;
box-shadow: 5px 5px 2px #f1f1f1;
-webkit-box-shadow: 5px 5px 2px #f1f1f1;
-moz-box-shadow: 5px 5px 2px #f1f1f1;
clear:both;
}
#wraper textarea{ resize:none; height:50px;}
#wraper input[type=submit]{
padding:6px 10px;
outline:none;
border:none;
cursor:pointer;
color:#fff;
background-image: linear-gradient(bottom, #0047CC, #0085CC);
background-image: -o-linear-gradient(bottom, #0047CC, #0085CC);
background-image: -moz-linear-gradient(bottom, #0047CC, #0085CC);
background-image: -webkit-linear-gradient(bottom, #0047CC, #0085CC);
background-image: -ms-linear-gradient(bottom, #0047CC, #0085CC);
border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px
-o-border-radius:3px;
-webkit-border-radius:3px;
text-decoration:none;
text-shadow: 1px 1px #0047CC;
font-size:16px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="wraper">
<form action="submit.php" id="contactForm" name="contactForm" method="post" enctype="multipart/form-data">
<h1>Contact Us</h1>
	 <label for="name">Name:</label>
<input type="text" name="name" value="" required="required" />

<label for="email">Email:</label>
<input type="email" name="email" value="" required="required" />

<label for="phone">Phone:</label>
<input type="text" name="phone" value="" required="required" />

<label for="website">Website:</label>
<input type="url" name="website" value="" required="required" />

<label for="message">Your Message:</label>
<textarea name="message" required="required"></textarea>	

<input type="submit" id="frm_submit" value="Submit Message" name="submit" class="submit" />	

</form>
</div>
<script>
/* attach a submit handler to the form */
$("#contactForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
$('#frm_submit').disabled=true;
$('#frm_submit').val('loading...');
var $form = $( this ),
name = $form.find( 'input[name="name"]' ).val(),
email = $form.find( 'input[name="email"]' ).val(),
phone = $form.find( 'input[name="phone"]' ).val(),
website = $form.find( 'input[name="website"]' ).val(),
message = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { name: name,email: email,phone: phone,website: website,message: message, } );
/* Put the results in a div */
posting.done(function( data ) {
alert(data);
$('#frm_submit').disabled=false;
$('#frm_submit').val('Submit Message');
});
});
</script>
</body>
</html>

Edited by yoda

HTML Master

The programs change the world

Share this post


Link to post
Share on other sites
ralmeidasantos

assim tenho a pagina completamente sem scroll o que quero é so o formulario estatico !


HTML Master

The programs change the world

Share this post


Link to post
Share on other sites
ralmeidasantos

ja resolvi com uma div

  • Vote 1

HTML Master

The programs change the world

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.