Jump to content
Sign in to follow this  

Aweber Form Code On Page

Recommended Posts

5500752022839682    1

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
Rob    547

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
5500752022839682    1

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
5500752022839682    1

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
Danny    1,327


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
5500752022839682    1

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
Danny    1,327

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

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
    • fabienfons
      By fabienfons+
      In Divi (elegant theme), there is a fantastic module for aweber webform.
      Do you plan to build one for pagelines ?
    • wyo22ski
      By wyo22ski+
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      change sizes to suit.