Pop Over shows source rather than rendered HTML

I'm trying to use an Aweber web form with Pop Over, but it's not working. I've tried both the Javascript version and the HTML version.

At first, the Javascript gave me no popup at all. Maybe I did something wrong there. But I finally got a blank popup window. Never saw the actual form.

When I tried the HTML, the popup gave me the source, rather than a rendered form.

What am I doing wrong?

Thanks!

Lee

  • greymatter

    Sure, check out http://studentsoftraders.com.

    It's currently got this loaded into the popover:

    <!-- ProFollow Web Form Generator 3.0 -->
    <style type="text/css">
    #af-form-1120152098 .af-body .af-textWrap{width:98%;display:block;float:none;}
    #af-form-1120152098 .af-body .privacyPolicy{color:#FFFFFF;font-size:11px;font-family:Arial, sans-serif;}
    #af-form-1120152098 .af-body a{color:#FFFFFF;text-decoration:underline;font-style:normal;font-weight:normal;}
    #af-form-1120152098 .af-body input.text, #af-form-1120152098 .af-body textarea{background-color:#FFFFFF;border-color:#C7C7C7;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-1120152098 .af-body input.text:focus, #af-form-1120152098 .af-body textarea:focus{background-color:#D6FFF8;border-color:#030303;border-width:1px;border-style:solid;}
    #af-form-1120152098 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
    #af-form-1120152098 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat;background-position:inherit;background-image:url("http://forms.profollow.com/images/forms/bright-idea/cobalt/body.png");color:#FFFFFF;font-size:11px;font-family:Arial, sans-serif;}
    #af-form-1120152098 .af-footer{padding-bottom:2px;padding-top:2px;padding-right:15px;padding-left:15px;background-color:transparent;background-repeat:repeat-x;background-position:bottom;background-image:url("http://forms.profollow.com/images/forms/bright-idea/cobalt/footer.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#FFFFFF;font-size:12px;font-family:Arial, sans-serif;}
    #af-form-1120152098 .af-header{padding-bottom:30px;padding-top:51px;padding-right:10px;padding-left:63px;background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url("http://forms.profollow.com/images/forms/bright-idea/cobalt/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#FFFFFF;font-size:14px;font-family:Arial, sans-serif;}
    #af-form-1120152098 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
    #af-form-1120152098 .af-quirksMode{padding-right:15px;padding-left:15px;}
    #af-form-1120152098 .af-standards .af-element{padding-right:15px;padding-left:15px;}
    #af-form-1120152098 .bodyText p{margin:1em 0;}
    #af-form-1120152098 .buttonContainer input.submit{background-image:url("http://forms.profollow.com/images/auto/gradient/button/555.png");background-position:top left;background-repeat:repeat-x;background-color:#353535;border:1px solid #353535;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
    #af-form-1120152098 .buttonContainer input.submit{width:auto;}
    #af-form-1120152098 .buttonContainer{text-align:left;}
    #af-form-1120152098 body,#af-form-1120152098 dl,#af-form-1120152098 dt,#af-form-1120152098 dd,#af-form-1120152098 h1,#af-form-1120152098 h2,#af-form-1120152098 h3,#af-form-1120152098 h4,#af-form-1120152098 h5,#af-form-1120152098 h6,#af-form-1120152098 pre,#af-form-1120152098 code,#af-form-1120152098 fieldset,#af-form-1120152098 legend,#af-form-1120152098 blockquote,#af-form-1120152098 th,#af-form-1120152098 td{float:none;color:inherit;position:static;margin:0;padding:0;}
    #af-form-1120152098 button,#af-form-1120152098 input,#af-form-1120152098 submit,#af-form-1120152098 textarea,#af-form-1120152098 select,#af-form-1120152098 label,#af-form-1120152098 optgroup,#af-form-1120152098 option{float:none;position:static;margin:0;}
    #af-form-1120152098 div{margin:0;}
    #af-form-1120152098 fieldset{border:0;}
    #af-form-1120152098 form,#af-form-1120152098 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1120152098 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
    #af-form-1120152098 input,#af-form-1120152098 button,#af-form-1120152098 textarea,#af-form-1120152098 select{font-size:100%;}
    #af-form-1120152098 p{color:inherit;}
    #af-form-1120152098 select,#af-form-1120152098 label,#af-form-1120152098 optgroup,#af-form-1120152098 option{padding:0;}
    #af-form-1120152098 table{border-collapse:collapse;border-spacing:0;}
    #af-form-1120152098 ul,#af-form-1120152098 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
    #af-form-1120152098,#af-form-1120152098 .quirksMode{width:200px;}
    #af-form-1120152098.af-quirksMode{overflow-x:hidden;}
    #af-form-1120152098{background-color:transparent;border-color:transparent;border-width:1px;border-style:none;}
    #af-form-1120152098{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,.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://clients.profollow.com/scripts/addlead.pl" >
    <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="1120152098" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="studentsoftrade" />
    <input type="hidden" name="redirect" value="http://clients.profollow.com/thankyou-coi.htm?m=text" id="redirect_95930c15d90b912d3f6469e68cc89fee" />

    <input type="hidden" name="meta_adtracking" value="Subscribe_1" />
    <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-1120152098" class="af-form"><div id="af-header-1120152098" class="af-header"><div class="bodyText"><p>Enter your contact information here, so that I can keep you informed.</p></div></div>
    <div id="af-body-1120152098" class="af-body af-standards">
    <div class="af-element">
    <label class="previewLabel" for="awf_field-8885158">First Name: </label>
    <div class="af-textWrap">
    <input id="awf_field-8885158" 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-8885159">Email: </label>
    <div class="af-textWrap"><input class="text" id="awf_field-8885159" 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 class="af-element privacyPolicy" style="text-align: center"><p>We respect your email privacy</p>
    <div class="af-clear"></div>
    </div>
    </div>
    <div id="af-footer-1120152098" class="af-footer"><div class="bodyText"><p style="text-align: center;">Your information will not be shared with anyone.</p></div></div>
    </div>
    <div style="display: none;"><img src="http://forms.profollow.com/form/displays.htm?id=jIxMDIysTAycHA==" 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-1120152098")) {
    document.getElementById("af-form-1120152098").className = 'af-form af-quirksMode';
    }
    if (document.getElementById("af-body-1120152098")) {
    document.getElementById("af-body-1120152098").className = "af-body inline af-quirksMode";
    }
    if (document.getElementById("af-header-1120152098")) {
    document.getElementById("af-header-1120152098").className = "af-header af-quirksMode";
    }
    if (document.getElementById("af-footer-1120152098")) {
    document.getElementById("af-footer-1120152098").className = "af-footer af-quirksMode";
    }
    }
    })();
    -->
    </script>

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

    The other option is
    <script type="text/javascript" src="http://forms.profollow.com/form/98/1120152098.js"></script> which seems to pop up an empty window.

    Thanks,
    Lee

  • greymatter

    @Ulrich:
    I'm confused by your comment. Did you see Barry's recommendation to me? I believe that's why you don't see PO_USEKSES defined. Or am I misunderstanding what you're saying?

    As far as style and script tags, I'm taking the code directly from Aweber, so I would expect it to be well-formed. Besides, they also provide a <script> version of the form, and it didn't work either.

    Refer to my very long reply on this thread to see exactly what I got from Aweber.

    Thanks,
    Lee

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.