Hi guys,
I'm revisiting this after a few weeks, because I could never get it to work before, and hoping to now.
Please look at this website-notice
the newsletter signup form at
the top right.
http://www.rattletree.com
I am wanting it to look exactly this way for now, but when
the user clicks in
the box to enter their email address,
the containing div will expand (or simply appear) above
the email
field to also include a "name" and "city"
field.
I'm using jquery liberally in
the sight, so that is at my disposal. This form is in
the header so any id info, etc can't be withing
the body tag...
This is what I have so far:
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="index_success.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="email"><label for="emailFrom">Email: </label>
<input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="submit">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
<div class="clearing">
</div>
</div>
css:
p.emailbox{
text-align:center;
margin:0;
}
p.emailbox:first-letter {
font-size: 120%;
font-weight: bold;
}
.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
/*background-color:#fff;*/
text-align:center;
/* margin:-50px 281px 0 auto ; */
float:right;
position:relative;
z-index:1;
}
form.email{
position:relative;
}
#emailcontainer {
margin:0;
padding: 0 auto;
z-index:1000;
display:block;
position:relative;
}
Thanks for any help!
Joel
