Jump to content
Sign in to follow this  

Aweber Form Code On Page

Recommended Posts


Hi there,

I am trying to create a squeeze page on my worpress blog www.velediluce.com

I have pasted my Aweber form code on a Pagelines new Page - on html editor -

but it seems that css has no effect.

So all you can visualize on the browser are the 2 plain input fileds of the form

without graphic and typographic elements

I've tryied to coustomize Css by pasting aweber css into > Pagelines > Site option > Custom code > Css/Less rule.

Maybe I have missed some advanced settings on the Theme?

Thanks for any idea about fixing that...

Ciao everybody!


Share this post

Link to post
Share on other sites

Buongiorno Walter,

I've not used Aweber before. At the moment, I can see a two field form on your site in the right sidebar, with graphics and typography.

Where did you place the code for this form? Was it in a sidebar (widget) or, was it in the body of a page?

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

buongiorno Maestro!

I hope "tutto bene lì"...

Yes, my home page is all right with sidebar widgets.

my Wordpress page I'm talking about is: http://www.velediluce.com/squeezepage/

This is what Aweber customer assistant wrote in replying to my ticket:

No CSS coding or graphic design.

Typically when this happens, it is a result of your theme or

wordpress in general stripping out or ignoring the AWeber CSS

code altogether. When I view your source code, I do not see any

CSS code at all.

You would
have to
edit the CSS
/style sheet of

your page to see what code is
overriding the form.

I do see that you numerous style sheets and

CSS codes and I wouldn't be able to pinpoint the exact code that is

over riding the form code.

This is a typical issue with wordpress which is why we created the

sidebar widget. I suggest t
rying to place a text widget
within your

page and place the code directly into the widget to see if that helps

produces better results for you."

The problem is I tryied:

1) editing Css in Dashboard > Site option > Custome code

2) placing a text widget into my page

But I din't got through that.

I suppose I miss the essential infos...


Felicità e salute

Share this post

Link to post
Share on other sites

Hi, if you mean Aweber Css, here it is:

<style type="text/css">

#af-form-1999941564 .af-body .af-textWrap{width:70%;display:block;float:right;}

#af-form-1999941564 .af-body a{color:#277813;text-decoration:none;font-style:normal;font-weight:normal;}

#af-form-1999941564 .af-body input.text, #af-form-1999941564 .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:12px;font-family:Verdana, sans-serif;}

#af-form-1999941564 .af-body input.text:focus, #af-form-1999941564 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}

#af-form-1999941564 .af-body label.previewLabel{display:block;float:left;width:25%;text-align:right;color:#403B40;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Tahoma, serif;}

#af-form-1999941564 .af-body{padding-top:300px;background-repeat:no-repeat;background-position:top;background-image:url("http://www.velediluce.com/wp-content/uploads/2012/11/nuovo-sidebar-originale3.jpg");color:#000000;font-size:12px;font-family:Arial, sans-serif;}

#af-form-1999941564 .af-footer{padding-bottom:3px;padding-top:3px;padding-right:20px;padding-left:20px;background-color:transparent;background-repeat:no-repeat;background-position:bottom left;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:Arial, sans-serif;}

#af-form-1999941564 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}

#af-form-1999941564 .af-quirksMode{padding-right:30px;padding-left:0px;}

#af-form-1999941564 .af-standards .af-element{padding-right:30px;padding-left:0px;}

#af-form-1999941564 .bodyText p{margin:1em 0;}

#af-form-1999941564 .buttonContainer input.submit{background-image:none;background-color:#F0F0F0;color:#524E52;text-decoration:none;font-style:normal;font-weight:normal;font-size:16px;font-family:Arial, sans-serif;}

#af-form-1999941564 .buttonContainer input.submit{width:auto;}

#af-form-1999941564 .buttonContainer{text-align:center;}

#af-form-1999941564 body,#af-form-1999941564 dl,#af-form-1999941564 dt,#af-form-1999941564 dd,#af-form-1999941564 h1,#af-form-1999941564 h2,#af-form-1999941564 h3,#af-form-1999941564 h4,#af-form-1999941564 h5,#af-form-1999941564 h6,#af-form-1999941564 pre,#af-form-1999941564 code,#af-form-1999941564 fieldset,#af-form-1999941564 legend,#af-form-1999941564 blockquote,#af-form-1999941564 th,#af-form-1999941564 td{float:none;color:inherit;position:static;margin:0;padding:0;}

#af-form-1999941564 button,#af-form-1999941564 input,#af-form-1999941564 submit,#af-form-1999941564 textarea,#af-form-1999941564 select,#af-form-1999941564 label,#af-form-1999941564 optgroup,#af-form-1999941564 option{float:none;position:static;margin:0;}

#af-form-1999941564 div{margin:0;}

#af-form-1999941564 fieldset{border:0;}

#af-form-1999941564 form,#af-form-1999941564 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1999941564 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}

#af-form-1999941564 input,#af-form-1999941564 button,#af-form-1999941564 textarea,#af-form-1999941564 select{font-size:100%;}

#af-form-1999941564 p{color:inherit;}

#af-form-1999941564 select,#af-form-1999941564 label,#af-form-1999941564 optgroup,#af-form-1999941564 option{padding:0;}

#af-form-1999941564 table{border-collapse:collapse;border-spacing:0;}

#af-form-1999941564 ul,#af-form-1999941564 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}

#af-form-1999941564,#af-form-1999941564 .quirksMode{width:304px;}





.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-element label{text-align:left;display:block;float:left;}

.af-element{padding:5px 0;}




.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}

.lbl-right .af-element label{text-align:right;}

body {



Share this post

Link to post
Share on other sites


Please remove these two lines from the code, then it should load.

<style type="text/css">


Please search our forums, before posting!

Share this post

Link to post
Share on other sites

hi, I had missed your last message post on 14 nov., what's more since 15 nov. I had to interrupt all my activities on line,

for serious health reasons.


Back to this issue, Danny, I tryied to do that but I missed something... In the preview I can see anly the code...

Share this post

Link to post
Share on other sites

What I meant was this is how I think it should work, but I have never used aWeber so not one hundred percent sure. Basically, add the Aweber CSS to your custom CSS.


Then add the form code to your page and make sure that you're on the HTML tab. This should resolve your issue.


Also, in future when wishing to share custom code, please use our paste service and do not paste the code in the forum.



Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • gstrahle
      By gstrahle+
      I am hoping to figure out how I can get my PageLines Full Nav to display layered in front of a sticky footer element on my website - 3keymedia.com
      I would like the Full Nav to overlay the entire screen when opening the menu as you will see when opening on a desktop the footer of nav content is cropped by the sticky footer.

    • Christian
      By Christian+
      Hi everyone, since Instagram had allowed to publish in different ratio formats (instead of only square ratio) the grams stripe has different heights. Can you tell me if i can fix it easily with some CSS?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services