Subscribe box (aweber)

HTML & CSS
1

Hi - I’m trying to create as simple a form as possible for a subscribe box.

This is how it must look in the end, see it at top left of page at:
==> http://greensmoothie.com/

This is how I’ve gotten it to look so far, see it at top left of page at:
==> http://greensmoothie.com/1cde/1mst5.php

This is my css for http://greensmoothie.com/1cde/1mst5.php:


.sub {clear:both; float:left; background:#e5ffbf; display:inline; width:340px;
    margin:20px 0 0 20px; /*MB in head*/
}
.sub h3 {display:block; padding:0; /*keep*/
    margin:0 0 12px; font:bold 1.1em "Comic Sans MS",sans-serif; color:#f00251; text-align:center}
.sub h3 a {font:0.8em Arial,sans-serif}
.sub h3 a:link, .sub h3 a:visited, .sub h3 a:active {color:blue; text-decoration:underline}
.sub h3 a:hover {background:#ffff8b; color:#f00251; text-decoration:none}
.sub .box {width:300px; margin:0 auto; padding:15px; background:#f2ffdf; border:1px solid green}
.box .label {font:13px Verdana,sans-serif; color:black; text-align:left}
.box .input.text {width:100%; margin:2px!important}
.box .submit {margin:10px auto 0; padding:4px 12px; background:#ffffa0; font:13px Arial,sans-serif}

This is my html for http://greensmoothie.com/1cde/1mst5.php:


<div class="sub">
    <h3>hdr text</h3>
    <div class="box">
        <form method="post" action="http://www.aweber.com/scripts/addlead.pl"  >
<input type="hidden" name="listname" value="rawhealing" />
<input type="hidden" name="redirect" value="http://greensmoothie.com/misc/thanksub.php" />
<input type="hidden" name="meta_redirect_onlist" value="http://greensmoothie.com/misc/thankhave.php" />
<input type="hidden" name="meta_required" value="email" />
<label class="label">Name:&nbsp;&nbsp;</label>
<input type="text" name="name" value="" />
<label class="label">Email:&nbsp;&nbsp;</label>
<input type="text" name="email" value="" />
<input type="submit" name="submit" class="submit" value="Click to Subscribe--Send My Free Classes" />
        </form>
    </div>
</div>

This is the css + html that aweber gives for http://greensmoothie.com/


<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-919033508 .af-body .af-textWrap{width:70%;display:block;float:right;}
#af-form-919033508 .af-body input.text, #af-form-919033508 .af-body textarea{background-color:#FFFFFF;border-color:#CCCCCC;border-width:2px;border-style:inset;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-919033508 .af-body input.text:focus, #af-form-919033508 .af-body textarea:focus{background-color:inherit;border-color:#CCCCCC;border-width:2px;border-style:inset;}
#af-form-919033508 .af-body label.previewLabel{display:block;float:left;width:25%;text-align:right;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:13px;font-family:Verdana, sans-serif;}
#af-form-919033508 .af-body{padding-bottom:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:12px;font-family:, serif;}
#af-form-919033508 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-919033508 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-919033508 .buttonContainer input.submit{background-image:none;background-color:#FFFFA0;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:13px;font-family:Arial, sans-serif;}
#af-form-919033508 .buttonContainer input.submit{width:auto;}
#af-form-919033508 .buttonContainer{text-align:right;}
#af-form-919033508 button,#af-form-919033508 input,#af-form-919033508 submit,#af-form-919033508 textarea,#af-form-919033508 select,#af-form-919033508 label,#af-form-919033508 optgroup,#af-form-919033508 option{float:none;position:static;margin:0;}
#af-form-919033508 div{margin:0;}
#af-form-919033508 form,#af-form-919033508 textarea,.af-form-wrapper,.af-form-close-button,#af-form-919033508 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-919033508 input,#af-form-919033508 button,#af-form-919033508 textarea,#af-form-919033508 select{font-size:100%;}
#af-form-919033508 select,#af-form-919033508 label,#af-form-919033508 optgroup,#af-form-919033508 option{padding:0;}
#af-form-919033508,#af-form-919033508 .quirksMode{width:100%;max-width:315px;}
#af-form-919033508.af-quirksMode{overflow-x:hidden;}
#af-form-919033508{background-color:#F2FFDF;border-color:#008000;border-width:1px;border-style:solid;}
#af-form-919033508{display:block;}
#af-form-919033508{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post" class="af-form-wrapper" accept-charset="iso-8859-1" action="http://www.aweber.com/scripts/addlead.pl" target="_new" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="919033508" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="rawhealing" />
<input type="hidden" name="redirect" value="http://www.greensmoothie.com/misc/thanksub.php" id="redirect_00c37252a121001c65aa758c479eccc0" />
<input type="hidden" name="meta_redirect_onlist" value="http://www.greensmoothie.com/misc/thankhave.php" />
<input type="hidden" name="meta_adtracking" value="inline-head.php-08/919033508" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-919033508" class="af-form"><div id="af-body-919033508"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-63551400">Name: </label>
<div class="af-textWrap">
<input id="awf_field-63551400" type="text" name="name" class="text" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-63551401">Email:</label>
<div class="af-textWrap"><input class="text" id="awf_field-63551401" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Click to Subscribe--Send My Free Classes" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nIycDMzMrAwc" alt="" /></div>
</form>
<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-919033508")) {
                document.getElementById("af-form-919033508").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-919033508")) {
                document.getElementById("af-body-919033508").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-919033508")) {
                document.getElementById("af-header-919033508").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-919033508")) {
                document.getElementById("af-footer-919033508").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>
<!-- /AWeber Web Form Generator 3.0 -->

I don’t want to use any javascript. Please can anyone see what to extract from the aweber form generator so that at http://greensmoothie.com/1cde/1mst5.php

(1) The labels “Name:” and “Email:” are (a) on separate lines, and (b) right justified with (c) a margin between them and their input box

(2) Each input box (a) displays in full up to the right edge of the box, and (b) has a shadow as per http://www.greensmoothie.com/

(3) The submit button is centered

thank you for your kind help! - Val

2

It’s okay, I got it all to work. Except I’m unable to get 2px padding inside the input box. I’ve tried this:

input.text {padding:2px!important}

but it doesn’t work. When a person enters their email, it goes right up against the inside edge of the input box. If anyone knows how to create padding between the input text and the input border, in a form, I’d love to hear the answer :slight_smile:

http://greensmoothie.com/1cde/1mst5.php

thanks, Val

3

That’s because “text” is not a class. It’s an attribute. You could do this:

input[type="text"] {padding: 2px;}
4

thanks million Ralph - that works perfectly!

5

Hi - I forgot I need to clear the floats. Can I just do it in the submit button? like this:


.box {width:280px; margin:0 auto; padding:12px; background:#f2ffdf; border:1px solid green}
.box .awsub {width:100%; text-align:center}
.awsub label {float:left; width:20%; font:13px Verdana,sans-serif; color:black; text-align:right; padding-right:2px}
.awsub .label1 {margin:0}
.awsub .label2 {margin:14px 0 0}
.awsub input[type="text"] {padding:2px 4px}
.awsub .input1, .awsub .input2 {float:right; width:75%; border: 1px inset #cccccc}
.awsub .input1 {margin:0}
.awsub .input2 {margin:8px 0 0}
.box .submit {clear:both; margin:10px auto 0; padding:4px 12px; background:#ffffa0; font:13px Arial,sans-serif}

thanks! - Val

6