And here is my version of the megaphone behind it!
The image (joinmailinglist4d.png): 
The “unrequired” form labels do not abut as closely to the field as yours, but that can be changed.
Tell me again about that aicatcher line. Does it need to appear on-screen or can it be pulled off screen left? Trying to save some vertical space by removing visual clutter.
Wow! That looks awesome.
The AI catcher input & label are to be hidden away. If they are filled in (not NULL), the form will return an error.
I think I found what I did wrong with the image border line in Fireworks. I should have set the outline to 1-pixel Hard instead of 1-pixel soft. That’s one crisp-lookin’ megaphone. 
How do the submit/reset buttons look? Is it reasonable to add the “signature W” to the submit button?
I’m gonna read into your reply that the aicatcher line can be positioned off-screen. In that way, bots and screen readers will see it in the flow but the user will not.
I’m not so sure about setting the outline to Hard in Fireworks. OTOH, I don’t really know what I’m talking about , so maybe that’s how to do it in Fireworks.
In GIMP, I used layers rather than outlines. The bottom layer began as your image with the megaphone. I put another layer over it and drew a rectangle as tall as the left end of the megaphone and as wide as the megaphone and filled it with the maroon color. I then used a transform tool called perspective to stretch the height of the right end of the rectangle until it overlaid your original perfectly. That created the nicely dithered edges. Then I deleted your original. Opened another layer and drew another rectangle a couple of pixels smaller than the bottom layer and filled it with the lighter shade of red and stretched the height of the right end until the maroon “outline” looked acceptable. Finally the top layer is the megaphone-less-.png with the text graphic that you sent. Took about 9 tries but it finally came together nicely.
I have not done anything special with them, yet, but I don’t anticipate a problem with the “signature W”.
Hmmm - did you post that “signature W” image somewhere? I don’t seem to have it (maybe I misplaced it?). Would you mind sending it again?
In your sample images, you show the colons on the unrequired labels inline vertically with the asterisks. In my sample above, I have set them up so the colons are vertically aligned with one another. The complement written into my code is that the colons on the unrequired labels would align at the right edge of the asterisks. Three possibilities. Which do you prefer?
The way the code is written, class “required” creates space for the asterisk and shows the asterisk (as shown), class “notreqd” creates the space but leaves it vacant (no asterisk)(also as shown), and assigning neither class places the colons closer to the field (not shown). I need to know what you prefer so the code can be tweaked accordingly.
BTW - the reason there is a difference between your sample images and the screen shots that I am showing is “timing”. Most of my code was written before your drawings were posted and I haven’t changed it to match your drawings. C`est-la-vie.
Is this link sufficient? here Look for the second link titled, W.png. I wonder how it’s inserted in the code. Does it need to sit merely inside the HTML within the submit input tag?
I think the way it has been currently set up with vertically-aligned colons and red asterisks is acceptable. I’ll look forward to learning what font is the primary option because the text is very legible. Looks like Arial.
Your page leaves the choice of font and font-size up to the user. My browser’s default font is Verdana 16 so that is what you see in most of the Firefox screen shots. .copytagbotm uses “Times New Roman”
Hm… I see. We have targeted font sizes, but most of the elements are left without a font family specified.
How’s it looking? Do you think you might be posting a new version to the dropbox this week?
I apologize, Ty. I’ve had a couple of “real life” things come up that “distracted” me for a couple of weeks. I’m back now and will continue with your signupbox and should have something for you to look at later this week.
Life happens and takes precedent.
The rewards of patience. Finally.
The new code to support the .footbox is very extensive. Takes up at least half of the homepage stylesheet now. I urge you to read the comments in the stylesheet carefully before making any changes. It will take some time but will be worth it because parts of it are not simple and there’s a lot of it. (It’s not exotic, just not obvious .)
The divs that should be targeted by your JS/PHP to change the display value of the .signupsteps are located between lines 265 and 276. You can turn them on one at a time with Firebug to see how they work.
The .aicatcher is hidden offscreen.
If any part of the new code does not work as you expect, please let me know.
Ty, I forgot to mention that I increased the height of these three images, so be sure to copy these new ones into your permanent folder. I broke training and didn’t change the name by adding a version suffix, sorry .
signupCenter.png
signupLeft.png
signupRight.png
Belated response again… Busy week.
Well, neat! It looks really sharp. I’m not entirely sure if more vertical space should be added to .signupstep3 (successful submit). I like the blue text shadow on the subscriber’s info, and I can easily target those spots to change the text with JS.
I see the presets section, and it’s cleanly laid out and concise. I’m able to see what most of that is for.
Those are my brief thoughts on it for now. I’ll write more as I have questions, and I’ll update as I get some results with these scripts.
-Ty
No problem, busy weeks are good weeks. Haven’t been idle here either.
Hm… Things are progressing right now. I have the form changing to the 2nd sign-up step; however, I need to address the invalid email box that displays when the first input receives an invalid submission (i.e. “Joe argiauhrg3aw” is not a valid e-mail). The attached image is what I would like to display in this case. How would you suppose it be styled inside the CSS file where it is hidden on default? The div element with i.d. invalidemail is sitting right in the HTML markup already at line 348.
Should be pretty simple and I can just fade the invalid email graphic with a simple JS function.
-ty
You can start with something like this and modify as desired by adding text beneath the image, transitions, etc.:
#invalidemail {
display:block; /* normally {display:none} */
margin:12px auto 0;
}
#invalidemail img {
display:block;
margin:0 auto;
}
<div class="signupstep1">
<div class="joinlist1"><p>Join the Mailing List!</p></div>
<form name="form1" method="get" action="Scripts/emailtester.php">
<div>
<label for="go">Enter Your E-mail:</label>
<input id="go" type="text" name="email" value="your e-mail" maxlength="30">
<input id="submit" type="submit" value="Join">
</div>
</form>
<div id="invalidemail">
<img src="style/invalidemail.png" width="140" height="40" alt="Invalid Email Address">
</div>
</div>
Rather than using the “invalid email” image, you might consider just posting a text message something like this:
#invalidemail {
display:table; /* normally {display:none;} */
background-color:#fee;
color:#f00;
font-weight:bold;
font-family:Arial,sans-serif;
box-shadow:0 0 2px 2px #f00;
padding:.125em .25em;
margin:.5em auto 0;
}
#invalidemail span {
color:#111;
font-weight:normal;
}
#invalidemail .example {
font-size:.875em;
text-decoration:underline;
}
<div class="signupstep1">
<div class="joinlist1"><p>Join the Mailing List!</p></div>
<form name="form1" method="get" action="Scripts/emailtester.php">
<div>
<label for="go">Enter Your E-mail:</label>
<input id="go" type="text" name="email" value="your e-mail" maxlength="30">
<input id="submit" type="submit" value="Join">
</div>
</form>
<p id="invalidemail">Invalid Email Address<br><span class="example">example format</span>: <span>username@mailserver.com</span></p></div>
</div>
Or some combination thereof.
Excellent! I really like your submission for the second one with standard markup & CSS - no images.
I immediately adopted it and just got rid of the example format message.
Now, I am trying to determine what I can target with JS to animate the height of the sign up box as it moves up and down through the sign up steps.
I see that the box is divided into 3 sections (signupLeft, signupCenter, signupRight). Will I need to expand the heights of all 3 sections to achieve a congruent animation of height expansion/shrinkage?
edit: This question is probably a hybrid. I’ll ask something similar in the JS thread I have open.
Ty, the only boxes to target with the JS are the steps boxes… the boxes that are expected to be {display:none or block}, or specific contents within the steps boxes. Do not touch the three framing sections - any part of the frame - of the footer. Doing so may will break the footbox.
Height is determined by content, remember? There should be no reason to add a height to a container except perhaps to display a background image in an otherwise empty box like sprites?.
