Aweber Form Issues

YAJones

Hi DGrin Users,

I'm new to both Digital Grin and Smugmug, but I'm glad to be a part of the community.

Before starting this thread I searched for "aweber" but that yielded no results relevant to my current problem. I'm hoping someone with some HTML knowledge can help me out.

I already have an Aweber subscription package so I opted to use that service to create a form for my website newsletter. My site can be found here: http://allegrophoto.co.

After creating the form and the relevant pages on my website, I copied and pasted the HTML code into an HTML block on my homepage. The form appeared, but so did every line of code! (I've attached a screenshot)

Can anyone help me figure out how to display the form without the code? Or is this even possible? Aweber offers a Javascript option, but this won't work in the HMTL or CSS content blocks.

Thanks in advance.
Yuri

Hikin' Mike

Hard to see the screen print, but it looks like you copied your Aweber CSS to a HTML block. If so, you need to put the Aweber CSS in the CSS section of the HTML block.

YAJones

Hikin' Mike wrote: »

Hard to see the screen print, but it looks like you copied your Aweber CSS to a HTML block. If so, you need to put the Aweber CSS in the CSS section of the HTML block.

Thanks for the reply Mike!

I just tried posting the same code into a CSS block. This time neither code nor the form appear after I've clicked OK. What does appear are the words "CSS placeholder".

EDIT: Also, Aweber says "Raw HTML version", that's why I used the HTML block. But I'm not a web design professional, so I'm open to any and all suggestions.

Hikin' Mike

Can you post your Aweber code here?

YAJones

Mike it's quite long, but here it is:



#af-form-1133293055 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1133293055 .af-body .privacyPolicy{color:#000000;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-1133293055 .af-body a{color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1133293055 .af-body input.text, #af-form-1133293055 .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-1133293055 .af-body input.text:focus, #af-form-1133293055 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1133293055 .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-1133293055 .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-1133293055 .af-header{background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:none;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1133293055 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1133293055 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-1133293055 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-1133293055 .bodyText p{margin:1em 0;}
#af-form-1133293055 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/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-1133293055 .buttonContainer input.submit{width:auto;}
#af-form-1133293055 .buttonContainer{text-align:left;}
#af-form-1133293055 body,#af-form-1133293055 dl,#af-form-1133293055 dt,#af-form-1133293055 dd,#af-form-1133293055 h1,#af-form-1133293055 h2,#af-form-1133293055 h3,#af-form-1133293055 h4,#af-form-1133293055 h5,#af-form-1133293055 h6,#af-form-1133293055 pre,#af-form-1133293055 code,#af-form-1133293055 fieldset,#af-form-1133293055 legend,#af-form-1133293055 blockquote,#af-form-1133293055 th,#af-form-1133293055 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1133293055 button,#af-form-1133293055 input,#af-form-1133293055 submit,#af-form-1133293055 textarea,#af-form-1133293055 select,#af-form-1133293055 label,#af-form-1133293055 optgroup,#af-form-1133293055 option{float:none;position:static;margin:0;}
#af-form-1133293055 div{margin:0;}
#af-form-1133293055 fieldset{border:0;}
#af-form-1133293055 form,#af-form-1133293055 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1133293055 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1133293055 input,#af-form-1133293055 button,#af-form-1133293055 textarea,#af-form-1133293055 select{font-size:100%;}
#af-form-1133293055 p{color:inherit;}
#af-form-1133293055 select,#af-form-1133293055 label,#af-form-1133293055 optgroup,#af-form-1133293055 option{padding:0;}
#af-form-1133293055 table{border-collapse:collapse;border-spacing:0;}
#af-form-1133293055 ul,#af-form-1133293055 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1133293055,#af-form-1133293055 .quirksMode{width:233px;}
#af-form-1133293055.af-quirksMode{overflow-x:hidden;}
#af-form-1133293055{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:none;}
#af-form-1133293055{display:block;}
#af-form-1133293055{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-header{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 {
}

Subscribe to my Newsletter

Email:

We respect your email privacy

Hikin' Mike

YAJones wrote: »

Mike it's quite long, but here it is:

