How to Customize Your Aweber Form Like a Pro

14 727

Lets face it, the guys (and maybe gals?) over at Aweber are good at one thing and one thing only… email marketing. Web design on the other hand, not so much. And that’s perfectly fine. I’d rather them be extremely awesome at ninja email marketing stuff and just leave the web design stuff to us friendless-nerds (I speak for myself mainly).

So, the goal here is to take that plain, boring, over-used, default Aweber form and transform it into an eye-catching, conversion-crushing lead capture machine!

We want to go from this…

Default Aweber Form

To this…

Beautifully Customized Aweber Form

Lets Get Started

In all reality, most of the work is done using CSS. Most of the work, that is. We’ll be removing a lot of unnecessary code from the Aweber form to make it easier to style. To start, you really need to understand what each piece of code does, then you’ll know whether or not you need to keep or if it can be changed.

So, here’s the code from our original Aweber form…

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
		<div style="display: none;">
			<input type="hidden" name="meta_web_form_id" value="1756992048" />
			<input type="hidden" name="meta_split_id" value="" />
			<input type="hidden" name="listname" value="duston-weekly" />
			<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_3678c8e53c9e5a72fd1f0ffbcf028729" />

			<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
			<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-1756992048" class="af-form">
			<div id="af-header-1756992048" class="af-header">
				<div class="bodyText">
					<p style="text-align: center;">Look At My Really Plain, Boring, Overused, Default Aweber Form...</p>
				</div>
			</div>
			<div id="af-body-1756992048"  class="af-body af-standards">
				<div class="af-element">
					<label class="previewLabel" for="awf_field-54244495">Name: </label>
					<div class="af-textWrap">
						<input id="awf_field-54244495" 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-54244496">Email: </label>
					<div class="af-textWrap">
						<input class="text" id="awf_field-54244496" 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 <a title="Privacy Policy" href="http://www.aweber.com/permission.htm" target="_blank">email privacy</a></p>
					<div class="af-clear"></div>
				</div>
				<div class="af-element poweredBy" style="text-align: center; font-size: 9px;">
					<p>Powered by AWeber <a href="http://www.aweber.com" title="Email Marketing Software">Email Marketing Software</a></p>
					<div class="af-clear"></div>
				</div>
			</div>
			<div id="af-footer-1756992048" class="af-footer">
				<div class="bodyText">
					<p>&nbsp;</p>
				</div>
			</div>
		</div>
		<div style="display: none;">
			<img src="http://forms.aweber.com/form/displays.htm?id=jOysbJycTAwsHA==" alt="" />
		</div>
	</form>

Dude… there’s so much crap in there we don’t need, it’s not even funny. You can start by removing every single DIV you see. We’ll add our own later and in a more efficient location. So, after all of the DIV’s are gone, this is what we’re left with…

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
	<input type="hidden" name="meta_web_form_id" value="1756992048" />
	<input type="hidden" name="meta_split_id" value="" />
	<input type="hidden" name="listname" value="duston-weekly" />
	<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_3678c8e53c9e5a72fd1f0ffbcf028729" />
	<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
	<input type="hidden" name="meta_message" value="1" />
	<input type="hidden" name="meta_required" value="name,email" />
	<input type="hidden" name="meta_tooltip" value="" />
	<label class="previewLabel" for="awf_field-54244495">Name: </label>
	<input id="awf_field-54244495" type="text" name="name" class="text" value=""  tabindex="500" />
	<label class="previewLabel" for="awf_field-54244496">Email: </label>
	<input class="text" id="awf_field-54244496" type="text" name="email" value="" tabindex="501"  />
	<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
</form>

Much better, right? Now we’re basically left with the shell of our form and a label for each field. And actually, we don’t even need the labels. As you can see in the image above, we’re not using labels in our desired form. We’re going to use what’s called placeholders, which is just text that displays in the field when it’s not active or filled.

So, lets break this form code down a little bit so you know exactly what we’re working with here. The first line is the form method which really tells the form where to send the information to that the user submits. You should never have to touch that.

