Optin Box Code - help

2 replies
  • WEB DESIGN
  • |
Hi There warriors

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The F.A.B Diet Book Now!</div>
<span class="optin_text2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Follow a 3 step system to lose weight<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;for good. Simply enter your name and<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&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>&nbsp;</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>&nbsp;</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
#box #code #optin
  • Profile picture of the author Marcus Johnston
    This is an AWeber form right? All the things you want to change are possible to change in the WYSIWYG editor as well. But I gave it a try, let me know if it worked..

    Code:
    <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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The F.A.B Diet Book Now!</div>
    <span class="optin_text2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Follow a 3 step system to lose weight<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;for good. Simply enter your name and<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&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:#31780C;font-size:12px;font-family:, serif;}
    #af-form-1371864243 .af-footer{background-color:#31780C;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:#31780C;font-family:, serif;}
    #af-form-1371864243 .af-header{background-color:31780C;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:#31780C;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:#31780C;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>&nbsp;</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>&nbsp;</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>
    {{ DiscussionBoard.errors[3251938].message }}
  • Profile picture of the author Crislol
    Thanks Marcus.

    I had to go to Aweber and remove the header element of the form.

    Thanks for your support.

    Regards

    Cris
    {{ DiscussionBoard.errors[3252077].message }}

Trending Topics