<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1133293055 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1133293055 .af-body .privacyPolicy{color:#000000;font-size:10px;font-family:Verdana, sans-serif;}
#af-form-1133293055 .af-body a{color:#094C80;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1133293055 .af-body input.text, #af-form-1133293055 .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-1133293055 .af-body input.text:focus, #af-form-1133293055 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1133293055 .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-1133293055 .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-1133293055 .af-header{background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:none;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1133293055 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1133293055 .af-quirksMode{padding-right:15px;padding-left:15px;}
#af-form-1133293055 .af-standards .af-element{padding-right:15px;padding-left:15px;}
#af-form-1133293055 .bodyText p{margin:1em 0;}
#af-form-1133293055 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/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-1133293055 .buttonContainer input.submit{width:auto;}
#af-form-1133293055 .buttonContainer{text-align:left;}
#af-form-1133293055 body,#af-form-1133293055 dl,#af-form-1133293055 dt,#af-form-1133293055 dd,#af-form-1133293055 h1,#af-form-1133293055 h2,#af-form-1133293055 h3,#af-form-1133293055 h4,#af-form-1133293055 h5,#af-form-1133293055 h6,#af-form-1133293055 pre,#af-form-1133293055 code,#af-form-1133293055 fieldset,#af-form-1133293055 legend,#af-form-1133293055 blockquote,#af-form-1133293055 th,#af-form-1133293055 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1133293055 button,#af-form-1133293055 input,#af-form-1133293055 submit,#af-form-1133293055 textarea,#af-form-1133293055 select,#af-form-1133293055 label,#af-form-1133293055 optgroup,#af-form-1133293055 option{float:none;position:static;margin:0;}
#af-form-1133293055 div{margin:0;}
#af-form-1133293055 fieldset{border:0;}
#af-form-1133293055 form,#af-form-1133293055 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1133293055 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1133293055 input,#af-form-1133293055 button,#af-form-1133293055 textarea,#af-form-1133293055 select{font-size:100%;}
#af-form-1133293055 p{color:inherit;}
#af-form-1133293055 select,#af-form-1133293055 label,#af-form-1133293055 optgroup,#af-form-1133293055 option{padding:0;}
#af-form-1133293055 table{border-collapse:collapse;border-spacing:0;}
#af-form-1133293055 ul,#af-form-1133293055 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1133293055,#af-form-1133293055 .quirksMode{width:233px;}
#af-form-1133293055.af-quirksMode{overflow-x:hidden;}
#af-form-1133293055{background-color:#FFFFFF;border-color:transparent;border-width:1px;border-style:none;}
#af-form-1133293055{display:block;}
#af-form-1133293055{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-header{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&quot; >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1133293055" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="ap-new-sub" />
<input type="hidden" name="redirect" value="http://www.allegrophoto.co/Thank-You&quot; id="redirect_3911327c25feff716a739efd7230d40a" />

<input type="hidden" name="meta_adtracking" value="Allegro_Photo_Newsletter_Form" />
<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-1133293055" class="af-form"><div id="af-header-1133293055" class="af-header"><div class="bodyText"><p style="text-align: center;"><span style="font-size: 18px;"><strong>Subscribe to my Newsletter</strong></span></p></div></div>
<div id="af-body-1133293055" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-61015216">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-61015216" type="text" name="email" value="" tabindex="500" 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="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center"><p>We respect your <a title="Privacy Policy" href="http://www.aweber.com/permission.htm&quot; target="_blank">email privacy</a></p>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jIzMzEyczAysrA==&quot; 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-1133293055")) {
document.getElementById("af-form-1133293055").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1133293055")) {
document.getElementById("af-body-1133293055").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1133293055")) {
document.getElementById("af-header-1133293055").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1133293055")) {
document.getElementById("af-footer-1133293055").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>

<!-- /AWeber Web Form Generator 3.0 -->

That part in bold is Javascript, and the new SM doesn't support that. Unfortunately, you will have to find another solution.

YAJones

Thanks for the effort Mike. I'll look around for another solution.

YAJones

YAJones wrote: »

Thanks for the effort Mike. I'll look around for another solution.

Just to update you, I was able to find a workaround using an amended version of the code from Aweber. I basically stripped down the code of all non-essentials (or at least what appeared to be non-essential to me, a novice).

The form seems to work, so I'm happy.

Thanks again Mike.

Hikin' Mike

YAJones wrote: »

Just to update you, I was able to find a workaround using an amended version of the code from Aweber. I basically stripped down the code of all non-essentials (or at least what appeared to be non-essential to me, a novice).

The form seems to work, so I'm happy.

Thanks again Mike.

I should have thought about that. Putting the HTML section on a HTML block, and the CSS stuff in the CSS section of the HTML/CSS block, and removed the Javascript and "just see if it works".

Glad it worked though! Do you have a link to the form so I can see it?

YAJones

Hikin' Mike wrote: »

I should have thought about that. Putting the HTML section on a HTML block, and the CSS stuff in the CSS section of the HTML/CSS block, and removed the Javascript and "just see if it works".

Glad it worked though! Do you have a link to the form so I can see it?

Haha. I stumbled upon that solution by accident.

I do have a link. For now the form appears on my homepage - http://allegrophoto.co. I haven't tested for browsers, mobile, etc. yet though. Let me know how it goes.

Thanks.

Hikin' Mike

I didn't subscribe, but did you make sure it works?

YAJones

Hikin' Mike wrote: »

I didn't subscribe, but did you make sure it works?

Yup! It does... I just tried it myself.