The next eight lines are all hidden input fields. These fields handle all the magic behind the scenes. The first line, meta_web_form_id, is exactly that… it’s the unique ID Aweber uses to identify your form. The next line, meta_split_id, is used only if you’re split-testing one form against another. Since we’re not split-testing, the value is blank.

The next line, listname, tells Aweber which list you want to subscribe the user to when they submit this form. In this case, I’m subscribing them to my duston-weekly blog list. The next line is called redirect. Just like it sounds, the value of the redirect field tells Aweber where to redirect your user to after they’ve successfully submitted your form.

Meta_adtracking is the next line and it’s value is used to identify which form the user submitted on your page. So, if you have multiple forms on your blog (header, sidebar, footer), you could run a report in Aweber and determine where most of your sign-ups are coming from.

The next three lines are pretty self-explanatory, meta_message tells Aweber which follow-up message in the sequence to start the user on, meta_required tells the form which fields need to be filled out and meta_tooltip… I honestly don’t know what that’s for. I’ve never used it. If you know, leave a comment below and fill me in.

The two input fields are where users enter their name and email address and the last input field is the submit button. So, now that you’re familiar with the form code, lets start customizing this thing…

How to Customize the Form

Alright… I did a little HTML re-structuring, added a new DIV and sexied it up a little bit. Here’s the final HTML code for your new form…

<div class="optbox">
   <h2 class="optcta">Get Instant Access</h2>
   <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
       <input type="hidden" name="meta_web_form_id" value="1756992048" />
       <input type="hidden" name="meta_split_id" value="" />
       <input type="hidden" name="listname" value="duston-weekly" />
       <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_3678c8e53c9e5a72fd1f0ffbcf028729" />
       <input type="hidden" name="meta_adtracking" value="My_Web_Form" />
       <input type="hidden" name="meta_message" value="1" />
       <input type="hidden" name="meta_required" value="name,email" />
       <input type="hidden" name="meta_tooltip" value="" />
       <input id="awf_field-54244495" type="text" name="name" class="text" placeholder="Enter your first name..." value=""  tabindex="500" />
       <input class="text" id="awf_field-54244496" type="text" name="email" placeholder="Enter your email address..." value="" tabindex="501"  />
       <input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
       <p><i class="icon-lock icon-white"></i>&nbsp; Your information will never be shared or sold</p>
   </form>
</div>

Notice how clean it is… there’s one DIV and the inputs are all nested neatly inside it. I added in the placeholder tags for the two text fields. Everything in between the quotes will display in the field.

The real magic behind the sexiness is the CSS though. You’ll notice I added a paragraph tag with a little privacy statement to the end of the form. Always a good idea for email marketing. But I used an icon font for the image of the lock. These icon fonts are awesome and really easy to setup. I like Font Awesome and it’s what I used in this example.

They give great directions on how to set it up but in reality, you only need to add one line of code to your header. Just a link to their stylesheet inside your head tag and you’re good to go. Looks a little something like this…

<head>
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>

So, all that’s left is to add in your CSS like so…

.optbox {
  background-color:#1b1b1b;
  padding:30px 20px 30px;
  text-align:center;
  color:#fff;
  width:400px;
  font-family:&#39;Lato&#39;, Helvetica, Arial;
}

.optcta {
  font-weight:700;
  font-size:2.4em;
  margin: 0;
}

.optbox input[type=text] {
  border-radius:0;
  border: none;
  color:#aaa;
  height:50px;
  width:70%;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: &#39;Lato&#39;, Helvetica Neue, Arial;
  font-weight: 300;
  padding:0 20px;
}

.optbox input[type=submit] {
  background-color:#95c205;
  background-image:none;
  border-radius:0;
  border:0;
  color:#fff;
  text-shadow:none;
  font-family:&#39;Rokkitt&#39;, Georgia;
  font-size:34px;
  height:60px;
  width:80%;
  padding:0 6px;
}

