bigbonthabeat
24 Feb 2011, 01:36 PM
I want to make a contact box that pops out like this one: http://jonraasch.com/blog/contact-pop-jquery-plugin
I want the user to be able to click my "GMAIL" logo and a pop out box comes up and greys out the back ground. Next, after the message is sent, I want a message to come up saying "thank you...".
How do I achieve this?
CODE FOR CONTACT FORM ONLY:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
<!-- Import Google Font - Yanone Kaffeesatz -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<title>CSS3 Contact Form</title>
<style type="text/css">
@font-face {
font-family: 'ChaletParisNineteenEightyRegu';
src: url('font/chaparei-webfont.eot');
src: url('font/chaparei-webfont.eot?iefix') format('eot'),
url('font/chaparei-webfont.woff') format('woff'),
url('font/chaparei-webfont.ttf') format('truetype'),
url('font/chaparei-webfont.svg#webfonttE0NzRSo') format('svg');
font-weight: normal;
font-style: normal;
}
* { margin: 0px; padding: 0px; }
body {
margin: 0 auto;
background: #f5f5f5;
color: #555;
width: 800px;
}
h1 {
color: #555;
margin: 0 0 20px 0;
}
label {
font-size: 20px;
color: #666;
}
form {
float: left;
border: 1px solid #ddd;
padding: 30px 40px 20px 40px;
margin: 75px 0 0 0;
width: 715px;
background: #fff;
/* -- CSS3 - define rounded corners for the form -- */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* -- CSS3 - create a background graident -- */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* -- CSS3 - add a drop shadow -- */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
}
fieldset { border: none; }
#user-details {
float: left;
width: 230px;
}
#user-message {
float: right;
width: 405px;
}
input, textarea {
padding: 8px;
margin: 4px 0 20px 0;
background: #fff;
width: 220px;
font-size: 14px;
color: #555;
border: 1px #ddd solid;
/* -- CSS3 Shadow - create a shadow around each input element -- */
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa;
box-shadow: 0px 0px 4px #aaa;
/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */
-webkit-transition: background 0.3s linear;
}
textarea {
width: 390px;
height: 175px;
}
input:hover, textarea:hover {
background: #eee;
}
input.submit {
width: 150px;
color: #eee;
text-transform: uppercase;
margin-top: 10px;
background-color: #18a5cc;
border: none;
/* -- CSS3 Transition - define which property to animate (i.e. the shadow) -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;
/* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* -- CSS3 Shadow - create a shadow around each input element -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 20px #555;
-moz-box-shadow: 0px 0px 20px #aaa;
box-shadow: 0px 0px 20px #555;
cursor: pointer;
}
</style>
</head>
<body>
<form action="#">
<h1>Contact Us ...</h1>
<fieldset id="user-details">
<label for="name">NAME:</label>
<input type="text" name="name" value="" />
<label for="email">EMAIL:</label>
<input type="email" name="email" value="" />
</fieldset><!--end user-details-->
<fieldset id="user-message">
<label for="message">MESSAGE:</label>
<textarea name="message" rows="0" cols="0"></textarea>
<input type="submit" value="Submit Message" name="submit" class="submit" />
</fieldset><!-- end user-message -->
</form>
</body>
</html>
CODE FOR THE PROJECT THAT I WANT MY CONTACT FORM IN:
<!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>
<script type="text/javascript" src="../New Design/popup/js/jquery.js"></script>
<script type="text/javascript" src= src="../New Design/popup/js/thickbox.js"></script>
<link rel="stylesheet" href="../New Design/popup/js/thickbox.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryson Price Music</title>
<style type="text/css">
#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-color: #FFF;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
.Biography {
background-color: #e9e6e6;
text-align: center;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #282828;
height: 130px;
width: 580px;
margin-top: 40px;
margin-right: 200px;
margin-left: 200px;
}
.biobody {
background-color: #e9e6e6;
border: 3px solid #282828;
height: 400px;
width: 896px;
margin-right: 34px;
margin-left: 36px;
}
.belowheader {
height: 122px;
width: 899px;
margin-left: 38px;
}
.fourcontacts {
height: 178px;
width: 896px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="Biography" id="biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_11.png" width="435" height="107" alt="contact" /></div>
<div class="fancy" id="fancy">
<div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/contact/contact-below-header_02.png" width="899" height="122" alt="contactbelowheader" /></div>
</div>
<div class="biobody" id="biobody">
<p>contact content here</p>
<div class="4contacts" id="4contacts"></div>
<div class="fourcontacts" id="fourcontacts"><a href="contactform.htm" onclick="window.open(this.href,'window','width=640,height=640,resizable,scrollbars') ;return false;"><img src="../New Design/Sliced menu/contact/fourcontacts_03.png" alt="contact us" /></a></div>
<div class="youtubetwitter" id="youtubetwitter"></div>
<div class="facebook" id="facebook"></div>
<p> </p>
</div>
</div>
</body>
</html>
thanks!
I want the user to be able to click my "GMAIL" logo and a pop out box comes up and greys out the back ground. Next, after the message is sent, I want a message to come up saying "thank you...".
How do I achieve this?
CODE FOR CONTACT FORM ONLY:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
<!-- Import Google Font - Yanone Kaffeesatz -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<title>CSS3 Contact Form</title>
<style type="text/css">
@font-face {
font-family: 'ChaletParisNineteenEightyRegu';
src: url('font/chaparei-webfont.eot');
src: url('font/chaparei-webfont.eot?iefix') format('eot'),
url('font/chaparei-webfont.woff') format('woff'),
url('font/chaparei-webfont.ttf') format('truetype'),
url('font/chaparei-webfont.svg#webfonttE0NzRSo') format('svg');
font-weight: normal;
font-style: normal;
}
* { margin: 0px; padding: 0px; }
body {
margin: 0 auto;
background: #f5f5f5;
color: #555;
width: 800px;
}
h1 {
color: #555;
margin: 0 0 20px 0;
}
label {
font-size: 20px;
color: #666;
}
form {
float: left;
border: 1px solid #ddd;
padding: 30px 40px 20px 40px;
margin: 75px 0 0 0;
width: 715px;
background: #fff;
/* -- CSS3 - define rounded corners for the form -- */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* -- CSS3 - create a background graident -- */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* -- CSS3 - add a drop shadow -- */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
}
fieldset { border: none; }
#user-details {
float: left;
width: 230px;
}
#user-message {
float: right;
width: 405px;
}
input, textarea {
padding: 8px;
margin: 4px 0 20px 0;
background: #fff;
width: 220px;
font-size: 14px;
color: #555;
border: 1px #ddd solid;
/* -- CSS3 Shadow - create a shadow around each input element -- */
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa;
box-shadow: 0px 0px 4px #aaa;
/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */
-webkit-transition: background 0.3s linear;
}
textarea {
width: 390px;
height: 175px;
}
input:hover, textarea:hover {
background: #eee;
}
input.submit {
width: 150px;
color: #eee;
text-transform: uppercase;
margin-top: 10px;
background-color: #18a5cc;
border: none;
/* -- CSS3 Transition - define which property to animate (i.e. the shadow) -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;
/* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* -- CSS3 Shadow - create a shadow around each input element -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 20px #555;
-moz-box-shadow: 0px 0px 20px #aaa;
box-shadow: 0px 0px 20px #555;
cursor: pointer;
}
</style>
</head>
<body>
<form action="#">
<h1>Contact Us ...</h1>
<fieldset id="user-details">
<label for="name">NAME:</label>
<input type="text" name="name" value="" />
<label for="email">EMAIL:</label>
<input type="email" name="email" value="" />
</fieldset><!--end user-details-->
<fieldset id="user-message">
<label for="message">MESSAGE:</label>
<textarea name="message" rows="0" cols="0"></textarea>
<input type="submit" value="Submit Message" name="submit" class="submit" />
</fieldset><!-- end user-message -->
</form>
</body>
</html>
CODE FOR THE PROJECT THAT I WANT MY CONTACT FORM IN:
<!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>
<script type="text/javascript" src="../New Design/popup/js/jquery.js"></script>
<script type="text/javascript" src= src="../New Design/popup/js/thickbox.js"></script>
<link rel="stylesheet" href="../New Design/popup/js/thickbox.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryson Price Music</title>
<style type="text/css">
#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-color: #FFF;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}
.Biography {
background-color: #e9e6e6;
text-align: center;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #282828;
height: 130px;
width: 580px;
margin-top: 40px;
margin-right: 200px;
margin-left: 200px;
}
.biobody {
background-color: #e9e6e6;
border: 3px solid #282828;
height: 400px;
width: 896px;
margin-right: 34px;
margin-left: 36px;
}
.belowheader {
height: 122px;
width: 899px;
margin-left: 38px;
}
.fourcontacts {
height: 178px;
width: 896px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="Biography" id="biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_11.png" width="435" height="107" alt="contact" /></div>
<div class="fancy" id="fancy">
<div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/contact/contact-below-header_02.png" width="899" height="122" alt="contactbelowheader" /></div>
</div>
<div class="biobody" id="biobody">
<p>contact content here</p>
<div class="4contacts" id="4contacts"></div>
<div class="fourcontacts" id="fourcontacts"><a href="contactform.htm" onclick="window.open(this.href,'window','width=640,height=640,resizable,scrollbars') ;return false;"><img src="../New Design/Sliced menu/contact/fourcontacts_03.png" alt="contact us" /></a></div>
<div class="youtubetwitter" id="youtubetwitter"></div>
<div class="facebook" id="facebook"></div>
<p> </p>
</div>
</div>
</body>
</html>
thanks!