AWeber basic form code & layout on WP page

I’ve been making customized Aweber integration since 4 years now, lets see if I can assist you with that ??

First of all, the code is long, and there is a way to cut it considerably without affecting the output in any way.

Just like you got rid of the CSS that aweber form generator gave you by opting for a basic form, you can safely eliminate the other JavaScript that lies at the end of the form. The one that starts with

(function (){
var IE = /*@cc_on!@*/false;
.
.
.
quirksMode”;
}

BUT that will solve only one part of your problem; it will only make the code shorter although it is not the reason for the extra space in the first place. Your Aweber form has many elements that are wrapped in various CSS classes. Many a times it so happens that the classes used by your WP theme are named exactly same as the ones that Aweber form is using so the CSS design properties for that element get inherited from those classes which leads to problems like extra space, different colors, distorted alignment etc.

Let me know if you are able to spot the troublemaker and correct it otherwise I am always here.

Maybe if I knew your URL I would be able to narrow down the error more acutely.

Thanks rohanpwale.

But if i get rid of the javascript code, will the web form still be linked to the web form in Aweber? I still want a list of subscribers generated in Aweber depending on which web form they fill out.

Cause when I delete the javascript, and/or other <input …> tags, the extra white space disappears.

If the white space issue gets sorted by deleting the JS then that is the way to go. Don’t worry, the form works exactly it should without the JS and all the input= fields that you see above, send all the correct data and subscribers to the correct list. What I am saying it : the JS is redundant. There are only 3 things that an Aweber form (or any client side form) needs to work.

1]The form action link : https://www.aweber.com/scripts/addlead.pl
2]The form ID
3]Placeholders for Name/Email/Submit button fields
viz :
<div><input type=”text” name=”name” placeholder=”Enter Name Here…”/><div>

Add the entire block of code into an extra DIV tag and then add the CSS to your theme when you want to start customizing the form cosmetically.

Ahh ok. thanks.

Tested deleting lines and what not. And I definitely know that its these lines:

<input type=”hidden” name=”meta_web_form_id” value=”1910839386″ />
<input type=”hidden” name=”meta_split_id” value=”” />
<input type=”hidden” name=”listname” value=”alleynewsletter” />
<input type=”hidden” name=”redirect” value=”https://www.aweber.com/thankyou-coi.htm?m=text&#8221; id=”redirect_ed2016bbdd77f2283e01e0b0dac00cd4″ />
<input type=”hidden” name=”meta_adtracking” value=”get_started” />
<input type=”hidden” name=”meta_message” value=”1″ />
<input type=”hidden” name=”meta_required” value=”name,email” />

but i can’t get rid of them because then how will aweber know the tracking list?

This is the correct code :

<form action=”https://www.aweber.com/scripts/addlead.pl ” method=”post”>
<div class=”optin_form-3″>
<div><input type=”text” name=”name” placeholder=”Enter Name Here…”/></div>
<div><input type=”text” name=”email” placeholder=”Enter Email Here…”/></div>
<div><input type=”submit” name=”submit” value=”Get Started!” /></div>
</div>
<input type=”hidden” name=”meta_web_form_id” value=”1910839386″ />
<input type=”hidden” name=”meta_split_id” value=”” />
<input type=”hidden” name=”listname” value=”alleynewsletter” />
<input type=”hidden” name=”redirect” value=”https://www.aweber.com/thankyou-coi.htm?m=text&#8221; id=”redirect_ed2016bbdd77f2283e01e0b0dac00cd4″ />
<input type=”hidden” name=”meta_adtracking” value=”get_started” />
<input type=”hidden” name=”meta_message” value=”1″ />
<input type=”hidden” name=”meta_required” value=”name,email” />
<input type=”hidden” name=”meta_tooltip” value=”” />

The line of code “input type=”hidden” name=”meta_web_form_id” value=”1910839386″ and “name=”listname” value=”alleynewsletter”” is what tells Aweber where to send new subscribers to and to generate tracking info. The web for ID is linked to the specific aweber list that you built it for.

If you insist on keeping the entire code then an alternative is to

1]Paste the entire code which you posted initially into a new HTML file

<html>
<body>

PASTE YOUR CODE HERE

</body>
</html>

2]Save the file as .html

3]Upload this file to your server

4]Install an iframe in your sidebar and call this file from there. In that case it will show EXACTLY as it is supposed to without being interfered by any other CSS classes.