Styling Aweber Forms With Twitter Bootstrap

Default Aweber forms are UGLY! They’re fixed-width and non-responsive which is annoying especially when trying to overwrite their CSS.

Thankfully, you can use Twitter Bootstrap’s responsive CSS to change these forms with ease.

Download the Example

You’ll go from this…

To something like this!

If you don’t feel like reading this tutorial, you can go ahead and download the example.

Required Files

In order for your form to look right, you will need to make sure your theme is using these files:

• 1) Twitter Bootstrap CSS
• 2) Aweber Form Code (RAW HTML, Not Javascript Code) – See Below
• 

The Form’s HTML

After you’ve copied your form’s Raw HTML code, paste the code into your favorite text editor (I use TextWrangler). There, you’ll be able to get a good look at what you’re working with.

Now, for the fun part…

Take an axe to the CSS. It’s confusing and it’s making your form ugly. Get rid of it.

You’ll then want to start integrating Bootstrap’s code within your form elements. You should end up with HTML that looks like this…

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
	<div style="display:none;">
		<!-- ADD HIDDEN FIELDS -->
	</div>
	
	<div id="af-form-YOUR-FORM-ID" class="af-form">
		<div id="af-body-YOUR-BODY-ID"  class="af-body af-standards">
			<div class="af-element">
				<div class="form-group af-textWrap">
					<input id="awf_field-YOUR-FIELD-ID" type="text" name="name" class="form-control text"  value="Type your name..."  onfocus="if(this.value == 'Type your name...') { this.value = ''; }" onblur="if(this.value == '') { this.value='Type your name...';}" tabindex="500" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="af-element">
				<div class="form-group af-textWrap">
					<input class="form-control text" id="awf_field-YOUR-FIELD-ID" type="text" name="email"  value="Enter your e-mail..." tabindex="501"  onfocus="if(this.value == 'Enter your e-mail...') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter your e-mail...';}" tabindex="501"  />
				</div>
				<div class="clear"></div>
			</div>
			<div class="af-element buttonContainer">
				<div class="form-group">
					<input name="submit" class="btn btn-primary submit" type="submit" value="Submit" tabindex="502" />
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=YOUR-SPECIFIC-CODE" alt="" /></div>
</form>

If you want your form to look similar to my green background one (above), just remember to replace these fields with your own code:

• 1) The form’s hidden input code
• 2) The form’s ID – af-form-987654321
• 3) The form body ID – af-body-987654321
• 4) <div style=”display: none;”><img src=”ADD YOUR DEFAULT FORM URL HERE” alt=”” /></div>

Your Form’s CSS

For this example, we’re going to use Bootstrap’s default CSS. This will make the input fields as wide as their parent container (and responsive too). You can customize the form’s colors and styles if you want.

Download the Example

You will also need to add this code to footer.php, just before the </body> (make sure to replace “af-form-1234567890” with your own form, body, header, and footer IDs):

<script type="text/javascript">
    <!--
    (function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-1234567890")) {
                document.getElementById("af-form-1234567890").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-1234567890")) {
                document.getElementById("af-body-1234567890").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-1234567890")) {
                document.getElementById("af-header-1234567890").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-1234567890")) {
                document.getElementById("af-footer-1234567890").className = "af-footer af-quirksMode";
            }
        }
    })();
    -->
</script>

Download the Example

WordPress Sign Up Form Plugins

There are quite a few Optin/Sign Up WordPress plugins. These plugins have been tested by thousands of users but can be expensive and some aren’t responsive. However, they do come with pre-made templates and are simple to install. Here are a few examples:

1) OptinSkin – $67
2) Popup Domination – $47 (one domain only)
3) OptinMonster – $49 (one domain only)

Keep in mind…these plugin authors claim to help increase your subscriber list by a TON (+300%). Be aware that it’s the placement of these plugin forms, along with your sales pitch, that work so well. Don’t assume that installing the plugins above will instantly increase your subscribers. You must have a catchy headline, be selling something worthwhile, or have content your readers want before you’ll get more subscribers.

This tutorial might seem difficult but it’s actually really easy to transform those ugly Aweber forms into some really great, responsive forms in a matter of minutes.