<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Sheet</title>
<link href="css/phoenixcontactsheet.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<style type="text/css">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
*{
padding: 0; margin: 0;
}
.grid1{
width: 220px;
margin-left: 20px;
float: left;
}
.grid2{
width: 460px
margin-left: 20px;
float: left;
}
.grid3{
width: 700px;
float: left;
top: 200px;
left:35%;
position:relative;
margin:0px auto
}
.grid 4{
width: 940px;
margin-left: 20px;
float: left;
}
.push1{
margin-left: 260px;
}
.push2{
margin-left: 500px;
}
.push3{
margin-left: 740;
}
html{
font-family: 'Helvetica-Neue', Helvetica, sans-serif;
font-size: 100%;
}
form{
background-color: #e3cdae;
margin-left:20%;
margin-right: 20%;
margin-top: 20%;
border-radius: 25px;
box-shadow: 1px 1px 5px #191919;
border-left: 8px solid #bd9449;
}
form, form input{
font-size: 24pt;
margin-top: 10%;
}
fieldset{
margin: 10px 5px;
border: none;
}
input{
border: none;
background-color: #efefef;
padding: 10px;
border-radius: 25px;
}
button{
font-size: 24pt;
padding: 10px;
border-radius: 15px;
-webkit-border-radius:- 15px;
-moz-border-radius: 15px;
margin: 10px;
border: none;
background-color: #fff;
}
label{
font-size: 30px;
padding-top: 20px;
padding-bottom: -30px;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<!--header-->
<div id="header">
<div>
<a class="logo-image" href="index.html" name="top">
<img alt="Phoenix Photography. Est. 1990" src="images/Phoenix_lettering_small.png"></img>
</a>
</div>
</div>
<!--navigation-->
<div id="nav">
<ul>
<h4><a class="selected" href="phoenixhome.html"> Home </a>
<a href="phoenixgallery.html"> Gallery</a>
<a href="phoenixclient.html"> Clients</a>
<a href="phoenixinfo.html"> About</a>
<a href="phoenixcontact.html"> Contact</a>
<a href="http://icephoenixphotography.tumblr.com"> Blog</a></h4>
</ul>
</div>
<!--form-->
<div class="container">
<div class="row">
<div class="grid4">
<h1 class="Name"></h1>
<h1 class="displayEmail"></h1>
</div>
</div>
</div>
<div class="row">
<div class="grid3 top">
<form class="formy" method="post" action="ClientThankYou.html">
<fieldset>
<label for="Name">Name:</label>
<input type="text" name="Name" value placeholder="First and last name" required/>
</fieldset>
<fieldset>
<label for="phone">Phone</label>
<input type="phone" name="phone" value placeholder="(xxx)xxx-xxxx" required/>
</fieldset>
<fieldset>
<label for="userEmail"> Email Address:</label>
<input type="email" name="userEmail" value placeholder="name@email.com" required/>
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
console.log(localStorage["Name"]);
$(document).ready(function(){
if(localStorage["Name"] =){
localStorage["Name"] = "";
}else{
$('.displayName').append(localStorage["Name"]);
$('.displayEmail').append(localStorage["userEmail"]);
}
});
$('.formy').submit(function(){
localStorage["Name"] = $("input[name="userName"]").val();
localStorage["Email"] = $("input[name="userEmail"]").val();
});
</script>
</body>
</html>
![[Image: 2o7t5hB.gif]](http://i.imgur.com/2o7t5hB.gif)
Pretty much sums up everything you're trying to do!