optin box design confounds aweber code insertion

5 replies
  • WEB DESIGN
  • |
There had been a fellow warrior who had offered help with this, but I have been unable to reach him with the email he provided.

I have an optin template which is preset and I want to know how to insert the aweber form codes into it without changing the original appearance of the optin area.

Below is the text from the template optin area and further below is the text from Aweber.

Thanks Marie
**************
<form action="#" method="post">
<tr><td style="background-image:url(images/squeeze-video_425x344_r2_c4.jpg); width:348px; height:133px; background-repeat:no-repeat" valign="top">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="340">
<tr><td style="height:10px; "></td></tr>
<tr><td><p align="center" class="tahoma_20"><b><font color="#FFFF00" size="5" face="Tahoma">..Get The
Inside Scoop On How A Rookie Made $100,000+ in the Promotions Industy..&quot;</font></b></p></td></tr>
</table>
</td></tr>
<tr><td><img src="images/squeeze-video_425x344_r4_c4.jpg" width="348" height="93" border="0" alt="" /></td></tr>
<tr><td><img src="images/squeeze-video_425x344_r5_c4.jpg" width="348" height="57" border="0" alt="" /></td></tr>
<tr><td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
<tr><td><img src="images/squeeze-video_425x344_r6_c4.jpg" width="130" height="34" border="0" alt="" /></td>
<td style="background-image:url(images/squeeze-video_425x344_r6_c7.jpg); width:180px; height:34px;"><input type="text" class="input_425x344" name="name" maxlength="30" value="" /></td>
<td><img src="images/squeeze-video_425x344_r6_c9.jpg" width="38" height="34" border="0" alt="" /></td>
</tr>
</table>
</td></tr>
<tr><td><img src="images/squeeze-video_425x344_r7_c4.jpg" width="348" height="10" border="0" alt="" /></td></tr>
<tr><td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
<tr><td><img src="images/squeeze-video_425x344_r8_c4.jpg" width="129" height="31" border="0" alt="" /></td>
<td style="background-image:url(images/squeeze-video_425x344_r8_c6.jpg); width:181px; height:31px;"><input type="text" class="input_425x344" maxlength="120" name="email" value="" /></td>
<td><img src="images/squeeze-video_425x344_r8_c9.jpg" width="38" height="31" border="0" alt="" /></td>
</tr>
</table>
</td></tr>
<tr><td><img src="images/squeeze-video_425x344_r9_c4.jpg" width="348" height="13" border="0" alt="" /></td></tr>
<tr><td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
<tr><td><img src="images/squeeze-video_425x344_r10_c4.jpg" width="73" height="50" border="0" alt="" /></td>
<td><img border="0" src="images/squeeze-video_425x344_r10_c.jpg" width="203" height="50"></td>
<td><img src="images/squeeze-video_425x344_r10_c8.jpg" width="72" height="50" border="0" alt="" /></td>
</tr>
</table>
</td></tr>
<tr><td><img src="images/squeeze-video_425x344_r12_c4.jpg" width="348" height="45" border="0" alt="" /></td></tr>
</form>

here is the aweber form code:

<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1349078415 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1349078415 .af-body input.text, #af-form-1349078415 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-1349078415 .af-body input.text:focus, #af-form-1349078415 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1349078415 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-1349078415 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#000000;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-1349078415 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-1349078415 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-1349078415 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/...button/ccc.png");background-position:top left;background-repeat:repeat-x;background-color:#acacac;border:1px solid #acacac;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:11px;font-family:Verdana, sans-serif;}
#af-form-1349078415 .buttonContainer input.submit{width:auto;}
#af-form-1349078415 .buttonContainer{text-align:left;}
#af-form-1349078415 button,#af-form-1349078415 input,#af-form-1349078415 submit,#af-form-1349078415 textarea,#af-form-1349078415 select,#af-form-1349078415 label,#af-form-1349078415 optgroup,#af-form-1349078415 option{float:none;position:static;margin:0;}
#af-form-1349078415 div{margin:0;}
#af-form-1349078415 form,#af-form-1349078415 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1349078415 img{float:none;color:inherit;position:static;backg round-color:none;border:none;margin:0;padding:0;}
#af-form-1349078415 input,#af-form-1349078415 button,#af-form-1349078415 textarea,#af-form-1349078415 select{font-size:100%;}
#af-form-1349078415 select,#af-form-1349078415 label,#af-form-1349078415 optgroup,#af-form-1349078415 option{padding:0;}
#af-form-1349078415,#af-form-1349078415 .quirksMode{width:140px;}
#af-form-1349078415.af-quirksMode{overflow-x:hidden;}
#af-form-1349078415{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:none;}
#af-form-1349078415{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-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="Email Newsletter AWeber Form" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1349078415" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="promobranding" />
<input type="hidden" name="redirect" value="Important: Please Activate Your Subscription" id="redirect_034d800f0e5df141faa737155f6a5d33" />