.optbox input[type=submit]:hover {
  background-color:#88b105;
  transition: background-color .35s ease 0s;
}

That’s all there is to customizing your Aweber form. For the most part, you don’t need a lot of what Aweber gives you. Most of the code is for styling purposes.

Just tear the form down to bare-bones… no DIV’s, no styles and no formatting and then you can work your way up from there. It’s always harder try to edit existing styles than it is to just start from scratch.

You can see a working demo of the form we just created here, just don’t try to opt-in to the form… it’s not setup to accept submissions.

You might also like

14 Comments

  1. Rich Cook says

    THANK YOU!! This is just what I needed. I’m a neophyte web designer doing my own site. I’d spent days figuring out how to create a cool popup form similar to how LeadPages does it with their Welcome Gate 2.0, which I can t afford to buy yet. THEN I discovered Aweber’s somewhat complex and convoluted form creator and resulting code. Not knowing enough yet about coding, I was afraid to cut, not knowing if I would cut the wrong thing and screw it all up. Your post showed me exactly what to cut and how to fix their code to fit my style. Again, THANK YOU!

    1. Duston McGroarty says

      Thanks man! I spent the time creating this post because like you, I spent hours and hours trying to figure out how to do it myself. I figured this would help others save time and achieve what they’re looking for.

  2. Luis Rivera says

    Just what i was looking for. Thanks.

    Btw its the second time im looking for something online and end on your site, i dont remember what i was looking the last time.

    Any way. Good Job!

    1. Duston McGroarty says

      Thanks! Always good to hear I’m getting found organically!

  3. Megan says

    Thanks so much, this was really helpful!
    Just wondering why your sample form is responsive but the results when I finish your instructions are not. Do I need to add media css?

  4. Alyson says

    Okay, when I say I have no experience with HTML or CSS….I mean it. My only experience in the past has been copying and pasting the Aweber raw HTML into my WordPress site in the box labeled Raw HTML :)

    But! I was able to figure it out with your directions! (& some digging to figure out where the CSS went) ;)

    Thank you so much!

  5. Evan says

    Really thank you for this article…I’ve been trying to figure out how to modify it but the codes are just too much and I dared not to touch it…

  6. terry says

    Where do you put the .css file?
    Aweber – Above? below? Separate file?

    this link>
    Work on WP blog sites?
    Edit the style.css in WP?

    help?? :-)

  7. Duston McGroarty says

    Terry – the CSS can go either in your existing CSS file (just make sure you include a link to it in the tags of this template or you can put it right in the tags inside of

  8. Everald says

    you just answered all my questions , but yet , when i click on my form i get sent to a blank page , even though i entered in Aweber site to send my visitors to a custom page which is http://www.now.exceltodestiny.com/thevideo/ , but somehow i get sent to a blank page , i went into the code , just before the end and saw these

    so i had to change the “_blank ” to my website address , it then started sending them to my desired page , but then when i go to Aweber and click on my forms it shows that particular form i tampered with 0.0% display like it doesn’t display , but yet i have like 500 subscribers . so i am wondering why it doesn’t read as displayed . you know i would love a little stats on how my list is working , any idea on how to tackle this ?

    1. Duston McGroarty says

      In order to view impression data from inside Aweber, you need to keep your web form’s javascript code on your page that controls the impression count.

  9. yann says

    Hello, I really like how you explained the coding of aweber form, maybe you ll be able to help me on something I’m looking for a long time now.

    I made a form so I can redirect people that are in my “x” list to a download. The thing is I don t want other people to download the product too, but if they enter their email 2 times, they will be able to download because they first added their email then they are in the list so = download redirect.

    So What I would like is to disable the add to list action (If there is one) line code. But keep this line working :

    OR add a line of code at the end that unsubscribe the email entered, so people will download only one time but the download action will be protected from thieves eheh

    Could you help me ?

  10. Loris says

    LIFE SAVER! THANKS MAN

Leave A Reply

Your email address will not be published.