Optin Box Code - help
I would apprecaite if someone could help me with simple coding my optin box.
I want the background colour of the box to be 31780C. But don't know where to place this colour code and also I would like to narrow the gap between the top text and the writing fields below it.
The optin is at thefabdiet.com/blog
My code is:
<div class="optin_former2">
<div class="ebook_holder2">
<img src="http://thefabdiet.com/blog/wp-content/uploads/2011/01/ebook-hover-cover-4.png" />
</div>
<div class="optin_heading2">Download Your Copy Of The F.A.B Diet Book Now!</div>
<span class="optin_text2"> Follow a 3 step system to lose weight<BR>
&n bsp;for good. Simply enter your name and<BR> & nbsp; email in the form below: </span>
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1371864243 .af-body .af-textWrap{width:70%;display:block;float:right;}
#af-form-1371864243 .af-body .privacyPolicy{color:#000000;font-size:12px;font-family:, serif;}
#af-form-1371864243 .af-body a{color:#oooooo;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1371864243 .af-body input.text, #af-form-1371864243 .af-body textarea{background-color:#ffffff;border-color:#CCCCCC;border-width:2px;border-style:inset;color:#ffffff;text-decoration:none;font-style:normal;font-weight:normal;font-size:inherit;font-family:inherit;}
#af-form-1371864243 .af-body input.text:focus, #af-form-1371864243 .af-body textarea:focus{background-color:31780C;border-color:#ffffff;border-width:2px;border-style:inset;}
#af-form-1371864243 .af-body label.previewLabel{display:block;float:left;width: 25%;text-align:left;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:inherit;font-family:inherit;}
#af-form-1371864243 .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-1371864243 .af-footer{background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-family:, serif;}
#af-form-1371864243 .af-header{background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-family:, serif;}
#af-form-1371864243 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1371864243 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-1371864243 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-1371864243 .bodyText p{margin:1em 0;}
#af-form-1371864243 .buttonContainer input.submit{color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:inherit;font-family:inherit;}
#af-form-1371864243 .buttonContainer input.submit{width:auto;}
#af-form-1371864243 .buttonContainer{text-align:center;}
#af-form-1371864243 body,#af-form-1371864243 dl,#af-form-1371864243 dt,#af-form-1371864243 dd,#af-form-1371864243 h1,#af-form-1371864243 h2,#af-form-1371864243 h3,#af-form-1371864243 h4,#af-form-1371864243 h5,#af-form-1371864243 h6,#af-form-1371864243 pre,#af-form-1371864243 code,#af-form-1371864243 fieldset,#af-form-1371864243 legend,#af-form-1371864243 blockquote,#af-form-1371864243 th,#af-form-1371864243 td{float:none;color:inherit;position:static;margin :0;padding:0;}
#af-form-1371864243 button,#af-form-1371864243 input,#af-form-1371864243 submit,#af-form-1371864243 textarea,#af-form-1371864243 select,#af-form-1371864243 label,#af-form-1371864243 optgroup,#af-form-1371864243 option{float:none;position:static;margin:0;}
#af-form-1371864243 div{margin:0;}
#af-form-1371864243 fieldset{border:0;}
#af-form-1371864243 form,#af-form-1371864243 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1371864243 img{float:none;color:inherit;position:static;backg round-color:none;border:none;margin:0;padding:0;}
#af-form-1371864243 input,#af-form-1371864243 button,#af-form-1371864243 textarea,#af-form-1371864243 select{font-size:100%;}
#af-form-1371864243 p{color:inherit;}
#af-form-1371864243 select,#af-form-1371864243 label,#af-form-1371864243 optgroup,#af-form-1371864243 option{padding:0;}
#af-form-1371864243 table{border-collapse:collapse;border-spacing:0;}
#af-form-1371864243 ul,#af-form-1371864243 ol{list-style-image:none;list-style-positionutside;list-style-type:disc;padding-left:40px;}
#af-form-1371864243,#af-form-1371864243 .quirksMode{width:190px;}
#af-form-1371864243.af-quirksMode{overflow-x:hidden;}
#af-form-1371864243{background-color:transparent;border-color:inherit;border-width:none;border-style:none;}
#af-form-1371864243{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!impor tant;}
.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-header,.af-footer{margin-bottom:0;margin-top:0;padding:10px;}
.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" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1371864243" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="thefabblog_opt1" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_fb940c7dfc0bf16867bb55c5e6dba154" />
<input type="hidden" name="meta_adtracking" value="thefabblog_opt1" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1371864243" class="af-form"><div id="af-header-1371864243" class="af-header"><div class="bodyText"><p> </p></div></div>
<div id="af-body-1371864243" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-16123926">Name: </label>
<div class="af-textWrap">
<input id="awf_field-16123926" type="text" name="name" class="text" value="" tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-16123927">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-16123927" type="text" name="email" value="" tabindex="501" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Get your free copy here." tabindex="502" />
<div class="af-clear"></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center"><p><a title="Privacy Policy" href="http://www.aweber.com/permission.htm" target="_blank">We respect your email privacy</a></p>
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-1371864243" class="af-footer"><div class="bodyText"><p> </p></div></div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jMzsjBxsLEwszA==" 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-1371864243")) {
document.getElementById("af-form-1371864243").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1371864243")) {
document.getElementById("af-body-1371864243").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1371864243")) {
document.getElementById("af-header-1371864243").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1371864243")) {
document.getElementById("af-footer-1371864243").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
<!-- /AWeber Web Form Generator 3.0 -->
Thanks for looking into this for me.
Regards
Cris
-
Marcus Johnston -
Thanks
{{ DiscussionBoard.errors[3251938].message }} -
-
Crislol -
Thanks
{{ DiscussionBoard.errors[3252077].message }} -