<input type="hidden" name="meta_adtracking" value="promobranding" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_forward_vars" value="" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1349078415" class="af-form"><div id="af-body-1349078415" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-7760251">Name: </label>
<div class="af-textWrap">
<input id="awf_field-7760251" 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-7760252">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-7760252" 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="Submit" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/display...wsnAzsHCyMrA==" 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-1349078415")) {
document.getElementById("af-form-1349078415").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1349078415")) {
document.getElementById("af-body-1349078415").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1349078415")) {
document.getElementById("af-header-1349078415").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1349078415")) {
document.getElementById("af-footer-1349078415").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>

<!-- /AWeber Web Form Generator 3.0 -->
#aweber #box #code #confounds #design #insertion #optin
  • Profile picture of the author mrmagos
    The following should work...
    HTML Code:
    <form action=action="Email Newsletter AWeber Form" method="post">
    <input type="hidden" name="meta_web_form_id" value="1349078415" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="promobranding" />
    <input type="hidden" name="redirect" value="Important: Please Activate Your Subscription" id="redirect_034d800f0e5df141faa737155f6a5d33" />
    
    <input type="hidden" name="meta_adtracking" value="promobranding" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="name,email" />
    <input type="hidden" name="meta_forward_vars" value="" />
    <input type="hidden" name="meta_tooltip" value="" />
    <tr><td style="background-image:url(images/squeeze-video_425x344_r2_c4.jpg); width:348px; height:133px; background-repeat:no-repeat" valign="top">
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="340">
    <tr><td style="height:10px; "></td></tr>
    <tr><td><p align="center" class="tahoma_20"><b><font color="#FFFF00" size="5" face="Tahoma">..Get The
    Inside Scoop On How A Rookie Made $100,000+ in the Promotions Industy..&quot;</font></b></p></td></tr>
    </table>
    </td></tr>
    <tr><td><img src="images/squeeze-video_425x344_r4_c4.jpg" width="348" height="93" border="0" alt="" /></td></tr>
    <tr><td><img src="images/squeeze-video_425x344_r5_c4.jpg" width="348" height="57" border="0" alt="" /></td></tr>
    <tr><td>
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
    <tr><td><img src="images/squeeze-video_425x344_r6_c4.jpg" width="130" height="34" border="0" alt="" /></td>
    <td style="background-image:url(images/squeeze-video_425x344_r6_c7.jpg); width:180px; height:34px;"><input id="awf_field-7760251" type="text" class="input_425x344" name="name" maxlength="30" value="" tabindex="500" /></td>
    <td><img src="images/squeeze-video_425x344_r6_c9.jpg" width="38" height="34" border="0" alt="" /></td>
    </tr>
    </table>
    </td></tr>
    <tr><td><img src="images/squeeze-video_425x344_r7_c4.jpg" width="348" height="10" border="0" alt="" /></td></tr>
    <tr><td>
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
    <tr><td><img src="images/squeeze-video_425x344_r8_c4.jpg" width="129" height="31" border="0" alt="" /></td>
    <td style="background-image:url(images/squeeze-video_425x344_r8_c6.jpg); width:181px; height:31px;"><input id="awf_field-7760252" type="text" class="input_425x344" maxlength="120" name="email" value="" tabindex="501" /></td>
    <td><img src="images/squeeze-video_425x344_r8_c9.jpg" width="38" height="31" border="0" alt="" /></td>
    </tr>
    </table>
    </td></tr>
    <tr><td><img src="images/squeeze-video_425x344_r9_c4.jpg" width="348" height="13" border="0" alt="" /></td></tr>
    <tr><td>
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="348">
    <tr><td><img src="images/squeeze-video_425x344_r10_c4.jpg" width="73" height="50" border="0" alt="" /></td>
    <td><input name="submit" type="image" src="images/squeeze-video_425x344_r10_c5.jpg" tabindex="502" /></td>
    <td><img src="images/squeeze-video_425x344_r10_c8.jpg" width="72" height="50" border="0" alt="" /></td>
    </tr>
    </table>
    </td></tr>
    <tr><td><img src="images/squeeze-video_425x344_r12_c4.jpg" width="348" height="45" border="0" alt="" /></td></tr>
    </form>
    {{ DiscussionBoard.errors[2429887].message }}
    • Profile picture of the author marieleo
      You're the bomb mrmagos! IT worked like a charm. Now I have to study it so that I can do it for myself next time around.
      Thanks a million.
      Marie
      {{ DiscussionBoard.errors[2429921].message }}
    • Profile picture of the author GenerousBoy
      Wow, that's cool. I need to do exactly the same for a template I just bought. Is there a video or report that shows you how to replace the original html code on your squeeze page/optin with the aweber raw html (the webform for your list)? Would be useful to know for a lot of people I think. Cheers, Nic
      Signature

      Nic Penrake is a Senior Copywriter & Online marketing mentor. For free training plus unique method for massively building your list, click the link: http://budurl.com/7DayMQTraining

      {{ DiscussionBoard.errors[3253204].message }}
      • Profile picture of the author Istvan Horvath
        Originally Posted by GenerousBoy View Post

        Is there a video or report that shows you how to replace the original html code on your squeeze page/optin with the aweber raw html
        I am afraid there isn't...
        Mainly because every template you get/buy is coded differently, so there is no general rule that would apply to all.

        The "secret" is to be able to read the html code in both files and taking the necessary snippets from aweber to insert them into the template file.
        Signature

        {{ DiscussionBoard.errors[3253320].message }}
  • yep that looks good try that new code and then get back to us!
    {{ DiscussionBoard.errors[2429898].message }}

Trending Topics